Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Add Cypress Testing Library #10446

Merged
merged 3 commits into from
Mar 29, 2023
Merged

Conversation

weeman1337
Copy link
Contributor

@weeman1337 weeman1337 commented Mar 24, 2023

Task from one of our recent weeklies.

  • Add Cypress Testing Library
  • Add some convenience commands like findButton(name)
  • Implement an example test with it
  • Update doc

PSF-1968

Checklist

  • Tests written for new code (and old code if feasible)
  • Linter and other CI checks pass
  • Sign-off given on the changes (see CONTRIBUTING.md)

This change is marked as an internal change (Task), so will not be included in the changelog.

@weeman1337 weeman1337 added the T-Task Refactoring, enabling or disabling functionality, other engineering tasks label Mar 24, 2023
@weeman1337 weeman1337 marked this pull request as ready for review March 27, 2023 12:27
@weeman1337 weeman1337 marked this pull request as draft March 27, 2023 13:35
@weeman1337 weeman1337 marked this pull request as ready for review March 27, 2023 13:35
@weeman1337 weeman1337 requested review from a team as code owners March 27, 2023 13:35
@weeman1337 weeman1337 merged commit 7cb90d0 into develop Mar 29, 2023
@weeman1337 weeman1337 deleted the weeman1337/cypress-testing-library branch March 29, 2023 06:47
@luixxiul
Copy link
Contributor

@weeman1337 I opened a PR by using the library (the library looks great!), and I am just wondering if it could have more than one argument, such as: .findButton("Options", { timeout: 1000 }). The timeout option has been added since sometimes Cypress did not get/click the button if hovering occurs too fast. Instead, does findByRole wait automatically until the button becomes interactive? Thanks in advance.

@weeman1337
Copy link
Contributor Author

PR welcome :) I would suggest to just pass all options through to findByRole.

Comment on lines +53 to +67
Cypress.Commands.add("findButton", (name: string): Chainable<JQuery> => {
return cy.findByRole("button", { name });
});

Cypress.Commands.add("findTextbox", (name: string): Chainable<JQuery> => {
return cy.findByRole("textbox", { name });
});

Cypress.Commands.add("findOption", (name: string): Chainable<JQuery> => {
return cy.findByRole("option", { name });
});

Cypress.Commands.add("findMenuitem", (name: string): Chainable<JQuery> => {
return cy.findByRole("menuitem", { name });
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@weeman1337 I think I'm missing the value of these helper functions.

As someone relatively new to the react-sdk codebase and cypress, and completely new to the cypress testing library, I spent a while trying to find documentation online these helper functions: I didn't realise that they were helpers that we had defined ourselves.

Given they are so short, why not just inline them?

In other words: I feel like these helpers are making our codebase less accessible to new contributors, whilst doing little to simplify the code.

Copy link
Contributor Author

@weeman1337 weeman1337 Apr 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤷 I don't have a strong opinion on them. My intention was that „I want to find a button“ by findButton("Submit") is probably better understandable than findByRole("button", { name: "Submit" }).

@richvdh would you like to raise this in one of our discussions? We can then decide whether to inline and remove them.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just for the record: we are going to remove them; it's cleaner and more flexible just to call cy.findByRole directly.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
T-Task Refactoring, enabling or disabling functionality, other engineering tasks
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants