Merge pull request #323 from shairez/pr-a11y-ci

shairez · web-flow · commit 69913ae254f8 · 2023-05-24T03:41:52.000+03:00
diff --git a/packages/kit-headless/cypress.config.ts b/packages/kit-headless/cypress.config.ts
@@ -6,6 +6,6 @@ export default defineConfig({
     devServer: {
       framework: 'cypress-ct-qwik',
       bundler: 'vite',
-    },
+    } as any,
   },
 });
diff --git a/packages/kit-headless/cypress/support/component-index.html b/packages/kit-headless/cypress/support/component-index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
diff --git a/packages/kit-headless/cypress/support/component.ts b/packages/kit-headless/cypress/support/component.ts
@@ -20,6 +20,7 @@ addQwikLoader();
 // Import commands.ts using ES2015 syntax:
 import './commands';
 import 'cypress-axe';
+import 'axe-core';
 
 // Augment the Cypress namespace to include type definitions for
 // your custom command.
@@ -30,11 +31,15 @@ declare global {
   namespace Cypress {
     interface Chainable {
       mount: typeof mount;
+      checkA11yForComponent: () => void;
     }
   }
 }
 
 Cypress.Commands.add('mount', mount);
+Cypress.Commands.add('checkA11yForComponent', () => {
+  cy.checkA11y('[data-cy-root]');
+});
 
 // Example use:
 // cy.mount(MyComponent)
diff --git a/packages/kit-headless/src/components/accordion/accordion.spec.tsx b/packages/kit-headless/src/components/accordion/accordion.spec.tsx
@@ -4,7 +4,7 @@ import { Accordion, AccordionItem } from './accordion';
 describe('Accordion', () => {
   it('should render an Accordion', () => {
     mount(
-      <Accordion>
+      <Accordion class="accordion">
         <AccordionItem label="Heading 1">
           <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
@@ -20,12 +20,10 @@ describe('Accordion', () => {
       </Accordion>
     );
 
-    // cy.injectAxe();
-
     cy.contains(/Heading 1/i).click();
     cy.get('.content').should('exist');
     cy.contains(/Heading 2/i).should('exist');
 
-    // cy.checkA11y();
+    cy.checkA11yForComponent();
   });
 });
