fix: typescript define type of renderer

ccontrols · Apr 30, 2021 · bba5a09 · bba5a09
1 parent fc66831
commit bba5a09
Show file tree

Hide file tree

Showing 19 changed files with 142 additions and 22 deletions.
diff --git a/plugins/cc-cli/src/store-template.ts b/plugins/cc-cli/src/store-template.ts
@@ -36,7 +36,7 @@ export const createStoreTemplate: TemplateFunction = async (
   );
   const renderPath = path.resolve(
     __dirname,
-    `../templates/framework-render/${renderers[renderer]}.js`,
+    `../templates/framework-render/${renderers[renderer]}.${format}.js`,
   );
   const render = dot.template(fs.readFileSync(renderPath, 'utf8'))({
     bundle: !!bundle,

diff --git a/plugins/cc-cli/src/stories-template.ts b/plugins/cc-cli/src/stories-template.ts
@@ -72,7 +72,7 @@ export const createStoriesTemplate: TemplateFunction<StoryTemplateOptions> = asy
   const store = bundle ? 'bundle' : 'imports';
   const renderPath = path.resolve(
     __dirname,
-    `../templates/framework-render/${renderers[renderer]}.js`,
+    `../templates/framework-render/${renderers[renderer]}.${format}.js`,
   );
   const render = dot.template(fs.readFileSync(renderPath, 'utf8'))({
     bundle: !!bundle,

diff --git a/...lates/framework-render/enzyme-react-17.js → ...s/framework-render/enzyme-react-17.cjs.js b/...lates/framework-render/enzyme-react-17.js → ...s/framework-render/enzyme-react-17.cjs.js
diff --git a/plugins/cc-cli/templates/framework-render/enzyme-react-17.esm.js b/plugins/cc-cli/templates/framework-render/enzyme-react-17.esm.js
@@ -0,0 +1,14 @@
+{{? it.bundle }}
+const rendered = renderFn(story, doc);
+{{?? true }}
+const rendered = renderExample({
+  example,
+  doc,
+  config,
+});
+{{?}}
+it('snapshot', () => {
+  const component = mount(rendered);
+  expect(toJson(component, { mode: 'deep' })).toMatchSnapshot();
+});  
+{{=it.allytest}}
diff --git a/plugins/cc-cli/templates/framework-render/enzyme-react-17.ts.js b/plugins/cc-cli/templates/framework-render/enzyme-react-17.ts.js
@@ -0,0 +1,14 @@
+{{? it.bundle }}
+const rendered = renderFn(story, doc);
+{{?? true }}
+const rendered = renderExample({
+  example,
+  doc,
+  config,
+});
+{{?}}
+it('snapshot', () => {
+  const component = mount(rendered);
+  expect(toJson(component, { mode: 'deep' })).toMatchSnapshot();
+});  
+{{=it.allytest}}
diff --git a/...s/framework-render/react-test-renderer.js → ...amework-render/react-test-renderer.cjs.js b/...s/framework-render/react-test-renderer.js → ...amework-render/react-test-renderer.cjs.js
diff --git a/plugins/cc-cli/templates/framework-render/react-test-renderer.esm.js b/plugins/cc-cli/templates/framework-render/react-test-renderer.esm.js
@@ -0,0 +1,25 @@
+let rendered;
+act(() => {
+  {{? it.bundle }}
+  rendered = renderFn(story, doc);
+  {{?? true }}
+  rendered = renderExample({
+    example,
+    doc,
+    config,
+  });
+  {{?}}
+})
+if (!rendered) {
+  renderErr();
+  return;
+}
+it('snapshot', () => {
+  const component = renderer.create(rendered);
+  if (!component) {
+    componentErr();
+    return;
+  }
+  expect(component.toJSON()).toMatchSnapshot();
+});
+{{=it.allytest}}
diff --git a/plugins/cc-cli/templates/framework-render/react-test-renderer.ts.js b/plugins/cc-cli/templates/framework-render/react-test-renderer.ts.js
@@ -0,0 +1,25 @@
+let rendered: ReturnType<typeof renderExample> = undefined as any;
+act(() => {
+  {{? it.bundle }}
+  rendered = renderFn(story, doc);
+  {{?? true }}
+  rendered = renderExample({
+    example,
+    doc,
+    config,
+  });
+  {{?}}
+})
+if (!rendered) {
+  renderErr();
+  return;
+}
+it('snapshot', () => {
+  const component = renderer.create(rendered);
+  if (!component) {
+    componentErr();
+    return;
+  }
+  expect(component.toJSON()).toMatchSnapshot();
+});
+{{=it.allytest}}
diff --git a/...framework-render/react-testing-library.js → ...ework-render/react-testing-library.cjs.js b/...framework-render/react-testing-library.js → ...ework-render/react-testing-library.cjs.js
diff --git a/plugins/cc-cli/templates/framework-render/react-testing-library.esm.js b/plugins/cc-cli/templates/framework-render/react-testing-library.esm.js
@@ -0,0 +1,21 @@
+let rendered;
+act(() => {
+  {{? it.bundle }}
+  rendered = renderFn(story, doc);
+  {{?? true }}
+  rendered = renderExample({
+    example,
+    doc,
+    config,
+  });
+  {{?}}
+});
+if (!rendered) {
+  renderErr();
+  return;
+}
+it('snapshot', () => {
+  const { asFragment } = render(rendered);
+  expect(asFragment()).toMatchSnapshot();
+});
+{{=it.allytest}}
diff --git a/plugins/cc-cli/templates/framework-render/react-testing-library.ts.js b/plugins/cc-cli/templates/framework-render/react-testing-library.ts.js
@@ -0,0 +1,21 @@
+let rendered: ReturnType<typeof renderExample> = undefined as any;
+act(() => {
+  {{? it.bundle }}
+  rendered = renderFn(story, doc);
+  {{?? true }}
+  rendered = renderExample({
+    example,
+    doc,
+    config,
+  });
+  {{?}}
+});
+if (!rendered) {
+  renderErr();
+  return;
+}
+it('snapshot', () => {
+  const { asFragment } = render(rendered);
+  expect(asFragment()).toMatchSnapshot();
+});
+{{=it.allytest}}
diff --git a/plugins/cc-cli/test/__snapshots__/store-rtl-bundle-ts.test.ts.snap b/plugins/cc-cli/test/__snapshots__/store-rtl-bundle-ts.test.ts.snap
@@ -22,7 +22,7 @@ describe('component-controls generated', () => {
         stories.forEach(storyId => {
           const story = store.stories[storyId];
           describe(story.name, () => {
-            let rendered;
+            let rendered: ReturnType<typeof renderExample> = undefined as any;
             act(() => {
               rendered = renderFn(story, doc);
             });

diff --git a/plugins/cc-cli/test/__snapshots__/store-rtl-ts.test.ts.snap b/plugins/cc-cli/test/__snapshots__/store-rtl-ts.test.ts.snap
@@ -33,7 +33,7 @@ describe('component-controls generated', () => {
           describe(doc.title, () => {
             examples.forEach(example => {
               describe(example.name, () => {
-                let rendered;
+                let rendered: ReturnType<typeof renderExample> = undefined as any;
                 act(() => {
                   rendered = renderExample({
                     example,

diff --git a/plugins/cc-cli/test/__snapshots__/store-rtr-bundle-ts.test.ts.snap b/plugins/cc-cli/test/__snapshots__/store-rtr-bundle-ts.test.ts.snap
@@ -22,7 +22,7 @@ describe('component-controls generated', () => {
         stories.forEach(storyId => {
           const story = store.stories[storyId];
           describe(story.name, () => {
-            let rendered;
+            let rendered: ReturnType<typeof renderExample> = undefined as any;
             act(() => {
               rendered = renderFn(story, doc);
             });

diff --git a/plugins/cc-cli/test/__snapshots__/store-rtr-ts.test.ts.snap b/plugins/cc-cli/test/__snapshots__/store-rtr-ts.test.ts.snap
@@ -33,7 +33,7 @@ describe('component-controls generated', () => {
           describe(doc.title, () => {
             examples.forEach(example => {
               describe(example.name, () => {
-                let rendered;
+                let rendered: ReturnType<typeof renderExample> = undefined as any;
                 act(() => {
                   rendered = renderExample({
                     example,

diff --git a/plugins/cc-cli/test/__snapshots__/story-rtl-bundle-ts.test.ts.snap b/plugins/cc-cli/test/__snapshots__/story-rtl-bundle-ts.test.ts.snap
@@ -19,7 +19,7 @@ describe('Components/Header', () => {
   describe('Overview', () => {
     const story = store.stories['components-header--overview'];
 
-    let rendered;
+    let rendered: ReturnType<typeof renderExample> = undefined as any;
     act(() => {
       rendered = renderFn(story, doc);
     });

diff --git a/plugins/cc-cli/test/__snapshots__/story-rtl-ts.test.ts.snap b/plugins/cc-cli/test/__snapshots__/story-rtl-ts.test.ts.snap
@@ -27,7 +27,7 @@ describe('VariantButton', () => {
   describe('overview', () => {
     const example = overview;
 
-    let rendered;
+    let rendered: ReturnType<typeof renderExample> = undefined as any;
     act(() => {
       rendered = renderExample({
         example,
@@ -52,7 +52,7 @@ describe('VariantButton', () => {
   describe('primary', () => {
     const example = primary;
 
-    let rendered;
+    let rendered: ReturnType<typeof renderExample> = undefined as any;
     act(() => {
       rendered = renderExample({
         example,
@@ -77,7 +77,7 @@ describe('VariantButton', () => {
   describe('accent', () => {
     const example = accent;
 
-    let rendered;
+    let rendered: ReturnType<typeof renderExample> = undefined as any;
     act(() => {
       rendered = renderExample({
         example,
@@ -102,7 +102,7 @@ describe('VariantButton', () => {
   describe('disabled', () => {
     const example = disabled;
 
-    let rendered;
+    let rendered: ReturnType<typeof renderExample> = undefined as any;
     act(() => {
       rendered = renderExample({
         example,
@@ -127,7 +127,7 @@ describe('VariantButton', () => {
   describe('success', () => {
     const example = success;
 
-    let rendered;
+    let rendered: ReturnType<typeof renderExample> = undefined as any;
     act(() => {
       rendered = renderExample({
         example,
@@ -152,7 +152,7 @@ describe('VariantButton', () => {
   describe('error', () => {
     const example = error;
 
-    let rendered;
+    let rendered: ReturnType<typeof renderExample> = undefined as any;
     act(() => {
       rendered = renderExample({
         example,
@@ -177,7 +177,7 @@ describe('VariantButton', () => {
   describe('warning', () => {
     const example = warning;
 
-    let rendered;
+    let rendered: ReturnType<typeof renderExample> = undefined as any;
     act(() => {
       rendered = renderExample({
         example,

diff --git a/plugins/cc-cli/test/__snapshots__/story-rtr-bundle-ts.test.ts.snap b/plugins/cc-cli/test/__snapshots__/story-rtr-bundle-ts.test.ts.snap
@@ -19,7 +19,7 @@ describe('Components/Header', () => {
   describe('Overview', () => {
     const story = store.stories['components-header--overview'];
 
-    let rendered;
+    let rendered: ReturnType<typeof renderExample> = undefined as any;
     act(() => {
       rendered = renderFn(story, doc);
     });

diff --git a/plugins/cc-cli/test/__snapshots__/story-rtr-ts.test.ts.snap b/plugins/cc-cli/test/__snapshots__/story-rtr-ts.test.ts.snap
@@ -27,7 +27,7 @@ describe('VariantButton', () => {
   describe('overview', () => {
     const example = overview;
 
-    let rendered;
+    let rendered: ReturnType<typeof renderExample> = undefined as any;
     act(() => {
       rendered = renderExample({
         example,
@@ -56,7 +56,7 @@ describe('VariantButton', () => {
   describe('primary', () => {
     const example = primary;
 
-    let rendered;
+    let rendered: ReturnType<typeof renderExample> = undefined as any;
     act(() => {
       rendered = renderExample({
         example,
@@ -85,7 +85,7 @@ describe('VariantButton', () => {
   describe('accent', () => {
     const example = accent;
 
-    let rendered;
+    let rendered: ReturnType<typeof renderExample> = undefined as any;
     act(() => {
       rendered = renderExample({
         example,
@@ -114,7 +114,7 @@ describe('VariantButton', () => {
   describe('disabled', () => {
     const example = disabled;
 
-    let rendered;
+    let rendered: ReturnType<typeof renderExample> = undefined as any;
     act(() => {
       rendered = renderExample({
         example,
@@ -143,7 +143,7 @@ describe('VariantButton', () => {
   describe('success', () => {
     const example = success;
 
-    let rendered;
+    let rendered: ReturnType<typeof renderExample> = undefined as any;
     act(() => {
       rendered = renderExample({
         example,
@@ -172,7 +172,7 @@ describe('VariantButton', () => {
   describe('error', () => {
     const example = error;
 
-    let rendered;
+    let rendered: ReturnType<typeof renderExample> = undefined as any;
     act(() => {
       rendered = renderExample({
         example,
@@ -201,7 +201,7 @@ describe('VariantButton', () => {
   describe('warning', () => {
     const example = warning;
 
-    let rendered;
+    let rendered: ReturnType<typeof renderExample> = undefined as any;
     act(() => {
       rendered = renderExample({
         example,