fix: support for relatve paths in templates

ccontrols · Mar 28, 2021 · 7c245bc · 7c245bc
1 parent 9c7322e
commit 7c245bc
Show file tree

Hide file tree

Showing 61 changed files with 320 additions and 378 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -211,7 +211,7 @@
       "name": "jest jest-addon",
       "program": "${workspaceFolder}/node_modules/.bin/jest",
       "cwd": "${workspaceFolder}/plugins/jest-snapshots",
-      "args": ["enzyme-esm"],
+      "args": ["enzyme-bundle-ts"],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "disableOptimisticBPs": true,

diff --git a/plugins/addon-catalog/tests/stories.test.ts b/plugins/addon-catalog/tests/stories.test.ts
@@ -1,3 +1,4 @@
+import path from 'path';
 import { loadConfigurations, extractDocuments } from '@component-controls/config';
 import { renderExample } from '@component-controls/test-renderers';
 import { render as reactRender } from '@component-controls/render/react';
@@ -29,7 +30,7 @@ describe('component-controls generated', () => {
     });
     done();
   });
-  const configPath = './.config';
+  const configPath = path.resolve(__dirname, '../.config');
   const config = loadConfigurations(configPath);
   if (!config.renderFn) {
     config.renderFn = reactRender;
@@ -49,11 +50,11 @@ describe('component-controls generated', () => {
             it(example.name, async () => {
               let rendered;
               act(() => {
-                rendered = renderExample({
-                  example,
-                  doc,
-                  config,
-                });
+              rendered = renderExample({
+                example,
+                doc,
+                config,
+              });
               });
               let serialize;
               if (rendered) {
@@ -68,5 +69,5 @@ describe('component-controls generated', () => {
         });
       }
     });
-  }
+  } 
 });
diff --git a/plugins/addon-images/tests/stories.test.ts b/plugins/addon-images/tests/stories.test.ts
@@ -1,3 +1,4 @@
+import path from 'path';
 import { loadConfigurations, extractDocuments } from '@component-controls/config';
 import { renderExample } from '@component-controls/test-renderers';
 import { render as reactRender } from '@component-controls/render/react';
@@ -29,7 +30,7 @@ describe('component-controls generated', () => {
     });
     done();
   });
-  const configPath = './.config';
+  const configPath = path.resolve(__dirname, '../.config');
   const config = loadConfigurations(configPath);
   if (!config.renderFn) {
     config.renderFn = reactRender;
@@ -49,11 +50,11 @@ describe('component-controls generated', () => {
             it(example.name, async () => {
               let rendered;
               act(() => {
-                rendered = renderExample({
-                  example,
-                  doc,
-                  config,
-                });
+              rendered = renderExample({
+                example,
+                doc,
+                config,
+              });
               });
               let serialize;
               if (rendered) {
@@ -68,5 +69,5 @@ describe('component-controls generated', () => {
         });
       }
     });
-  }
+  } 
 });
diff --git a/plugins/addon-notes/tests/stories.test.ts b/plugins/addon-notes/tests/stories.test.ts
@@ -1,3 +1,4 @@
+import path from 'path';
 import { loadConfigurations, extractDocuments } from '@component-controls/config';
 import { renderExample } from '@component-controls/test-renderers';
 import { render as reactRender } from '@component-controls/render/react';
@@ -29,7 +30,7 @@ describe('component-controls generated', () => {
     });
     done();
   });
-  const configPath = './.config';
+  const configPath = path.resolve(__dirname, '../.config');
   const config = loadConfigurations(configPath);
   if (!config.renderFn) {
     config.renderFn = reactRender;
@@ -49,11 +50,11 @@ describe('component-controls generated', () => {
             it(example.name, async () => {
               let rendered;
               act(() => {
-                rendered = renderExample({
-                  example,
-                  doc,
-                  config,
-                });
+              rendered = renderExample({
+                example,
+                doc,
+                config,
+              });
               });
               let serialize;
               if (rendered) {
@@ -68,5 +69,5 @@ describe('component-controls generated', () => {
         });
       }
     });
-  }
+  } 
 });
diff --git a/plugins/addon-stats/tests/stories.test.ts b/plugins/addon-stats/tests/stories.test.ts
@@ -1,3 +1,4 @@
+import path from 'path';
 import { loadConfigurations, extractDocuments } from '@component-controls/config';
 import { renderExample } from '@component-controls/test-renderers';
 import { render as reactRender } from '@component-controls/render/react';
@@ -29,7 +30,7 @@ describe('component-controls generated', () => {
     });
     done();
   });
-  const configPath = './.config';
+  const configPath = path.resolve(__dirname, '../.config');
   const config = loadConfigurations(configPath);
   if (!config.renderFn) {
     config.renderFn = reactRender;
@@ -49,11 +50,11 @@ describe('component-controls generated', () => {
             it(example.name, async () => {
               let rendered;
               act(() => {
-                rendered = renderExample({
-                  example,
-                  doc,
-                  config,
-                });
+              rendered = renderExample({
+                example,
+                doc,
+                config,
+              });
               });
               let serialize;
               if (rendered) {
@@ -68,5 +69,5 @@ describe('component-controls generated', () => {
         });
       }
     });
-  }
+  } 
 });
diff --git a/plugins/axe-plugin/tests/stories.test.ts b/plugins/axe-plugin/tests/stories.test.ts
@@ -1,3 +1,4 @@
+import path from 'path';
 import { loadConfigurations, extractDocuments } from '@component-controls/config';
 import { renderExample } from '@component-controls/test-renderers';
 import { render as reactRender } from '@component-controls/render/react';
@@ -29,7 +30,7 @@ describe('component-controls generated', () => {
     });
     done();
   });
-  const configPath = './.config';
+  const configPath = path.resolve(__dirname, '../.config');
   const config = loadConfigurations(configPath);
   if (!config.renderFn) {
     config.renderFn = reactRender;
@@ -49,11 +50,11 @@ describe('component-controls generated', () => {
             it(example.name, async () => {
               let rendered;
               act(() => {
-                rendered = renderExample({
-                  example,
-                  doc,
-                  config,
-                });
+              rendered = renderExample({
+                example,
+                doc,
+                config,
+              });
               });
               let serialize;
               if (rendered) {
@@ -68,5 +69,5 @@ describe('component-controls generated', () => {
         });
       }
     });
-  }
+  } 
 });
diff --git a/plugins/figma-embed/tests/stories.test.ts b/plugins/figma-embed/tests/stories.test.ts
@@ -1,3 +1,4 @@
+import path from 'path';
 import { loadConfigurations, extractDocuments } from '@component-controls/config';
 import { renderExample } from '@component-controls/test-renderers';
 import { render as reactRender } from '@component-controls/render/react';
@@ -29,7 +30,7 @@ describe('component-controls generated', () => {
     });
     done();
   });
-  const configPath = './.config';
+  const configPath = path.resolve(__dirname, '../.config');
   const config = loadConfigurations(configPath);
   if (!config.renderFn) {
     config.renderFn = reactRender;
@@ -49,11 +50,11 @@ describe('component-controls generated', () => {
             it(example.name, async () => {
               let rendered;
               act(() => {
-                rendered = renderExample({
-                  example,
-                  doc,
-                  config,
-                });
+              rendered = renderExample({
+                example,
+                doc,
+                config,
+              });
               });
               let serialize;
               if (rendered) {
@@ -68,5 +69,5 @@ describe('component-controls generated', () => {
         });
       }
     });
-  }
+  } 
 });
diff --git a/plugins/jest-snapshots/src/cli.ts b/plugins/jest-snapshots/src/cli.ts
@@ -40,6 +40,7 @@ export const run = async (): Promise<void> => {
     configPath: config,
     name,
     bundle,
+    out: testFolder,
   });
   fs.writeFileSync(testFilePath, content, 'utf8');
 };
diff --git a/plugins/jest-snapshots/src/templates.ts b/plugins/jest-snapshots/src/templates.ts
@@ -12,14 +12,16 @@ export type TemplateOptions = {
   format?: TeplateFormats;
   configPath?: string;
   bundle?: string;
+  out?: string;
   name?: string;
 };
 export const createTemplate = (options?: TemplateOptions): string => {
   const {
     renderer = 'rtl',
     format = 'cjs',
-    configPath = path.resolve(process.cwd(), defaultConfigFolder),
+    configPath: config = path.resolve(process.cwd(), defaultConfigFolder),
     name = 'component-controls generated',
+    out,
     bundle,
   } = options || {};
   const filePath = path.resolve(
@@ -52,17 +54,19 @@ export const createTemplate = (options?: TemplateOptions): string => {
   const render = dot.template(fs.readFileSync(renderPath, 'utf8'))({
     storeRender,
   });
-
+  const bundlePath =
+    out && bundle ? `.${path.sep}${path.relative(out, bundle)}` : bundle;
+  const configPath = out ? path.relative(out, config) : config;
   const vars = {
     imports: fs.readFileSync(importsPath, 'utf8'),
     render,
     configPath,
     storeRender,
     storeImports: fs.readFileSync(storeImportPath, 'utf8'),
-    bundlePath: bundle,
+    bundlePath,
     storeLoop: dot.template(fs.readFileSync(storeLoopPath, 'utf8'))({
       render,
-      bundlePath: bundle,
+      bundlePath,
       configPath,
     }),
     name,

diff --git a/plugins/jest-snapshots/templates/all-store.cjs.js b/plugins/jest-snapshots/templates/all-store.cjs.js
@@ -1,3 +1,4 @@
+const path = require('path');
 {{=it.storeImports}}
 
 {{=it.imports}}

diff --git a/plugins/jest-snapshots/templates/all-store.esm.js b/plugins/jest-snapshots/templates/all-store.esm.js
@@ -1,3 +1,4 @@
+import * as path from 'path';
 {{=it.storeImports}}
 
 {{=it.imports}}

diff --git a/plugins/jest-snapshots/templates/all-store.ts.js b/plugins/jest-snapshots/templates/all-store.ts.js
@@ -1,3 +1,4 @@
+import path from 'path';
 {{=it.storeImports}}
 
 {{=it.imports}}

diff --git a/plugins/jest-snapshots/templates/store-loop/bundle.cjs.js b/plugins/jest-snapshots/templates/store-loop/bundle.cjs.js
@@ -1,4 +1,4 @@
-  const store = loadStore(require('{{=it.bundlePath}}'));
+  const store = loadStore(require(path.resolve(__dirname, '{{=it.bundlePath}}')));
   const renderFn = store.config.renderFn || reactRender;
   Object.keys(store.docs).forEach(docId => {
     const doc = store.docs[docId];

diff --git a/plugins/jest-snapshots/templates/store-loop/bundle.esm.js b/plugins/jest-snapshots/templates/store-loop/bundle.esm.js
@@ -1,4 +1,4 @@
-const store = loadStore(require('{{=it.bundlePath}}'));
+const store = loadStore(require(path.resolve(__dirname, '{{=it.bundlePath}}')));
 const renderFn = store.config.renderFn || reactRender;
 Object.keys(store.docs).forEach(docId => {
   const doc = store.docs[docId];

diff --git a/plugins/jest-snapshots/templates/store-loop/bundle.ts.js b/plugins/jest-snapshots/templates/store-loop/bundle.ts.js
@@ -1,4 +1,4 @@
-const store = loadStore(require('{{=it.bundlePath}}'));
+const store = loadStore(require(path.resolve(__dirname, '{{=it.bundlePath}}')));
 const renderFn = store.config.renderFn || reactRender;
 Object.keys(store.docs).forEach(docId => {
   const doc = store.docs[docId];

diff --git a/plugins/jest-snapshots/templates/store-loop/imports.cjs.js b/plugins/jest-snapshots/templates/store-loop/imports.cjs.js
@@ -1,4 +1,4 @@
-  const configPath = '{{=it.configPath}}';
+  const configPath = path.resolve(__dirname, '{{=it.configPath}}');
   const config = loadConfigurations(configPath);
   if (!config.renderFn) {
     config.renderFn = reactRender;

diff --git a/plugins/jest-snapshots/templates/store-loop/imports.esm.js b/plugins/jest-snapshots/templates/store-loop/imports.esm.js
@@ -1,4 +1,4 @@
-  const configPath = '{{=it.configPath}}';
+  const configPath = path.resolve(__dirname, '{{=it.configPath}}');
   const config = loadConfigurations(configPath);
   if (!config.renderFn) {
     config.renderFn = reactRender;

diff --git a/plugins/jest-snapshots/templates/store-loop/imports.ts.js b/plugins/jest-snapshots/templates/store-loop/imports.ts.js
@@ -1,4 +1,4 @@
-  const configPath = '{{=it.configPath}}';
+  const configPath = path.resolve(__dirname, '{{=it.configPath}}');
   const config = loadConfigurations(configPath);
   if (!config.renderFn) {
     config.renderFn = reactRender;

diff --git a/plugins/jest-snapshots/test/__snapshots__/enzyme-bundle-cjs.test.ts.snap b/plugins/jest-snapshots/test/__snapshots__/enzyme-bundle-cjs.test.ts.snap
@@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`enzyme bundle cjs 1`] = `
-"const { loadStore } = require('@component-controls/store');
+"const path = require('path');
+const { loadStore } = require('@component-controls/store');
 const { render: reactRender } = require('@component-controls/render/react');
 
 const { mount, configure } = require('enzyme');
@@ -35,7 +36,7 @@ describe('component-controls generated', () => {
     });
     done();
   });
-  const store = loadStore(require('/Users/atanasster/component-controls/plugins/jest-snapshots/test/bundle/component-controls.js'));
+  const store = loadStore(require(path.resolve(__dirname, './bundle/component-controls.js')));
   const renderFn = store.config.renderFn || reactRender;
   Object.keys(store.docs).forEach(docId => {
     const doc = store.docs[docId];

diff --git a/plugins/jest-snapshots/test/__snapshots__/enzyme-bundle-esm.test.ts.snap b/plugins/jest-snapshots/test/__snapshots__/enzyme-bundle-esm.test.ts.snap
@@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`enzyme bundle esm 1`] = `
-"import { loadStore } from '@component-controls/store';
+"import * as path from 'path';
+import { loadStore } from '@component-controls/store';
 const { render: reactRender } = require('@component-controls/render/react');
 
 import { mount, configure } from 'enzyme';
@@ -35,7 +36,7 @@ describe('component-controls generated', () => {
     });
     done();
   });
-const store = loadStore(require('/Users/atanasster/component-controls/plugins/jest-snapshots/test/bundle/component-controls.js'));
+const store = loadStore(require(path.resolve(__dirname, './bundle/component-controls.js')));
 const renderFn = store.config.renderFn || reactRender;
 Object.keys(store.docs).forEach(docId => {
   const doc = store.docs[docId];

diff --git a/plugins/jest-snapshots/test/__snapshots__/enzyme-bundle-ts.test.ts.snap b/plugins/jest-snapshots/test/__snapshots__/enzyme-bundle-ts.test.ts.snap
@@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`enzyme bundle ts 1`] = `
-"import { loadStore } from '@component-controls/store';
+"import path from 'path';
+import { loadStore } from '@component-controls/store';
 const { render: reactRender } = require('@component-controls/render/react');
 
 import { mount, configure } from 'enzyme';
@@ -35,7 +36,7 @@ describe('component-controls generated', () => {
     });
     done();
   });
-const store = loadStore(require('/Users/atanasster/component-controls/plugins/jest-snapshots/test/bundle/component-controls.js'));
+const store = loadStore(require(path.resolve(__dirname, './bundle/component-controls.js')));
 const renderFn = store.config.renderFn || reactRender;
 Object.keys(store.docs).forEach(docId => {
   const doc = store.docs[docId];