Refactor test-bodies

addons/storyshots/src/angular/loader.js

@@ -28,6 +28,7 @@ function load(options) {
   runWithRequireContext(content, contextOpts);
 
   return {
+    renderTree: require('./renderTree').default,
     framework: 'angular',
     storybook,
   };

addons/storyshots/src/angular/renderTree.js

@@ -0,0 +1,61 @@
+import 'jest-preset-angular/setupJest';
+import AngularSnapshotSerializer from 'jest-preset-angular/AngularSnapshotSerializer';
+import HTMLCommentSerializer from 'jest-preset-angular/HTMLCommentSerializer';
+import { TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { addSerializer } from 'jest-specific-snapshot';
+import { createAnnotatedComponent } from './helpers';
+
+addSerializer(HTMLCommentSerializer);
+addSerializer(AngularSnapshotSerializer);
+
+function getRenderedTree(story, context) {
+  const storyElement = story.render(context);
+
+  const {
+    // props,
+    // component,
+    moduleMetadata = { imports: [], schemas: [], declarations: [], providers: [] },
+  } = storyElement;
+
+  const moduleMeta = {
+    imports: [],
+    schemas: [],
+    declarations: [],
+    providers: [],
+    ...moduleMetadata,
+  };
+
+  const { component: annotatedComponent } = createAnnotatedComponent(storyElement);
+
+  TestBed.configureTestingModule({
+    imports: [...moduleMeta.imports],
+    declarations: [annotatedComponent, ...moduleMeta.declarations],
+    providers: [...moduleMeta.providers],
+    schemas: [NO_ERRORS_SCHEMA, ...moduleMeta.schemas],
+  });
+
+  // this is async. Should be somehow called in beforeEach
+  TestBed.compileComponents();
+
+  const tree = TestBed.createComponent(annotatedComponent);
+  tree.detectChanges();
+
+  return tree;
+
+  // TestBed.configureTestingModule({
+  //   imports: [...moduleMeta.imports],
+  //   declarations: [component, ...moduleMeta.declarations],
+  //   providers: [...moduleMeta.providers],
+  //   schemas: [NO_ERRORS_SCHEMA, ...moduleMeta.schemas],
+  // });
+  //
+  // TestBed.compileComponents();
+  //
+  // const tree = TestBed.createComponent(component);
+  // tree.detectChanges();
+  //
+  // return tree;
+}
+
+export default getRenderedTree;

addons/storyshots/src/index.js

@@ -1,27 +1,24 @@
 /* eslint-disable no-loop-func */
-
 import fs from 'fs';
 import glob from 'glob';
 import global, { describe, it } from 'global';
-
 import addons from '@storybook/addons';
-
 import loadFramework from './frameworkLoader';
 import createChannel from './storybook-channel-mock';
-import { snapshotWithOptions } from './test-bodies';
 import { getPossibleStoriesFiles, getSnapshotFileName } from './utils';
+import { multiSnapshotWithOptions, snapshotWithOptions, snapshot } from './test-bodies';
+import { shallowSnapshot, renderOnly } from './react/test-bodies';
+
+global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || {};
 
 export {
+  getSnapshotFileName,
   snapshot,
   multiSnapshotWithOptions,
   snapshotWithOptions,
   shallowSnapshot,
   renderOnly,
-} from './test-bodies';
+};
-
-export { getSnapshotFileName };
-
-global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || {};
 
 export default function testStorySnapshots(options = {}) {
   if (typeof describe !== 'function') {
@@ -30,7 +27,7 @@ export default function testStorySnapshots(options = {}) {
 
   addons.setChannel(createChannel());
 
-  const { framework, storybook } = loadFramework(options);
+  const { framework, storybook, renderTree } = loadFramework(options);
 
   // NOTE: keep `suit` typo for backwards compatibility
   const suite = options.suite || options.suit || 'Storyshots';
@@ -73,6 +70,7 @@ export default function testStorySnapshots(options = {}) {
             return testMethod({
               story,
               context,
+              renderTree,
             });
           });
         }

addons/storyshots/src/react/loader.js

@@ -26,6 +26,7 @@ function load(options) {
   runWithRequireContext(content, contextOpts);
 
   return {
+    renderTree: require('./renderTree').default,
     framework: 'react',
     storybook,
   };

addons/storyshots/src/react/renderTree.js

@@ -0,0 +1,10 @@
+import reactTestRenderer from 'react-test-renderer';
+
+function getRenderedTree(story, context, { renderer, serializer, ...rendererOptions }) {
+  const storyElement = story.render(context);
+  const currentRenderer = renderer || reactTestRenderer.create;
+  const tree = currentRenderer(storyElement, rendererOptions);
+  return serializer ? serializer(tree) : tree;
+}
+
+export default getRenderedTree;

addons/storyshots/src/react/test-bodies.js

@@ -0,0 +1,14 @@
+import reactTestRenderer from 'react-test-renderer';
+import shallow from 'react-test-renderer/shallow';
+
+export function shallowSnapshot({ story, context, options: { renderer, serializer } }) {
+  const shallowRenderer = renderer || shallow.createRenderer();
+  const tree = shallowRenderer.render(story.render(context));
+  const serializedTree = serializer ? serializer(tree) : tree;
+  expect(serializedTree).toMatchSnapshot();
+}
+
+export function renderOnly({ story, context }) {
+  const storyElement = story.render(context);
+  reactTestRenderer.create(storyElement);
+}

addons/storyshots/src/rn/loader.js

@@ -1,3 +1,4 @@
+/* eslint-disable global-require */
 import path from 'path';
 import hasDependency from '../hasDependency';
 
@@ -15,6 +16,7 @@ function load(options) {
   require.requireActual(configPath);
 
   return {
+    renderTree: require('../react/renderTree').default,
     framework: 'rn',
     storybook,
   };

addons/storyshots/src/test-bodies.js

@@ -1,75 +1,13 @@
-import 'jest-preset-angular/setupJest';
+import 'jest-specific-snapshot';
-import AngularSnapshotSerializer from 'jest-preset-angular/AngularSnapshotSerializer';
-import HTMLCommentSerializer from 'jest-preset-angular/HTMLCommentSerializer';
-import { TestBed } from '@angular/core/testing';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-
-import reactTestRenderer from 'react-test-renderer';
-import shallow from 'react-test-renderer/shallow';
-import { addSerializer } from 'jest-specific-snapshot';
 import { getSnapshotFileName } from './utils';
-import { createAnnotatedComponent } from './angular/helpers';
 
-addSerializer(HTMLCommentSerializer);
+export const snapshotWithOptions = options => ({
-addSerializer(AngularSnapshotSerializer);
+  story,
-
+  context,
-function getRenderedTree(story, context, { renderer, serializer, ...rendererOptions }) {
+  renderTree,
-  const storyElement = story.render(context);
+  snapshotFileName,
-
+}) => {
-  if (context.framework === 'angular') {
+  const tree = renderTree(story, context, options);
-    const {
-      // props,
-      // component,
-      moduleMetadata = { imports: [], schemas: [], declarations: [], providers: [] },
-    } = storyElement;
-
-    const moduleMeta = {
-      imports: [],
-      schemas: [],
-      declarations: [],
-      providers: [],
-      ...moduleMetadata,
-    };
-
-    const { component: annotatedComponent } = createAnnotatedComponent(storyElement);
-
-    TestBed.configureTestingModule({
-      imports: [...moduleMeta.imports],
-      declarations: [annotatedComponent, ...moduleMeta.declarations],
-      providers: [...moduleMeta.providers],
-      schemas: [NO_ERRORS_SCHEMA, ...moduleMeta.schemas],
-    });
-
-    // this is async. Should be somehow called in beforeEach
-    TestBed.compileComponents();
-
-    const tree = TestBed.createComponent(annotatedComponent);
-    tree.detectChanges();
-
-    return tree;
-
-    // TestBed.configureTestingModule({
-    //   imports: [...moduleMeta.imports],
-    //   declarations: [component, ...moduleMeta.declarations],
-    //   providers: [...moduleMeta.providers],
-    //   schemas: [NO_ERRORS_SCHEMA, ...moduleMeta.schemas],
-    // });
-    //
-    // TestBed.compileComponents();
-    //
-    // const tree = TestBed.createComponent(component);
-    // tree.detectChanges();
-    //
-    // return tree;
-  }
-
-  const currentRenderer = renderer || reactTestRenderer.create;
-  const tree = currentRenderer(storyElement, rendererOptions);
-  return serializer ? serializer(tree) : tree;
-}
-
-export const snapshotWithOptions = options => ({ story, context, snapshotFileName }) => {
-  const tree = getRenderedTree(story, context, options);
 
   if (snapshotFileName) {
     expect(tree).toMatchSpecificSnapshot(snapshotFileName);
@@ -82,20 +20,13 @@ export const snapshotWithOptions = options => ({ story, context, snapshotFileNam
   }
 };
 
-export const multiSnapshotWithOptions = options => ({ story, context }) => {
+export const multiSnapshotWithOptions = options => ({ story, context, renderTree }) => {
-  snapshotWithOptions(options)({ story, context, snapshotFileName: getSnapshotFileName(context) });
+  snapshotWithOptions(options)({
+    story,
+    context,
+    renderTree,
+    snapshotFileName: getSnapshotFileName(context),
+  });
 };
 
 export const snapshot = snapshotWithOptions({});
-
-export function shallowSnapshot({ story, context, options: { renderer, serializer } }) {
-  const shallowRenderer = renderer || shallow.createRenderer();
-  const tree = shallowRenderer.render(story.render(context));
-  const serializedTree = serializer ? serializer(tree) : tree;
-  expect(serializedTree).toMatchSnapshot();
-}
-
-export function renderOnly({ story, context }) {
-  const storyElement = story.render(context);
-  reactTestRenderer.create(storyElement);
-}