feat: document-level data-driven tests

.vscode/launch.json

@@ -211,7 +211,7 @@
       "name": "jest cc-cli",
       "program": "${workspaceFolder}/node_modules/.bin/jest",
       "cwd": "${workspaceFolder}/plugins/cc-cli",
-      "args": ["-u", "story-rtr-ts-data"],
+      "args": ["-u", "VariantButton_rtr_doc"],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "disableOptimisticBPs": true,

core/jest-extract/test/fixtures/story/VariantButton.bundle.data.ts

@@ -0,0 +1,9 @@
+export default {
+  'variantbutton--overview': {
+    'special-chars': {
+      text: 's%~`',
+      icon: 'search',
+      fontSize: 12,
+    },
+  },
+};

core/jest-extract/test/fixtures/story/VariantButton.data.ts

@@ -1,8 +1,9 @@
-import { VariantButtonProps } from './VariantButton';
-export const overview: Record<string, VariantButtonProps> = {
-  'special-chars': {
-    text: 's%~`',
-    icon: 'search',
-    fontSize: 12,
+export default {
+  overview: {
+    'special-chars': {
+      text: 's%~`',
+      icon: 'search',
+      fontSize: 12,
+    },
   },
 };

plugins/cc-cli/src/jest-templates/document-template.ts

@@ -64,13 +64,15 @@ export const createDocumentTemplate: TemplateFunction<StoryTemplateOptions> = as
     documentLoop: dot.template(
       getTemplate(`document/loop/${storeName}-${renderers[renderer]}`, format),
     )({
+      docId: doc.title,
+      data: dataImports?.data,
+      format,
       type:
         format === 'ts' ? ': ReturnType<typeof renderDocument> = []' : ' = []',
       ...accessibilityTemplate(format, ally),
     }),
     doc: bundle ? `const doc = store.docs['${doc.title}'];` : '',
     storyImports: getTemplate(`document/import/${storeName}`, format),
-
     storiesFileImports,
     name: name || doc.title,
   };

plugins/cc-cli/templates/document/loop/bundle-enzyme-react-17.js

@@ -1,19 +1,33 @@
-  Object.keys(store.docs).forEach(docId => {
-    const doc = store.docs[docId];
-    if (doc.stories && doc.stories.length) {
-      const stories = doc.stories;
-      describe(doc.title, () => {
-        stories.forEach(storyId => {
-          const story = store.stories[storyId];
-          describe(story.name, () => {
-            const rendered = renderFn({ story, doc });
+  const doc = store.docs['{{= it.docId }}'];
+  if (doc.stories && doc.stories.length) {
+    const stories = doc.stories;
+    describe(doc.title, () => {
+      stories.forEach(storyId => {
+        const story = store.stories[storyId];
+        describe(story.name, () => {
+          {{? it.data }}
+          const runTests = (values{{? it.format === 'ts' }}?: Parameters<typeof renderFn>['values']{{?}}) => {
+          {{?}}  
+            const rendered = renderFn({ story, doc{{? it.data }}, values{{?}} });
             it('snapshot', () => {
               const component = mount(rendered);
               expect(toJson(component, { mode: 'deep' })).toMatchSnapshot();
             });
             {{=it.allytest}}
-          });  
-        });
+          {{? it.data }}
+          }
+          if (data[story.id]) {
+            Object.keys(data[story.id]).forEach(dataId => {
+              describe(dataId, () => {
+                const values = data[story.id][dataId];
+                runTests(values);
+              });
+            });
+          } else {
+            runTests();
+          }
+          {{?}}
+        });  
       });
-    }
-  });
+    });
+  }

plugins/cc-cli/templates/document/loop/bundle-react-test-renderer.js

@@ -1,30 +1,44 @@
-  Object.keys(store.docs).forEach(docId => {
-    const doc = store.docs[docId];
-    if (doc.stories && doc.stories.length) {
-      const stories = doc.stories;
-      describe(doc.title, () => {
-        stories.forEach(storyId => {
-          const story = store.stories[storyId];
-          describe(story.name, () => {
-            let rendered;
-            act(() => {
-              rendered = renderFn({ story, doc });
-            });  
-            if (!rendered) {
-              renderErr();
+  const doc = store.docs['{{= it.docId }}'];
+  if (doc.stories && doc.stories.length) {
+    const stories = doc.stories;
+    describe(doc.title, () => {
+      stories.forEach(storyId => {
+        const story = store.stories[storyId];
+        describe(story.name, () => {
+          {{? it.data }}
+          const runTests = (values{{? it.format === 'ts' }}?: Parameters<typeof renderFn>['values']{{?}}) => {
+          {{?}}  
+          let rendered{{? it.format === 'ts' }}: ReturnType<typeof renderFn>{{?}};
+          act(() => {
+            rendered = renderFn({ story, doc{{? it.data }}, values{{?}} });
+          });  
+          if (!rendered) {
+            renderErr();
+            return;
+          }
+          it('snapshot', () => {
+            const component = renderer.create(rendered);
+            if (!component) {
+              componentErr();
               return;
-            }
-            it('snapshot', () => {
-              const component = renderer.create(rendered);
-              if (!component) {
-                componentErr();
-                return;
-              }  
-              expect(component.toJSON()).toMatchSnapshot();
+            }  
+            expect(component.toJSON()).toMatchSnapshot();
+          });
+          {{=it.allytest}}
+          {{? it.data }}
+        }
+        if (data[story.id]) {
+          Object.keys(data[story.id]).forEach(dataId => {
+            describe(dataId, () => {
+              const values = data[story.id][dataId];
+              runTests(values);
             });
-            {{=it.allytest}}
           });
+        } else {
+          runTests();
+        }
+        {{?}}
         });
       });
-    }
-  });
+    });
+  }

plugins/cc-cli/templates/document/loop/bundle-react-testing-library.js

@@ -1,26 +1,40 @@
-  Object.keys(store.docs).forEach(docId => {
-    const doc = store.docs[docId];
-    if (doc.stories && doc.stories.length) {
-      const stories = doc.stories;
-      describe(doc.title, () => {
-        stories.forEach(storyId => {
-          const story = store.stories[storyId];
-          describe(story.name, () => {
-            let rendered;
-            act(() => {
-              rendered = renderFn({ story, doc });
-            });  
-            if (!rendered) {
-              renderErr();
-              return;
-            }
-            it('snapshot', () => {
-              const { asFragment } = render(rendered);
-              expect(asFragment()).toMatchSnapshot();
-            });  
-            {{=it.allytest}}
+  const doc = store.docs['{{= it.docId }}'];
+  if (doc.stories && doc.stories.length) {
+    const stories = doc.stories;
+    describe(doc.title, () => {
+      stories.forEach(storyId => {
+        const story = store.stories[storyId];
+        describe(story.name, () => {
+          {{? it.data }}
+          const runTests = (values{{? it.format === 'ts' }}?: Parameters<typeof renderFn>['values']{{?}}) => {
+          {{?}}  
+          let rendered{{? it.format === 'ts' }}: ReturnType<typeof renderFn>{{?}};
+          act(() => {
+            rendered = renderFn({ story, doc{{? it.data }}, values{{?}} });
+          });  
+          if (!rendered) {
+            renderErr();
+            return;
+          }
+          it('snapshot', () => {
+            const { asFragment } = render(rendered);
+            expect(asFragment()).toMatchSnapshot();
+          });  
+          {{=it.allytest}}
+          {{? it.data }}
+        }
+        if (data[story.id]) {
+          Object.keys(data[story.id]).forEach(dataId => {
+            describe(dataId, () => {
+              const values = data[story.id][dataId];
+              runTests(values);
+            });
           });
+        } else {
+          runTests();
+        }
+        {{?}}
         });
       });
-    }
-  });
+    });
+  }

plugins/cc-cli/templates/document/loop/imports-enzyme-react-17.js

@@ -1,10 +1,21 @@
-const renderedExamples = renderDocument(examples, config);
-renderedExamples.forEach(({ name, rendered}) => {
+const renderedExamples = renderDocument(examples, config{{? it.data }}, data{{?}});
+renderedExamples.forEach(({ name, rendered {{? it.data }}, dataId, values{{?}}}) => {
   describe(name, () => {
-    it('snapshot', () => {
-      const component = mount(rendered);
-      expect(toJson(component, { mode: 'deep' })).toMatchSnapshot();
-    });
-    {{=it.allytest}}
+    {{? it.data }}
+      const runTests = () => {
+    {{?}}
+      it('snapshot', () => {
+        const component = mount(rendered);
+        expect(toJson(component, { mode: 'deep' })).toMatchSnapshot();
+      });
+      {{=it.allytest}}
+    {{? it.data }}  
+      }
+      if (values) {
+        describe(dataId, runTests);
+      } else {
+        runTests();
+      }
+    {{?}}
   });  
 });

plugins/cc-cli/templates/document/loop/imports-react-test-renderer.js

@@ -1,21 +1,33 @@
 let renderedExamples {{=it.type}};
 act(() => {
-  renderedExamples = renderDocument(examples, config);
+  renderedExamples = renderDocument(examples, config{{? it.data }}, data{{?}});
 });  
 if (!renderedExamples.length) {
   renderErr();
   return;
 }
-renderedExamples.forEach(({ name, rendered}) => {
+renderedExamples.forEach(({ name, rendered{{? it.data }}, dataId, values{{?}}}) => {
   describe(name, () => {
-    it('snapshot', () => {
-      const component = renderer.create(rendered);
-      if (!component) {
-        componentErr();
-        return;
+    {{? it.data }}
+      const runTests = () => {
+    {{?}}
+
+      it('snapshot', () => {
+        const component = renderer.create(rendered);
+        if (!component) {
+          componentErr();
+          return;
+        }
+        expect(component.toJSON()).toMatchSnapshot();
+      });
+      {{=it.allytest}}
+      {{? it.data }}  
       }
-      expect(component.toJSON()).toMatchSnapshot();
-    });
-    {{=it.allytest}}
+      if (values) {
+        describe(dataId, runTests);
+      } else {
+        runTests();
+      }
+    {{?}}
   });
 });

plugins/cc-cli/templates/document/loop/imports-react-testing-library.js

@@ -1,17 +1,29 @@
 let renderedExamples {{=it.type}};
 act(() => {
-  renderedExamples = renderDocument(examples, config);
+  renderedExamples = renderDocument(examples, config{{? it.data }}, data{{?}});
 });  
 if (!renderedExamples) {
   renderErr();
   return;
 }
-renderedExamples.forEach(({ name, rendered}) => {
+renderedExamples.forEach(({ name, rendered{{? it.data }}, dataId, values{{?}}}) => {
   describe(name, () => {
-    it('snapshot', () => {
-      const { asFragment } = render(rendered);
-      expect(asFragment()).toMatchSnapshot();
-    });  
-    {{=it.allytest}}
+    {{? it.data }}
+      const runTests = () => {
+    {{?}}
+
+      it('snapshot', () => {
+        const { asFragment } = render(rendered);
+        expect(asFragment()).toMatchSnapshot();
+      });  
+      {{=it.allytest}}
+      {{? it.data }}  
+    }
+    if (values) {
+      describe(dataId, runTests);
+    } else {
+      runTests();
+    }
+  {{?}}      
   });
 });

plugins/cc-cli/test/VariantButton_enzyme.test.ts

@@ -7,7 +7,7 @@ import { mount, configure } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import '@component-controls/jest-axe-matcher';
-import * as data from '../../../core/jest-extract/test/fixtures/story/VariantButton.data';
+import data from '../../../core/jest-extract/test/fixtures/story/VariantButton.data';
 
 configure({ adapter: new Adapter() });
 

plugins/cc-cli/test/VariantButton_enzyme_doc.test.ts

@@ -0,0 +1,39 @@
+import * as path from 'path';
+import { run, AxeResults } from 'axe-core';
+import { reactRunDOM } from '@component-controls/test-renderers';
+import '@component-controls/jest-axe-matcher';
+import { loadConfigurations } from '@component-controls/config';
+import { renderDocument } from '@component-controls/test-renderers';
+import { mount, configure } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+
+configure({ adapter: new Adapter() });
+
+import * as examples from './fixtures/VariantButton.docs';
+import data from '../../../core/jest-extract/test/fixtures/story/VariantButton.data';
+
+describe('VariantButton', () => {
+  const configPath = path.resolve(__dirname, '.config');
+  const config = loadConfigurations(configPath);
+  const renderedExamples = renderDocument(examples, config, data);
+  renderedExamples.forEach(({ name, rendered, dataId, values }) => {
+    describe(name, () => {
+      const runTests = () => {
+        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();
+        });
+      };
+      if (values) {
+        describe(dataId, runTests);
+      } else {
+        runTests();
+      }
+    });
+  });
+});