feat: story 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": ["cli-document-data"],
+      "args": ["-u", "story-rtr-ts-data"],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "disableOptimisticBPs": true,

plugins/cc-cli/src/data-templates/data-template.ts

@@ -46,14 +46,9 @@ export const createDataTemplate = async (
   });
   return {
     content: prettify(
-      Object.keys(data)
-        .map(storyId =>
-          dot.template(getTemplate(`data-templates/data`, format))({
-            story: storyId,
-            values: JSON.stringify(data[storyId], null, 2),
-          }),
-        )
-        .join('/n'),
+      dot.template(getTemplate(`data-templates/data`, format))({
+        data: JSON.stringify(data, null, 2),
+      }),
       {},
       output,
     ),

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

@@ -8,6 +8,7 @@ import {
   TemplateFunction,
   DataImportOptions,
   relativeImport,
+  removeExtension,
 } from '../utils';
 import { getTemplate } from '../resolve-template';
 import { getStore } from '../store';
@@ -53,7 +54,7 @@ export const createDocumentTemplate: TemplateFunction<StoryTemplateOptions> = as
     : `import * as examples from '${importPath}';`;
   const vars = {
     dataImports: dot.template(getTemplate(`data-include/import`, format))({
-      dataFile: dataImports?.filePath,
+      dataFile: removeExtension(dataImports?.filePath),
     }),
     stories: Object.keys(stories).map(key => ({
       name: stories[key].name,

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

@@ -8,6 +8,7 @@ import {
   TemplateFunction,
   DataImportOptions,
   relativeImport,
+  removeExtension,
 } from '../utils';
 import { getTemplate } from '../resolve-template';
 import { getStore } from '../store';
@@ -43,12 +44,6 @@ export const createStoriesTemplate: TemplateFunction<StoryTemplateOptions> = asy
     name: stories[key].name,
     id: key,
   }));
-  const render = dot.template(
-    getTemplate(`framework-render/${renderers[renderer]}`, format),
-  )({
-    bundle: !!bundle,
-    ...accessibilityTemplate(format, ally),
-  });
   const importPath = (output
     ? relativeImport(output, storyPath)
     : `./${path.basename(storyPath)}`
@@ -74,15 +69,16 @@ const { ${arrStories
         .join(', ')} } from '${importPath}';`;
   const vars = {
     dataImports: dot.template(getTemplate(`data-include/import`, format))({
-      dataFile: dataImports?.filePath,
+      dataFile: removeExtension(dataImports?.filePath),
     }),
     stories: arrStories,
-    render,
     doc: bundle ? `const doc = store.docs['${doc.title}'];` : '',
     storyImports: getTemplate(`story/import/${storeName}`, format),
-
+    data: dataImports?.data,
     storiesFileImports,
     name: name || doc.title,
+    bundle: !!bundle,
+    ...accessibilityTemplate(format, ally),
   };
   const template = `
 {{=it.topImports}}
@@ -96,25 +92,37 @@ describe('{{=it.name}}', () => {
 {{=it.doc}}
 {{~ it.stories :story }}
   describe('{{=story.name}}', () => {
-    {{? it.bundlePath }}
-      const story = store.stories['{{=story.id}}'];
-    {{?? true }}
-      const example = {{=story.name}};
-    {{?}}
-{{=it.render}}
+    {{? it.data && it.data[story.id] }}
+      Object.keys(data['{{=story.id}}']).forEach(dataId => {
+      const values = data['{{=story.id}}'][dataId];
+      describe(dataId, () => {
+    {{?}}    
+      {{? it.bundlePath }}
+          const story = store.stories['{{=story.id}}'];
+      {{?? true }}
+        const example = {{=story.name}};
+      {{?}}
+{{#def.loadTemplate('framework-render/${renderers[renderer]}')}}
+{{? it.data && it.data[story.id] }}
+    });
+  });
+{{?}}  
   });
 {{~}}
 });
 `;
-  return createTemplate({
-    renderer,
-    output,
-    format,
-    name,
-    bundle,
-    template,
-    vars,
-    ally,
-    ...rest,
-  });
+  return createTemplate(
+    {
+      renderer,
+      output,
+      format,
+      name,
+      bundle,
+      template,
+      vars,
+      ally,
+      ...rest,
+    },
+    {},
+  );
 };

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

@@ -18,6 +18,7 @@ export const createTemplate = (
     template: string;
     vars: Record<string, any>;
   },
+  defs?: Record<string, unknown>,
 ): string => {
   const {
     name,
@@ -49,6 +50,11 @@ export const createTemplate = (
     name,
     ...customVars,
   };
-  const content = dot.template(template)(vars);
+  const content = dot.template(template, undefined, {
+    loadTemplate: (name: string) => {
+      return getTemplate(name, format);
+    },
+    ...defs,
+  })(vars);
   return prettify(content, {}, output);
 };

plugins/cc-cli/src/utils.ts

@@ -66,3 +66,14 @@ export const relativeImport = (from: string, to: string): string => {
   const relative = path.relative(from, to);
   return relative.startsWith('.') ? relative : `./${relative}`;
 };
+
+export const formatExtension = (format: TeplateFormats): string =>
+  format === 'ts' ? 'ts' : 'js';
+
+export const removeExtension = (fileName?: string): string | undefined =>
+  fileName
+    ? fileName
+        .split('.')
+        .slice(0, -1)
+        .join('.')
+    : undefined;

plugins/cc-cli/templates/data-include/import.esm.js

@@ -1 +1 @@
-{{? it.dataFile }}import * as data from '{{=it.dataFile}}';{{?}}
+{{? it.dataFile }}import data from '{{=it.dataFile}}';{{?}}

plugins/cc-cli/templates/data-templates/data.cjs.js

@@ -1,3 +1 @@
-exports.{{=it.story}} =
-  {{=it.values }}
-;
+module.exports = {{=it.data}};

plugins/cc-cli/templates/data-templates/data.esm.js

@@ -1,3 +1 @@
-export const {{=it.story}} =
-  {{=it.values }}
-;
+export default {{=it.data}};

plugins/cc-cli/templates/framework-render/enzyme-react-17.cjs.js

@@ -1,10 +1,11 @@
 {{? it.bundle }}
-const rendered = renderFn({ story, doc });
+const rendered = renderFn({ story, doc{{? it.data && it.data[story.id] }}, values{{?}} });
 {{?? true }}
 const rendered = renderExample({
   example,
   doc,
   config,
+  {{? it.data && it.data[story.id] }}values,{{?}}
 });
 {{?}}
 it('snapshot', () => {

plugins/cc-cli/templates/framework-render/react-test-renderer.cjs.js

@@ -1,12 +1,13 @@
 let rendered;
 act(() => {
   {{? it.bundle }}
-  rendered = renderFn({ story, doc });
+  rendered = renderFn({ story, doc{{? it.data && it.data[story.id] }}, values{{?}} });
   {{?? true }}
   rendered = renderExample({
     example,
     doc,
     config,
+    {{? it.data && it.data[story.id] }}values,{{?}}
   });
   {{?}}
 })

plugins/cc-cli/templates/framework-render/react-test-renderer.ts.js

@@ -1,12 +1,13 @@
 let rendered: ReturnType<typeof renderExample> = undefined as any;
 act(() => {
   {{? it.bundle }}
-  rendered = renderFn({ story, doc });
+  rendered = renderFn({ story, doc{{? it.data && it.data[story.id] }}, values{{?}} });
   {{?? true }}
   rendered = renderExample({
     example,
     doc,
     config,
+    {{? it.data && it.data[story.id] }}values,{{?}}
   });
   {{?}}
 })

plugins/cc-cli/templates/framework-render/react-testing-library.cjs.js

@@ -1,12 +1,13 @@
 let rendered;
 act(() => {
   {{? it.bundle }}
-  rendered = renderFn({ story, doc });
+  rendered = renderFn({ story, doc{{? it.data && it.data[story.id] }}, values{{?}} });
   {{?? true }}
   rendered = renderExample({
     example,
     doc,
     config,
+    {{? it.data && it.data[story.id] }}values,{{?}}
   });
   {{?}}
 });

plugins/cc-cli/templates/framework-render/react-testing-library.ts.js

@@ -1,12 +1,13 @@
 let rendered: ReturnType<typeof renderExample> = undefined as any;
 act(() => {
   {{? it.bundle }}
-  rendered = renderFn({ story, doc });
+  rendered = renderFn({ story, doc{{? it.data && it.data[story.id] }}, values{{?}} });
   {{?? true }}
   rendered = renderExample({
     example,
     doc,
     config,
+    {{? it.data && it.data[story.id] }}values,{{?}}
   });
   {{?}}
 });