Scenario: We have a new requirement from Business. "Short and sweet" they say. Here is the AC:

• As a user, when I land on the page, then I would like to see a text input and a 'submit' disabled button

• As a user, when I type one char into the input, then the 'submit' button becomes active

• As a user, when I hover over the active button, then the button background should change to a diff color

• As a user, when I click on submit, then the button should now show 'submitting' instead of 'submit' AND the submitWithChance function should be invoked.

• As a user, when the button is 'submitting', then clicking again should NOT trigger a new http call

• As a user, when the http call is succesfull, then the button should show 'done' AND become disabled

• As a user, when the http call fails, then the button should show 'retry'

• As a user, when I click the 'retry' button, then the button should now show 'submitting' instead of 'submit' AND the submitWithChance function should be invoked.

In summary, the button goes through transitions covering
disabled => active => hovered => pressed => submitting => retry or done

The code for submitWithChance is provided below. In a nutshell, it carries out a promise that has 50/50 chances of being succesful or not.