fix(cypress-commands): add testing-library style query commands (#846)

.vscode/settings.json

@@ -3,6 +3,7 @@
   "cSpell.words": [
     "antd",
     "browserslist",
+    "chainable",
     "codecov",
     "codesandbox",
     "flexbugs",

cypress/integration/home.spec.ts

@@ -5,36 +5,36 @@ describe('Home', () => {
     cy.visit('/');
   });
 
-  it('should display home page', () => {
+  it('should contain home page route', () => {
     cy.url().should('include', '/');
     cy.title().should('include', siteConfig.title);
   });
 
   it('should display home page title', () => {
-    cy.get('[role="main"]').should('be.visible');
+    cy.getByRole('main').should('be.visible');
   });
 
   it('should toggle navigation menu when navigation button toggled', () => {
-    cy.get('[data-testid="hamburger-button"]').click();
-    cy.get('[role="banner"]').should('be.visible');
-    cy.get('[role="navigation"]')
+    cy.getByTestId('hamburger-button').click();
+    cy.getByRole('banner').should('be.visible');
+    cy.getByRole('navigation')
       .should('be.visible')
-      .find('[role="link"]')
+      .findByRole('link')
       .should('have.length', routes.length)
       .and('be.visible');
 
-    cy.get('[data-testid="hamburger-icon"]').type('{enter}');
-    cy.get('[role="banner"]').should('not.be.visible');
-    cy.get('[role="navigation"]')
+    cy.getByTestId('hamburger-icon').type('{enter}');
+    cy.getByRole('banner').should('not.be.visible');
+    cy.getByRole('navigation')
       .should('not.be.visible')
-      .find('[role="link"]')
+      .findByRole('link')
       .should('not.be.visible');
   });
 
   it('should contain navigation links to pages', () => {
-    cy.get('[data-testid="hamburger-button"]').click();
-    cy.get('[role="navigation"]')
-      .find('[role="link"]')
+    cy.getByTestId('hamburger-button').click();
+    cy.getByRole('navigation')
+      .findByRole('link')
       .each((link, index) => {
         cy.wrap(link)
           .contains(routes[index].name)

cypress/support/commands.ts

@@ -1,10 +1,4 @@
 /**
- * -- This is a parent command --
- * Cypress.Commands.add('login', (email, password) => { ... })
- *
- * -- This is a child command --
- * Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
- *
  * -- This is a dual command --
  * Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
  *
@@ -13,3 +7,27 @@
  *
  * @see https://on.cypress.io/custom-commands
  */
+
+Cypress.Commands.add(
+  'findByRole',
+  { prevSubject: 'element' },
+  (subject, role) => {
+    return cy.wrap(subject).find(`[role="${role}"]`);
+  }
+);
+
+Cypress.Commands.add(
+  'findByTestId',
+  { prevSubject: 'element' },
+  (subject, testId) => {
+    return cy.wrap(subject).find(`[data-testid="${testId}"]`);
+  }
+);
+
+Cypress.Commands.add('getByRole', role => {
+  return cy.get(`[role="${role}"]`);
+});
+
+Cypress.Commands.add('getByTestId', testId => {
+  return cy.get(`[data-testid="${testId}"]`);
+});

cypress/support/index.ts

@@ -1,4 +1,16 @@
 /**
  * @see https://on.cypress.io/configuration
  */
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      findByRole(role: string): Chainable<JQuery<HTMLElement>>;
+      findByTestId(testId: string): Chainable<JQuery<HTMLElement>>;
+      getByRole(role: string): Chainable<JQuery<HTMLElement>>;
+      getByTestId(testId: string): Chainable<JQuery<HTMLElement>>;
+    }
+  }
+}
+
 import './commands';