fix: docs accessibility test render

ccontrols · Apr 26, 2021 · cb59397 · cb59397
1 parent 0f22572
commit cb59397
Show file tree

Hide file tree

Showing 12 changed files with 116 additions and 54 deletions.
diff --git a/plugins/cc-cli/templates/document/loop/imports-enzyme-react-17.js b/plugins/cc-cli/templates/document/loop/imports-enzyme-react-17.js
@@ -1,7 +1,10 @@
 const renderedExamples = renderDocument(examples, config);
 renderedExamples.forEach(({ name, rendered}) => {
-  it(name, async () => {
-    const component = mount(rendered);
-    expect(toJson(component, { mode: 'deep' })).toMatchSnapshot();
-  });
+  describe(name, () => {
+    it('snapshot', () => {
+      const component = mount(rendered);
+      expect(toJson(component, { mode: 'deep' })).toMatchSnapshot();
+    });
+    {{=it.allytest}}
+  });  
 });
diff --git a/plugins/cc-cli/templates/document/loop/imports-react-test-renderer.js b/plugins/cc-cli/templates/document/loop/imports-react-test-renderer.js
@@ -7,12 +7,15 @@ if (!renderedExamples.length) {
   return;
 }
 renderedExamples.forEach(({ name, rendered}) => {
-  it(name, async () => {
-    const component = renderer.create(rendered);
-    if (!component) {
-      componentErr();
-      return;
-    }
-    expect(component.toJSON()).toMatchSnapshot();
+  describe(name, () => {
+    it('snapshot', () => {
+      const component = renderer.create(rendered);
+      if (!component) {
+        componentErr();
+        return;
+      }
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+    {{=it.allytest}}
   });
 });
diff --git a/plugins/cc-cli/templates/document/loop/imports-react-testing-library.js b/plugins/cc-cli/templates/document/loop/imports-react-testing-library.js
@@ -7,9 +7,11 @@ if (!renderedExamples) {
   return;
 }
 renderedExamples.forEach(({ name, rendered}) => {
-  it(name, async () => {
-    const { asFragment } = render(rendered);
-    expect(asFragment()).toMatchSnapshot();
-
+  describe(name, async () => {
+    it('snapshot', () => {
+      const { asFragment } = render(rendered);
+      expect(asFragment()).toMatchSnapshot();
+    });  
+    {{=it.allytest}}
   });
 });
diff --git a/plugins/cc-cli/test/__snapshots__/document-enzyme-cjs.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-enzyme-cjs.test.ts.snap
@@ -21,9 +21,15 @@ describe('VariantButton', () => {
   const config = loadConfigurations(configPath);
   const renderedExamples = renderDocument(examples, config);
   renderedExamples.forEach(({ name, rendered }) => {
-    it(name, async () => {
-      const component = mount(rendered);
-      expect(toJson(component, { mode: 'deep' })).toMatchSnapshot();
+    describe(name, () => {
+      it('snapshot', () => {
+        const component = mount(rendered);
+        expect(toJson(component, { mode: 'deep' })).toMatchSnapshot();
+      });
+      it('accessibility', async () => {
+        const axeResults = await reactRunDOM(rendered, run);
+        expect(axeResults).toHaveNoAxeViolations();
+      });
     });
   });
 });

diff --git a/plugins/cc-cli/test/__snapshots__/document-enzyme-esm.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-enzyme-esm.test.ts.snap
@@ -20,9 +20,15 @@ describe('VariantButton', () => {
   const config = loadConfigurations(configPath);
   const renderedExamples = renderDocument(examples, config);
   renderedExamples.forEach(({ name, rendered }) => {
-    it(name, async () => {
-      const component = mount(rendered);
-      expect(toJson(component, { mode: 'deep' })).toMatchSnapshot();
+    describe(name, () => {
+      it('snapshot', () => {
+        const component = mount(rendered);
+        expect(toJson(component, { mode: 'deep' })).toMatchSnapshot();
+      });
+      it('accessibility', async () => {
+        const axeResults = await reactRunDOM(rendered, run);
+        expect(axeResults).toHaveNoAxeViolations();
+      });
     });
   });
 });

diff --git a/plugins/cc-cli/test/__snapshots__/document-enzyme-ts.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-enzyme-ts.test.ts.snap
@@ -20,9 +20,15 @@ describe('VariantButton', () => {
   const config = loadConfigurations(configPath);
   const renderedExamples = renderDocument(examples, config);
   renderedExamples.forEach(({ name, rendered }) => {
-    it(name, async () => {
-      const component = mount(rendered);
-      expect(toJson(component, { mode: 'deep' })).toMatchSnapshot();
+    describe(name, () => {
+      it('snapshot', () => {
+        const component = mount(rendered);
+        expect(toJson(component, { mode: 'deep' })).toMatchSnapshot();
+      });
+      it('accessibility', async () => {
+        const axeResults = await reactRunDOM<AxeResults>(rendered, run);
+        expect(axeResults).toHaveNoAxeViolations();
+      });
     });
   });
 });

diff --git a/plugins/cc-cli/test/__snapshots__/document-rtl-cjs.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-rtl-cjs.test.ts.snap
@@ -25,9 +25,15 @@ describe('VariantButton', () => {
     return;
   }
   renderedExamples.forEach(({ name, rendered }) => {
-    it(name, async () => {
-      const { asFragment } = render(rendered);
-      expect(asFragment()).toMatchSnapshot();
+    describe(name, async () => {
+      it('snapshot', () => {
+        const { asFragment } = render(rendered);
+        expect(asFragment()).toMatchSnapshot();
+      });
+      it('accessibility', async () => {
+        const axeResults = await reactRunDOM(rendered, run);
+        expect(axeResults).toHaveNoAxeViolations();
+      });
     });
   });
 });

diff --git a/plugins/cc-cli/test/__snapshots__/document-rtl-esm.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-rtl-esm.test.ts.snap
@@ -24,9 +24,15 @@ describe('VariantButton', () => {
     return;
   }
   renderedExamples.forEach(({ name, rendered }) => {
-    it(name, async () => {
-      const { asFragment } = render(rendered);
-      expect(asFragment()).toMatchSnapshot();
+    describe(name, async () => {
+      it('snapshot', () => {
+        const { asFragment } = render(rendered);
+        expect(asFragment()).toMatchSnapshot();
+      });
+      it('accessibility', async () => {
+        const axeResults = await reactRunDOM(rendered, run);
+        expect(axeResults).toHaveNoAxeViolations();
+      });
     });
   });
 });

diff --git a/plugins/cc-cli/test/__snapshots__/document-rtl-ts.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-rtl-ts.test.ts.snap
@@ -24,9 +24,15 @@ describe('VariantButton', () => {
     return;
   }
   renderedExamples.forEach(({ name, rendered }) => {
-    it(name, async () => {
-      const { asFragment } = render(rendered);
-      expect(asFragment()).toMatchSnapshot();
+    describe(name, async () => {
+      it('snapshot', () => {
+        const { asFragment } = render(rendered);
+        expect(asFragment()).toMatchSnapshot();
+      });
+      it('accessibility', async () => {
+        const axeResults = await reactRunDOM<AxeResults>(rendered, run);
+        expect(axeResults).toHaveNoAxeViolations();
+      });
     });
   });
 });

diff --git a/plugins/cc-cli/test/__snapshots__/document-rtr-cjs.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-rtr-cjs.test.ts.snap
@@ -29,13 +29,19 @@ describe('VariantButton', () => {
     return;
   }
   renderedExamples.forEach(({ name, rendered }) => {
-    it(name, async () => {
-      const component = renderer.create(rendered);
-      if (!component) {
-        componentErr();
-        return;
-      }
-      expect(component.toJSON()).toMatchSnapshot();
+    describe(name, () => {
+      it('snapshot', () => {
+        const component = renderer.create(rendered);
+        if (!component) {
+          componentErr();
+          return;
+        }
+        expect(component.toJSON()).toMatchSnapshot();
+      });
+      it('accessibility', async () => {
+        const axeResults = await reactRunDOM(rendered, run);
+        expect(axeResults).toHaveNoAxeViolations();
+      });
     });
   });
 });

diff --git a/plugins/cc-cli/test/__snapshots__/document-rtr-esm.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-rtr-esm.test.ts.snap
@@ -24,13 +24,19 @@ describe('VariantButton', () => {
     return;
   }
   renderedExamples.forEach(({ name, rendered }) => {
-    it(name, async () => {
-      const component = renderer.create(rendered);
-      if (!component) {
-        componentErr();
-        return;
-      }
-      expect(component.toJSON()).toMatchSnapshot();
+    describe(name, () => {
+      it('snapshot', () => {
+        const component = renderer.create(rendered);
+        if (!component) {
+          componentErr();
+          return;
+        }
+        expect(component.toJSON()).toMatchSnapshot();
+      });
+      it('accessibility', async () => {
+        const axeResults = await reactRunDOM(rendered, run);
+        expect(axeResults).toHaveNoAxeViolations();
+      });
     });
   });
 });

diff --git a/plugins/cc-cli/test/__snapshots__/document-rtr-ts.test.ts.snap b/plugins/cc-cli/test/__snapshots__/document-rtr-ts.test.ts.snap
@@ -24,13 +24,19 @@ describe('VariantButton', () => {
     return;
   }
   renderedExamples.forEach(({ name, rendered }) => {
-    it(name, async () => {
-      const component = renderer.create(rendered);
-      if (!component) {
-        componentErr();
-        return;
-      }
-      expect(component.toJSON()).toMatchSnapshot();
+    describe(name, () => {
+      it('snapshot', () => {
+        const component = renderer.create(rendered);
+        if (!component) {
+          componentErr();
+          return;
+        }
+        expect(component.toJSON()).toMatchSnapshot();
+      });
+      it('accessibility', async () => {
+        const axeResults = await reactRunDOM<AxeResults>(rendered, run);
+        expect(axeResults).toHaveNoAxeViolations();
+      });
     });
   });
 });