Merge pull request #7674 from storybookjs/ts-migration/addon-storyshots

Migrate addon storyshots to TS

addons/storyshots/storyshots-core/package.json

@@ -22,6 +22,7 @@
     "README.md"
   ],
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "build-storybook": "build-storybook",
     "example": "jest storyshot.test",
@@ -31,6 +32,10 @@
   "dependencies": {
     "@jest/transform": "^24.9.0",
     "@storybook/addons": "5.3.0-alpha.13",
+    "@storybook/client-api": "5.3.0-alpha.13",
+    "@types/glob": "^7.1.1",
+    "@types/jest": "^24.0.16",
+    "@types/jest-specific-snapshot": "^0.5.3",
     "core-js": "^3.0.1",
     "glob": "^7.1.3",
     "global": "^4.3.2",

addons/storyshots/storyshots-core/src/Stories2SnapsConverter.test.js → addons/storyshots/storyshots-core/src/Stories2SnapsConverter.test.ts

@@ -1,4 +1,4 @@
-import Stories2SnapsConverter from './Stories2SnapsConverter';
+import { Stories2SnapsConverter } from './Stories2SnapsConverter';
 
 const target = new Stories2SnapsConverter();
 

addons/storyshots/storyshots-core/src/Stories2SnapsConverter.js → addons/storyshots/storyshots-core/src/Stories2SnapsConverter.ts

@@ -1,14 +1,22 @@
 import path from 'path';
 import dedent from 'ts-dedent';
 
-const defaultOptions = {
+const defaultOptions: Stories2SnapsConverterOptions = {
   snapshotsDirName: '__snapshots__',
   snapshotExtension: '.storyshot',
   storiesExtensions: ['.js', '.jsx', '.ts', '.tsx'],
 };
 
-class DefaultStories2SnapsConverter {
-  constructor(options = {}) {
+export interface Stories2SnapsConverterOptions {
+  storiesExtensions: string[];
+  snapshotExtension: string;
+  snapshotsDirName: string;
+}
+
+export class Stories2SnapsConverter {
+  options: Stories2SnapsConverterOptions;
+
+  constructor(options: Partial<Stories2SnapsConverterOptions> = {}) {
     this.options = {
       ...defaultOptions,
       ...options,
@@ -17,14 +25,14 @@ class DefaultStories2SnapsConverter {
 
   getSnapshotExtension = () => this.options.snapshotExtension;
 
-  getStoryshotFile(fileName) {
+  getStoryshotFile(fileName: string) {
     const { dir, name } = path.parse(fileName);
     const { snapshotsDirName, snapshotExtension } = this.options;
 
     return path.format({ dir: path.join(dir, snapshotsDirName), name, ext: snapshotExtension });
   }
 
-  getSnapshotFileName(context) {
+  getSnapshotFileName(context: { fileName?: string, kind: any }) {
     const { fileName, kind } = context;
 
     if (!fileName) {
@@ -45,7 +53,7 @@ class DefaultStories2SnapsConverter {
     return this.getStoryshotFile(fileName);
   }
 
-  getPossibleStoriesFiles(storyshotFile) {
+  getPossibleStoriesFiles(storyshotFile: string) {
     const { dir, name } = path.parse(storyshotFile);
     const { storiesExtensions } = this.options;
 
@@ -58,5 +66,3 @@ class DefaultStories2SnapsConverter {
     );
   }
 }
-
-export default DefaultStories2SnapsConverter;

addons/storyshots/storyshots-core/src/api/StoryshotsOptions.ts

@@ -0,0 +1,23 @@
+import { IOptions } from 'glob';
+import { Stories2SnapsConverter } from '../Stories2SnapsConverter';
+import { SupportedFramework } from '../frameworks';
+import { RenderTree } from '../frameworks/Loader';
+
+export interface StoryshotsOptions {
+  asyncJest?: boolean;
+  config?: (options: any) => void;
+  integrityOptions?: IOptions | false;
+  configPath?: string;
+  suite?: string;
+  storyKindRegex?: RegExp | string;
+  storyNameRegex?: RegExp | string;
+  framework?: SupportedFramework;
+  test?: (story: any, context: any, renderTree: RenderTree, options?: any) => any;
+  renderer?: Function;
+  snapshotSerializers?: jest.SnapshotSerializerPlugin[];
+  /**
+   * @Deprecated The functionality of this option is completely covered by snapshotSerializers which should be used instead.
+   */
+  serializer?: any;
+  stories2snapsConverter?: Stories2SnapsConverter;
+}

addons/storyshots/storyshots-core/src/api/ensureOptionsDefaults.js → addons/storyshots/storyshots-core/src/api/ensureOptionsDefaults.ts

@@ -1,10 +1,11 @@
 import { snapshotWithOptions } from '../test-bodies';
-import Stories2SnapsConverter from '../Stories2SnapsConverter';
+import { Stories2SnapsConverter } from '../Stories2SnapsConverter';
+import { StoryshotsOptions } from './StoryshotsOptions';
 
 const ignore = ['**/node_modules/**'];
 const defaultStories2SnapsConverter = new Stories2SnapsConverter();
 
-function getIntegrityOptions({ integrityOptions }) {
+function getIntegrityOptions({ integrityOptions }: StoryshotsOptions) {
   if (integrityOptions === false) {
     return false;
   }
@@ -13,14 +14,18 @@ function getIntegrityOptions({ integrityOptions }) {
     return false;
   }
 
+  const ignoreOption: string[] = Array.isArray(integrityOptions.ignore)
+    ? integrityOptions.ignore
+    : [];
+
   return {
     ...integrityOptions,
-    ignore: [...ignore, ...(integrityOptions.ignore || [])],
+    ignore: [...ignore, ...ignoreOption],
     absolute: true,
   };
 }
 
-function ensureOptionsDefaults(options) {
+function ensureOptionsDefaults(options: StoryshotsOptions) {
   const {
     suite = 'Storyshots',
     asyncJest,

addons/storyshots/storyshots-core/src/api/index.js → addons/storyshots/storyshots-core/src/api/index.ts

@@ -4,22 +4,27 @@ import ensureOptionsDefaults from './ensureOptionsDefaults';
 import snapshotsTests from './snapshotsTestsTemplate';
 import integrityTest from './integrityTestTemplate';
 import loadFramework from '../frameworks/frameworkLoader';
+import { StoryshotsOptions } from './StoryshotsOptions';
 
 global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || {};
 
-const methods = ['beforeAll', 'beforeEach', 'afterEach', 'afterAll'];
+type TestMethod = 'beforeAll' | 'beforeEach' | 'afterEach' | 'afterAll';
+const methods: TestMethod[] = ['beforeAll', 'beforeEach', 'afterEach', 'afterAll'];
 
-function callTestMethodGlobals(testMethod) {
+function callTestMethodGlobals(
+  testMethod: { [key in TestMethod]?: Function } & { [key in string]: any }
+) {
   methods.forEach(method => {
     if (typeof testMethod[method] === 'function') {
       global[method](testMethod[method]);
     }
   });
 }
 
-const isDisabled = parameter => parameter === false || (parameter && parameter.disable === true);
+const isDisabled = (parameter: any) =>
+  parameter === false || (parameter && parameter.disable === true);
 
-function testStorySnapshots(options = {}) {
+function testStorySnapshots(options: StoryshotsOptions = {}) {
   if (typeof describe !== 'function') {
     throw new Error('testStorySnapshots is intended only to be used inside jest');
   }
@@ -47,23 +52,29 @@ function testStorySnapshots(options = {}) {
     .raw()
     .filter(({ name }) => (storyNameRegex ? name.match(storyNameRegex) : true))
     .filter(({ kind }) => (storyKindRegex ? kind.match(storyKindRegex) : true))
-    .reduce((acc, item) => {
-      const { kind, storyFn: render, parameters } = item;
-      const existing = acc.find(i => i.kind === kind);
-      const { fileName } = item.parameters;
+    .reduce(
+      (acc, item) => {
+        const { kind, storyFn: render, parameters } = item;
+        const existing = acc.find((i: any) => i.kind === kind);
+        const { fileName } = item.parameters;
 
-      if (!isDisabled(parameters.storyshots)) {
-        if (existing) {
-          existing.children.push({ ...item, render, fileName });
-        } else {
-          acc.push({
-            kind,
-            children: [{ ...item, render, fileName }],
-          });
+        if (!isDisabled(parameters.storyshots)) {
+          if (existing) {
+            existing.children.push({ ...item, render, fileName });
+          } else {
+            acc.push({
+              kind,
+              children: [{ ...item, render, fileName }],
+            });
+          }
         }
-      }
-      return acc;
-    }, []);
+        return acc;
+      },
+      [] as Array<{
+        kind: string;
+        children: any[];
+      }>
+    );
 
   if (data.length) {
     callTestMethodGlobals(testMethod);

addons/storyshots/storyshots-core/src/api/integrityTestTemplate.js → addons/storyshots/storyshots-core/src/api/integrityTestTemplate.ts

@@ -2,7 +2,7 @@ import fs from 'fs';
 import glob from 'glob';
 import { describe, it } from 'global';
 
-function integrityTest(integrityOptions, stories2snapsConverter) {
+function integrityTest(integrityOptions: any, stories2snapsConverter: any) {
   if (integrityOptions === false) {
     return;
   }

addons/storyshots/storyshots-core/src/api/snapshotsTestsTemplate.js → addons/storyshots/storyshots-core/src/api/snapshotsTestsTemplate.ts

@@ -1,12 +1,12 @@
 import { describe, it } from 'global';
 import { addSerializer } from 'jest-specific-snapshot';
 
-function snapshotTest({ item, asyncJest, framework, testMethod, testMethodParams }) {
+function snapshotTest({ item, asyncJest, framework, testMethod, testMethodParams }: any) {
   const { name } = item;
   const context = { ...item, framework };
 
   if (asyncJest === true) {
-    it(name, done =>
+    it(name, (done: jest.DoneCallback) =>
       testMethod({
         done,
         story: item,
@@ -25,28 +25,28 @@ function snapshotTest({ item, asyncJest, framework, testMethod, testMethodParams
   }
 }
 
-function snapshotTestSuite({ item, suite, ...restParams }) {
+function snapshotTestSuite({ item, suite, ...restParams }: any) {
   const { kind, children } = item;
   // eslint-disable-next-line jest/valid-describe
   describe(suite, () => {
     // eslint-disable-next-line jest/valid-describe
     describe(kind, () => {
-      children.forEach(c => {
+      children.forEach((c: any) => {
         snapshotTest({ item: c, ...restParams });
       });
     });
   });
 }
 
-function snapshotsTests({ data, snapshotSerializers, ...restParams }) {
+function snapshotsTests({ data, snapshotSerializers, ...restParams }: any) {
   if (snapshotSerializers) {
-    snapshotSerializers.forEach(serializer => {
+    snapshotSerializers.forEach((serializer: any) => {
       addSerializer(serializer);
       expect.addSnapshotSerializer(serializer);
     });
   }
 
-  data.forEach(item => {
+  data.forEach((item: any) => {
     snapshotTestSuite({ item, ...restParams });
   });
 }

addons/storyshots/storyshots-core/src/frameworks/Loader.ts

@@ -0,0 +1,17 @@
+import { ClientApi } from '@storybook/client-api';
+import { StoryshotsOptions } from '../api/StoryshotsOptions';
+import { SupportedFramework } from './SupportedFramework';
+
+export type RenderTree = (story: any, context?: any, options?: any) => any;
+
+export interface Loader {
+  load: (
+    options: StoryshotsOptions
+  ) => {
+    framework: SupportedFramework;
+    renderTree: RenderTree;
+    renderShallowTree: any;
+    storybook: ClientApi;
+  };
+  test: (options: StoryshotsOptions) => boolean;
+}

addons/storyshots/storyshots-core/src/frameworks/SupportedFramework.ts

@@ -0,0 +1,9 @@
+export type SupportedFramework =
+  | 'angular'
+  | 'html'
+  | 'preact'
+  | 'react'
+  | 'riot'
+  | 'react-native'
+  | 'svelte'
+  | 'vue';

addons/storyshots/storyshots-core/src/frameworks/angular/loader.js → addons/storyshots/storyshots-core/src/frameworks/angular/loader.ts

@@ -2,6 +2,8 @@ import 'core-js';
 import 'core-js/es/reflect';
 import hasDependency from '../hasDependency';
 import configure from '../configure';
+import { Loader } from '../Loader';
+import { StoryshotsOptions } from '../../api/StoryshotsOptions';
 
 function setupAngularJestPreset() {
   // Needed to prevent "Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten."
@@ -18,13 +20,13 @@ function setupAngularJestPreset() {
   require.requireActual('jest-preset-angular/setupJest');
 }
 
-function test(options) {
+function test(options: StoryshotsOptions): boolean {
   return (
     options.framework === 'angular' || (!options.framework && hasDependency('@storybook/angular'))
   );
 }
 
-function load(options) {
+function load(options: StoryshotsOptions) {
   setupAngularJestPreset();
 
   const { configPath, config } = options;
@@ -33,7 +35,7 @@ function load(options) {
   configure({ configPath, config, storybook });
 
   return {
-    framework: 'angular',
+    framework: 'angular' as const,
     renderTree: require.requireActual('./renderTree').default,
     renderShallowTree: () => {
       throw new Error('Shallow renderer is not supported for angular');
@@ -42,7 +44,9 @@ function load(options) {
   };
 }
 
-export default {
+const angularLoader: Loader = {
   load,
   test,
 };
+
+export default angularLoader;

addons/storyshots/storyshots-core/src/frameworks/angular/renderTree.js → addons/storyshots/storyshots-core/src/frameworks/angular/renderTree.ts

@@ -14,18 +14,21 @@ import { initModuleData } from './helpers';
 addSerializer(HTMLCommentSerializer);
 addSerializer(AngularSnapshotSerializer);
 
-function getRenderedTree(story) {
+function getRenderedTree(story: any) {
   const currentStory = story.render();
 
   const { moduleMeta, AppComponent } = initModuleData(currentStory);
 
-  TestBed.configureTestingModule({
-    imports: [...moduleMeta.imports],
-    declarations: [...moduleMeta.declarations],
-    providers: [...moduleMeta.providers],
-    schemas: [NO_ERRORS_SCHEMA, ...moduleMeta.schemas],
-    bootstrap: [...moduleMeta.bootstrap],
-  });
+  TestBed.configureTestingModule(
+    // TODO: take a look at `bootstrap` because it looks it does not exists in TestModuleMetadata
+    {
+      imports: [...moduleMeta.imports],
+      declarations: [...moduleMeta.declarations],
+      providers: [...moduleMeta.providers],
+      schemas: [NO_ERRORS_SCHEMA, ...moduleMeta.schemas],
+      bootstrap: [...moduleMeta.bootstrap],
+    } as any
+  );
 
   TestBed.overrideModule(BrowserDynamicTestingModule, {
     set: {

addons/storyshots/storyshots-core/src/frameworks/configure.js → addons/storyshots/storyshots-core/src/frameworks/configure.ts

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 
-function getConfigPathParts(configPath) {
+function getConfigPathParts(configPath: string): string {
   const resolvedConfigPath = path.resolve(configPath);
 
   if (fs.lstatSync(resolvedConfigPath).isDirectory()) {
@@ -11,7 +11,7 @@ function getConfigPathParts(configPath) {
   return resolvedConfigPath;
 }
 
-function configure(options) {
+function configure(options: { configPath?: string; config: any; storybook: any }): void {
   const { configPath = '.storybook', config, storybook } = options;
 
   if (config && typeof config === 'function') {