E2E Test the Claim Username Workflow

[rdig]

As it says on the tin: write a cypress spec that tests the whole Claim Username workflow

Testing

It should cover:

• Opens the first modal with the copy explaining the flow
• If the account doesn't have ether opens the funding modal
• If the account has ether opens the ENS claim modal
• Calculates the steps correctly
• Correctly creates the first transaction
• Can be started from all the required places: first task on dashboard, drop down menu, request to work on task, comment on task

Best practices

Please note that, as a best practice, prefer to add a new data-test attribute, to hook onto components, rather then relying on elements/class/ids selectors and filtering from there.

Example:

/*
 * Component (not the actual one, simplified)
 */
const AvatarDropdown = () => (
  <Popover ... >
    <button
      ...
      data-test="avatarDropdown"
    />
  </Popover>
);

/*
 * Test (not the actual one, simplified)
 */
it('Open the Claim Username flow', () => {
  ...
  cy.get('button[data-test="avatarDropdown"]').click();
  ...
});

See this example spec: https://github.com/JoinColony/colonyDapp/blob/master/cypress/integration/claim-username.js

Resources

A couple of resources to help you along you're journey:

• Cypress syntax
• Cypress best practices

[karolinkas]

@rdig This one has been resolved in: https://github.com/JoinColony/colonyDapp/pull/1186/files I will close them together.