Add a11y check to the cookie consent component

wlsf82 · Sep 19, 2024 · 6e6d905 · 6e6d905
1 parent 782ba9a
commit 6e6d905
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 7 deletions.
diff --git a/docs/TestCases.md b/docs/TestCases.md
@@ -100,9 +100,10 @@ frontend/src/components/Button/Button.cy.js (2 tests)
   ├─ renders with a sample text
   └─ renders with an icon and text
 
-frontend/src/components/CookieConsent/CookieConsent.cy.js (1 test)
+frontend/src/components/CookieConsent/CookieConsent.cy.js (2 tests)
 └─ <CookieConsent />
-  └─ renders correctly
+  ├─ renders in light mode and finds no a11y issues
+  └─ renders in dark mode and finds no a11y issues
 
 frontend/src/components/CustomerDetails/CustomerDetails.cy.js (4 tests)
 └─ <CustomerDetails />

diff --git a/frontend/src/components/CookieConsent/CookieConsent.cy.js b/frontend/src/components/CookieConsent/CookieConsent.cy.js
@@ -1,11 +1,20 @@
 import CookieConsent from './index'
 
 describe('<CookieConsent />', () => {
-  beforeEach(() => {
-    cy.mount(<CookieConsent />)
-  })
+  it('renders in light mode and finds no a11y issues', () => {
+    cy.mount(
+      <main>
+        <CookieConsent />
+      </main>
+    )
+    cy.injectAxe()
+    cy.configureAxe({
+      rules: [{
+        id: 'page-has-heading-one',
+        enabled: false
+      }]
+    })
 
-  it('renders correctly', () => {
     cy.contains(
       'p',
       'We use cookies 🍪 to ensure our application functions properly, to enhance user experience, and to gather insights on application usage.'
@@ -21,5 +30,35 @@ describe('<CookieConsent />', () => {
     cy.contains('button', 'Decline')
       .should('be.visible')
       .and('be.enabled')
+
+    cy.checkA11y()
+  })
+
+  it('renders in dark mode and finds no a11y issues', () => {
+    cy.mount(
+      <main data-theme="dark">
+        <CookieConsent />
+      </main>
+    )
+    cy.injectAxe()
+    cy.configureAxe({
+      rules: [{
+        id: 'page-has-heading-one',
+        enabled: false
+      }]
+    })
+
+    cy.contains('p', 'We use cookies 🍪').should('be.visible')
+    cy.contains('p', 'By clicking "Accept," you consent to our use of cookies.')
+      .should('be.visible')
+
+    cy.contains('button', 'Accept')
+      .should('be.visible')
+      .and('be.enabled')
+    cy.contains('button', 'Decline')
+      .should('be.visible')
+      .and('be.enabled')
+
+    cy.checkA11y()
   })
-})
+})