fix(cypress): handle previous subject case in clickButton command

MTES-MCT · Mar 30, 2023 · 5fc8b34 · 5fc8b34
1 parent d39aa15
commit 5fc8b34
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 68 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -25,7 +25,6 @@ module.exports = {
     '/dist/',
     '/e2e/release/sample/',
     '/scripts/',
-    '/src/cypress/',
     '/storybook-static/',
     '.eslintrc.js',
     'rollup.config.js'
@@ -122,7 +121,7 @@ module.exports = {
   },
   overrides: [
     {
-      files: ['./e2e/**/*.js', './e2e/**/*.ts', './e2e/**/*.tsx', './src/cypress/**/*.ts'],
+      files: ['./e2e/**/*.js', './e2e/**/*.ts', './e2e/**/*.tsx'],
       plugins: ['cypress'],
       env: {
         browser: false,
@@ -139,6 +138,17 @@ module.exports = {
         'cypress/no-pause': 'error'
       }
     },
+    {
+      files: ['./src/cypress/**/*.ts'],
+      plugins: ['cypress'],
+      env: {
+        browser: false,
+        node: true
+      },
+      rules: {
+        '@typescript-eslint/naming-convention': 'off'
+      }
+    },
     {
       files: ['./scripts/**/*.js'],
       env: {

diff --git a/e2e/base/elements/Button.spec.tsx b/e2e/base/elements/Button.spec.tsx
@@ -21,15 +21,33 @@ context('Base', () => {
     outputShouldBe('A button')
   })
 
+  it('Should click a button by its aria label', () => {
+    cy.clickButton('A button aria label')
+
+    outputShouldBe('A button aria label')
+  })
+
   it('Should click a button by its title', () => {
     cy.clickButton('A button title')
 
     outputShouldBe('A button title')
   })
 
-  it('Should click a button by its aria label', () => {
-    cy.clickButton('A button aria label')
+  it('Should click a button by its label when in another element', () => {
+    cy.get('[data-id="0"]').clickButton('The first line button')
 
-    outputShouldBe('A button aria label')
+    outputShouldBe('The first line button')
+  })
+
+  it('Should click a button by its aria label when in another element', () => {
+    cy.get('[data-id="1"]').clickButton('The second line button aria label')
+
+    outputShouldBe('The second line button aria label')
+  })
+
+  it('Should click a button by its title when in another element', () => {
+    cy.get('[data-id="2"]').clickButton('The third line button title')
+
+    outputShouldBe('The third line button title')
   })
 })
diff --git a/src/cypress/.eslintrc.js b/src/cypress/.eslintrc.js
diff --git a/src/cypress/commands/clickButton.ts b/src/cypress/commands/clickButton.ts
@@ -2,6 +2,50 @@ import { findElementBytext } from '../utils/findElementBytext'
 
 const RETRIES = 5
 
+function findButton(
+  label: string,
+  preSelector: string,
+  {
+    index,
+    prevSubjectElement
+  }: {
+    index: number
+    prevSubjectElement: HTMLElement | undefined
+  }
+): HTMLElement | undefined {
+  const buttonElement = findElementBytext(`${preSelector}button`, label, {
+    index,
+    inElement: prevSubjectElement
+  })
+  if (buttonElement) {
+    return buttonElement as HTMLElement
+  }
+
+  const buttonElementByAriaLabel = prevSubjectElement
+    ? prevSubjectElement.querySelectorAll(`${preSelector}button[aria-label="${label}"]`)[index]
+    : Cypress.$(`${preSelector}button[aria-label="${label}"]`).get(index)
+  if (buttonElementByAriaLabel) {
+    return buttonElementByAriaLabel as HTMLElement
+  }
+
+  const buttonElementByTitle = prevSubjectElement
+    ? prevSubjectElement.querySelectorAll(`${preSelector}button[title="${label}"]`)[index]
+    : Cypress.$(`${preSelector}button[title="${label}"]`).get(index)
+  if (buttonElementByTitle) {
+    return buttonElementByTitle as HTMLElement
+  }
+
+  const menuItemElement = findElementBytext(`${preSelector}[role="menuitem"]`, label, {
+    index,
+    inElement: prevSubjectElement
+  })
+  if (menuItemElement) {
+    return menuItemElement as HTMLElement
+  }
+
+  return undefined
+}
+
 export function clickButton(
   prevSubjectElements: HTMLElement[] | undefined,
   label: string,
@@ -21,39 +65,13 @@ export function clickButton(
 
   const preSelector = withinSelector ? `${withinSelector} ` : ''
 
-  const iconButtonElementByAriaLabel = prevSubjectElement
-    ? Cypress.$(prevSubjectElement).find(`${preSelector}button[aria-label="${label}"]`).get(index)
-    : Cypress.$(`${preSelector}button[aria-label="${label}"]`).get(index)
-  const iconButtonElementByTitle = prevSubjectElement
-    ? Cypress.$(prevSubjectElement).find(`${preSelector}button[aria-label="${label}"]`).get(index)
-    : Cypress.$(`${preSelector}button[title="${label}"]`).get(index)
-  const textButtonElement = findElementBytext(`${preSelector}button`, label, {
-    index,
-    inElement: prevSubjectElement
-  }) as HTMLButtonElement | null
-  const menuItemElement = findElementBytext(`${preSelector}[role="menuitem"]`, label, {
+  const maybeButton = findButton(label, preSelector, {
     index,
-    inElement: prevSubjectElement
-  }) as HTMLElement | null
-
-  if (iconButtonElementByAriaLabel) {
-    return cy.wrap(iconButtonElementByAriaLabel).scrollIntoView().click({ force: true }).wait(250)
-  }
-
-  if (iconButtonElementByTitle) {
-    return cy.wrap(iconButtonElementByTitle).scrollIntoView().click({ force: true }).wait(250)
-  }
-
-  if (menuItemElement) {
-    return cy
-      .wrap(menuItemElement as any)
-      .scrollIntoView()
-      .forceClick()
-      .wait(250)
-  }
+    prevSubjectElement
+  })
 
-  if (textButtonElement) {
-    return cy.wrap(textButtonElement).scrollIntoView().forceClick().wait(250)
+  if (maybeButton) {
+    return cy.wrap(maybeButton).scrollIntoView().forceClick().wait(250)
   }
 
   if (leftRetries > 0) {

diff --git a/src/cypress/commands/fill/index.ts b/src/cypress/commands/fill/index.ts
@@ -1,7 +1,5 @@
 /* eslint-disable cypress/no-assigning-return-values */
 
-import { findElementBySelector } from '../../utils/findElementBySelector'
-import { waitFor } from '../../utils/waitFor'
 import { isEmpty } from 'ramda'
 
 import { checkCheckbox } from './checkCheckbox'
@@ -11,7 +9,9 @@ import { fillTextarea } from './fillTextarea'
 import { fillTextInput } from './fillTextInput'
 import { pickMultiSelectOptions } from './pickMultiSelectOptions'
 import { pickSelectOption } from './pickSelectOption'
+import { findElementBySelector } from '../../utils/findElementBySelector'
 import { findElementBytext } from '../../utils/findElementBytext'
+import { waitFor } from '../../utils/waitFor'
 
 const RETRIES = 5
 

diff --git a/src/cypress/commands/forceClick.ts b/src/cypress/commands/forceClick.ts
@@ -5,8 +5,6 @@ export function forceClick([subject]: Cypress.Chainable<Cypress.JQueryWithSelect
     throw new Error(`Could not find subject.`)
   }
 
-  console.log(subject)
-
   try {
     return subject.click({ force: true })
   } catch (_) {

diff --git a/stories/tests/button.stories.tsx b/stories/tests/button.stories.tsx
@@ -26,6 +26,33 @@ export function Template() {
         A button with a title
       </Button>
 
+      <table>
+        <tbody>
+          <tr data-id="0">
+            <td>
+              <Button onClick={() => setOutputValue('The first line button')}>The first line button</Button>
+            </td>
+          </tr>
+          <tr data-id="1">
+            <td>
+              <Button
+                aria-label="The second line button aria label"
+                onClick={() => setOutputValue('The second line button aria label')}
+              >
+                A second line button with an aria label
+              </Button>
+            </td>
+          </tr>
+          <tr data-id="2">
+            <td>
+              <Button onClick={() => setOutputValue('The third line button title')} title="The third line button title">
+                A third line button with a title
+              </Button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
       {outputValue !== '∅' && <Output value={outputValue} />}
     </>
   )