From 97c2b4242f3f5a2056a392c40689e10551f0432b Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Tue, 26 Dec 2017 16:32:18 +0200
Subject: [PATCH 01/41] Initial dirty-half-working-POC of the storyshots for
 angular

---
 addons/storyshots/package.json                |   2 +
 addons/storyshots/src/angular/helpers.js      |  62 +++++
 addons/storyshots/src/angular/utils.js        |  31 +++
 addons/storyshots/src/index.js                |  25 +-
 addons/storyshots/src/test-bodies.js          |  62 ++++-
 addons/storyshots/src/utils.js                |   2 +
 .../src/client/preview/angular/helpers.ts     |   4 +-
 app/angular/src/client/preview/client_api.js  |   8 +-
 .../src/client/preview/client_api.test.js     |  71 ++++--
 app/angular/src/client/preview/story_store.js |  12 +-
 examples/angular-cli/angularshots.test.js     |   8 +
 examples/angular-cli/package.json             |   1 +
 .../addon-actions.stories.storyshot           |  31 +++
 .../addon-knobs.stories.storyshot             |  77 +++++++
 .../addon-notes.stories.storyshot             |  31 +++
 .../custom-metadata.stories.storyshot         |  62 +++++
 .../src/stories/__snapshots__/index.storyshot | 218 ++++++++++++++++++
 .../src/stories/addon-actions.stories.ts      |  23 ++
 .../src/stories/addon-knobs.stories.ts        |  69 ++++++
 .../src/stories/addon-notes.stories.ts        |  33 +++
 .../src/stories/custom-metadata.stories.ts    |  67 ++++++
 .../custom-cva-component.stories.storyshot    |  17 ++
 examples/angular-cli/src/stories/index.ts     | 189 +--------------
 jest.config.js                                |   6 +
 package.json                                  |   3 +-
 tsconfig.json                                 |  13 ++
 yarn.lock                                     |  80 ++++++-
 27 files changed, 987 insertions(+), 220 deletions(-)
 create mode 100644 addons/storyshots/src/angular/helpers.js
 create mode 100644 addons/storyshots/src/angular/utils.js
 create mode 100644 examples/angular-cli/angularshots.test.js
 create mode 100644 examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
 create mode 100644 examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot
 create mode 100644 examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot
 create mode 100644 examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot
 create mode 100644 examples/angular-cli/src/stories/__snapshots__/index.storyshot
 create mode 100644 examples/angular-cli/src/stories/addon-actions.stories.ts
 create mode 100644 examples/angular-cli/src/stories/addon-knobs.stories.ts
 create mode 100644 examples/angular-cli/src/stories/addon-notes.stories.ts
 create mode 100644 examples/angular-cli/src/stories/custom-metadata.stories.ts
 create mode 100644 examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
 create mode 100644 tsconfig.json

diff --git a/addons/storyshots/package.json b/addons/storyshots/package.json
index a882c91872a0..a83d544425e7 100644
--- a/addons/storyshots/package.json
+++ b/addons/storyshots/package.json
@@ -19,6 +19,7 @@
     "babel-runtime": "^6.26.0",
     "glob": "^7.1.2",
     "global": "^4.3.2",
+    "jest-preset-angular": "^5.0.0",
     "jest-specific-snapshot": "^0.3.0",
     "prop-types": "^15.6.0",
     "read-pkg-up": "^3.0.0"
@@ -40,6 +41,7 @@
   },
   "peerDependencies": {
     "@storybook/addons": "^3.3.0-rc.0",
+    "@angular/core": ">=4.0.0",
     "babel-core": "^6.26.0 | ^7.0.0-0",
     "react": "*",
     "react-test-renderer": "*"
diff --git a/addons/storyshots/src/angular/helpers.js b/addons/storyshots/src/angular/helpers.js
new file mode 100644
index 000000000000..6de591d4431d
--- /dev/null
+++ b/addons/storyshots/src/angular/helpers.js
@@ -0,0 +1,62 @@
+import { Component } from '@angular/core';
+import { getPropMetadata, getAnnotations, getParameters } from './utils';
+
+function getComponentMetadata({ component, props = {}, propsMeta = {}, moduleMetadata = {} }) {
+  const componentMetadata = getAnnotations(component)[0] || {};
+  const propsMetadata = getPropMetadata(component);
+  const paramsMetadata = getParameters(component);
+
+  // Object.keys(propsMeta).forEach(key => {
+  //   propsMetadata[key] = props[key];
+  // });
+
+  Object.keys(propsMeta).forEach(key => {
+    propsMetadata[key] = propsMeta[key];
+  });
+
+  const { imports = [], schemas = [], declarations = [], providers = [] } = moduleMetadata;
+
+  return {
+    component,
+    props,
+    componentMeta: componentMetadata,
+    propsMeta: propsMetadata,
+    params: paramsMetadata,
+    moduleMeta: {
+      imports,
+      schemas,
+      declarations,
+      providers,
+    },
+  };
+}
+
+function getAnnotatedComponent(meta, component, propsMeta, params) {
+  const StoryshotComponent = function StoryshotComponent(...args) {
+    component.call(this, ...args);
+  };
+
+  StoryshotComponent.prototype = Object.create(component.prototype);
+  StoryshotComponent.annotations = [new Component(meta)];
+  StoryshotComponent.parameters = params;
+  StoryshotComponent.propsMetadata = propsMeta;
+
+  return StoryshotComponent;
+}
+
+export function createAnnotatedComponent(story) {
+  const { component, componentMeta, props, propsMeta, params, moduleMeta } = getComponentMetadata(
+    story
+  );
+
+  const AnnotatedComponent = getAnnotatedComponent(componentMeta, component, propsMeta, [
+    ...params,
+    ...moduleMeta.providers.map(provider => [provider]),
+  ]);
+
+  return {
+    component: AnnotatedComponent,
+    props,
+    propsMeta,
+  };
+}
diff --git a/addons/storyshots/src/angular/utils.js b/addons/storyshots/src/angular/utils.js
new file mode 100644
index 000000000000..03a810a8d7e8
--- /dev/null
+++ b/addons/storyshots/src/angular/utils.js
@@ -0,0 +1,31 @@
+/* eslint-disable no-param-reassign */
+/* globals window */
+
+function getMeta(component, [name1, name2], defaultValue) {
+  if (!name2) {
+    name2 = name1;
+    name1 = `__${name1}__`;
+  }
+
+  if (component[name1]) {
+    return component[name1];
+  }
+
+  if (component[name2]) {
+    return component[name2];
+  }
+
+  return window.Reflect.getMetadata(name2, component) || defaultValue;
+}
+
+export function getAnnotations(component) {
+  return getMeta(component, ['annotations'], []);
+}
+
+export function getPropMetadata(component) {
+  return getMeta(component, ['__prop__metadata__', 'propMetadata'], {});
+}
+
+export function getParameters(component) {
+  return getMeta(component, ['parameters'], []);
+}
diff --git a/addons/storyshots/src/index.js b/addons/storyshots/src/index.js
index c43acb301824..cb274fea5b79 100644
--- a/addons/storyshots/src/index.js
+++ b/addons/storyshots/src/index.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-loop-func */
 import path from 'path';
 import fs from 'fs';
 import glob from 'glob';
@@ -22,6 +23,7 @@ export { getSnapshotFileName };
 
 let storybook;
 let configPath;
+let framework;
 global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || {};
 
 const babel = require('babel-core');
@@ -38,11 +40,14 @@ export default function testStorySnapshots(options = {}) {
 
   const isStorybook =
     options.framework === 'react' || (!options.framework && hasDependency('@storybook/react'));
+  const isAngularStorybook =
+    options.framework === 'angular' || (!options.framework && hasDependency('@storybook/angular'));
   const isRNStorybook =
     options.framework === 'react-native' ||
     (!options.framework && hasDependency('@storybook/react-native'));
 
   if (isStorybook) {
+    framework = 'react';
     storybook = require.requireActual('@storybook/react');
     // eslint-disable-next-line
     const loadBabelConfig = require('@storybook/react/dist/server/babel_config')
@@ -57,8 +62,26 @@ export default function testStorySnapshots(options = {}) {
       dirname: configDirPath,
     };
 
+    runWithRequireContext(content, contextOpts);
+  } else if (isAngularStorybook) {
+    framework = 'angular';
+    storybook = require.requireActual('@storybook/angular');
+    // eslint-disable-next-line
+    const loadBabelConfig = require('@storybook/angular/dist/server/babel_config')
+      .default;
+    const configDirPath = path.resolve(options.configPath || '.storybook');
+    configPath = path.join(configDirPath, 'config.js');
+
+    const babelConfig = loadBabelConfig(configDirPath);
+    const content = babel.transformFileSync(configPath, babelConfig).code;
+    const contextOpts = {
+      filename: configPath,
+      dirname: configDirPath,
+    };
+
     runWithRequireContext(content, contextOpts);
   } else if (isRNStorybook) {
+    framework = 'rn';
     storybook = require.requireActual('@storybook/react-native');
 
     configPath = path.resolve(options.configPath || 'storybook');
@@ -109,7 +132,7 @@ export default function testStorySnapshots(options = {}) {
           }
 
           it(story.name, () => {
-            const context = { fileName, kind, story: story.name };
+            const context = { fileName, kind, story: story.name, framework };
             return options.test({
               story,
               context,
diff --git a/addons/storyshots/src/test-bodies.js b/addons/storyshots/src/test-bodies.js
index 7380e72ac0dc..ba2bc96c0d36 100644
--- a/addons/storyshots/src/test-bodies.js
+++ b/addons/storyshots/src/test-bodies.js
@@ -1,11 +1,69 @@
+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 reactTestRenderer from 'react-test-renderer';
 import shallow from 'react-test-renderer/shallow';
-import 'jest-specific-snapshot';
+import { addSerializer } from 'jest-specific-snapshot';
 import { getSnapshotFileName } from './utils';
+import { createAnnotatedComponent } from './angular/helpers';
+
+addSerializer(HTMLCommentSerializer);
+addSerializer(AngularSnapshotSerializer);
 
 function getRenderedTree(story, context, { renderer, serializer, ...rendererOptions }) {
-  const currentRenderer = renderer || reactTestRenderer.create;
   const storyElement = story.render(context);
+
+  if (context.framework === 'angular') {
+    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;
 }
diff --git a/addons/storyshots/src/utils.js b/addons/storyshots/src/utils.js
index 36d8ec5c6c6e..fa1281d63c02 100644
--- a/addons/storyshots/src/utils.js
+++ b/addons/storyshots/src/utils.js
@@ -11,6 +11,8 @@ export function getPossibleStoriesFiles(storyshotFile) {
   return [
     path.format({ dir: path.dirname(dir), name, ext: '.js' }),
     path.format({ dir: path.dirname(dir), name, ext: '.jsx' }),
+    path.format({ dir: path.dirname(dir), name, ext: '.ts' }),
+    path.format({ dir: path.dirname(dir), name, ext: '.tsx' }),
   ];
 }
 
diff --git a/app/angular/src/client/preview/angular/helpers.ts b/app/angular/src/client/preview/angular/helpers.ts
index 1c10dbbc98b5..0e7a88df0e97 100644
--- a/app/angular/src/client/preview/angular/helpers.ts
+++ b/app/angular/src/client/preview/angular/helpers.ts
@@ -6,11 +6,11 @@ import {
   NgModuleRef
 } from '@angular/core';
 import {FormsModule} from '@angular/forms'
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
 
 import _debounce from 'lodash-es/debounce';
 
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent } from './components/app.component';
 import { ErrorComponent } from './components/error.component';
 import { NoPreviewComponent } from './components/no-preview.component';
diff --git a/app/angular/src/client/preview/client_api.js b/app/angular/src/client/preview/client_api.js
index 0a17a4d48c5d..821f930bc6d1 100644
--- a/app/angular/src/client/preview/client_api.js
+++ b/app/angular/src/client/preview/client_api.js
@@ -69,8 +69,10 @@ export default class ClientApi {
         getStory
       );
 
+      const fileName = m ? m.filename : null;
+
       // Add the fully decorated getStory function.
-      this._storyStore.addStory(kind, storyName, getDecoratedStory);
+      this._storyStore.addStory(kind, storyName, getDecoratedStory, fileName);
       return api;
     };
 
@@ -84,11 +86,13 @@ export default class ClientApi {
 
   getStorybook() {
     return this._storyStore.getStoryKinds().map(kind => {
+      const fileName = this._storyStore.getStoryFileName(kind);
+
       const stories = this._storyStore.getStories(kind).map(name => {
         const render = this._storyStore.getStory(kind, name);
         return { name, render };
       });
-      return { kind, stories };
+      return { kind, fileName, stories };
     });
   }
 }
diff --git a/app/angular/src/client/preview/client_api.test.js b/app/angular/src/client/preview/client_api.test.js
index cb67ce2e59ab..2d8569d82c44 100644
--- a/app/angular/src/client/preview/client_api.test.js
+++ b/app/angular/src/client/preview/client_api.test.js
@@ -7,8 +7,8 @@ class StoryStore {
     this.stories = [];
   }
 
-  addStory(kind, story, fn) {
-    this.stories.push({ kind, story, fn });
+  addStory(kind, story, fn, fileName) {
+    this.stories.push({ kind, story, fn, fileName });
   }
 
   getStoryKinds() {
@@ -29,6 +29,11 @@ class StoryStore {
     }, []);
   }
 
+  getStoryFileName(kind) {
+    const story = this.stories.find(info => info.kind === kind);
+    return story ? story.fileName : null;
+  }
+
   getStory(kind, name) {
     return this.stories.reduce((fn, info) => {
       if (!fn && info.kind === kind && info.story === name) {
@@ -55,7 +60,7 @@ describe('preview.client_api', () => {
         },
       });
 
-      api.storiesOf('none').aa();
+      api.storiesOf('none', module).aa();
       expect(data).toBe('foo');
     });
 
@@ -76,7 +81,7 @@ describe('preview.client_api', () => {
       });
 
       api
-        .storiesOf('none')
+        .storiesOf('none', module)
         .aa()
         .bb();
       expect(data).toEqual(['foo', 'bar']);
@@ -92,7 +97,7 @@ describe('preview.client_api', () => {
         },
       });
 
-      api.storiesOf('none').aa();
+      api.storiesOf('none', module).aa();
       expect(data).toBe('function');
     });
 
@@ -112,7 +117,7 @@ describe('preview.client_api', () => {
         },
       });
 
-      api.storiesOf('none').bb();
+      api.storiesOf('none', module).bb();
       expect(data).toBe('foo');
     });
 
@@ -127,7 +132,7 @@ describe('preview.client_api', () => {
         },
       });
 
-      api.storiesOf(kind).aa();
+      api.storiesOf(kind, module).aa();
       expect(data).toBe(kind);
     });
   });
@@ -136,7 +141,7 @@ describe('preview.client_api', () => {
     it('should add local decorators', () => {
       const storyStore = new StoryStore();
       const api = new ClientAPI({ storyStore });
-      const localApi = api.storiesOf('none');
+      const localApi = api.storiesOf('none', module);
       localApi.addDecorator(fn => `aa-${fn()}`);
 
       localApi.add('storyName', () => 'Hello');
@@ -147,7 +152,7 @@ describe('preview.client_api', () => {
       const storyStore = new StoryStore();
       const api = new ClientAPI({ storyStore });
       api.addDecorator(fn => `bb-${fn()}`);
-      const localApi = api.storiesOf('none');
+      const localApi = api.storiesOf('none', module);
 
       localApi.add('storyName', () => 'Hello');
       expect(storyStore.stories[0].fn()).toBe('bb-Hello');
@@ -156,7 +161,7 @@ describe('preview.client_api', () => {
     it('should utilize both decorators at once', () => {
       const storyStore = new StoryStore();
       const api = new ClientAPI({ storyStore });
-      const localApi = api.storiesOf('none');
+      const localApi = api.storiesOf('none', module);
 
       api.addDecorator(fn => `aa-${fn()}`);
       localApi.addDecorator(fn => `bb-${fn()}`);
@@ -168,7 +173,7 @@ describe('preview.client_api', () => {
     it('should pass the context', () => {
       const storyStore = new StoryStore();
       const api = new ClientAPI({ storyStore });
-      const localApi = api.storiesOf('none');
+      const localApi = api.storiesOf('none', module);
       localApi.addDecorator(fn => `aa-${fn()}`);
 
       localApi.add('storyName', ({ kind, story }) => `${kind}-${story}`);
@@ -183,7 +188,7 @@ describe('preview.client_api', () => {
     it('should have access to the context', () => {
       const storyStore = new StoryStore();
       const api = new ClientAPI({ storyStore });
-      const localApi = api.storiesOf('none');
+      const localApi = api.storiesOf('none', module);
       localApi.addDecorator((fn, { kind, story }) => `${kind}-${story}-${fn()}`);
 
       localApi.add('storyName', () => 'Hello');
@@ -222,16 +227,53 @@ describe('preview.client_api', () => {
         'story-2.1': () => 'story-2.1',
         'story-2.2': () => 'story-2.2',
       };
-      const kind1 = api.storiesOf('kind-1');
+      const kind1 = api.storiesOf('kind-1', { filename: 'kind1.js' });
+      kind1.add('story-1.1', functions['story-1.1']);
+      kind1.add('story-1.2', functions['story-1.2']);
+      const kind2 = api.storiesOf('kind-2', { filename: 'kind2.js' });
+      kind2.add('story-2.1', functions['story-2.1']);
+      kind2.add('story-2.2', functions['story-2.2']);
+      const book = api.getStorybook();
+      expect(book).toEqual([
+        {
+          kind: 'kind-1',
+          fileName: 'kind1.js',
+          stories: [
+            { name: 'story-1.1', render: functions['story-1.1'] },
+            { name: 'story-1.2', render: functions['story-1.2'] },
+          ],
+        },
+        {
+          kind: 'kind-2',
+          fileName: 'kind2.js',
+          stories: [
+            { name: 'story-2.1', render: functions['story-2.1'] },
+            { name: 'story-2.2', render: functions['story-2.2'] },
+          ],
+        },
+      ]);
+    });
+
+    it('should return storybook with file names when module with file name provided', () => {
+      const storyStore = new StoryStore();
+      const api = new ClientAPI({ storyStore });
+      const functions = {
+        'story-1.1': () => 'story-1.1',
+        'story-1.2': () => 'story-1.2',
+        'story-2.1': () => 'story-2.1',
+        'story-2.2': () => 'story-2.2',
+      };
+      const kind1 = api.storiesOf('kind-1', { filename: 'foo' });
       kind1.add('story-1.1', functions['story-1.1']);
       kind1.add('story-1.2', functions['story-1.2']);
-      const kind2 = api.storiesOf('kind-2');
+      const kind2 = api.storiesOf('kind-2', { filename: 'bar' });
       kind2.add('story-2.1', functions['story-2.1']);
       kind2.add('story-2.2', functions['story-2.2']);
       const book = api.getStorybook();
       expect(book).toEqual([
         {
           kind: 'kind-1',
+          fileName: 'foo',
           stories: [
             { name: 'story-1.1', render: functions['story-1.1'] },
             { name: 'story-1.2', render: functions['story-1.2'] },
@@ -239,6 +281,7 @@ describe('preview.client_api', () => {
         },
         {
           kind: 'kind-2',
+          fileName: 'bar',
           stories: [
             { name: 'story-2.1', render: functions['story-2.1'] },
             { name: 'story-2.2', render: functions['story-2.2'] },
diff --git a/app/angular/src/client/preview/story_store.js b/app/angular/src/client/preview/story_store.js
index 99ebbc02f740..000deeb2aaa9 100644
--- a/app/angular/src/client/preview/story_store.js
+++ b/app/angular/src/client/preview/story_store.js
@@ -12,10 +12,11 @@ export default class StoryStore {
     this._data = {};
   }
 
-  addStory(kind, name, fn) {
+  addStory(kind, name, fn, fileName) {
     if (!this._data[kind]) {
       this._data[kind] = {
         kind,
+        fileName,
         index: getId(),
         stories: {},
       };
@@ -47,6 +48,15 @@ export default class StoryStore {
       .map(info => info.name);
   }
 
+  getStoryFileName(kind) {
+    const storiesKind = this._data[kind];
+    if (!storiesKind) {
+      return null;
+    }
+
+    return storiesKind.fileName;
+  }
+
   getStory(kind, name) {
     const storiesKind = this._data[kind];
     if (!storiesKind) {
diff --git a/examples/angular-cli/angularshots.test.js b/examples/angular-cli/angularshots.test.js
new file mode 100644
index 000000000000..3b6b1f9ad06a
--- /dev/null
+++ b/examples/angular-cli/angularshots.test.js
@@ -0,0 +1,8 @@
+import path from 'path';
+import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
+
+initStoryshots({
+  framework: 'angular',
+  configPath: path.join(__dirname, '.storybook'),
+  test: multiSnapshotWithOptions({}),
+});
diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
index 3194f55468d0..cce505531608 100644
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@@ -34,6 +34,7 @@
     "@storybook/addon-actions": "^3.3.0-rc.0",
     "@storybook/addon-links": "^3.3.0-rc.0",
     "@storybook/addon-notes": "^3.3.0-rc.0",
+    "@storybook/addon-storyshots": "^3.3.0-rc.0",
     "@storybook/addons": "^3.3.0-rc.0",
     "@storybook/angular": "^3.3.0-rc.0",
     "@types/jasmine": "~2.8.2",
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
new file mode 100644
index 000000000000..f544931485dc
--- /dev/null
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon Actions Action and method 1`] = `
+<button-component
+  onClick={[Function EventEmitter]}
+  text=""
+>
+  
+        <button
+    _ngcontent-c5=""
+  >
+    
+  </button>
+    
+</button-component>
+`;
+
+exports[`Storyshots Addon Actions Action only 1`] = `
+<button-component
+  onClick={[Function EventEmitter]}
+  text=""
+>
+  
+        <button
+    _ngcontent-c4=""
+  >
+    
+  </button>
+    
+</button-component>
+`;
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot
new file mode 100644
index 000000000000..a6d2a30d2997
--- /dev/null
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot
@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon Knobs All knobs 1`] = `
+<simple-knobs-component
+  cd={[Function ViewRef_]}
+  knobChanged={[Function Function]}
+  setPaneKnobs={[Function Function]}
+>
+  
+      <div
+    ng-reflect-ng-style="[object Object]"
+    style="border-radius: 8px;"
+  >
+    
+        
+    <h1>
+      My name is ,
+    </h1>
+    
+        
+    <h3>
+      today is 
+    </h3>
+    
+        
+    
+    
+        
+    
+    <p>
+      I'm out of .
+    </p>
+     
+    
+    
+        
+    <p>
+      Also, I have:
+    </p>
+    
+        
+    <ul>
+      
+          
+      
+      
+        
+    </ul>
+    
+        
+    
+    
+        
+    
+    <p>
+      Leave me alone!
+    </p>
+    
+      
+  </div>
+    
+</simple-knobs-component>
+`;
+
+exports[`Storyshots Addon Knobs Simple 1`] = `
+<simple-knobs-component
+  cd={[Function ViewRef_]}
+  knobChanged={[Function Function]}
+  setPaneKnobs={[Function Function]}
+>
+  
+      <div>
+    I am  and I'm  years old.
+  </div>
+    
+</simple-knobs-component>
+`;
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot
new file mode 100644
index 000000000000..182ee5c71d16
--- /dev/null
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon Notes Note with HTML 1`] = `
+<button-component
+  onClick={[Function EventEmitter]}
+  text=""
+>
+  
+        <button
+    _ngcontent-c7=""
+  >
+    
+  </button>
+    
+</button-component>
+`;
+
+exports[`Storyshots Addon Notes Simple note 1`] = `
+<button-component
+  onClick={[Function EventEmitter]}
+  text=""
+>
+  
+        <button
+    _ngcontent-c6=""
+  >
+    
+  </button>
+    
+</button-component>
+`;
diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot
new file mode 100644
index 000000000000..d3a4b5f7c282
--- /dev/null
+++ b/examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot
@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Custom Pipe Default 1`] = `
+<name>
+  <h1>
+    CustomPipe: undefined
+  </h1>
+</name>
+`;
+
+exports[`Storyshots Custom Pipe/With Knobs NameComponent 1`] = `
+<name
+  cd={[Function ViewRef_]}
+  knobChanged={[Function Function]}
+  setPaneKnobs={[Function Function]}
+>
+  <h1>
+    CustomPipe: undefined
+  </h1>
+</name>
+`;
+
+exports[`Storyshots Custom ngModule metadata simple 1`] = `
+<simple-service-component
+  dummy={[Function DummyService]}
+>
+  
+      <p>
+    :
+  </p>
+      <ul>
+    
+        
+    
+    
+      
+  </ul>
+    
+</simple-service-component>
+`;
+
+exports[`Storyshots Custom ngModule metadata with knobs 1`] = `
+<simple-service-component
+  cd={[Function ViewRef_]}
+  dummy={[Function DummyService]}
+  knobChanged={[Function Function]}
+  setPaneKnobs={[Function Function]}
+>
+  
+      <p>
+    :
+  </p>
+      <ul>
+    
+        
+    
+    
+      
+  </ul>
+    
+</simple-service-component>
+`;
diff --git a/examples/angular-cli/src/stories/__snapshots__/index.storyshot b/examples/angular-cli/src/stories/__snapshots__/index.storyshot
new file mode 100644
index 000000000000..0eecf1b5062f
--- /dev/null
+++ b/examples/angular-cli/src/stories/__snapshots__/index.storyshot
@@ -0,0 +1,218 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Another Button button with link to another story 1`] = `
+<button-component
+  onClick={[Function EventEmitter]}
+  text=""
+>
+  
+        <button
+    _ngcontent-c3=""
+  >
+    
+  </button>
+    
+</button-component>
+`;
+
+exports[`Storyshots Button with some emoji 1`] = `
+<button-component
+  onClick={[Function EventEmitter]}
+  text=""
+>
+  
+        <button
+    _ngcontent-c2=""
+  >
+    
+  </button>
+    
+</button-component>
+`;
+
+exports[`Storyshots Button with text 1`] = `
+<button-component
+  onClick={[Function EventEmitter]}
+  text=""
+>
+  
+        <button
+    _ngcontent-c1=""
+  >
+    
+  </button>
+    
+</button-component>
+`;
+
+exports[`Storyshots Welcome to Storybook 1`] = `
+<welcome-component
+  displayName={[Function String]}
+>
+  
+        <main
+    _ngcontent-c0=""
+  >
+    
+          
+    <h1
+      _ngcontent-c0=""
+    >
+      Welcome to storybook
+    </h1>
+    
+          
+    <p
+      _ngcontent-c0=""
+    >
+      This is a UI component dev environment for your app.
+    </p>
+    
+          
+    <p
+      _ngcontent-c0=""
+    >
+      
+            We've added some basic stories inside the 
+      <span
+        _ngcontent-c0=""
+        class="inline-code"
+      >
+        src/stories
+      </span>
+       directory.
+            
+      <br
+        _ngcontent-c0=""
+      />
+      
+            A story is a single state of one or more UI components. You can have as many stories as
+            you want.
+            
+      <br
+        _ngcontent-c0=""
+      />
+      
+            (Basically a story is like a visual test case.)
+          
+    </p>
+    
+          
+    <p
+      _ngcontent-c0=""
+    >
+      
+            See these sample 
+      <a
+        _ngcontent-c0=""
+        role="button"
+        tabindex="0"
+      >
+        stories
+      </a>
+       for a component called 
+      <span
+        _ngcontent-c0=""
+        class="inline-code"
+      >
+        Button
+      </span>
+       .
+          
+    </p>
+    
+          
+    <p
+      _ngcontent-c0=""
+    >
+      
+            Just like that, you can add your own components as stories.
+            
+      <br
+        _ngcontent-c0=""
+      />
+      
+            You can also edit those components and see changes right away.
+            
+      <br
+        _ngcontent-c0=""
+      />
+      
+            (Try editing the 
+      <span
+        _ngcontent-c0=""
+        class="inline-code"
+      >
+        Button
+      </span>
+       stories
+            located at 
+      <span
+        _ngcontent-c0=""
+        class="inline-code"
+      >
+        src/stories/index.js
+      </span>
+      .)
+          
+    </p>
+    
+          
+    <p
+      _ngcontent-c0=""
+    >
+      
+            Usually we create stories with smaller UI components in the app.
+      <br
+        _ngcontent-c0=""
+      />
+      
+            Have a look at the 
+      <a
+        _ngcontent-c0=""
+        href="https://storybook.js.org/basics/writing-stories"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        
+              Writing Stories
+            
+      </a>
+       section in our documentation.
+          
+    </p>
+    
+          
+    <p
+      _ngcontent-c0=""
+      class="note"
+    >
+      
+            
+      <b
+        _ngcontent-c0=""
+      >
+        NOTE:
+      </b>
+      
+            
+      <br
+        _ngcontent-c0=""
+      />
+      
+            Have a look at the 
+      <span
+        _ngcontent-c0=""
+        class="inline-code"
+      >
+        .storybook/webpack.config.js
+      </span>
+       to add webpack loaders and plugins you are using in this project.
+          
+    </p>
+    
+        
+  </main>
+    
+</welcome-component>
+`;
diff --git a/examples/angular-cli/src/stories/addon-actions.stories.ts b/examples/angular-cli/src/stories/addon-actions.stories.ts
new file mode 100644
index 000000000000..8154940d7232
--- /dev/null
+++ b/examples/angular-cli/src/stories/addon-actions.stories.ts
@@ -0,0 +1,23 @@
+import { storiesOf } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { Button } from '@storybook/angular/demo';
+
+storiesOf('Addon Actions', module)
+  .add('Action only', () => ({
+    component: Button,
+    props: {
+      text: 'Action only',
+      onClick: action('log 1')
+    }
+  }))
+  .add('Action and method', () => ({
+    component: Button,
+    props: {
+      text: 'Action and Method',
+      onClick: e => {
+        console.log(e);
+        e.preventDefault();
+        action('log2')(e.target);
+      }
+    }
+  }));
diff --git a/examples/angular-cli/src/stories/addon-knobs.stories.ts b/examples/angular-cli/src/stories/addon-knobs.stories.ts
new file mode 100644
index 000000000000..f3528056afd8
--- /dev/null
+++ b/examples/angular-cli/src/stories/addon-knobs.stories.ts
@@ -0,0 +1,69 @@
+import { storiesOf } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+
+import {
+  withKnobs,
+  text,
+  number,
+  boolean,
+  array,
+  select,
+  color,
+  date,
+  button,
+} from '@storybook/addon-knobs/angular';
+
+import { SimpleKnobsComponent } from './knobs.component';
+import { AllKnobsComponent } from './all-knobs.component';
+
+storiesOf('Addon Knobs', module)
+  .addDecorator(withKnobs)
+  .add('Simple', () => {
+    const name = text('Name', 'John Doe');
+    const age = number('Age', 44);
+
+    return {
+      component: SimpleKnobsComponent,
+      props: {
+        name,
+        age
+      }
+    };
+  })
+  .add('All knobs', () => {
+    const name = text('Name', 'Jane');
+    const stock = number('Stock', 20, {
+      range: true,
+      min: 0,
+      max: 30,
+      step: 5,
+    });
+    const fruits = {
+      apples: 'Apple',
+      bananas: 'Banana',
+      cherries: 'Cherry',
+    };
+    const fruit = select('Fruit', fruits, 'apple');
+    const price = number('Price', 2.25);
+
+    const border = color('Border', 'deeppink');
+    const today = date('Today', new Date('Jan 20 2017'));
+    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+    const nice = boolean('Nice', true);
+    button('Arbitrary action', action('You clicked it!'));
+
+    return {
+      component: AllKnobsComponent,
+      props: {
+        name,
+        stock,
+        fruits,
+        fruit,
+        price,
+        border,
+        today,
+        items,
+        nice
+      }
+    };
+  });
diff --git a/examples/angular-cli/src/stories/addon-notes.stories.ts b/examples/angular-cli/src/stories/addon-notes.stories.ts
new file mode 100644
index 000000000000..bee7284d04ee
--- /dev/null
+++ b/examples/angular-cli/src/stories/addon-notes.stories.ts
@@ -0,0 +1,33 @@
+import { storiesOf } from '@storybook/angular';
+import { withNotes } from '@storybook/addon-notes';
+import { Button } from '@storybook/angular/demo';
+
+storiesOf('Addon Notes', module)
+  .add(
+    'Simple note',
+    withNotes({ text: 'My notes on some button' })(() => ({
+      component: Button,
+      props: {
+        text: 'Notes on some Button',
+        onClick: () => {},
+      }
+    }))
+  )
+  .add(
+    'Note with HTML',
+    withNotes({
+      text: `
+      <h2>My notes on emojis</h2>
+
+      <em>It's not all that important to be honest, but..</em>
+
+      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
+    `,
+    })(() => ({
+      component: Button,
+      props: {
+        text: 'Notes with HTML',
+        onClick: () => {},
+      }
+    }))
+  );
diff --git a/examples/angular-cli/src/stories/custom-metadata.stories.ts b/examples/angular-cli/src/stories/custom-metadata.stories.ts
new file mode 100644
index 000000000000..80e014205ae0
--- /dev/null
+++ b/examples/angular-cli/src/stories/custom-metadata.stories.ts
@@ -0,0 +1,67 @@
+import { storiesOf } from '@storybook/angular';
+import { withKnobs, text } from '@storybook/addon-knobs/angular';
+
+import { NameComponent } from './name.component';
+import { CustomPipePipe } from './custom.pipe';
+import { DummyService } from './moduleMetadata/dummy.service';
+import { ServiceComponent } from './moduleMetadata/service.component'
+
+storiesOf('Custom Pipe', module)
+  .add('Default', () => ({
+    component: NameComponent,
+    props: {
+      field: 'foobar',
+    },
+    moduleMetadata: {
+      imports: [],
+      schemas: [],
+      declarations: [CustomPipePipe],
+      providers: []
+    }
+  }));
+
+storiesOf('Custom Pipe/With Knobs', module)
+  .addDecorator(withKnobs)
+  .add('NameComponent', () => ({
+    component: NameComponent,
+    props: {
+      field: text('field', 'foobar'),
+    },
+    moduleMetadata: {
+      imports: [],
+      schemas: [],
+      declarations: [CustomPipePipe],
+      providers: []
+    }
+  }));
+
+storiesOf('Custom ngModule metadata', module)
+  .add('simple', () => ({
+    component: ServiceComponent,
+    props: {
+      name: 'Static name'
+    },
+    moduleMetadata: {
+      imports: [],
+      schemas: [],
+      declarations: [],
+      providers: [DummyService]
+    }
+  }))
+  .addDecorator(withKnobs)
+  .add('with knobs', () => {
+    const name = text('Name', 'Dynamic knob');
+
+    return {
+      component: ServiceComponent,
+      props: {
+        name
+      },
+      moduleMetadata: {
+        imports: [],
+        schemas: [],
+        declarations: [],
+        providers: [DummyService]
+      }
+    };
+  });
diff --git a/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot b/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
new file mode 100644
index 000000000000..1ae6eea489e9
--- /dev/null
+++ b/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots ngModel custom ControlValueAccessor 1`] = `
+<custom-cva-component
+  onChange={[Function Function]}
+  onTouch={[Function Function]}
+>
+  
+      <div>
+    
+  </div>
+      <input
+    type="text"
+  />
+    
+</custom-cva-component>
+`;
diff --git a/examples/angular-cli/src/stories/index.ts b/examples/angular-cli/src/stories/index.ts
index d755b4898847..08847b245744 100644
--- a/examples/angular-cli/src/stories/index.ts
+++ b/examples/angular-cli/src/stories/index.ts
@@ -1,35 +1,14 @@
 import { storiesOf } from '@storybook/angular';
-
-import { withNotes } from '@storybook/addon-notes';
-import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 
-import {
-  withKnobs,
-  text,
-  number,
-  boolean,
-  array,
-  select,
-  color,
-  date,
-  button,
-} from '@storybook/addon-knobs/angular';
-
 import { Welcome, Button } from '@storybook/angular/demo';
-import { SimpleKnobsComponent } from './knobs.component';
-import { AllKnobsComponent } from './all-knobs.component';
 import { AppComponent } from '../app/app.component';
-import { DummyService } from './moduleMetadata/dummy.service';
-import { ServiceComponent } from './moduleMetadata/service.component'
-import { NameComponent } from './name.component';
-import { CustomPipePipe } from './custom.pipe';
 
 storiesOf('Welcome', module)
   .add('to Storybook', () => ({
     component: Welcome,
     props: {}
-  }))
+  }));
 
 storiesOf('Button', module)
   .add('with text', () => ({
@@ -45,7 +24,7 @@ storiesOf('Button', module)
       text: '😀 😎 👍 💯',
       onClick: () => {}
     }
-  }))
+  }));
 
 storiesOf('Another Button', module)
   .add('button with link to another story', () => ({
@@ -54,173 +33,11 @@ storiesOf('Another Button', module)
       text: 'Go to Welcome Story',
       onClick: linkTo('Welcome')
     }
-  }))
+  }));
 
 storiesOf('App Component', module)
   .add('Component with separate template', () => ({
     component: AppComponent,
     props: {}
-  }))
-
-storiesOf('Addon Actions', module)
-  .add('Action only', () => ({
-    component: Button,
-    props: {
-      text: 'Action only',
-      onClick: action('log 1')
-    }
-  }))
-  .add('Action and method', () => ({
-    component: Button,
-    props: {
-      text: 'Action and Method',
-      onClick: e => {
-        console.log(e);
-        e.preventDefault();
-        action('log2')(e.target);
-      }
-    }
   }));
 
-storiesOf('Addon Notes', module)
-  .add(
-    'Simple note',
-    withNotes({ text: 'My notes on some button' })(() => ({
-      component: Button,
-      props: {
-        text: 'Notes on some Button',
-        onClick: () => {},
-      }
-    }))
-  )
-  .add(
-    'Note with HTML',
-    withNotes({
-      text: `
-      <h2>My notes on emojis</h2>
-
-      <em>It's not all that important to be honest, but..</em>
-
-      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-    `,
-    })(() => ({
-      component: Button,
-      props: {
-        text: 'Notes with HTML',
-        onClick: () => {},
-      }
-    }))
-  );
-
-
-storiesOf('Addon Knobs', module)
-  .addDecorator(withKnobs)
-  .add('Simple', () => {
-    const name = text('Name', 'John Doe');
-    const age = number('Age', 44);
-
-    return {
-      component: SimpleKnobsComponent,
-      props: {
-        name,
-        age
-      }
-    };
-  })
-  .add('All knobs', () => {
-    const name = text('Name', 'Jane');
-    const stock = number('Stock', 20, {
-      range: true,
-      min: 0,
-      max: 30,
-      step: 5,
-    });
-    const fruits = {
-      apples: 'Apple',
-      bananas: 'Banana',
-      cherries: 'Cherry',
-    };
-    const fruit = select('Fruit', fruits, 'apple');
-    const price = number('Price', 2.25);
-
-    const border = color('Border', 'deeppink');
-    const today = date('Today', new Date('Jan 20 2017'));
-    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
-    const nice = boolean('Nice', true);
-    button('Arbitrary action', action('You clicked it!'));
-
-    return {
-      component: AllKnobsComponent,
-      props: {
-        name,
-        stock,
-        fruits,
-        fruit,
-        price,
-        border,
-        today,
-        items,
-        nice
-      }
-    };
-  });
-
-storiesOf('Custom ngModule metadata', module)
-  .add('simple', () => ({
-    component: ServiceComponent,
-    props: {
-      name: 'Static name'
-    },
-    moduleMetadata: {
-      imports: [],
-      schemas: [],
-      declarations: [],
-      providers: [DummyService]
-    }
-  }))
-  .addDecorator(withKnobs)
-  .add('with knobs', () => {
-    const name = text('Name', 'Dynamic knob');
-
-    return {
-      component: ServiceComponent,
-      props: {
-        name
-      },
-      moduleMetadata: {
-        imports: [],
-        schemas: [],
-        declarations: [],
-        providers: [DummyService]
-      }
-    };
-  });
-
-storiesOf('Custom Pipe', module)
-  .add('Default', () => ({
-    component: NameComponent,
-    props: {
-      field: 'foobar',
-    },
-    moduleMetadata: {
-      imports: [],
-      schemas: [],
-      declarations: [CustomPipePipe],
-      providers: []
-    }
-  }));
-
-storiesOf('Custom Pipe/With Knobs', module)
-  .addDecorator(withKnobs)
-  .add('NameComponent', () => ({
-    component: NameComponent,
-    props: {
-      field: text('field', 'foobar'),
-    },
-    moduleMetadata: {
-      imports: [],
-      schemas: [],
-      declarations: [CustomPipePipe],
-      providers: []
-    }
-  }));
diff --git a/jest.config.js b/jest.config.js
index 62bfa9a4effe..7b89e00ef731 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -13,7 +13,12 @@ module.exports = {
     '<rootDir>/lib',
     '<rootDir>/examples/cra-kitchen-sink',
     '<rootDir>/examples/official-storybook',
+    '<rootDir>/examples/angular-cli',
   ],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+    '^.+\\.jsx?$': 'babel-jest',
+  },
   transformIgnorePatterns: ['/node_modules/(?!lodash-es/.*)'],
   testPathIgnorePatterns: ['/node_modules/', 'addon-jest.test.js', '/cli/test/'],
   collectCoverage: false,
@@ -29,4 +34,5 @@ module.exports = {
   setupTestFrameworkScriptFile: './scripts/jest.init.js',
   setupFiles: ['raf/polyfill'],
   testURL: 'http://localhost',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
 };
diff --git a/package.json b/package.json
index 816fec70e2e6..338794c6b297 100644
--- a/package.json
+++ b/package.json
@@ -86,7 +86,8 @@
     "remark-lint-code-eslint": "^2.0.0",
     "remark-preset-lint-recommended": "^3.0.1",
     "shelljs": "^0.7.8",
-    "symlink-dir": "^1.1.1"
+    "symlink-dir": "^1.1.1",
+    "ts-jest": "^22.0.0"
   },
   "engines": {
     "node": ">=8.0.0",
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 000000000000..1b9dd767251f
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "noImplicitAny": true,
+    "lib": [
+      "es2016",
+      "dom"
+    ]
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 812d2fd41350..1226a465397b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1166,7 +1166,7 @@ babel-plugin-external-helpers@^6.18.0:
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-istanbul@^4.0.0, babel-plugin-istanbul@^4.1.5:
+babel-plugin-istanbul@^4.0.0, babel-plugin-istanbul@^4.1.4, babel-plugin-istanbul@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.5.tgz#6760cdd977f411d3e175bb064f2bc327d99b2b6e"
   dependencies:
@@ -1881,7 +1881,7 @@ babel-preset-jest@^21.2.0:
     babel-plugin-jest-hoist "^21.2.0"
     babel-plugin-syntax-object-rest-spread "^6.13.0"
 
-babel-preset-jest@^22.0.3:
+babel-preset-jest@^22.0.1, babel-preset-jest@^22.0.3:
   version "22.0.3"
   resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-22.0.3.tgz#e2bb6f6b4a509d3ea0931f013db78c5a84856693"
   dependencies:
@@ -3442,6 +3442,22 @@ cosmiconfig@^3.1.0:
     parse-json "^3.0.0"
     require-from-string "^2.0.1"
 
+cpx@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/cpx/-/cpx-1.5.0.tgz#185be018511d87270dedccc293171e37655ab88f"
+  dependencies:
+    babel-runtime "^6.9.2"
+    chokidar "^1.6.0"
+    duplexer "^0.1.1"
+    glob "^7.0.5"
+    glob2base "^0.0.12"
+    minimatch "^3.0.2"
+    mkdirp "^0.5.1"
+    resolve "^1.1.7"
+    safe-buffer "^5.0.1"
+    shell-quote "^1.6.1"
+    subarg "^1.0.0"
+
 crc@3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/crc/-/crc-3.3.0.tgz#fa622e1bc388bf257309082d6b65200ce67090ba"
@@ -5272,6 +5288,10 @@ find-cache-dir@^1.0.0:
     make-dir "^1.0.0"
     pkg-dir "^2.0.0"
 
+find-index@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/find-index/-/find-index-0.1.1.tgz#675d358b2ca3892d795a1ab47232f8b6e2e0dde4"
+
 find-parent-dir@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/find-parent-dir/-/find-parent-dir-0.3.0.tgz#33c44b429ab2b2f0646299c5f9f718f376ff8d54"
@@ -5424,6 +5444,14 @@ fs-extra@3.0.1:
     jsonfile "^3.0.0"
     universalify "^0.1.0"
 
+fs-extra@4.0.3, fs-extra@^4.0.0, fs-extra@^4.0.1, fs-extra@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
 fs-extra@^0.30.0:
   version "0.30.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.30.0.tgz#f233ffcc08d4da7d432daa449776989db1df93f0"
@@ -5442,14 +5470,6 @@ fs-extra@^1.0.0:
     jsonfile "^2.1.0"
     klaw "^1.0.0"
 
-fs-extra@^4.0.0, fs-extra@^4.0.1, fs-extra@^4.0.2:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
-
 fs-readdir-recursive@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz#e32fc030a2ccee44a6b5371308da54be0b397d27"
@@ -5735,6 +5755,12 @@ glob-parent@^3.1.0:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
 
+glob2base@^0.0.12:
+  version "0.0.12"
+  resolved "https://registry.yarnpkg.com/glob2base/-/glob2base-0.0.12.tgz#9d419b3e28f12e83a362164a277055922c9c0d56"
+  dependencies:
+    find-index "^0.1.1"
+
 glob@7.0.x:
   version "7.0.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a"
@@ -7240,7 +7266,7 @@ jest-config@^21.2.1:
     jest-validate "^21.2.1"
     pretty-format "^21.2.1"
 
-jest-config@^22.0.4:
+jest-config@^22.0.1, jest-config@^22.0.4:
   version "22.0.4"
   resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-22.0.4.tgz#9c2a46c0907b1a1af54d9cdbf18e99b447034e11"
   dependencies:
@@ -7519,6 +7545,13 @@ jest-mock@^22.0.3:
   version "22.0.3"
   resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-22.0.3.tgz#c875e47b5b729c6c020a2fab317b275c0cf88961"
 
+jest-preset-angular@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/jest-preset-angular/-/jest-preset-angular-5.0.0.tgz#e0b0b67f94a5992f8c59e9a82c3790d5d60bb55d"
+  dependencies:
+    jest-zone-patch "^0.0.8"
+    ts-jest "^22.0.0"
+
 jest-regex-util@^20.0.3:
   version "20.0.3"
   resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-20.0.3.tgz#85bbab5d133e44625b19faf8c6aa5122d085d762"
@@ -7775,6 +7808,10 @@ jest-worker@^22.0.3:
   dependencies:
     merge-stream "^1.0.1"
 
+jest-zone-patch@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/jest-zone-patch/-/jest-zone-patch-0.0.8.tgz#90fa3b5b60e95ad3e624dd2c3eb59bb1dcabd371"
+
 jest@20.0.4, jest@^20.0.4:
   version "20.0.4"
   resolved "https://registry.yarnpkg.com/jest/-/jest-20.0.4.tgz#3dd260c2989d6dad678b1e9cc4d91944f6d602ac"
@@ -13111,6 +13148,12 @@ stylus@^0.54.5:
     sax "0.5.x"
     source-map "0.1.x"
 
+subarg@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/subarg/-/subarg-1.0.0.tgz#f62cf17581e996b48fc965699f54c06ae268b8d2"
+  dependencies:
+    minimist "^1.1.0"
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -13513,6 +13556,21 @@ try-catch@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/try-catch/-/try-catch-1.0.0.tgz#3797dab39a266775f4d0da5cbf42aca3f03608e6"
 
+ts-jest@^22.0.0:
+  version "22.0.0"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-22.0.0.tgz#cce1a5f1106150ca002d09f7e85913355ceb5e8d"
+  dependencies:
+    babel-core "^6.24.1"
+    babel-plugin-istanbul "^4.1.4"
+    babel-plugin-transform-es2015-modules-commonjs "^6.24.1"
+    babel-preset-jest "^22.0.1"
+    cpx "^1.5.0"
+    fs-extra "4.0.3"
+    jest-config "^22.0.1"
+    pkg-dir "^2.0.0"
+    source-map-support "^0.5.0"
+    yargs "^10.0.3"
+
 ts-loader@^2.2.2:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-2.3.7.tgz#a9028ced473bee12f28a75f9c5b139979d33f2fc"

From edb1cf60000a33f60568802a514cbd1b1bd0c727 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Tue, 26 Dec 2017 17:41:05 +0200
Subject: [PATCH 02/41] Refactor storyshots index.js

---
 addons/storyshots/src/angular/loader.js  | 39 +++++++++++
 addons/storyshots/src/frameworkLoader.js | 17 +++++
 addons/storyshots/src/hasDependency.js   | 13 ++++
 addons/storyshots/src/index.js           | 89 ++++--------------------
 addons/storyshots/src/react/loader.js    | 37 ++++++++++
 addons/storyshots/src/rn/loader.js       | 26 +++++++
 6 files changed, 145 insertions(+), 76 deletions(-)
 create mode 100644 addons/storyshots/src/angular/loader.js
 create mode 100644 addons/storyshots/src/frameworkLoader.js
 create mode 100644 addons/storyshots/src/hasDependency.js
 create mode 100644 addons/storyshots/src/react/loader.js
 create mode 100644 addons/storyshots/src/rn/loader.js

diff --git a/addons/storyshots/src/angular/loader.js b/addons/storyshots/src/angular/loader.js
new file mode 100644
index 000000000000..14de8b4d4cb5
--- /dev/null
+++ b/addons/storyshots/src/angular/loader.js
@@ -0,0 +1,39 @@
+/* eslint-disable global-require,import/no-extraneous-dependencies */
+import path from 'path';
+import runWithRequireContext from '../require_context';
+import hasDependency from '../hasDependency';
+
+const babel = require('babel-core');
+
+function test(options) {
+  return (
+    options.framework === 'angular' || (!options.framework && hasDependency('@storybook/angular'))
+  );
+}
+
+function load(options) {
+  const storybook = require.requireActual('@storybook/angular');
+  const loadBabelConfig = require('@storybook/angular/dist/server/babel_config').default;
+
+  const configDirPath = path.resolve(options.configPath || '.storybook');
+  const configPath = path.join(configDirPath, 'config.js');
+
+  const babelConfig = loadBabelConfig(configDirPath);
+  const content = babel.transformFileSync(configPath, babelConfig).code;
+  const contextOpts = {
+    filename: configPath,
+    dirname: configDirPath,
+  };
+
+  runWithRequireContext(content, contextOpts);
+
+  return {
+    framework: 'angular',
+    storybook,
+  };
+}
+
+export default {
+  load,
+  test,
+};
diff --git a/addons/storyshots/src/frameworkLoader.js b/addons/storyshots/src/frameworkLoader.js
new file mode 100644
index 000000000000..f23156db1274
--- /dev/null
+++ b/addons/storyshots/src/frameworkLoader.js
@@ -0,0 +1,17 @@
+import loaderReact from './react/loader';
+import loaderRn from './rn/loader';
+import loaderAngular from './angular/loader';
+
+const loaders = [loaderReact, loaderAngular, loaderRn];
+
+function loadFramework(options) {
+  const loader = loaders.find(frameworkLoader => frameworkLoader.test(options));
+
+  if (!loader) {
+    throw new Error('storyshots is intended only to be used with storybook');
+  }
+
+  return loader.load(options);
+}
+
+export default loadFramework;
diff --git a/addons/storyshots/src/hasDependency.js b/addons/storyshots/src/hasDependency.js
new file mode 100644
index 000000000000..673ff614221e
--- /dev/null
+++ b/addons/storyshots/src/hasDependency.js
@@ -0,0 +1,13 @@
+import fs from 'fs';
+import path from 'path';
+import readPkgUp from 'read-pkg-up';
+
+const { pkg } = readPkgUp.sync();
+
+export default function hasDependency(name) {
+  return (
+    (pkg.devDependencies && pkg.devDependencies[name]) ||
+    (pkg.dependencies && pkg.dependencies[name]) ||
+    fs.existsSync(path.join('node_modules', name, 'package.json'))
+  );
+}
diff --git a/addons/storyshots/src/index.js b/addons/storyshots/src/index.js
index cb274fea5b79..1683d78d2f00 100644
--- a/addons/storyshots/src/index.js
+++ b/addons/storyshots/src/index.js
@@ -1,12 +1,12 @@
 /* eslint-disable no-loop-func */
-import path from 'path';
+
 import fs from 'fs';
 import glob from 'glob';
 import global, { describe, it } from 'global';
-import readPkgUp from 'read-pkg-up';
+
 import addons from '@storybook/addons';
 
-import runWithRequireContext from './require_context';
+import loadFramework from './frameworkLoader';
 import createChannel from './storybook-channel-mock';
 import { snapshotWithOptions } from './test-bodies';
 import { getPossibleStoriesFiles, getSnapshotFileName } from './utils';
@@ -21,79 +21,17 @@ export {
 
 export { getSnapshotFileName };
 
-let storybook;
-let configPath;
-let framework;
 global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || {};
 
-const babel = require('babel-core');
-
-const { pkg } = readPkgUp.sync();
-
-const hasDependency = name =>
-  (pkg.devDependencies && pkg.devDependencies[name]) ||
-  (pkg.dependencies && pkg.dependencies[name]) ||
-  fs.existsSync(path.join('node_modules', name, 'package.json'));
-
 export default function testStorySnapshots(options = {}) {
-  addons.setChannel(createChannel());
-
-  const isStorybook =
-    options.framework === 'react' || (!options.framework && hasDependency('@storybook/react'));
-  const isAngularStorybook =
-    options.framework === 'angular' || (!options.framework && hasDependency('@storybook/angular'));
-  const isRNStorybook =
-    options.framework === 'react-native' ||
-    (!options.framework && hasDependency('@storybook/react-native'));
-
-  if (isStorybook) {
-    framework = 'react';
-    storybook = require.requireActual('@storybook/react');
-    // eslint-disable-next-line
-    const loadBabelConfig = require('@storybook/react/dist/server/babel_config')
-      .default;
-    const configDirPath = path.resolve(options.configPath || '.storybook');
-    configPath = path.join(configDirPath, 'config.js');
-
-    const babelConfig = loadBabelConfig(configDirPath);
-    const content = babel.transformFileSync(configPath, babelConfig).code;
-    const contextOpts = {
-      filename: configPath,
-      dirname: configDirPath,
-    };
-
-    runWithRequireContext(content, contextOpts);
-  } else if (isAngularStorybook) {
-    framework = 'angular';
-    storybook = require.requireActual('@storybook/angular');
-    // eslint-disable-next-line
-    const loadBabelConfig = require('@storybook/angular/dist/server/babel_config')
-      .default;
-    const configDirPath = path.resolve(options.configPath || '.storybook');
-    configPath = path.join(configDirPath, 'config.js');
-
-    const babelConfig = loadBabelConfig(configDirPath);
-    const content = babel.transformFileSync(configPath, babelConfig).code;
-    const contextOpts = {
-      filename: configPath,
-      dirname: configDirPath,
-    };
-
-    runWithRequireContext(content, contextOpts);
-  } else if (isRNStorybook) {
-    framework = 'rn';
-    storybook = require.requireActual('@storybook/react-native');
-
-    configPath = path.resolve(options.configPath || 'storybook');
-    require.requireActual(configPath);
-  } else {
-    throw new Error('storyshots is intended only to be used with storybook');
-  }
-
   if (typeof describe !== 'function') {
     throw new Error('testStorySnapshots is intended only to be used inside jest');
   }
 
+  addons.setChannel(createChannel());
+
+  const { framework, storybook } = loadFramework(options);
+
   // NOTE: keep `suit` typo for backwards compatibility
   const suite = options.suite || options.suit || 'Storyshots';
   const stories = storybook.getStorybook();
@@ -103,15 +41,14 @@ export default function testStorySnapshots(options = {}) {
   }
 
   // Added not to break existing storyshots configs (can be removed in a future major release)
-  // eslint-disable-next-line
-  options.storyNameRegex = options.storyNameRegex || options.storyRegex;
+  const storyNameRegex = options.storyNameRegex || options.storyRegex;
+
   const snapshotOptions = {
     renderer: options.renderer,
     serializer: options.serializer,
   };
-  // eslint-disable-next-line
-  options.test =
-    options.test || snapshotWithOptions({ options: snapshotOptions });
+
+  const testMethod = options.test || snapshotWithOptions({ options: snapshotOptions });
 
   // eslint-disable-next-line
   for (const group of stories) {
@@ -126,14 +63,14 @@ export default function testStorySnapshots(options = {}) {
       describe(kind, () => {
         // eslint-disable-next-line
         for (const story of group.stories) {
-          if (options.storyNameRegex && !story.name.match(options.storyNameRegex)) {
+          if (storyNameRegex && !story.name.match(storyNameRegex)) {
             // eslint-disable-next-line
             continue;
           }
 
           it(story.name, () => {
             const context = { fileName, kind, story: story.name, framework };
-            return options.test({
+            return testMethod({
               story,
               context,
             });
diff --git a/addons/storyshots/src/react/loader.js b/addons/storyshots/src/react/loader.js
new file mode 100644
index 000000000000..53c128a66cd9
--- /dev/null
+++ b/addons/storyshots/src/react/loader.js
@@ -0,0 +1,37 @@
+/* eslint-disable global-require,import/no-extraneous-dependencies */
+import path from 'path';
+import runWithRequireContext from '../require_context';
+import hasDependency from '../hasDependency';
+
+const babel = require('babel-core');
+
+function test(options) {
+  return options.framework === 'react' || (!options.framework && hasDependency('@storybook/react'));
+}
+
+function load(options) {
+  const storybook = require.requireActual('@storybook/react');
+  const loadBabelConfig = require('@storybook/react/dist/server/babel_config').default;
+
+  const configDirPath = path.resolve(options.configPath || '.storybook');
+  const configPath = path.join(configDirPath, 'config.js');
+
+  const babelConfig = loadBabelConfig(configDirPath);
+  const content = babel.transformFileSync(configPath, babelConfig).code;
+  const contextOpts = {
+    filename: configPath,
+    dirname: configDirPath,
+  };
+
+  runWithRequireContext(content, contextOpts);
+
+  return {
+    framework: 'react',
+    storybook,
+  };
+}
+
+export default {
+  load,
+  test,
+};
diff --git a/addons/storyshots/src/rn/loader.js b/addons/storyshots/src/rn/loader.js
new file mode 100644
index 000000000000..f5f28b430c27
--- /dev/null
+++ b/addons/storyshots/src/rn/loader.js
@@ -0,0 +1,26 @@
+import path from 'path';
+import hasDependency from '../hasDependency';
+
+function test(options) {
+  return (
+    options.framework === 'react-native' ||
+    (!options.framework && hasDependency('@storybook/react-native'))
+  );
+}
+
+function load(options) {
+  const storybook = require.requireActual('@storybook/react-native');
+
+  const configPath = path.resolve(options.configPath || 'storybook');
+  require.requireActual(configPath);
+
+  return {
+    framework: 'rn',
+    storybook,
+  };
+}
+
+export default {
+  load,
+  test,
+};

From c208016a43aa42224c21eb4ae29b4897189f759b Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Tue, 26 Dec 2017 18:44:36 +0200
Subject: [PATCH 03/41] Refactor test-bodies

---
 addons/storyshots/src/angular/loader.js     |  1 +
 addons/storyshots/src/angular/renderTree.js | 61 +++++++++++++
 addons/storyshots/src/index.js              | 18 ++--
 addons/storyshots/src/react/loader.js       |  1 +
 addons/storyshots/src/react/renderTree.js   | 10 +++
 addons/storyshots/src/react/test-bodies.js  | 14 +++
 addons/storyshots/src/rn/loader.js          |  2 +
 addons/storyshots/src/test-bodies.js        | 99 ++++-----------------
 8 files changed, 112 insertions(+), 94 deletions(-)
 create mode 100644 addons/storyshots/src/angular/renderTree.js
 create mode 100644 addons/storyshots/src/react/renderTree.js
 create mode 100644 addons/storyshots/src/react/test-bodies.js

diff --git a/addons/storyshots/src/angular/loader.js b/addons/storyshots/src/angular/loader.js
index 14de8b4d4cb5..6c84e35b5b83 100644
--- a/addons/storyshots/src/angular/loader.js
+++ b/addons/storyshots/src/angular/loader.js
@@ -28,6 +28,7 @@ function load(options) {
   runWithRequireContext(content, contextOpts);
 
   return {
+    renderTree: require('./renderTree').default,
     framework: 'angular',
     storybook,
   };
diff --git a/addons/storyshots/src/angular/renderTree.js b/addons/storyshots/src/angular/renderTree.js
new file mode 100644
index 000000000000..f871d495faa0
--- /dev/null
+++ b/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;
diff --git a/addons/storyshots/src/index.js b/addons/storyshots/src/index.js
index 1683d78d2f00..fe169f0106a3 100644
--- a/addons/storyshots/src/index.js
+++ b/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,
             });
           });
         }
diff --git a/addons/storyshots/src/react/loader.js b/addons/storyshots/src/react/loader.js
index 53c128a66cd9..dc1ac6d065bd 100644
--- a/addons/storyshots/src/react/loader.js
+++ b/addons/storyshots/src/react/loader.js
@@ -26,6 +26,7 @@ function load(options) {
   runWithRequireContext(content, contextOpts);
 
   return {
+    renderTree: require('./renderTree').default,
     framework: 'react',
     storybook,
   };
diff --git a/addons/storyshots/src/react/renderTree.js b/addons/storyshots/src/react/renderTree.js
new file mode 100644
index 000000000000..4d35e7dff84f
--- /dev/null
+++ b/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;
diff --git a/addons/storyshots/src/react/test-bodies.js b/addons/storyshots/src/react/test-bodies.js
new file mode 100644
index 000000000000..e100771499d1
--- /dev/null
+++ b/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);
+}
diff --git a/addons/storyshots/src/rn/loader.js b/addons/storyshots/src/rn/loader.js
index f5f28b430c27..eaddd550bb4f 100644
--- a/addons/storyshots/src/rn/loader.js
+++ b/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,
   };
diff --git a/addons/storyshots/src/test-bodies.js b/addons/storyshots/src/test-bodies.js
index ba2bc96c0d36..951f24e7edcd 100644
--- a/addons/storyshots/src/test-bodies.js
+++ b/addons/storyshots/src/test-bodies.js
@@ -1,75 +1,13 @@
-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 reactTestRenderer from 'react-test-renderer';
-import shallow from 'react-test-renderer/shallow';
-import { addSerializer } from 'jest-specific-snapshot';
+import 'jest-specific-snapshot';
 import { getSnapshotFileName } from './utils';
-import { createAnnotatedComponent } from './angular/helpers';
-
-addSerializer(HTMLCommentSerializer);
-addSerializer(AngularSnapshotSerializer);
-
-function getRenderedTree(story, context, { renderer, serializer, ...rendererOptions }) {
-  const storyElement = story.render(context);
-
-  if (context.framework === 'angular') {
-    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);
+export const snapshotWithOptions = options => ({
+  story,
+  context,
+  renderTree,
+  snapshotFileName,
+}) => {
+  const tree = renderTree(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 }) => {
-  snapshotWithOptions(options)({ story, context, snapshotFileName: getSnapshotFileName(context) });
+export const multiSnapshotWithOptions = options => ({ story, context, renderTree }) => {
+  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);
-}

From e0bae92d04183969ac269035d5c3829efd74f90e Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Tue, 26 Dec 2017 19:14:28 +0200
Subject: [PATCH 04/41] Better copy-past from app/angular

---
 addons/storyshots/src/angular/app.token.ts    |   4 +
 addons/storyshots/src/angular/helpers.js      |  62 --------
 addons/storyshots/src/angular/helpers.ts      | 136 ++++++++++++++++++
 addons/storyshots/src/angular/renderTree.js   |  40 +-----
 addons/storyshots/src/angular/types.ts        |  28 ++++
 .../src/angular/{utils.js => utils.ts}        |  15 +-
 .../custom-cva-component.stories.storyshot    |   1 +
 7 files changed, 182 insertions(+), 104 deletions(-)
 create mode 100644 addons/storyshots/src/angular/app.token.ts
 delete mode 100644 addons/storyshots/src/angular/helpers.js
 create mode 100644 addons/storyshots/src/angular/helpers.ts
 create mode 100644 addons/storyshots/src/angular/types.ts
 rename addons/storyshots/src/angular/{utils.js => utils.ts} (53%)

diff --git a/addons/storyshots/src/angular/app.token.ts b/addons/storyshots/src/angular/app.token.ts
new file mode 100644
index 000000000000..bf45fcd7720f
--- /dev/null
+++ b/addons/storyshots/src/angular/app.token.ts
@@ -0,0 +1,4 @@
+import { InjectionToken } from "@angular/core";
+import { NgStory } from "./types";
+
+export const STORY = new InjectionToken<NgStory>("story");
diff --git a/addons/storyshots/src/angular/helpers.js b/addons/storyshots/src/angular/helpers.js
deleted file mode 100644
index 6de591d4431d..000000000000
--- a/addons/storyshots/src/angular/helpers.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Component } from '@angular/core';
-import { getPropMetadata, getAnnotations, getParameters } from './utils';
-
-function getComponentMetadata({ component, props = {}, propsMeta = {}, moduleMetadata = {} }) {
-  const componentMetadata = getAnnotations(component)[0] || {};
-  const propsMetadata = getPropMetadata(component);
-  const paramsMetadata = getParameters(component);
-
-  // Object.keys(propsMeta).forEach(key => {
-  //   propsMetadata[key] = props[key];
-  // });
-
-  Object.keys(propsMeta).forEach(key => {
-    propsMetadata[key] = propsMeta[key];
-  });
-
-  const { imports = [], schemas = [], declarations = [], providers = [] } = moduleMetadata;
-
-  return {
-    component,
-    props,
-    componentMeta: componentMetadata,
-    propsMeta: propsMetadata,
-    params: paramsMetadata,
-    moduleMeta: {
-      imports,
-      schemas,
-      declarations,
-      providers,
-    },
-  };
-}
-
-function getAnnotatedComponent(meta, component, propsMeta, params) {
-  const StoryshotComponent = function StoryshotComponent(...args) {
-    component.call(this, ...args);
-  };
-
-  StoryshotComponent.prototype = Object.create(component.prototype);
-  StoryshotComponent.annotations = [new Component(meta)];
-  StoryshotComponent.parameters = params;
-  StoryshotComponent.propsMetadata = propsMeta;
-
-  return StoryshotComponent;
-}
-
-export function createAnnotatedComponent(story) {
-  const { component, componentMeta, props, propsMeta, params, moduleMeta } = getComponentMetadata(
-    story
-  );
-
-  const AnnotatedComponent = getAnnotatedComponent(componentMeta, component, propsMeta, [
-    ...params,
-    ...moduleMeta.providers.map(provider => [provider]),
-  ]);
-
-  return {
-    component: AnnotatedComponent,
-    props,
-    propsMeta,
-  };
-}
diff --git a/addons/storyshots/src/angular/helpers.ts b/addons/storyshots/src/angular/helpers.ts
new file mode 100644
index 000000000000..7f664fbd3439
--- /dev/null
+++ b/addons/storyshots/src/angular/helpers.ts
@@ -0,0 +1,136 @@
+import {
+  Type,
+  NgModule,
+  Component,
+} from '@angular/core';
+import {FormsModule} from '@angular/forms'
+import { BrowserModule } from '@angular/platform-browser';
+
+import { STORY } from './app.token';
+import { getAnnotations, getParameters, getPropMetadata } from './utils';
+import { NgModuleMetadata, NgStory, NgProvidedData } from './types';
+
+interface IComponent extends Type<any> {
+  annotations: any[];
+  parameters: any[];
+  propsMetadata: any[]
+}
+
+const getComponentMetadata = (
+  { component, props = {}, propsMeta = {}, moduleMetadata = {
+    imports: [],
+    schemas: [],
+    declarations: [],
+    providers: []
+  } }: NgStory
+) => {
+  if (!component || typeof component !== 'function') {
+    throw new Error('No valid component provided');
+  }
+
+  const componentMetadata = getAnnotations(component)[0] || {};
+  const propsMetadata = getPropMetadata(component);
+  const paramsMetadata = getParameters(component);
+
+  Object.keys(propsMeta).map(key => {
+      (<any>propsMetadata)[key] = (<any>propsMeta)[key];
+  });
+
+  const {
+    imports = [],
+    schemas = [],
+    declarations = [],
+    providers = []
+  } = moduleMetadata;
+
+  return {
+    component,
+    props,
+    componentMeta: componentMetadata,
+    propsMeta: propsMetadata,
+    params: paramsMetadata,
+    moduleMeta: {
+      imports,
+      schemas,
+      declarations,
+      providers
+    }
+  };
+};
+
+const getAnnotatedComponent = (meta: NgModule,
+                               component: any,
+                               propsMeta: { [p: string]: any },
+                               params: any[]): IComponent => {
+  const NewComponent: any = function NewComponent(...args: any[]) {
+    component.call(this, ...args);
+  };
+
+  NewComponent.prototype = Object.create(component.prototype);
+  NewComponent.annotations = [new Component(meta)];
+  NewComponent.parameters = params;
+  NewComponent.propsMetadata = propsMeta;
+
+  return NewComponent;
+};
+
+const getModule = (
+    declarations: Array<Type<any> | any[]>,
+    entryComponents: Array<Type<any> | any[]>,
+    bootstrap: Array<Type<any> | any[]>,
+    data: NgProvidedData,
+    moduleMetadata: NgModuleMetadata = {
+      imports: [],
+      schemas: [],
+      declarations: [],
+      providers: []
+  }
+): any => {
+  return {
+    declarations: [...declarations, ...moduleMetadata.declarations],
+    imports: [BrowserModule, FormsModule, ...moduleMetadata.imports],
+    providers: [{ provide: STORY, useValue: Object.assign({}, data) }, ...moduleMetadata.providers],
+    entryComponents: [...entryComponents],
+    schemas: [...moduleMetadata.schemas],
+    bootstrap: [...bootstrap]
+  };
+};
+
+export const initModuleData = (currentStory: NgStory): any => {
+  const {
+    component,
+    componentMeta,
+    props,
+    propsMeta,
+    params,
+    moduleMeta
+  } = getComponentMetadata(currentStory);
+
+  if (!componentMeta) {
+    throw new Error('No component metadata available');
+  }
+
+  const AnnotatedComponent = getAnnotatedComponent(
+    componentMeta,
+    component,
+    propsMeta,
+    [...params, ...moduleMeta.providers.map(provider => [provider])]
+  );
+
+  const story = {
+    component: AnnotatedComponent,
+    props,
+    propsMeta
+  };
+
+  return {
+    AnnotatedComponent,
+    moduleMeta: getModule(
+      [AnnotatedComponent],
+      [AnnotatedComponent],
+      [],
+      story,
+      moduleMeta
+    ),
+  };
+};
diff --git a/addons/storyshots/src/angular/renderTree.js b/addons/storyshots/src/angular/renderTree.js
index f871d495faa0..83b36968c556 100644
--- a/addons/storyshots/src/angular/renderTree.js
+++ b/addons/storyshots/src/angular/renderTree.js
@@ -4,58 +4,32 @@ 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';
+import { initModuleData } from './helpers.ts';
 
 addSerializer(HTMLCommentSerializer);
 addSerializer(AngularSnapshotSerializer);
 
 function getRenderedTree(story, context) {
-  const storyElement = story.render(context);
+  const curentStory = story.render(context);
 
-  const {
-    // props,
-    // component,
-    moduleMetadata = { imports: [], schemas: [], declarations: [], providers: [] },
-  } = storyElement;
-
-  const moduleMeta = {
-    imports: [],
-    schemas: [],
-    declarations: [],
-    providers: [],
-    ...moduleMetadata,
-  };
-
-  const { component: annotatedComponent } = createAnnotatedComponent(storyElement);
+  const { moduleMeta, AnnotatedComponent } = initModuleData(curentStory);
 
   TestBed.configureTestingModule({
     imports: [...moduleMeta.imports],
-    declarations: [annotatedComponent, ...moduleMeta.declarations],
+    declarations: [...moduleMeta.declarations],
     providers: [...moduleMeta.providers],
     schemas: [NO_ERRORS_SCHEMA, ...moduleMeta.schemas],
+    entryComponents: [...moduleMeta.entryComponents],
+    bootstrap: [...moduleMeta.bootstrap],
   });
 
   // this is async. Should be somehow called in beforeEach
   TestBed.compileComponents();
 
-  const tree = TestBed.createComponent(annotatedComponent);
+  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;
diff --git a/addons/storyshots/src/angular/types.ts b/addons/storyshots/src/angular/types.ts
new file mode 100644
index 000000000000..7109bcf1226d
--- /dev/null
+++ b/addons/storyshots/src/angular/types.ts
@@ -0,0 +1,28 @@
+export interface NgModuleMetadata {
+    declarations: Array<any>,
+    imports: Array<any>,
+    schemas: Array<any>,
+    providers: Array<any>,
+}
+
+export interface ICollection {[p: string]: any}
+
+export interface NgStory {
+    component: any,
+    props: ICollection,
+    propsMeta: ICollection,
+    moduleMetadata?: NgModuleMetadata
+}
+
+export interface NgError {
+    message: string,
+    stack: string
+}
+
+export type NgProvidedData = NgStory | NgError;
+
+export interface IContext {
+    [p: string]: any
+}
+
+export type IGetStoryWithContext = (context: IContext) => NgStory
diff --git a/addons/storyshots/src/angular/utils.js b/addons/storyshots/src/angular/utils.ts
similarity index 53%
rename from addons/storyshots/src/angular/utils.js
rename to addons/storyshots/src/angular/utils.ts
index 03a810a8d7e8..1ec935cd6e9a 100644
--- a/addons/storyshots/src/angular/utils.js
+++ b/addons/storyshots/src/angular/utils.ts
@@ -1,7 +1,4 @@
-/* eslint-disable no-param-reassign */
-/* globals window */
-
-function getMeta(component, [name1, name2], defaultValue) {
+function getMeta(component: any, [name1, name2]: any, defaultValue: any) {
   if (!name2) {
     name2 = name1;
     name1 = `__${name1}__`;
@@ -15,17 +12,17 @@ function getMeta(component, [name1, name2], defaultValue) {
     return component[name2];
   }
 
-  return window.Reflect.getMetadata(name2, component) || defaultValue;
+  return (<any>window)['Reflect'].getMetadata(name2, component) || defaultValue;
 }
 
-export function getAnnotations(component) {
+export function getAnnotations(component: any) {
   return getMeta(component, ['annotations'], []);
 }
 
-export function getPropMetadata(component) {
+export function getPropMetadata(component: any) {
   return getMeta(component, ['__prop__metadata__', 'propMetadata'], {});
 }
 
-export function getParameters(component) {
+export function getParameters(component: any) {
   return getMeta(component, ['parameters'], []);
-}
+}
\ No newline at end of file
diff --git a/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot b/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
index 1ae6eea489e9..13372af892f3 100644
--- a/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
+++ b/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
@@ -10,6 +10,7 @@ exports[`Storyshots ngModel custom ControlValueAccessor 1`] = `
     
   </div>
       <input
+    class="ng-untouched ng-pristine ng-valid"
     type="text"
   />
     

From 91f17b6cbdfd0bc7e916e84b3130d0ccac55cd34 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Tue, 26 Dec 2017 19:20:31 +0200
Subject: [PATCH 05/41] Remove things

---
 addons/storyshots/src/angular/helpers.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/addons/storyshots/src/angular/helpers.ts b/addons/storyshots/src/angular/helpers.ts
index 7f664fbd3439..6ab46d84cca9 100644
--- a/addons/storyshots/src/angular/helpers.ts
+++ b/addons/storyshots/src/angular/helpers.ts
@@ -3,8 +3,6 @@ import {
   NgModule,
   Component,
 } from '@angular/core';
-import {FormsModule} from '@angular/forms'
-import { BrowserModule } from '@angular/platform-browser';
 
 import { STORY } from './app.token';
 import { getAnnotations, getParameters, getPropMetadata } from './utils';
@@ -88,7 +86,7 @@ const getModule = (
 ): any => {
   return {
     declarations: [...declarations, ...moduleMetadata.declarations],
-    imports: [BrowserModule, FormsModule, ...moduleMetadata.imports],
+    imports: [...moduleMetadata.imports],
     providers: [{ provide: STORY, useValue: Object.assign({}, data) }, ...moduleMetadata.providers],
     entryComponents: [...entryComponents],
     schemas: [...moduleMetadata.schemas],

From d9942cf96e25f9f10c1cf45590a38b5b7a160d64 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Fri, 29 Dec 2017 14:06:34 +0200
Subject: [PATCH 06/41] Fix indentation in package.json

---
 addons/storyshots/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/storyshots/package.json b/addons/storyshots/package.json
index 6a54283e6315..b7ac0014dc9e 100644
--- a/addons/storyshots/package.json
+++ b/addons/storyshots/package.json
@@ -41,7 +41,7 @@
     "react-dom": "^16.1.0"
   },
   "peerDependencies": {
-	"@angular/core": ">=4.0.0",
+    "@angular/core": ">=4.0.0",
     "@storybook/addons": "^3.3.3",
     "babel-core": "^6.26.0 || ^7.0.0-0",
     "react": "*",

From 2c460e4c36cdd09724671a23740cd75538a7e21b Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Fri, 29 Dec 2017 16:22:47 +0200
Subject: [PATCH 07/41] Extract more stories to separate files

---
 .../src/stories/addon-links.stories.ts        | 13 +++++++++++++
 .../src/stories/app.component.stories.ts      |  9 +++++++++
 .../src/stories/custom-metadata.stories.ts    |  4 ++--
 examples/angular-cli/src/stories/index.ts     | 19 -------------------
 .../{ => moduleMetadata}/custom.pipe.ts       |  0
 .../{ => moduleMetadata}/name.component.ts    |  0
 6 files changed, 24 insertions(+), 21 deletions(-)
 create mode 100644 examples/angular-cli/src/stories/addon-links.stories.ts
 create mode 100644 examples/angular-cli/src/stories/app.component.stories.ts
 rename examples/angular-cli/src/stories/{ => moduleMetadata}/custom.pipe.ts (100%)
 rename examples/angular-cli/src/stories/{ => moduleMetadata}/name.component.ts (100%)

diff --git a/examples/angular-cli/src/stories/addon-links.stories.ts b/examples/angular-cli/src/stories/addon-links.stories.ts
new file mode 100644
index 000000000000..f446c7347883
--- /dev/null
+++ b/examples/angular-cli/src/stories/addon-links.stories.ts
@@ -0,0 +1,13 @@
+import { linkTo } from '@storybook/addon-links';
+import { storiesOf } from '@storybook/angular';
+import { Button } from '@storybook/angular/demo';
+
+storiesOf('Another Button', module)
+  .add('button with link to another story', () => ({
+    component: Button,
+    props: {
+      text: 'Go to Welcome Story',
+      onClick: linkTo('Welcome')
+    }
+  }));
+
diff --git a/examples/angular-cli/src/stories/app.component.stories.ts b/examples/angular-cli/src/stories/app.component.stories.ts
new file mode 100644
index 000000000000..99f5dbca2867
--- /dev/null
+++ b/examples/angular-cli/src/stories/app.component.stories.ts
@@ -0,0 +1,9 @@
+import { storiesOf } from '@storybook/angular';
+import { AppComponent } from '../app/app.component';
+
+storiesOf('App Component', module)
+  .add('Component with separate template', () => ({
+    component: AppComponent,
+    props: {}
+  }));
+
diff --git a/examples/angular-cli/src/stories/custom-metadata.stories.ts b/examples/angular-cli/src/stories/custom-metadata.stories.ts
index 80e014205ae0..1dd685721957 100644
--- a/examples/angular-cli/src/stories/custom-metadata.stories.ts
+++ b/examples/angular-cli/src/stories/custom-metadata.stories.ts
@@ -1,8 +1,8 @@
 import { storiesOf } from '@storybook/angular';
 import { withKnobs, text } from '@storybook/addon-knobs/angular';
 
-import { NameComponent } from './name.component';
-import { CustomPipePipe } from './custom.pipe';
+import { NameComponent } from './moduleMetadata/name.component';
+import { CustomPipePipe } from './moduleMetadata/custom.pipe';
 import { DummyService } from './moduleMetadata/dummy.service';
 import { ServiceComponent } from './moduleMetadata/service.component'
 
diff --git a/examples/angular-cli/src/stories/index.ts b/examples/angular-cli/src/stories/index.ts
index 08847b245744..d7c8b7abe09c 100644
--- a/examples/angular-cli/src/stories/index.ts
+++ b/examples/angular-cli/src/stories/index.ts
@@ -1,8 +1,5 @@
 import { storiesOf } from '@storybook/angular';
-import { linkTo } from '@storybook/addon-links';
-
 import { Welcome, Button } from '@storybook/angular/demo';
-import { AppComponent } from '../app/app.component';
 
 storiesOf('Welcome', module)
   .add('to Storybook', () => ({
@@ -25,19 +22,3 @@ storiesOf('Button', module)
       onClick: () => {}
     }
   }));
-
-storiesOf('Another Button', module)
-  .add('button with link to another story', () => ({
-    component: Button,
-    props: {
-      text: 'Go to Welcome Story',
-      onClick: linkTo('Welcome')
-    }
-  }));
-
-storiesOf('App Component', module)
-  .add('Component with separate template', () => ({
-    component: AppComponent,
-    props: {}
-  }));
-
diff --git a/examples/angular-cli/src/stories/custom.pipe.ts b/examples/angular-cli/src/stories/moduleMetadata/custom.pipe.ts
similarity index 100%
rename from examples/angular-cli/src/stories/custom.pipe.ts
rename to examples/angular-cli/src/stories/moduleMetadata/custom.pipe.ts
diff --git a/examples/angular-cli/src/stories/name.component.ts b/examples/angular-cli/src/stories/moduleMetadata/name.component.ts
similarity index 100%
rename from examples/angular-cli/src/stories/name.component.ts
rename to examples/angular-cli/src/stories/moduleMetadata/name.component.ts

From 887182f44b8f499f2410e4d897354359e61b0441 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Fri, 29 Dec 2017 16:25:36 +0200
Subject: [PATCH 08/41] Support promises in storyshots

---
 addons/storyshots/src/angular/renderTree.js | 15 ++++++-------
 addons/storyshots/src/angular/utils.ts      | 12 +++++++++-
 addons/storyshots/src/test-bodies.js        | 25 +++++++++++++--------
 3 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/addons/storyshots/src/angular/renderTree.js b/addons/storyshots/src/angular/renderTree.js
index 83b36968c556..34a868be01da 100644
--- a/addons/storyshots/src/angular/renderTree.js
+++ b/addons/storyshots/src/angular/renderTree.js
@@ -10,9 +10,9 @@ addSerializer(HTMLCommentSerializer);
 addSerializer(AngularSnapshotSerializer);
 
 function getRenderedTree(story, context) {
-  const curentStory = story.render(context);
+  const currentStory = story.render(context);
 
-  const { moduleMeta, AnnotatedComponent } = initModuleData(curentStory);
+  const { moduleMeta, AnnotatedComponent } = initModuleData(currentStory);
 
   TestBed.configureTestingModule({
     imports: [...moduleMeta.imports],
@@ -23,13 +23,12 @@ function getRenderedTree(story, context) {
     bootstrap: [...moduleMeta.bootstrap],
   });
 
-  // this is async. Should be somehow called in beforeEach
-  TestBed.compileComponents();
+  return TestBed.compileComponents().then(() => {
+    const tree = TestBed.createComponent(AnnotatedComponent);
+    tree.detectChanges();
 
-  const tree = TestBed.createComponent(AnnotatedComponent);
-  tree.detectChanges();
-
-  return tree;
+    return tree;
+  });
 }
 
 export default getRenderedTree;
diff --git a/addons/storyshots/src/angular/utils.ts b/addons/storyshots/src/angular/utils.ts
index 1ec935cd6e9a..fe83324fa0de 100644
--- a/addons/storyshots/src/angular/utils.ts
+++ b/addons/storyshots/src/angular/utils.ts
@@ -1,3 +1,7 @@
+import { ɵReflectionCapabilities } from '@angular/core';
+
+const reflectionCapabilities = new ɵReflectionCapabilities();
+
 function getMeta(component: any, [name1, name2]: any, defaultValue: any) {
   if (!name2) {
     name2 = name1;
@@ -24,5 +28,11 @@ export function getPropMetadata(component: any) {
 }
 
 export function getParameters(component: any) {
-  return getMeta(component, ['parameters'], []);
+  const params = reflectionCapabilities.parameters(component);
+
+  if (!params || !params[0]) {
+    return getMeta(component, ['parameters'], []);
+  }
+
+  return params;
 }
\ No newline at end of file
diff --git a/addons/storyshots/src/test-bodies.js b/addons/storyshots/src/test-bodies.js
index 951f24e7edcd..9c0c036a060c 100644
--- a/addons/storyshots/src/test-bodies.js
+++ b/addons/storyshots/src/test-bodies.js
@@ -7,26 +7,33 @@ export const snapshotWithOptions = options => ({
   renderTree,
   snapshotFileName,
 }) => {
-  const tree = renderTree(story, context, options);
+  const result = renderTree(story, context, options);
 
-  if (snapshotFileName) {
-    expect(tree).toMatchSpecificSnapshot(snapshotFileName);
-  } else {
-    expect(tree).toMatchSnapshot();
+  function match(tree) {
+    if (snapshotFileName) {
+      expect(tree).toMatchSpecificSnapshot(snapshotFileName);
+    } else {
+      expect(tree).toMatchSnapshot();
+    }
+
+    if (typeof tree.unmount === 'function') {
+      tree.unmount();
+    }
   }
 
-  if (typeof tree.unmount === 'function') {
-    tree.unmount();
+  if (typeof result.then === 'function') {
+    return result.then(match);
   }
+
+  return match(result);
 };
 
-export const multiSnapshotWithOptions = options => ({ story, context, renderTree }) => {
+export const multiSnapshotWithOptions = options => ({ story, context, renderTree }) =>
   snapshotWithOptions(options)({
     story,
     context,
     renderTree,
     snapshotFileName: getSnapshotFileName(context),
   });
-};
 
 export const snapshot = snapshotWithOptions({});

From 9cffe0a2b2246011807cda3685897a4954e8c841 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Fri, 29 Dec 2017 16:26:51 +0200
Subject: [PATCH 09/41] Allow loading html templates

---
 jest.config.js | 7 +++++--
 package.json   | 1 +
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/jest.config.js b/jest.config.js
index dd9980ee8312..218590867dc5 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,4 +1,7 @@
 module.exports = {
+  globals: {
+    __TRANSFORM_HTML__: true,
+  },
   cacheDirectory: '.cache/jest',
   clearMocks: true,
   moduleNameMapper: {
@@ -16,8 +19,8 @@ module.exports = {
     '<rootDir>/examples/angular-cli',
   ],
   transform: {
-    '^.+\\.tsx?$': 'ts-jest',
     '^.+\\.jsx?$': 'babel-jest',
+    '^.+\\.(ts|html)$': '<rootDir>/node_modules/jest-preset-angular/preprocessor.js',
   },
   testPathIgnorePatterns: ['/node_modules/', 'addon-jest.test.js', '/cli/test/'],
   collectCoverage: false,
@@ -33,5 +36,5 @@ module.exports = {
   setupTestFrameworkScriptFile: './scripts/jest.init.js',
   setupFiles: ['raf/polyfill'],
   testURL: 'http://localhost',
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node', '.html'],
 };
diff --git a/package.json b/package.json
index 4b37445af605..a6e0dea492da 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "jest-enzyme": "^4.0.2",
     "jest-image-snapshot": "^2.2.1",
     "jest-jasmine2": "^22.0.4",
+    "jest-preset-angular": "^5.0.0",
     "lerna": "^2.5.1",
     "lint-staged": "^6.0.0",
     "lodash": "^4.17.4",

From 29e84bd2437be64c7b6b4ab7f0ed6905ac05381a Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Fri, 29 Dec 2017 16:27:17 +0200
Subject: [PATCH 10/41] Update snapshots

---
 .../addon-actions.stories.storyshot           |  4 +-
 .../addon-links.stories.storyshot             | 16 ++++
 .../app.component.stories.storyshot           | 85 +++++++++++++++++++
 .../src/stories/__snapshots__/index.storyshot | 15 ----
 .../custom-cva-component.stories.storyshot    |  1 -
 5 files changed, 103 insertions(+), 18 deletions(-)
 create mode 100644 examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot
 create mode 100644 examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot

diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
index f544931485dc..f86a428fa3f4 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
@@ -7,7 +7,7 @@ exports[`Storyshots Addon Actions Action and method 1`] = `
 >
   
         <button
-    _ngcontent-c5=""
+    _ngcontent-c4=""
   >
     
   </button>
@@ -22,7 +22,7 @@ exports[`Storyshots Addon Actions Action only 1`] = `
 >
   
         <button
-    _ngcontent-c4=""
+    _ngcontent-c3=""
   >
     
   </button>
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot
new file mode 100644
index 000000000000..07405a58e2db
--- /dev/null
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Another Button button with link to another story 1`] = `
+<button-component
+  onClick={[Function EventEmitter]}
+  text=""
+>
+  
+        <button
+    _ngcontent-c5=""
+  >
+    
+  </button>
+    
+</button-component>
+`;
diff --git a/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot
new file mode 100644
index 000000000000..e94e0896ce43
--- /dev/null
+++ b/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot
@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots App Component Component with separate template 1`] = `
+<app-root
+  title={[Function String]}
+>
+  
+  <div
+    style="text-align:center"
+  >
+    
+    
+    <h1>
+      
+      Welcome to app!
+    
+    </h1>
+    
+    
+    <img
+      src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
+      width="300"
+    />
+    
+  
+  </div>
+  <h2>
+    Here are some links to help you start: 
+  </h2>
+  <ul>
+    
+    
+    <li>
+      
+      
+      <h2>
+        <a
+          href="https://angular.io/tutorial"
+          target="_blank"
+        >
+          Tour of Heroes
+        </a>
+      </h2>
+      
+    
+    </li>
+    
+    
+    <li>
+      
+      
+      <h2>
+        <a
+          href="https://github.com/angular/angular-cli/wiki"
+          target="_blank"
+        >
+          CLI Documentation
+        </a>
+      </h2>
+      
+    
+    </li>
+    
+    
+    <li>
+      
+      
+      <h2>
+        <a
+          href="https://blog.angular.io//"
+          target="_blank"
+        >
+          Angular blog
+        </a>
+      </h2>
+      
+    
+    </li>
+    
+  
+  </ul>
+  
+  
+</app-root>
+`;
diff --git a/examples/angular-cli/src/stories/__snapshots__/index.storyshot b/examples/angular-cli/src/stories/__snapshots__/index.storyshot
index 0eecf1b5062f..00b63d099123 100644
--- a/examples/angular-cli/src/stories/__snapshots__/index.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/index.storyshot
@@ -1,20 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Another Button button with link to another story 1`] = `
-<button-component
-  onClick={[Function EventEmitter]}
-  text=""
->
-  
-        <button
-    _ngcontent-c3=""
-  >
-    
-  </button>
-    
-</button-component>
-`;
-
 exports[`Storyshots Button with some emoji 1`] = `
 <button-component
   onClick={[Function EventEmitter]}
diff --git a/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot b/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
index 13372af892f3..1ae6eea489e9 100644
--- a/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
+++ b/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
@@ -10,7 +10,6 @@ exports[`Storyshots ngModel custom ControlValueAccessor 1`] = `
     
   </div>
       <input
-    class="ng-untouched ng-pristine ng-valid"
     type="text"
   />
     

From b09b631c2496019614fa5bb79007ff733ab9a040 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Fri, 29 Dec 2017 17:24:02 +0200
Subject: [PATCH 11/41] Few cleanups

---
 addons/storyshots/src/index.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/addons/storyshots/src/index.js b/addons/storyshots/src/index.js
index fe169f0106a3..f5c2339fbc65 100644
--- a/addons/storyshots/src/index.js
+++ b/addons/storyshots/src/index.js
@@ -27,17 +27,16 @@ export default function testStorySnapshots(options = {}) {
 
   addons.setChannel(createChannel());
 
-  const { framework, storybook, renderTree } = loadFramework(options);
-
-  // NOTE: keep `suit` typo for backwards compatibility
-  const suite = options.suite || options.suit || 'Storyshots';
+  const { storybook, framework, renderTree } = loadFramework(options);
   const stories = storybook.getStorybook();
 
   if (stories.length === 0) {
     throw new Error('storyshots found 0 stories');
   }
 
-  // Added not to break existing storyshots configs (can be removed in a future major release)
+  // NOTE: keep `suit` typo for backwards compatibility
+  const suite = options.suite || options.suit || 'Storyshots';
+  // NOTE: Added not to break existing storyshots configs (can be removed in a future major release)
   const storyNameRegex = options.storyNameRegex || options.storyRegex;
 
   const snapshotOptions = {

From 3cbd772a347b9d025d93ffcb5ff0caaaa30843e8 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Tue, 2 Jan 2018 00:13:34 +0200
Subject: [PATCH 12/41] Add vue storyshots fork

---
 .editorconfig                                 |   2 +-
 addons/storyshots/package.json                |   3 +-
 addons/storyshots/src/frameworkLoader.js      |   3 +-
 addons/storyshots/src/vue/loader.js           |  44 ++
 addons/storyshots/src/vue/renderTree.js       |  12 +
 examples/vue-kitchen-sink/.babelrc            |   7 +-
 examples/vue-kitchen-sink/package.json        |   1 +
 .../vue-kitchen-sink/src/stories/Welcome.vue  |   3 +
 .../src/stories/__snapshots__/index.storyshot | 444 ++++++++++++++++++
 examples/vue-kitchen-sink/vueshots.test.js    |   8 +
 jest.config.js                                |   4 +-
 package.json                                  |   1 +
 yarn.lock                                     |  33 +-
 13 files changed, 559 insertions(+), 6 deletions(-)
 create mode 100644 addons/storyshots/src/vue/loader.js
 create mode 100644 addons/storyshots/src/vue/renderTree.js
 create mode 100644 examples/vue-kitchen-sink/src/stories/__snapshots__/index.storyshot
 create mode 100644 examples/vue-kitchen-sink/vueshots.test.js

diff --git a/.editorconfig b/.editorconfig
index 641825cc12a6..8928b4779fd3 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -3,6 +3,6 @@ root = true
 [*]
 end_of_line = lf
 
-[*.{js,json,ts}]
+[*.{js,json,ts,vue}]
 indent_style = space
 indent_size = 2
diff --git a/addons/storyshots/package.json b/addons/storyshots/package.json
index b7ac0014dc9e..eaf298af7153 100644
--- a/addons/storyshots/package.json
+++ b/addons/storyshots/package.json
@@ -45,6 +45,7 @@
     "@storybook/addons": "^3.3.3",
     "babel-core": "^6.26.0 || ^7.0.0-0",
     "react": "*",
-    "react-test-renderer": "*"
+    "react-test-renderer": "*",
+    "vue": "^2.5.13"
   }
 }
diff --git a/addons/storyshots/src/frameworkLoader.js b/addons/storyshots/src/frameworkLoader.js
index f23156db1274..047759ec3a98 100644
--- a/addons/storyshots/src/frameworkLoader.js
+++ b/addons/storyshots/src/frameworkLoader.js
@@ -1,8 +1,9 @@
 import loaderReact from './react/loader';
 import loaderRn from './rn/loader';
 import loaderAngular from './angular/loader';
+import loaderVue from './vue/loader';
 
-const loaders = [loaderReact, loaderAngular, loaderRn];
+const loaders = [loaderReact, loaderAngular, loaderRn, loaderVue];
 
 function loadFramework(options) {
   const loader = loaders.find(frameworkLoader => frameworkLoader.test(options));
diff --git a/addons/storyshots/src/vue/loader.js b/addons/storyshots/src/vue/loader.js
new file mode 100644
index 000000000000..f3e858853ab7
--- /dev/null
+++ b/addons/storyshots/src/vue/loader.js
@@ -0,0 +1,44 @@
+/* eslint-disable global-require,import/no-extraneous-dependencies */
+import path from 'path';
+import runWithRequireContext from '../require_context';
+import hasDependency from '../hasDependency';
+
+const babel = require('babel-core');
+
+function test(options) {
+  return options.framework === 'vue' || (!options.framework && hasDependency('@storybook/vue'));
+}
+
+function load(options) {
+  // Mock vue to have compiler-included build
+  jest.mock('vue', () => {
+    const vueCommonJs = require('vue/dist/vue.common.js');
+    return vueCommonJs;
+  });
+
+  const storybook = require.requireActual('@storybook/vue');
+  const loadBabelConfig = require('@storybook/vue/dist/server/babel_config').default;
+
+  const configDirPath = path.resolve(options.configPath || '.storybook');
+  const configPath = path.join(configDirPath, 'config.js');
+
+  const babelConfig = loadBabelConfig(configDirPath);
+  const content = babel.transformFileSync(configPath, babelConfig).code;
+  const contextOpts = {
+    filename: configPath,
+    dirname: configDirPath,
+  };
+
+  runWithRequireContext(content, contextOpts);
+
+  return {
+    renderTree: require('./renderTree').default,
+    framework: 'vue',
+    storybook,
+  };
+}
+
+export default {
+  load,
+  test,
+};
diff --git a/addons/storyshots/src/vue/renderTree.js b/addons/storyshots/src/vue/renderTree.js
new file mode 100644
index 000000000000..75d8c3e3e82b
--- /dev/null
+++ b/addons/storyshots/src/vue/renderTree.js
@@ -0,0 +1,12 @@
+import Vue from 'vue';
+
+function getRenderedTree(story, context) {
+  const storyElement = story.render(context);
+
+  const Constructor = Vue.extend(storyElement);
+  const vm = new Constructor().$mount();
+
+  return vm.$el;
+}
+
+export default getRenderedTree;
diff --git a/examples/vue-kitchen-sink/.babelrc b/examples/vue-kitchen-sink/.babelrc
index bc4c4c4af5d2..0e1b2524d3d2 100644
--- a/examples/vue-kitchen-sink/.babelrc
+++ b/examples/vue-kitchen-sink/.babelrc
@@ -2,6 +2,11 @@
   "presets": [
     ["env", { "modules": false }],
     "vue"
-  ]
+  ],
+  "env": {
+    "test": {
+      "presets": ["env"]
+    }
+  }
 }
 
diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json
index 9e913c5b6a91..ee101633f03a 100644
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@@ -8,6 +8,7 @@
     "@storybook/addon-knobs": "^3.3.3",
     "@storybook/addon-links": "^3.3.3",
     "@storybook/addon-notes": "^3.3.3",
+    "@storybook/addon-storyshots": "^3.3.3",
     "@storybook/addon-viewport": "^3.3.3",
     "@storybook/addons": "^3.3.3",
     "@storybook/vue": "^3.3.3",
diff --git a/examples/vue-kitchen-sink/src/stories/Welcome.vue b/examples/vue-kitchen-sink/src/stories/Welcome.vue
index c3543330f4d1..42e291c2cc53 100644
--- a/examples/vue-kitchen-sink/src/stories/Welcome.vue
+++ b/examples/vue-kitchen-sink/src/stories/Welcome.vue
@@ -53,6 +53,9 @@
   </div>
 </template>
 
+<script>
+</script>
+
 <style>
   .main {
     margin: 15px;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/index.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/index.storyshot
new file mode 100644
index 000000000000..1540e1a949c5
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/index.storyshot
@@ -0,0 +1,444 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon Actions Action and method 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  Click me to log the action!
+</button>
+`;
+
+exports[`Storyshots Addon Actions Action only 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  Click me to log the action!
+</button>
+`;
+
+exports[`Storyshots Addon Knobs All knobs 1`] = `
+<div
+  style="padding: 8px 22px; border-radius: 8px;"
+>
+  <h1>
+    My name is Jane,
+  </h1>
+   
+  <h3>
+    today is 2017-1-20
+  </h3>
+   
+  <p>
+    I have a stock of 20 apple, costing $2.25 each.
+  </p>
+   
+  <p>
+    Also, I have:
+  </p>
+   
+  <ul>
+    <li>
+      Laptop
+    </li>
+    <li>
+      Book
+    </li>
+    <li>
+      Whiskey
+    </li>
+  </ul>
+   
+  <p>
+    Nice to meet you!
+  </p>
+</div>
+`;
+
+exports[`Storyshots Addon Knobs Simple 1`] = `
+<div>
+  I am John Doe and I'm 44 years old.
+</div>
+`;
+
+exports[`Storyshots Addon Notes Note with HTML 1`] = `
+<p>
+  🤔😳😯😮
+  <br />
+  😄😩😓😱
+  <br />
+  🤓😑😶😊
+</p>
+`;
+
+exports[`Storyshots Addon Notes Simple note 1`] = `
+<p>
+  <strong>
+    Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
+  </strong>
+</p>
+`;
+
+exports[`Storyshots App App 1`] = `
+<div
+  id="app"
+>
+  <img
+    src="./logo.png"
+  />
+   
+  <h1 />
+   
+  <h2>
+    Essential Links
+  </h2>
+   
+  <ul>
+    <li>
+      <a
+        href="https://vuejs.org"
+        target="_blank"
+      >
+        Core Docs
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="https://forum.vuejs.org"
+        target="_blank"
+      >
+        Forum
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="https://gitter.im/vuejs/vue"
+        target="_blank"
+      >
+        Gitter Chat
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="https://twitter.com/vuejs"
+        target="_blank"
+      >
+        Twitter
+      </a>
+    </li>
+  </ul>
+   
+  <h2>
+    Ecosystem
+  </h2>
+   
+  <ul>
+    <li>
+      <a
+        href="http://router.vuejs.org/"
+        target="_blank"
+      >
+        vue-router
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="http://vuex.vuejs.org/"
+        target="_blank"
+      >
+        vuex
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="http://vue-loader.vuejs.org/"
+        target="_blank"
+      >
+        vue-loader
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="https://github.com/vuejs/awesome-vue"
+        target="_blank"
+      >
+        awesome-vue
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Storyshots Decorator for Vue render 1`] = `
+<div
+  style="border: medium solid blue;"
+>
+  <div
+    style="border: medium solid red;"
+  >
+    <button
+      class="button"
+    >
+      renders component: MyButton!
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Decorator for Vue template 1`] = `
+<div
+  style="border: medium solid blue;"
+>
+  <div
+    style="border: medium solid red;"
+  >
+    <button
+      class="button"
+      style="color: rgb(66, 185, 131); border-color: #42b983;"
+    >
+      MyButton with template!
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Method for rendering Vue JSX 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  MyButton rendered with JSX!
+</button>
+`;
+
+exports[`Storyshots Method for rendering Vue pre-registered component 1`] = `
+<p>
+  <em>
+    This component was pre-registered in .storybook/config.js
+  </em>
+  <br />
+   
+  <button
+    class="button"
+    style="color: rgb(66, 185, 131); border-color: #42b983;"
+  >
+    MyButton rendered in a template!
+  </button>
+</p>
+`;
+
+exports[`Storyshots Method for rendering Vue render + component 1`] = `
+<button
+  class="button"
+>
+  renders component: MyButton!
+</button>
+`;
+
+exports[`Storyshots Method for rendering Vue render 1`] = `
+<div>
+  renders a div with some text in it..
+</div>
+`;
+
+exports[`Storyshots Method for rendering Vue template + component 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  MyButton rendered in a template!
+</button>
+`;
+
+exports[`Storyshots Method for rendering Vue template + methods 1`] = `
+<p>
+  <em>
+    Clicking the button will navigate to another story using the 'addon-links'
+  </em>
+  <br />
+   
+  <button
+    class="button rounded"
+    style="color: rgb(66, 185, 131); border-color: #42b983;"
+  >
+    MyButton rendered in a template + props & methods!
+  </button>
+</p>
+`;
+
+exports[`Storyshots Method for rendering Vue template 1`] = `
+<div>
+  <h1>
+    A template
+  </h1>
+   
+  <p>
+    rendered in vue in storybook
+  </p>
+</div>
+`;
+
+exports[`Storyshots Method for rendering Vue vuex + actions 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  with vuex: 0!
+</button>
+`;
+
+exports[`Storyshots Method for rendering Vue whatever you want 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  with awesomeness: 0!
+</button>
+`;
+
+exports[`Storyshots Welcome Welcome 1`] = `
+<div
+  class="main"
+>
+  <h1>
+    Welcome to Storybook for Vue
+  </h1>
+   
+  <p>
+    
+    This is a UI component dev environment for your vue app.
+  
+  </p>
+   
+  <p>
+    
+    We've added some basic stories inside the
+    
+    <code
+      class="code"
+    >
+      src/stories
+    </code>
+    
+    directory.
+    
+    <br />
+    
+    A story is a single state of one or more UI components.
+    You can have as many stories as you want.
+    
+    <br />
+    
+    (Basically a story is like a visual test case.)
+  
+  </p>
+   
+  <p>
+    
+    See these sample
+    
+    <a
+      class="link"
+      href="#"
+    >
+      stories
+    </a>
+    
+    for a component called
+    
+    <code
+      class="code"
+    >
+      Button
+    </code>
+    
+    .
+  
+  </p>
+   
+  <p
+    style="text-align: center;"
+  >
+    <img
+      src="../logo.png"
+    />
+  </p>
+   
+  <p>
+    
+    Just like that, you can add your own components as stories.
+    
+    <br />
+    
+    You can also edit those components and see changes right away.
+    
+    <br />
+    
+    (Try editing the 
+    <code
+      class="code"
+    >
+      Button
+    </code>
+     component
+    located at 
+    <code
+      class="code"
+    >
+      src/stories/Button.js
+    </code>
+    .)
+  
+  </p>
+   
+  <p>
+    
+    Usually we create stories with smaller UI components in the app.
+    <br />
+    
+    Have a look at the
+    
+    <a
+      class="link"
+      href="https://storybook.js.org/basics/writing-stories"
+      target="_blank"
+    >
+      
+      Writing Stories
+    
+    </a>
+    
+    section in our documentation.
+  
+  </p>
+   
+  <p
+    class="note"
+  >
+    <b>
+      NOTE:
+    </b>
+     
+    <br />
+    
+    Have a look at the
+    
+    <code
+      class="code"
+    >
+      .storybook/webpack.config.js
+    </code>
+    
+    to add webpack
+    loaders and plugins you are using in this project.
+  
+  </p>
+</div>
+`;
diff --git a/examples/vue-kitchen-sink/vueshots.test.js b/examples/vue-kitchen-sink/vueshots.test.js
new file mode 100644
index 000000000000..064b9cf54ffc
--- /dev/null
+++ b/examples/vue-kitchen-sink/vueshots.test.js
@@ -0,0 +1,8 @@
+import path from 'path';
+import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
+
+initStoryshots({
+  framework: 'vue',
+  configPath: path.join(__dirname, '.storybook'),
+  test: multiSnapshotWithOptions({}),
+});
diff --git a/jest.config.js b/jest.config.js
index 218590867dc5..31f397d3c769 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -15,12 +15,14 @@ module.exports = {
     '<rootDir>/app',
     '<rootDir>/lib',
     '<rootDir>/examples/cra-kitchen-sink',
+    '<rootDir>/examples/vue-kitchen-sink',
     '<rootDir>/examples/official-storybook',
     '<rootDir>/examples/angular-cli',
   ],
   transform: {
     '^.+\\.jsx?$': 'babel-jest',
     '^.+\\.(ts|html)$': '<rootDir>/node_modules/jest-preset-angular/preprocessor.js',
+    '.*\\.(vue)$': '<rootDir>/node_modules/jest-vue-preprocessor',
   },
   testPathIgnorePatterns: ['/node_modules/', 'addon-jest.test.js', '/cli/test/'],
   collectCoverage: false,
@@ -36,5 +38,5 @@ module.exports = {
   setupTestFrameworkScriptFile: './scripts/jest.init.js',
   setupFiles: ['raf/polyfill'],
   testURL: 'http://localhost',
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node', '.html'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node', '.html', 'vue'],
 };
diff --git a/package.json b/package.json
index 3a925e86c970..5e14b6856254 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
     "jest-image-snapshot": "^2.2.1",
     "jest-jasmine2": "^22.0.4",
     "jest-preset-angular": "^5.0.0",
+    "jest-vue-preprocessor": "^1.3.1",
     "lerna": "^2.5.1",
     "lint-staged": "^6.0.0",
     "lodash": "^4.17.4",
diff --git a/yarn.lock b/yarn.lock
index 3c9e77c71c8f..fc9fba9c6046 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5290,6 +5290,13 @@ finalhandler@1.1.0:
     statuses "~1.3.1"
     unpipe "~1.0.0"
 
+find-babel-config@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-babel-config/-/find-babel-config-1.1.0.tgz#acc01043a6749fec34429be6b64f542ebb5d6355"
+  dependencies:
+    json5 "^0.5.1"
+    path-exists "^3.0.0"
+
 find-cache-dir@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-0.1.1.tgz#c8defae57c8a52a8a784f9e31c57c742e993a0b9"
@@ -7832,6 +7839,15 @@ jest-validate@^22.0.3:
     leven "^2.1.0"
     pretty-format "^22.0.3"
 
+jest-vue-preprocessor@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/jest-vue-preprocessor/-/jest-vue-preprocessor-1.3.1.tgz#7161a4f1f66eee34c406476447c8cd709938ad75"
+  dependencies:
+    babel-plugin-transform-runtime "6.23.0"
+    find-babel-config "1.1.0"
+    typescript "2.5.3"
+    vue-property-decorator "6.0.0"
+
 jest-worker@^22.0.3:
   version "22.0.3"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-22.0.3.tgz#30433faca67814a8f80559f75ab2ceaa61332fd2"
@@ -11698,7 +11714,7 @@ redux@^3.6.0, redux@^3.7.2:
     loose-envify "^1.1.0"
     symbol-observable "^1.0.3"
 
-reflect-metadata@^0.1.2:
+reflect-metadata@^0.1.10, reflect-metadata@^0.1.2:
   version "0.1.10"
   resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.10.tgz#b4f83704416acad89988c9b15635d47e03b9344a"
 
@@ -13756,6 +13772,10 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
+typescript@2.5.3:
+  version "2.5.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.5.3.tgz#df3dcdc38f3beb800d4bc322646b04a3f6ca7f0d"
+
 typescript@^2.4.0, typescript@~2.6.1:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.6.2.tgz#3c5b6fd7f6de0914269027f03c0946758f7673a4"
@@ -14304,6 +14324,10 @@ void-elements@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
 
+vue-class-component@^6.0.0:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-6.1.2.tgz#87ac0265b0db71a3f49f10d90e4f69f9be9c2fbd"
+
 vue-hot-reload-api@^2.2.0, vue-hot-reload-api@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.2.4.tgz#683bd1d026c0d3b3c937d5875679e9a87ec6cd8f"
@@ -14326,6 +14350,13 @@ vue-loader@^13.6.2:
     vue-style-loader "^3.0.0"
     vue-template-es2015-compiler "^1.6.0"
 
+vue-property-decorator@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-6.0.0.tgz#bb651b293542e31db0d24f36f4b0250ef08d8515"
+  dependencies:
+    reflect-metadata "^0.1.10"
+    vue-class-component "^6.0.0"
+
 vue-style-loader@^3.0.0, vue-style-loader@^3.0.1:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-3.0.3.tgz#623658f81506aef9d121cdc113a4f5c9cac32df7"

From db89374d6ef652d02b1d670fdd7d7fb1020bfc15 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Tue, 2 Jan 2018 01:21:41 +0200
Subject: [PATCH 13/41] Extract common config-loading logic to a separate
 module

---
 addons/storyshots/src/angular/loader.js | 25 +++++++------------------
 addons/storyshots/src/config-loader.js  | 24 ++++++++++++++++++++++++
 addons/storyshots/src/react/loader.js   | 25 +++++++------------------
 3 files changed, 38 insertions(+), 36 deletions(-)
 create mode 100644 addons/storyshots/src/config-loader.js

diff --git a/addons/storyshots/src/angular/loader.js b/addons/storyshots/src/angular/loader.js
index 6c84e35b5b83..608c6e312e7c 100644
--- a/addons/storyshots/src/angular/loader.js
+++ b/addons/storyshots/src/angular/loader.js
@@ -1,9 +1,6 @@
-/* eslint-disable global-require,import/no-extraneous-dependencies */
-import path from 'path';
 import runWithRequireContext from '../require_context';
 import hasDependency from '../hasDependency';
-
-const babel = require('babel-core');
+import loadConfig from '../config-loader';
 
 function test(options) {
   return (
@@ -12,25 +9,17 @@ function test(options) {
 }
 
 function load(options) {
-  const storybook = require.requireActual('@storybook/angular');
-  const loadBabelConfig = require('@storybook/angular/dist/server/babel_config').default;
-
-  const configDirPath = path.resolve(options.configPath || '.storybook');
-  const configPath = path.join(configDirPath, 'config.js');
-
-  const babelConfig = loadBabelConfig(configDirPath);
-  const content = babel.transformFileSync(configPath, babelConfig).code;
-  const contextOpts = {
-    filename: configPath,
-    dirname: configDirPath,
-  };
+  const { content, contextOpts } = loadConfig({
+    configDirPath: options.configPath,
+    babelConfigPath: '@storybook/angular/dist/server/babel_config',
+  });
 
   runWithRequireContext(content, contextOpts);
 
   return {
-    renderTree: require('./renderTree').default,
     framework: 'angular',
-    storybook,
+    renderTree: require.requireActual('./renderTree').default,
+    storybook: require.requireActual('@storybook/angular'),
   };
 }
 
diff --git a/addons/storyshots/src/config-loader.js b/addons/storyshots/src/config-loader.js
new file mode 100644
index 000000000000..a5d6b36b5214
--- /dev/null
+++ b/addons/storyshots/src/config-loader.js
@@ -0,0 +1,24 @@
+import path from 'path';
+
+const babel = require('babel-core');
+
+function getConfigContent({ resolvedConfigDirPath, configPath, babelConfigPath }) {
+  const loadBabelConfig = require.requireActual(babelConfigPath).default;
+  const babelConfig = loadBabelConfig(resolvedConfigDirPath);
+  return babel.transformFileSync(configPath, babelConfig).code;
+}
+
+function load({ configDirPath, babelConfigPath }) {
+  const resolvedConfigDirPath = path.resolve(configDirPath || '.storybook');
+  const configPath = path.join(resolvedConfigDirPath, 'config.js');
+
+  const content = getConfigContent({ resolvedConfigDirPath, configPath, babelConfigPath });
+  const contextOpts = { filename: configPath, dirname: resolvedConfigDirPath };
+
+  return {
+    content,
+    contextOpts,
+  };
+}
+
+export default load;
diff --git a/addons/storyshots/src/react/loader.js b/addons/storyshots/src/react/loader.js
index dc1ac6d065bd..fd0a8171a4ac 100644
--- a/addons/storyshots/src/react/loader.js
+++ b/addons/storyshots/src/react/loader.js
@@ -1,34 +1,23 @@
-/* eslint-disable global-require,import/no-extraneous-dependencies */
-import path from 'path';
 import runWithRequireContext from '../require_context';
 import hasDependency from '../hasDependency';
-
-const babel = require('babel-core');
+import loadConfig from '../config-loader';
 
 function test(options) {
   return options.framework === 'react' || (!options.framework && hasDependency('@storybook/react'));
 }
 
 function load(options) {
-  const storybook = require.requireActual('@storybook/react');
-  const loadBabelConfig = require('@storybook/react/dist/server/babel_config').default;
-
-  const configDirPath = path.resolve(options.configPath || '.storybook');
-  const configPath = path.join(configDirPath, 'config.js');
-
-  const babelConfig = loadBabelConfig(configDirPath);
-  const content = babel.transformFileSync(configPath, babelConfig).code;
-  const contextOpts = {
-    filename: configPath,
-    dirname: configDirPath,
-  };
+  const { content, contextOpts } = loadConfig({
+    configDirPath: options.configPath,
+    babelConfigPath: '@storybook/react/dist/server/babel_config',
+  });
 
   runWithRequireContext(content, contextOpts);
 
   return {
-    renderTree: require('./renderTree').default,
     framework: 'react',
-    storybook,
+    renderTree: require.requireActual('./renderTree').default,
+    storybook: require.requireActual('@storybook/react'),
   };
 }
 

From 36daf9c514434b1ddebd3eee3f4766d253ae5365 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Tue, 2 Jan 2018 01:33:27 +0200
Subject: [PATCH 14/41] Use config-loader in vue/loader

---
 addons/storyshots/src/vue/loader.js | 33 ++++++++++-------------------
 1 file changed, 11 insertions(+), 22 deletions(-)

diff --git a/addons/storyshots/src/vue/loader.js b/addons/storyshots/src/vue/loader.js
index f3e858853ab7..8c57bdccd9fb 100644
--- a/addons/storyshots/src/vue/loader.js
+++ b/addons/storyshots/src/vue/loader.js
@@ -1,40 +1,29 @@
-/* eslint-disable global-require,import/no-extraneous-dependencies */
-import path from 'path';
 import runWithRequireContext from '../require_context';
 import hasDependency from '../hasDependency';
+import loadConfig from '../config-loader';
 
-const babel = require('babel-core');
+function mockVueToIncludeCompiler() {
+  jest.mock('vue', () => require.requireActual('vue/dist/vue.common.js'));
+}
 
 function test(options) {
   return options.framework === 'vue' || (!options.framework && hasDependency('@storybook/vue'));
 }
 
 function load(options) {
-  // Mock vue to have compiler-included build
-  jest.mock('vue', () => {
-    const vueCommonJs = require('vue/dist/vue.common.js');
-    return vueCommonJs;
-  });
-
-  const storybook = require.requireActual('@storybook/vue');
-  const loadBabelConfig = require('@storybook/vue/dist/server/babel_config').default;
+  mockVueToIncludeCompiler();
 
-  const configDirPath = path.resolve(options.configPath || '.storybook');
-  const configPath = path.join(configDirPath, 'config.js');
-
-  const babelConfig = loadBabelConfig(configDirPath);
-  const content = babel.transformFileSync(configPath, babelConfig).code;
-  const contextOpts = {
-    filename: configPath,
-    dirname: configDirPath,
-  };
+  const { content, contextOpts } = loadConfig({
+    configDirPath: options.configPath,
+    babelConfigPath: '@storybook/vue/dist/server/babel_config',
+  });
 
   runWithRequireContext(content, contextOpts);
 
   return {
-    renderTree: require('./renderTree').default,
     framework: 'vue',
-    storybook,
+    renderTree: require.requireActual('./renderTree').default,
+    storybook: require.requireActual('@storybook/vue'),
   };
 }
 

From 5ba2e9e727d66522b0af4d23b98c98d0be3fb78e Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Wed, 3 Jan 2018 08:58:36 +0200
Subject: [PATCH 15/41] Use prepare script in storyshots

---
 addons/storyshots/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/storyshots/package.json b/addons/storyshots/package.json
index b7ac0014dc9e..0d710c1c584b 100644
--- a/addons/storyshots/package.json
+++ b/addons/storyshots/package.json
@@ -11,7 +11,7 @@
   },
   "scripts": {
     "build-storybook": "build-storybook",
-    "prepare": "babel ./src --out-dir ./dist",
+    "prepare": "node ../../scripts/prepare.js",
     "storybook": "start-storybook -p 6006",
     "example": "jest storyshot.test"
   },

From 84237fb5cc17b1f307fac9bf8a597510d88170b3 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Wed, 3 Jan 2018 10:38:21 +0200
Subject: [PATCH 16/41] Angular + Jest + Storyshots = Crazy Shit. Move the
 `jest-preset-angular/setupJest` to be required before any storybook code is
 running inside jest -  one of the things that `jest-preset-angular/setupJest`
 does is extending the `window.Reflect` with all the needed metadata
 functions, that are required for emission of the TS decorations like
 'design:paramtypes'

---
 addons/storyshots/src/angular/loader.js       | 11 +++
 addons/storyshots/src/angular/renderTree.js   |  1 -
 .../di.component.stories.storyshot            | 88 +++++++++++++++++++
 3 files changed, 99 insertions(+), 1 deletion(-)
 create mode 100644 examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot

diff --git a/addons/storyshots/src/angular/loader.js b/addons/storyshots/src/angular/loader.js
index 608c6e312e7c..66ab73ebf777 100644
--- a/addons/storyshots/src/angular/loader.js
+++ b/addons/storyshots/src/angular/loader.js
@@ -2,6 +2,15 @@ import runWithRequireContext from '../require_context';
 import hasDependency from '../hasDependency';
 import loadConfig from '../config-loader';
 
+function setupAngularJestPreset() {
+  // Angular + Jest + Storyshots = Crazy Shit:
+  // We need to require 'jest-preset-angular/setupJest' before any storybook code
+  // is running inside jest -  one of the things that `jest-preset-angular/setupJest` does is
+  // extending the `window.Reflect` with all the needed metadata functions, that are required
+  // for emission of the TS decorations like 'design:paramtypes'
+  require.requireActual('jest-preset-angular/setupJest');
+}
+
 function test(options) {
   return (
     options.framework === 'angular' || (!options.framework && hasDependency('@storybook/angular'))
@@ -9,6 +18,8 @@ function test(options) {
 }
 
 function load(options) {
+  setupAngularJestPreset();
+
   const { content, contextOpts } = loadConfig({
     configDirPath: options.configPath,
     babelConfigPath: '@storybook/angular/dist/server/babel_config',
diff --git a/addons/storyshots/src/angular/renderTree.js b/addons/storyshots/src/angular/renderTree.js
index 34a868be01da..72c084abc771 100644
--- a/addons/storyshots/src/angular/renderTree.js
+++ b/addons/storyshots/src/angular/renderTree.js
@@ -1,4 +1,3 @@
-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';
diff --git a/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot b/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot
new file mode 100644
index 000000000000..84fdfac60823
--- /dev/null
+++ b/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot
@@ -0,0 +1,88 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Component dependencies inputs and inject dependencies 1`] = `
+<di-component
+  elRef={[Function ElementRef]}
+  injector={[Function Injector_]}
+  testToken={[Function Number]}
+>
+  <div>
+    
+    
+    <div>
+      All dependencies are defined: false
+    </div>
+    
+    
+    <div>
+      Title: 
+    </div>
+    
+    
+    <div>
+      Injector: function Injector_(view, elDef) {
+          this.view = view;
+          this.elDef = elDef;
+      }
+    </div>
+    
+    
+    <div>
+      ElementRef: {"nativeElement":{}}
+    </div>
+    
+    
+    <div>
+      TestToken: 123
+    </div>
+    
+  
+  </div>
+  
+</di-component>
+`;
+
+exports[`Storyshots Component dependencies inputs and inject dependencies with knobs 1`] = `
+<di-component
+  cd={[Function ViewRef_]}
+  elRef={[Function ElementRef]}
+  injector={[Function Injector_]}
+  knobChanged={[Function Function]}
+  setPaneKnobs={[Function Function]}
+  testToken={[Function Number]}
+>
+  <div>
+    
+    
+    <div>
+      All dependencies are defined: false
+    </div>
+    
+    
+    <div>
+      Title: 
+    </div>
+    
+    
+    <div>
+      Injector: function Injector_(view, elDef) {
+          this.view = view;
+          this.elDef = elDef;
+      }
+    </div>
+    
+    
+    <div>
+      ElementRef: {"nativeElement":{}}
+    </div>
+    
+    
+    <div>
+      TestToken: 123
+    </div>
+    
+  
+  </div>
+  
+</di-component>
+`;

From 7fc4888955e38fbd0d952d0ecbeeb940677cede6 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Wed, 3 Jan 2018 11:30:39 +0200
Subject: [PATCH 17/41] Define global.STORYBOOK_ENV to be 'vue' because there
 are addons that check this env variable

---
 addons/storyshots/src/vue/loader.js           |  2 ++
 .../vue-kitchen-sink/.storybook/config.js     |  4 +--
 .../src/stories/__snapshots__/index.storyshot | 34 +++++++++++++++++++
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/addons/storyshots/src/vue/loader.js b/addons/storyshots/src/vue/loader.js
index 8c57bdccd9fb..8789bf6d3b57 100644
--- a/addons/storyshots/src/vue/loader.js
+++ b/addons/storyshots/src/vue/loader.js
@@ -1,3 +1,4 @@
+import global from 'global';
 import runWithRequireContext from '../require_context';
 import hasDependency from '../hasDependency';
 import loadConfig from '../config-loader';
@@ -11,6 +12,7 @@ function test(options) {
 }
 
 function load(options) {
+  global.STORYBOOK_ENV = 'vue';
   mockVueToIncludeCompiler();
 
   const { content, contextOpts } = loadConfig({
diff --git a/examples/vue-kitchen-sink/.storybook/config.js b/examples/vue-kitchen-sink/.storybook/config.js
index b386ac70f002..385320a351f4 100644
--- a/examples/vue-kitchen-sink/.storybook/config.js
+++ b/examples/vue-kitchen-sink/.storybook/config.js
@@ -5,8 +5,8 @@ import Vuex from 'vuex'
 
 import MyButton from '../src/stories/Button.vue'
 
-Vue.component('my-button', MyButton)
-Vue.use(Vuex)
+Vue.component('my-button', MyButton);
+Vue.use(Vuex);
 
 function loadStories() {
   require('../src/stories');
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/index.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/index.storyshot
index 1540e1a949c5..10d1b30e7572 100644
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/index.storyshot
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/index.storyshot
@@ -176,6 +176,40 @@ exports[`Storyshots App App 1`] = `
 </div>
 `;
 
+exports[`Storyshots Button rounded 1`] = `
+<div
+  style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; overflow: auto;"
+>
+  <div
+    style="margin: auto;"
+  >
+    <button
+      class="button rounded"
+      style="color: rgb(66, 185, 131); border-color: #42b983;"
+    >
+      A Button with rounded edges!
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Button square 1`] = `
+<div
+  style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; overflow: auto;"
+>
+  <div
+    style="margin: auto;"
+  >
+    <button
+      class="button"
+      style="color: rgb(66, 185, 131); border-color: #42b983;"
+    >
+      A Button with square edges!
+    </button>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Decorator for Vue render 1`] = `
 <div
   style="border: medium solid blue;"

From 08cbbc87dd10b19bc36660dbc27f82aa6a70fe67 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Wed, 3 Jan 2018 12:24:02 +0200
Subject: [PATCH 18/41] Move angular and react to regular reps

---
 addons/storyshots/package.json | 8 ++++----
 yarn.lock                      | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/addons/storyshots/package.json b/addons/storyshots/package.json
index 0d710c1c584b..43315801ca12 100644
--- a/addons/storyshots/package.json
+++ b/addons/storyshots/package.json
@@ -16,6 +16,7 @@
     "example": "jest storyshot.test"
   },
   "dependencies": {
+    "@angular/core": ">=4.0.0",
     "@storybook/channels": "^3.3.3",
     "babel-runtime": "^6.26.0",
     "glob": "^7.1.2",
@@ -23,6 +24,8 @@
     "jest-preset-angular": "^5.0.0",
     "jest-specific-snapshot": "^0.3.0",
     "prop-types": "^15.6.0",
+    "react": "*",
+    "react-test-renderer": "*",
     "read-pkg-up": "^3.0.0"
   },
   "devDependencies": {
@@ -41,10 +44,7 @@
     "react-dom": "^16.1.0"
   },
   "peerDependencies": {
-    "@angular/core": ">=4.0.0",
     "@storybook/addons": "^3.3.3",
-    "babel-core": "^6.26.0 || ^7.0.0-0",
-    "react": "*",
-    "react-test-renderer": "*"
+    "babel-core": "^6.26.0 || ^7.0.0-0"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index ec6ba3021385..c5759b5a3141 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -118,7 +118,7 @@
   dependencies:
     tslib "^1.7.1"
 
-"@angular/core@^5.0.0-beta.7":
+"@angular/core@>=4.0.0", "@angular/core@^5.0.0-beta.7":
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/@angular/core/-/core-5.1.2.tgz#751070c0f4e5a8c4e2170204e08eca06391b84b1"
   dependencies:
@@ -11401,7 +11401,7 @@ react-style-proptype@^3.0.0:
   dependencies:
     prop-types "^15.5.4"
 
-react-test-renderer@^16.0.0-0, react-test-renderer@^16.1.0, react-test-renderer@^16.2.0:
+react-test-renderer@*, react-test-renderer@^16.0.0-0, react-test-renderer@^16.1.0, react-test-renderer@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.2.0.tgz#bddf259a6b8fcd8555f012afc8eacc238872a211"
   dependencies:

From 347bdc20a43564a10e87ade4443bd8f8b0258b7e Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Wed, 3 Jan 2018 13:26:54 +0200
Subject: [PATCH 19/41] Add utils.test.js

---
 addons/storyshots/src/utils.test.js | 46 +++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 addons/storyshots/src/utils.test.js

diff --git a/addons/storyshots/src/utils.test.js b/addons/storyshots/src/utils.test.js
new file mode 100644
index 000000000000..1bd20e07effd
--- /dev/null
+++ b/addons/storyshots/src/utils.test.js
@@ -0,0 +1,46 @@
+import { getPossibleStoriesFiles, getSnapshotFileName } from './utils';
+
+describe('getSnapshotFileName', () => {
+  it('fileName is provided - snapshot is stored in __snapshots__ dir', () => {
+    const context = { fileName: 'foo.js' };
+
+    const result = getSnapshotFileName(context);
+    const platformAgnosticResult = result.replace(/\\|\//g, '/');
+
+    expect(platformAgnosticResult).toBe('__snapshots__/foo.storyshot');
+  });
+
+  it('fileName with multiple extensions is provided - only the last extension is replaced', () => {
+    const context = { fileName: 'foo.web.stories.js' };
+
+    const result = getSnapshotFileName(context);
+    const platformAgnosticResult = result.replace(/\\|\//g, '/');
+
+    expect(platformAgnosticResult).toBe('__snapshots__/foo.web.stories.storyshot');
+  });
+
+  it('fileName with dir is provided - __snapshots__ dir is created inside another dir', () => {
+    const context = { fileName: 'test/foo.js' };
+
+    const result = getSnapshotFileName(context);
+    const platformAgnosticResult = result.replace(/\\|\//g, '/');
+
+    expect(platformAgnosticResult).toBe('test/__snapshots__/foo.storyshot');
+  });
+});
+
+describe('getPossibleStoriesFiles', () => {
+  it('storyshots is provided and all the posible stories file names are returned', () => {
+    const storyshots = 'test/__snapshots__/foo.web.stories.storyshot';
+
+    const result = getPossibleStoriesFiles(storyshots);
+    const platformAgnosticResult = result.map(path => path.replace(/\\|\//g, '/'));
+
+    expect(platformAgnosticResult).toEqual([
+      'test/foo.web.stories.js',
+      'test/foo.web.stories.jsx',
+      'test/foo.web.stories.ts',
+      'test/foo.web.stories.tsx',
+    ]);
+  });
+});

From 637a919b8da0a638b5e8a0e353f98b068d3d701f Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Wed, 3 Jan 2018 13:29:49 +0200
Subject: [PATCH 20/41] Fix indentation

---
 examples/angular-cli/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
index 1da0e88b8b73..e67cef092fd0 100644
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@@ -34,7 +34,7 @@
     "@storybook/addon-actions": "^3.3.3",
     "@storybook/addon-links": "^3.3.3",
     "@storybook/addon-notes": "^3.3.3",
-	"@storybook/addon-storyshots": "^3.3.3",
+	  "@storybook/addon-storyshots": "^3.3.3",
     "@storybook/addons": "^3.3.3",
     "@storybook/angular": "^3.3.3",
     "@types/jasmine": "~2.8.3",

From ea2db195cc64b7a9c030bbe7d32dc7aa0fea2e1f Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Wed, 3 Jan 2018 15:51:29 +0200
Subject: [PATCH 21/41] Wrap story with app.component like in the app/angular
 and set dynamically all the props

---
 addons/storyshots/package.json                |   1 +
 .../storyshots/src/angular/app.component.ts   |  40 +++
 addons/storyshots/src/angular/helpers.ts      |  11 +-
 addons/storyshots/src/angular/renderTree.js   |  12 +-
 .../src/angular/setPropsToComponent.ts        |  60 ++++
 addons/storyshots/src/angular/types.ts        |  15 +-
 .../addon-actions.stories.storyshot           |  46 ++-
 .../addon-knobs.stories.storyshot             | 134 ++++----
 .../addon-links.stories.storyshot             |  23 +-
 .../addon-notes.stories.storyshot             |  46 ++-
 .../app.component.stories.storyshot           | 126 ++++----
 .../custom-metadata.stories.storyshot         |  97 +++---
 .../src/stories/__snapshots__/index.storyshot | 306 ++++++++++--------
 .../di.component.stories.storyshot            | 121 +++----
 .../custom-cva-component.stories.storyshot    |  27 +-
 15 files changed, 642 insertions(+), 423 deletions(-)
 create mode 100644 addons/storyshots/src/angular/app.component.ts
 create mode 100644 addons/storyshots/src/angular/setPropsToComponent.ts

diff --git a/addons/storyshots/package.json b/addons/storyshots/package.json
index dc06b3546ce6..5e27dddd65a7 100644
--- a/addons/storyshots/package.json
+++ b/addons/storyshots/package.json
@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@angular/core": ">=4.0.0",
+    "@angular/platform-browser-dynamic": ">=4.0.0",
     "@storybook/channels": "^3.3.3",
     "babel-runtime": "^6.26.0",
     "glob": "^7.1.2",
diff --git a/addons/storyshots/src/angular/app.component.ts b/addons/storyshots/src/angular/app.component.ts
new file mode 100644
index 000000000000..af984a60a202
--- /dev/null
+++ b/addons/storyshots/src/angular/app.component.ts
@@ -0,0 +1,40 @@
+import {
+  Component,
+  Inject,
+  OnInit,
+  ViewChild,
+  ViewContainerRef,
+  ComponentFactoryResolver,
+} from '@angular/core';
+import { STORY } from './app.token';
+import { NgStory } from './types';
+import { setProps } from './setPropsToComponent';
+
+@Component({
+  selector: 'app-root',
+  template: '<ng-template #target></ng-template>'
+})
+export class AppComponent implements OnInit {
+  @ViewChild('target', { read: ViewContainerRef })
+  target: ViewContainerRef;
+  constructor(
+    private cfr: ComponentFactoryResolver,
+    @Inject(STORY) private data: NgStory
+  ) {}
+
+  /*
+  * We need to use here the ngOnInit instead of ngAfterViewInit,
+  * otherwise there will get ExpressionChangedAfterItHasBeenCheckedError in tests
+   */
+  ngOnInit(): void {
+    this.putInMyHtml();
+  }
+
+  private putInMyHtml(): void {
+    this.target.clear();
+    const compFactory = this.cfr.resolveComponentFactory(this.data.component);
+    const instance = this.target.createComponent(compFactory).instance;
+
+    setProps(instance, this.data);
+  }
+}
diff --git a/addons/storyshots/src/angular/helpers.ts b/addons/storyshots/src/angular/helpers.ts
index 6ab46d84cca9..73172dadc05b 100644
--- a/addons/storyshots/src/angular/helpers.ts
+++ b/addons/storyshots/src/angular/helpers.ts
@@ -4,9 +4,10 @@ import {
   Component,
 } from '@angular/core';
 
+import { AppComponent } from './app.component';
 import { STORY } from './app.token';
 import { getAnnotations, getParameters, getPropMetadata } from './utils';
-import { NgModuleMetadata, NgStory, NgProvidedData } from './types';
+import { NgModuleMetadata, NgStory } from './types';
 
 interface IComponent extends Type<any> {
   annotations: any[];
@@ -76,7 +77,7 @@ const getModule = (
     declarations: Array<Type<any> | any[]>,
     entryComponents: Array<Type<any> | any[]>,
     bootstrap: Array<Type<any> | any[]>,
-    data: NgProvidedData,
+    data: NgStory,
     moduleMetadata: NgModuleMetadata = {
       imports: [],
       schemas: [],
@@ -122,11 +123,11 @@ export const initModuleData = (currentStory: NgStory): any => {
   };
 
   return {
-    AnnotatedComponent,
+    AppComponent,
     moduleMeta: getModule(
+      [AppComponent, AnnotatedComponent],
       [AnnotatedComponent],
-      [AnnotatedComponent],
-      [],
+      [AppComponent],
       story,
       moduleMeta
     ),
diff --git a/addons/storyshots/src/angular/renderTree.js b/addons/storyshots/src/angular/renderTree.js
index 72c084abc771..94c478dd3254 100644
--- a/addons/storyshots/src/angular/renderTree.js
+++ b/addons/storyshots/src/angular/renderTree.js
@@ -1,6 +1,7 @@
 import AngularSnapshotSerializer from 'jest-preset-angular/AngularSnapshotSerializer';
 import HTMLCommentSerializer from 'jest-preset-angular/HTMLCommentSerializer';
 import { TestBed } from '@angular/core/testing';
+import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { addSerializer } from 'jest-specific-snapshot';
 import { initModuleData } from './helpers.ts';
@@ -11,19 +12,24 @@ addSerializer(AngularSnapshotSerializer);
 function getRenderedTree(story, context) {
   const currentStory = story.render(context);
 
-  const { moduleMeta, AnnotatedComponent } = initModuleData(currentStory);
+  const { moduleMeta, AppComponent } = initModuleData(currentStory);
 
   TestBed.configureTestingModule({
     imports: [...moduleMeta.imports],
     declarations: [...moduleMeta.declarations],
     providers: [...moduleMeta.providers],
     schemas: [NO_ERRORS_SCHEMA, ...moduleMeta.schemas],
-    entryComponents: [...moduleMeta.entryComponents],
     bootstrap: [...moduleMeta.bootstrap],
   });
 
+  TestBed.overrideModule(BrowserDynamicTestingModule, {
+    set: {
+      entryComponents: [...moduleMeta.entryComponents],
+    },
+  });
+
   return TestBed.compileComponents().then(() => {
-    const tree = TestBed.createComponent(AnnotatedComponent);
+    const tree = TestBed.createComponent(AppComponent);
     tree.detectChanges();
 
     return tree;
diff --git a/addons/storyshots/src/angular/setPropsToComponent.ts b/addons/storyshots/src/angular/setPropsToComponent.ts
new file mode 100644
index 000000000000..9783fd0e9cc8
--- /dev/null
+++ b/addons/storyshots/src/angular/setPropsToComponent.ts
@@ -0,0 +1,60 @@
+import * as _ from 'lodash';
+
+import {
+  EventEmitter,
+  SimpleChanges,
+  SimpleChange,
+} from '@angular/core';
+
+import { NgStory, ICollection } from './types';
+
+
+/**
+ * Set inputs and outputs
+ */
+function setProps(instance: any, {props = {}, propsMeta = {}}: NgStory): void {
+  const changes: SimpleChanges = {};
+  const hasNgOnChangesHook = _.has(instance, 'ngOnChanges');
+
+  _.forEach(propsMeta, (meta, key) => {
+    const value = props[key];
+    const instanceProperty = <any>_.get(instance, key);
+
+    if (!(instanceProperty instanceof EventEmitter) && !_.isUndefined(value)) {
+      _.set(instance, key, value);
+      if (hasNgOnChangesHook) {
+        changes[key] = new SimpleChange(undefined, value, instanceProperty === undefined);
+      }
+    } else if (_.isFunction(value) && (key !== 'ngModelChange')) {
+      instanceProperty.subscribe(value);
+    }
+  });
+
+  callNgOnChangesHook(instance, changes);
+  setNgModel(instance, props);
+}
+
+/**
+ * Manually call 'ngOnChanges' hook because angular doesn't do that for dynamic components
+ * Issue: [https://github.com/angular/angular/issues/8903]
+ */
+function callNgOnChangesHook(instance: any, changes: SimpleChanges): void {
+  if (!_.isEmpty(changes)) {
+    _.invoke(instance, 'ngOnChanges', changes);
+  }
+}
+
+/**
+ * If component implements ControlValueAccessor interface try to set ngModel
+ */
+function setNgModel(instance: any, props: ICollection): void {
+  if (_.has(props, 'ngModel')) {
+    _.invoke(instance, 'writeValue', props.ngModel);
+  }
+
+  if (_.isFunction(props.ngModelChange)) {
+    _.invoke(instance, 'registerOnChange', props.ngModelChange);
+  }
+}
+
+export { setProps };
\ No newline at end of file
diff --git a/addons/storyshots/src/angular/types.ts b/addons/storyshots/src/angular/types.ts
index 7109bcf1226d..2f5e235a4766 100644
--- a/addons/storyshots/src/angular/types.ts
+++ b/addons/storyshots/src/angular/types.ts
@@ -12,17 +12,4 @@ export interface NgStory {
     props: ICollection,
     propsMeta: ICollection,
     moduleMetadata?: NgModuleMetadata
-}
-
-export interface NgError {
-    message: string,
-    stack: string
-}
-
-export type NgProvidedData = NgStory | NgError;
-
-export interface IContext {
-    [p: string]: any
-}
-
-export type IGetStoryWithContext = (context: IContext) => NgStory
+}
\ No newline at end of file
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
index f86a428fa3f4..e26575399fee 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
@@ -1,31 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Addon Actions Action and method 1`] = `
-<button-component
-  onClick={[Function EventEmitter]}
-  text=""
+<app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
 >
-  
-        <button
-    _ngcontent-c4=""
+  <button-component
+    _nghost-c4=""
   >
     
-  </button>
+        
+    <button
+      _ngcontent-c4=""
+    >
+      Action and Method
+    </button>
     
-</button-component>
+    
+  </button-component>
+</app-root>
 `;
 
 exports[`Storyshots Addon Actions Action only 1`] = `
-<button-component
-  onClick={[Function EventEmitter]}
-  text=""
+<app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
 >
-  
-        <button
-    _ngcontent-c3=""
+  <button-component
+    _nghost-c3=""
   >
     
-  </button>
+        
+    <button
+      _ngcontent-c3=""
+    >
+      Action only
+    </button>
+    
     
-</button-component>
+  </button-component>
+</app-root>
 `;
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot
index a6d2a30d2997..7d69de41505c 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot
@@ -1,77 +1,103 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Addon Knobs All knobs 1`] = `
-<simple-knobs-component
-  cd={[Function ViewRef_]}
-  knobChanged={[Function Function]}
-  setPaneKnobs={[Function Function]}
+<app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
 >
-  
-      <div
-    ng-reflect-ng-style="[object Object]"
-    style="border-radius: 8px;"
-  >
-    
-        
-    <h1>
-      My name is ,
-    </h1>
-    
-        
-    <h3>
-      today is 
-    </h3>
+  <simple-knobs-component>
     
+      
+    <div
+      ng-reflect-ng-style="[object Object]"
+      style="border-radius: 8px;"
+    >
+      
         
-    
-    
+      <h1>
+        My name is Jane,
+      </h1>
+      
         
-    
-    <p>
-      I'm out of .
-    </p>
-     
-    
-    
+      <h3>
+        today is Jan 20, 2017
+      </h3>
+      
         
-    <p>
-      Also, I have:
-    </p>
-    
+      
+      <p>
+        I have a stock of 20 apple, costing $ 2.25 each.
+      </p>
+      
         
-    <ul>
       
-          
+       
       
+      <p>
+        Sorry.
+      </p>
       
         
-    </ul>
-    
+      <p>
+        Also, I have:
+      </p>
+      
         
-    
-    
+      <ul>
         
-    
-    <p>
-      Leave me alone!
-    </p>
-    
+          
+        
+        <li>
+          
+            Laptop
+          
+        </li>
+        <li>
+          
+            Book
+          
+        </li>
+        <li>
+          
+            Whiskey
+          
+        </li>
+        
+        
+      </ul>
       
-  </div>
+        
+      
+      <p>
+        Nice to meet you!
+      </p>
+      
+        
+      
+      
+      
+    </div>
+    
     
-</simple-knobs-component>
+  </simple-knobs-component>
+</app-root>
 `;
 
 exports[`Storyshots Addon Knobs Simple 1`] = `
-<simple-knobs-component
-  cd={[Function ViewRef_]}
-  knobChanged={[Function Function]}
-  setPaneKnobs={[Function Function]}
+<app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
 >
-  
-      <div>
-    I am  and I'm  years old.
-  </div>
+  <simple-knobs-component>
+    
+      
+    <div>
+      I am John Doe and I'm 44 years old.
+    </div>
+    
     
-</simple-knobs-component>
+  </simple-knobs-component>
+</app-root>
 `;
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot
index 07405a58e2db..c22268469bf9 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot
@@ -1,16 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Another Button button with link to another story 1`] = `
-<button-component
-  onClick={[Function EventEmitter]}
-  text=""
+<app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
 >
-  
-        <button
-    _ngcontent-c5=""
+  <button-component
+    _nghost-c5=""
   >
     
-  </button>
+        
+    <button
+      _ngcontent-c5=""
+    >
+      Go to Welcome Story
+    </button>
     
-</button-component>
+    
+  </button-component>
+</app-root>
 `;
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot
index 182ee5c71d16..df9e22bb61e4 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot
@@ -1,31 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Addon Notes Note with HTML 1`] = `
-<button-component
-  onClick={[Function EventEmitter]}
-  text=""
+<app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
 >
-  
-        <button
-    _ngcontent-c7=""
+  <button-component
+    _nghost-c7=""
   >
     
-  </button>
+        
+    <button
+      _ngcontent-c7=""
+    >
+      Notes with HTML
+    </button>
     
-</button-component>
+    
+  </button-component>
+</app-root>
 `;
 
 exports[`Storyshots Addon Notes Simple note 1`] = `
-<button-component
-  onClick={[Function EventEmitter]}
-  text=""
+<app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
 >
-  
-        <button
-    _ngcontent-c6=""
+  <button-component
+    _nghost-c6=""
   >
     
-  </button>
+        
+    <button
+      _ngcontent-c6=""
+    >
+      Notes on some Button
+    </button>
+    
     
-</button-component>
+  </button-component>
+</app-root>
 `;
diff --git a/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot
index e94e0896ce43..2b6d704b77a0 100644
--- a/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot
@@ -2,84 +2,94 @@
 
 exports[`Storyshots App Component Component with separate template 1`] = `
 <app-root
-  title={[Function String]}
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
 >
-  
-  <div
-    style="text-align:center"
-  >
-    
+  <app-root>
     
-    <h1>
+  
+    <div
+      style="text-align:center"
+    >
       
-      Welcome to app!
-    
-    </h1>
     
+      <h1>
+        
+      Welcome to app!
     
-    <img
-      src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
-      width="300"
-    />
+      </h1>
+      
     
+      <img
+        src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
+        width="300"
+      />
+      
   
-  </div>
-  <h2>
-    Here are some links to help you start: 
-  </h2>
-  <ul>
+    </div>
     
+  
+    <h2>
+      Here are some links to help you start: 
+    </h2>
     
-    <li>
+  
+    <ul>
       
+    
+      <li>
+        
       
-      <h2>
-        <a
-          href="https://angular.io/tutorial"
-          target="_blank"
-        >
-          Tour of Heroes
-        </a>
-      </h2>
+        <h2>
+          <a
+            href="https://angular.io/tutorial"
+            target="_blank"
+          >
+            Tour of Heroes
+          </a>
+        </h2>
+        
+    
+      </li>
       
     
-    </li>
-    
-    
-    <li>
+      <li>
+        
       
+        <h2>
+          <a
+            href="https://github.com/angular/angular-cli/wiki"
+            target="_blank"
+          >
+            CLI Documentation
+          </a>
+        </h2>
+        
+    
+      </li>
       
-      <h2>
-        <a
-          href="https://github.com/angular/angular-cli/wiki"
-          target="_blank"
-        >
-          CLI Documentation
-        </a>
-      </h2>
-      
-    
-    </li>
     
-    
-    <li>
-      
+      <li>
+        
       
-      <h2>
-        <a
-          href="https://blog.angular.io//"
-          target="_blank"
-        >
-          Angular blog
-        </a>
-      </h2>
+        <h2>
+          <a
+            href="https://blog.angular.io//"
+            target="_blank"
+          >
+            Angular blog
+          </a>
+        </h2>
+        
+    
+      </li>
       
-    
-    </li>
-    
   
-  </ul>
+    </ul>
+    
   
   
+  </app-root>
 </app-root>
 `;
diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot
index d3a4b5f7c282..d3f4bf8f9585 100644
--- a/examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot
@@ -1,62 +1,83 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Custom Pipe Default 1`] = `
-<name>
-  <h1>
-    CustomPipe: undefined
-  </h1>
-</name>
+<app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <name>
+    <h1>
+      CustomPipe: foobar
+    </h1>
+  </name>
+</app-root>
 `;
 
 exports[`Storyshots Custom Pipe/With Knobs NameComponent 1`] = `
-<name
-  cd={[Function ViewRef_]}
-  knobChanged={[Function Function]}
-  setPaneKnobs={[Function Function]}
+<app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
 >
-  <h1>
-    CustomPipe: undefined
-  </h1>
-</name>
+  <name>
+    <h1>
+      CustomPipe: foobar
+    </h1>
+  </name>
+</app-root>
 `;
 
 exports[`Storyshots Custom ngModule metadata simple 1`] = `
-<simple-service-component
-  dummy={[Function DummyService]}
+<app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
 >
-  
-      <p>
-    :
-  </p>
-      <ul>
-    
-        
+  <simple-service-component>
     
+      
+    <p>
+      Static name:
+    </p>
     
       
-  </ul>
+    <ul>
+      
+        
+      
+      
+      
+    </ul>
+    
     
-</simple-service-component>
+  </simple-service-component>
+</app-root>
 `;
 
 exports[`Storyshots Custom ngModule metadata with knobs 1`] = `
-<simple-service-component
-  cd={[Function ViewRef_]}
-  dummy={[Function DummyService]}
-  knobChanged={[Function Function]}
-  setPaneKnobs={[Function Function]}
+<app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
 >
-  
-      <p>
-    :
-  </p>
-      <ul>
-    
-        
+  <simple-service-component>
     
+      
+    <p>
+      Dynamic knob:
+    </p>
     
       
-  </ul>
+    <ul>
+      
+        
+      
+      
+      
+    </ul>
+    
     
-</simple-service-component>
+  </simple-service-component>
+</app-root>
 `;
diff --git a/examples/angular-cli/src/stories/__snapshots__/index.storyshot b/examples/angular-cli/src/stories/__snapshots__/index.storyshot
index 00b63d099123..2544eccd0523 100644
--- a/examples/angular-cli/src/stories/__snapshots__/index.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/index.storyshot
@@ -1,203 +1,225 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Button with some emoji 1`] = `
-<button-component
-  onClick={[Function EventEmitter]}
-  text=""
+<app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
 >
-  
-        <button
-    _ngcontent-c2=""
+  <button-component
+    _nghost-c2=""
   >
     
-  </button>
+        
+    <button
+      _ngcontent-c2=""
+    >
+      😀 😎 👍 💯
+    </button>
+    
     
-</button-component>
+  </button-component>
+</app-root>
 `;
 
 exports[`Storyshots Button with text 1`] = `
-<button-component
-  onClick={[Function EventEmitter]}
-  text=""
+<app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
 >
-  
-        <button
-    _ngcontent-c1=""
+  <button-component
+    _nghost-c1=""
   >
     
-  </button>
+        
+    <button
+      _ngcontent-c1=""
+    >
+      Hello Button
+    </button>
+    
     
-</button-component>
+  </button-component>
+</app-root>
 `;
 
 exports[`Storyshots Welcome to Storybook 1`] = `
-<welcome-component
-  displayName={[Function String]}
+<app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
 >
-  
-        <main
-    _ngcontent-c0=""
+  <welcome-component
+    _nghost-c0=""
   >
     
-          
-    <h1
+        
+    <main
       _ngcontent-c0=""
     >
-      Welcome to storybook
-    </h1>
-    
+      
           
-    <p
-      _ngcontent-c0=""
-    >
-      This is a UI component dev environment for your app.
-    </p>
-    
+      <h1
+        _ngcontent-c0=""
+      >
+        Welcome to storybook
+      </h1>
+      
           
-    <p
-      _ngcontent-c0=""
-    >
+      <p
+        _ngcontent-c0=""
+      >
+        This is a UI component dev environment for your app.
+      </p>
       
-            We've added some basic stories inside the 
-      <span
+          
+      <p
         _ngcontent-c0=""
-        class="inline-code"
       >
-        src/stories
-      </span>
-       directory.
+        
+            We've added some basic stories inside the 
+        <span
+          _ngcontent-c0=""
+          class="inline-code"
+        >
+          src/stories
+        </span>
+         directory.
             
-      <br
-        _ngcontent-c0=""
-      />
-      
+        <br
+          _ngcontent-c0=""
+        />
+        
             A story is a single state of one or more UI components. You can have as many stories as
             you want.
             
-      <br
-        _ngcontent-c0=""
-      />
-      
+        <br
+          _ngcontent-c0=""
+        />
+        
             (Basically a story is like a visual test case.)
           
-    </p>
-    
-          
-    <p
-      _ngcontent-c0=""
-    >
+      </p>
       
-            See these sample 
-      <a
-        _ngcontent-c0=""
-        role="button"
-        tabindex="0"
-      >
-        stories
-      </a>
-       for a component called 
-      <span
+          
+      <p
         _ngcontent-c0=""
-        class="inline-code"
       >
-        Button
-      </span>
-       .
-          
-    </p>
-    
+        
+            See these sample 
+        <a
+          _ngcontent-c0=""
+          role="button"
+          tabindex="0"
+        >
+          stories
+        </a>
+         for a component called 
+        <span
+          _ngcontent-c0=""
+          class="inline-code"
+        >
+          Button
+        </span>
+         .
           
-    <p
-      _ngcontent-c0=""
-    >
+      </p>
       
+          
+      <p
+        _ngcontent-c0=""
+      >
+        
             Just like that, you can add your own components as stories.
             
-      <br
-        _ngcontent-c0=""
-      />
-      
+        <br
+          _ngcontent-c0=""
+        />
+        
             You can also edit those components and see changes right away.
             
-      <br
-        _ngcontent-c0=""
-      />
-      
+        <br
+          _ngcontent-c0=""
+        />
+        
             (Try editing the 
-      <span
-        _ngcontent-c0=""
-        class="inline-code"
-      >
-        Button
-      </span>
-       stories
+        <span
+          _ngcontent-c0=""
+          class="inline-code"
+        >
+          Button
+        </span>
+         stories
             located at 
-      <span
-        _ngcontent-c0=""
-        class="inline-code"
-      >
-        src/stories/index.js
-      </span>
-      .)
-          
-    </p>
-    
+        <span
+          _ngcontent-c0=""
+          class="inline-code"
+        >
+          src/stories/index.js
+        </span>
+        .)
           
-    <p
-      _ngcontent-c0=""
-    >
+      </p>
       
-            Usually we create stories with smaller UI components in the app.
-      <br
-        _ngcontent-c0=""
-      />
-      
-            Have a look at the 
-      <a
+          
+      <p
         _ngcontent-c0=""
-        href="https://storybook.js.org/basics/writing-stories"
-        rel="noopener noreferrer"
-        target="_blank"
       >
         
+            Usually we create stories with smaller UI components in the app.
+        <br
+          _ngcontent-c0=""
+        />
+        
+            Have a look at the 
+        <a
+          _ngcontent-c0=""
+          href="https://storybook.js.org/basics/writing-stories"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          
               Writing Stories
             
-      </a>
-       section in our documentation.
-          
-    </p>
-    
+        </a>
+         section in our documentation.
           
-    <p
-      _ngcontent-c0=""
-      class="note"
-    >
+      </p>
       
-            
-      <b
+          
+      <p
         _ngcontent-c0=""
+        class="note"
       >
-        NOTE:
-      </b>
-      
+        
             
-      <br
-        _ngcontent-c0=""
-      />
-      
+        <b
+          _ngcontent-c0=""
+        >
+          NOTE:
+        </b>
+        
+            
+        <br
+          _ngcontent-c0=""
+        />
+        
             Have a look at the 
-      <span
-        _ngcontent-c0=""
-        class="inline-code"
-      >
-        .storybook/webpack.config.js
-      </span>
-       to add webpack loaders and plugins you are using in this project.
+        <span
+          _ngcontent-c0=""
+          class="inline-code"
+        >
+          .storybook/webpack.config.js
+        </span>
+         to add webpack loaders and plugins you are using in this project.
           
-    </p>
-    
+      </p>
+      
         
-  </main>
+    </main>
+    
     
-</welcome-component>
+  </welcome-component>
+</app-root>
 `;
diff --git a/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot b/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot
index 84fdfac60823..b517ff0d36a5 100644
--- a/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot
+++ b/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot
@@ -1,88 +1,91 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Component dependencies inputs and inject dependencies 1`] = `
-<di-component
-  elRef={[Function ElementRef]}
-  injector={[Function Injector_]}
-  testToken={[Function Number]}
+<app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
 >
-  <div>
-    
-    
+  <di-component>
     <div>
-      All dependencies are defined: false
-    </div>
+      
     
+      <div>
+        All dependencies are defined: true
+      </div>
+      
     
-    <div>
-      Title: 
-    </div>
+      <div>
+        Title: Component dependencies
+      </div>
+      
     
-    
-    <div>
-      Injector: function Injector_(view, elDef) {
+      <div>
+        Injector: function Injector_(view, elDef) {
           this.view = view;
           this.elDef = elDef;
       }
+      </div>
+      
+    
+      <div>
+        ElementRef: {"nativeElement":{}}
+      </div>
+      
+    
+      <div>
+        TestToken: 123
+      </div>
+      
+  
     </div>
     
-    
-    <div>
-      ElementRef: {"nativeElement":{}}
-    </div>
-    
-    
-    <div>
-      TestToken: 123
-    </div>
-    
-  
-  </div>
   
-</di-component>
+  </di-component>
+</app-root>
 `;
 
 exports[`Storyshots Component dependencies inputs and inject dependencies with knobs 1`] = `
-<di-component
-  cd={[Function ViewRef_]}
-  elRef={[Function ElementRef]}
-  injector={[Function Injector_]}
-  knobChanged={[Function Function]}
-  setPaneKnobs={[Function Function]}
-  testToken={[Function Number]}
+<app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
 >
-  <div>
-    
-    
+  <di-component>
     <div>
-      All dependencies are defined: false
-    </div>
+      
     
+      <div>
+        All dependencies are defined: true
+      </div>
+      
     
-    <div>
-      Title: 
-    </div>
+      <div>
+        Title: Component dependencies
+      </div>
+      
     
-    
-    <div>
-      Injector: function Injector_(view, elDef) {
+      <div>
+        Injector: function Injector_(view, elDef) {
           this.view = view;
           this.elDef = elDef;
       }
+      </div>
+      
+    
+      <div>
+        ElementRef: {"nativeElement":{}}
+      </div>
+      
+    
+      <div>
+        TestToken: 123
+      </div>
+      
+  
     </div>
     
-    
-    <div>
-      ElementRef: {"nativeElement":{}}
-    </div>
-    
-    
-    <div>
-      TestToken: 123
-    </div>
-    
-  
-  </div>
   
-</di-component>
+  </di-component>
+</app-root>
 `;
diff --git a/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot b/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
index 1ae6eea489e9..37e35e803b56 100644
--- a/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
+++ b/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
@@ -1,17 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots ngModel custom ControlValueAccessor 1`] = `
-<custom-cva-component
-  onChange={[Function Function]}
-  onTouch={[Function Function]}
+<app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
 >
-  
-      <div>
+  <custom-cva-component>
     
-  </div>
-      <input
-    type="text"
-  />
+      
+    <div>
+      Type anything
+    </div>
     
-</custom-cva-component>
+      
+    <input
+      type="text"
+    />
+    
+    
+  </custom-cva-component>
+</app-root>
 `;

From a1fd3cf21ea50870fdb2456df2ee1a84b5e54457 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Wed, 3 Jan 2018 16:36:05 +0200
Subject: [PATCH 22/41] typo and indentation

---
 addons/storyshots/src/angular/app.component.ts | 2 +-
 examples/angular-cli/package.json              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/addons/storyshots/src/angular/app.component.ts b/addons/storyshots/src/angular/app.component.ts
index af984a60a202..75ff164dd47d 100644
--- a/addons/storyshots/src/angular/app.component.ts
+++ b/addons/storyshots/src/angular/app.component.ts
@@ -24,7 +24,7 @@ export class AppComponent implements OnInit {
 
   /*
   * We need to use here the ngOnInit instead of ngAfterViewInit,
-  * otherwise there will get ExpressionChangedAfterItHasBeenCheckedError in tests
+  * otherwise there will be ExpressionChangedAfterItHasBeenCheckedError in tests
    */
   ngOnInit(): void {
     this.putInMyHtml();
diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
index e67cef092fd0..33cacdafc339 100644
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@@ -34,7 +34,7 @@
     "@storybook/addon-actions": "^3.3.3",
     "@storybook/addon-links": "^3.3.3",
     "@storybook/addon-notes": "^3.3.3",
-	  "@storybook/addon-storyshots": "^3.3.3",
+    "@storybook/addon-storyshots": "^3.3.3",
     "@storybook/addons": "^3.3.3",
     "@storybook/angular": "^3.3.3",
     "@types/jasmine": "~2.8.3",

From c35d48bad1de315135c115a18302a6bb61362194 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Wed, 3 Jan 2018 17:35:30 +0200
Subject: [PATCH 23/41] Update yarn.lock

---
 yarn.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/yarn.lock b/yarn.lock
index c315d125732a..614cc31fed91 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -140,7 +140,7 @@
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-5.1.2.tgz#0c0579c2feb7dd9afb2576e9b602779d45b30810"
 
-"@angular/platform-browser-dynamic@^5.0.0-beta.7":
+"@angular/platform-browser-dynamic@>=4.0.0", "@angular/platform-browser-dynamic@^5.0.0-beta.7":
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-5.1.2.tgz#120d49ce16bcb91b8ac1c5e5c634fba592359ad7"
   dependencies:

From 3bb8ab9d39bcf7bd09dc637700ddc80e88969195 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Wed, 3 Jan 2018 19:17:27 +0200
Subject: [PATCH 24/41] Move angular back to peer to check if cli tests are
 failing.

---
 addons/storyshots/package.json | 4 ++--
 yarn.lock                      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/addons/storyshots/package.json b/addons/storyshots/package.json
index 5e27dddd65a7..1ad44cd196ae 100644
--- a/addons/storyshots/package.json
+++ b/addons/storyshots/package.json
@@ -16,8 +16,6 @@
     "example": "jest storyshot.test"
   },
   "dependencies": {
-    "@angular/core": ">=4.0.0",
-    "@angular/platform-browser-dynamic": ">=4.0.0",
     "@storybook/channels": "^3.3.3",
     "babel-runtime": "^6.26.0",
     "glob": "^7.1.2",
@@ -46,6 +44,8 @@
     "react-dom": "^16.1.0"
   },
   "peerDependencies": {
+    "@angular/core": ">=4.0.0",
+    "@angular/platform-browser-dynamic": ">=4.0.0",
     "@storybook/addons": "^3.3.3",
     "babel-core": "^6.26.0 || ^7.0.0-0"
   }
diff --git a/yarn.lock b/yarn.lock
index 614cc31fed91..d97d4d3ff196 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -118,7 +118,7 @@
   dependencies:
     tslib "^1.7.1"
 
-"@angular/core@>=4.0.0", "@angular/core@^5.0.0-beta.7":
+"@angular/core@^5.0.0-beta.7":
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/@angular/core/-/core-5.1.2.tgz#751070c0f4e5a8c4e2170204e08eca06391b84b1"
   dependencies:
@@ -140,7 +140,7 @@
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-5.1.2.tgz#0c0579c2feb7dd9afb2576e9b602779d45b30810"
 
-"@angular/platform-browser-dynamic@>=4.0.0", "@angular/platform-browser-dynamic@^5.0.0-beta.7":
+"@angular/platform-browser-dynamic@^5.0.0-beta.7":
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-5.1.2.tgz#120d49ce16bcb91b8ac1c5e5c634fba592359ad7"
   dependencies:

From 45c7f24c897f46256a2e930f68143e9b0541d6dd Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Wed, 3 Jan 2018 19:52:59 +0200
Subject: [PATCH 25/41] Remove angular and vue deps from storyshots and
 suppress no-extraneous-dependencies.

---
 addons/storyshots/package.json              | 5 +----
 addons/storyshots/src/angular/renderTree.js | 1 +
 addons/storyshots/src/vue/renderTree.js     | 1 +
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/addons/storyshots/package.json b/addons/storyshots/package.json
index 1ad44cd196ae..cce304ed987d 100644
--- a/addons/storyshots/package.json
+++ b/addons/storyshots/package.json
@@ -25,8 +25,7 @@
     "prop-types": "^15.6.0",
     "react": "*",
     "react-test-renderer": "*",
-    "read-pkg-up": "^3.0.0",
-    "vue": "^2.5.13"
+    "read-pkg-up": "^3.0.0"
   },
   "devDependencies": {
     "@storybook/addons": "^3.3.3",
@@ -44,8 +43,6 @@
     "react-dom": "^16.1.0"
   },
   "peerDependencies": {
-    "@angular/core": ">=4.0.0",
-    "@angular/platform-browser-dynamic": ">=4.0.0",
     "@storybook/addons": "^3.3.3",
     "babel-core": "^6.26.0 || ^7.0.0-0"
   }
diff --git a/addons/storyshots/src/angular/renderTree.js b/addons/storyshots/src/angular/renderTree.js
index 94c478dd3254..54ce50799e2d 100644
--- a/addons/storyshots/src/angular/renderTree.js
+++ b/addons/storyshots/src/angular/renderTree.js
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import AngularSnapshotSerializer from 'jest-preset-angular/AngularSnapshotSerializer';
 import HTMLCommentSerializer from 'jest-preset-angular/HTMLCommentSerializer';
 import { TestBed } from '@angular/core/testing';
diff --git a/addons/storyshots/src/vue/renderTree.js b/addons/storyshots/src/vue/renderTree.js
index 75d8c3e3e82b..7b8e54a97f54 100644
--- a/addons/storyshots/src/vue/renderTree.js
+++ b/addons/storyshots/src/vue/renderTree.js
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import Vue from 'vue';
 
 function getRenderedTree(story, context) {

From ee1fad494c7a9174c9526dfd73f71c7d9f9700fa Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Wed, 3 Jan 2018 20:07:03 +0200
Subject: [PATCH 26/41] Remove react from deps as well and remove wildcard from
 react-test-renderer

---
 addons/storyshots/package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/addons/storyshots/package.json b/addons/storyshots/package.json
index cce304ed987d..f5548cb3e3fc 100644
--- a/addons/storyshots/package.json
+++ b/addons/storyshots/package.json
@@ -23,8 +23,7 @@
     "jest-preset-angular": "^5.0.0",
     "jest-specific-snapshot": "^0.3.0",
     "prop-types": "^15.6.0",
-    "react": "*",
-    "react-test-renderer": "*",
+    "react-test-renderer": "^16.2.0",
     "read-pkg-up": "^3.0.0"
   },
   "devDependencies": {

From 3aa07d0c2b1a7e3d0fe2c33fe877e0e1d7cbf839 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Wed, 3 Jan 2018 21:27:12 +0200
Subject: [PATCH 27/41] Update yarn.lock

---
 yarn.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/yarn.lock b/yarn.lock
index a1227faadec2..ab9d2cd44b41 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11417,7 +11417,7 @@ react-style-proptype@^3.0.0:
   dependencies:
     prop-types "^15.5.4"
 
-react-test-renderer@*, react-test-renderer@^16.0.0-0, react-test-renderer@^16.1.0, react-test-renderer@^16.2.0:
+react-test-renderer@^16.0.0-0, react-test-renderer@^16.1.0, react-test-renderer@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.2.0.tgz#bddf259a6b8fcd8555f012afc8eacc238872a211"
   dependencies:

From 279090c4be9d5273e28a7e0a76723654e7d6851c Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Thu, 4 Jan 2018 00:18:09 +0200
Subject: [PATCH 28/41] Disable each specific import separately with ugly
 "eslint-disable-next-line"

---
 addons/storyshots/src/angular/renderTree.js | 4 +++-
 addons/storyshots/src/vue/renderTree.js     | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/addons/storyshots/src/angular/renderTree.js b/addons/storyshots/src/angular/renderTree.js
index 54ce50799e2d..de53ec00bb3e 100644
--- a/addons/storyshots/src/angular/renderTree.js
+++ b/addons/storyshots/src/angular/renderTree.js
@@ -1,8 +1,10 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import AngularSnapshotSerializer from 'jest-preset-angular/AngularSnapshotSerializer';
 import HTMLCommentSerializer from 'jest-preset-angular/HTMLCommentSerializer';
+// eslint-disable-next-line
 import { TestBed } from '@angular/core/testing';
+// eslint-disable-next-line
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
+// eslint-disable-next-line
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { addSerializer } from 'jest-specific-snapshot';
 import { initModuleData } from './helpers.ts';
diff --git a/addons/storyshots/src/vue/renderTree.js b/addons/storyshots/src/vue/renderTree.js
index 7b8e54a97f54..e9597f8123a8 100644
--- a/addons/storyshots/src/vue/renderTree.js
+++ b/addons/storyshots/src/vue/renderTree.js
@@ -1,4 +1,4 @@
-/* eslint-disable import/no-extraneous-dependencies */
+// eslint-disable-next-line
 import Vue from 'vue';
 
 function getRenderedTree(story, context) {

From acfd41ef5d467acb133ff99a0a832f08237034d1 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Thu, 4 Jan 2018 00:46:54 +0200
Subject: [PATCH 29/41] Disable with specific rule, so the imports will be even
 uglier

---
 addons/storyshots/src/angular/renderTree.js | 6 +++---
 addons/storyshots/src/vue/renderTree.js     | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/addons/storyshots/src/angular/renderTree.js b/addons/storyshots/src/angular/renderTree.js
index de53ec00bb3e..b03ac81d57ef 100644
--- a/addons/storyshots/src/angular/renderTree.js
+++ b/addons/storyshots/src/angular/renderTree.js
@@ -1,10 +1,10 @@
 import AngularSnapshotSerializer from 'jest-preset-angular/AngularSnapshotSerializer';
 import HTMLCommentSerializer from 'jest-preset-angular/HTMLCommentSerializer';
-// eslint-disable-next-line
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { TestBed } from '@angular/core/testing';
-// eslint-disable-next-line
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
-// eslint-disable-next-line
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { addSerializer } from 'jest-specific-snapshot';
 import { initModuleData } from './helpers.ts';
diff --git a/addons/storyshots/src/vue/renderTree.js b/addons/storyshots/src/vue/renderTree.js
index e9597f8123a8..888c9820365f 100644
--- a/addons/storyshots/src/vue/renderTree.js
+++ b/addons/storyshots/src/vue/renderTree.js
@@ -1,4 +1,4 @@
-// eslint-disable-next-line
+// eslint-disable-next-line import/no-extraneous-dependencies
 import Vue from 'vue';
 
 function getRenderedTree(story, context) {

From e304771f9047f8fa898dfdec642095bd69a7cb6c Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Sat, 6 Jan 2018 12:01:32 +0200
Subject: [PATCH 30/41] Add docs for angular and vue

---
 addons/storyshots/README.md | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/addons/storyshots/README.md b/addons/storyshots/README.md
index 0505b724b24e..a5a6e2552b14 100644
--- a/addons/storyshots/README.md
+++ b/addons/storyshots/README.md
@@ -14,6 +14,8 @@ StoryShots adds automatic Jest Snapshot Testing for [Storybook](https://storyboo
 This addon works with Storybook for:
 - [React](https://github.com/storybooks/storybook/tree/master/app/react)
 - [React Native](https://github.com/storybooks/storybook/tree/master/app/react-native)
+- [Angular](https://github.com/storybooks/storybook/tree/master/app/angular)
+- [Vue](https://github.com/storybooks/storybook/tree/master/app/vue)
 
 ![StoryShots In Action](docs/storyshots-fail.png)
 
@@ -36,6 +38,35 @@ Usually, you might already have completed this step. If not, here are some resou
 
 > Note: If you use React 16, you'll need to follow [these additional instructions](https://github.com/facebook/react/issues/9102#issuecomment-283873039).
 
+### Configure Jest for Angular
+StoryShots addon brings with it a [jest-preset-angular](https://github.com/thymikee/jest-preset-angular). 
+If you already use Jest for testing your angular app - probably you already have the needed jest configuration.
+Anyway you can add these lines to your jest config:
+```js
+module.exports = {
+  globals: {
+    __TRANSFORM_HTML__: true,
+  },
+  transform: {
+    '^.+\\.jsx?$': 'babel-jest',
+    '^.+\\.(ts|html)$': '<rootDir>/node_modules/jest-preset-angular/preprocessor.js',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node', '.html'],
+};
+```
+### Configure Jest for Vue
+StoryShots addon brings with it a [jest-vue-preprocessor](https://github.com/vire/jest-vue-preprocessor). 
+If you already use Jest for testing your vue app - probably you already have the needed jest configuration.
+Anyway you can add these lines to your jest config:
+```js
+module.exports = {
+  transform: {
+    '^.+\\.jsx?$': 'babel-jest',
+    '.*\\.(vue)$': '<rootDir>/node_modules/jest-vue-preprocessor',
+  },
+  moduleFileExtensions: ['vue', 'js', 'jsx', 'json', 'node'],
+};
+```
 ## Configure Storyshots
 
 Create a new test file with the name `Storyshots.test.js`. (Or whatever the name you prefer, as long as it matches Jest's config [`testMatch`](http://facebook.github.io/jest/docs/en/configuration.html#testmatch-array-string)).

From 8eee1c0411771d54013cb2c92e1586808cac07bf Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Sat, 6 Jan 2018 17:46:44 +0200
Subject: [PATCH 31/41] Now I need to update snapshots...

---
 .../src/stories/__snapshots__/addon-knobs.stories.storyshot  | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot
index 7d69de41505c..cedc4feb53b5 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot
@@ -97,6 +97,11 @@ exports[`Storyshots Addon Knobs Simple 1`] = `
       I am John Doe and I'm 44 years old.
     </div>
     
+      
+    <div>
+      Phone Number: 555-55-55
+    </div>
+    
     
   </simple-knobs-component>
 </app-root>

From 11687bdc0951477bdcd223dfd1dcfd09cf04be89 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Mon, 8 Jan 2018 18:15:53 +0200
Subject: [PATCH 32/41] After merge fixes

---
 addons/storyshots/src/angular/helpers.ts | 1 -
 examples/angular-cli/package.json        | 2 +-
 examples/vue-kitchen-sink/package.json   | 2 +-
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/addons/storyshots/src/angular/helpers.ts b/addons/storyshots/src/angular/helpers.ts
index d36fb2f35de8..87dde03a0e44 100644
--- a/addons/storyshots/src/angular/helpers.ts
+++ b/addons/storyshots/src/angular/helpers.ts
@@ -1,5 +1,4 @@
 import { Type, NgModule, Component } from '@angular/core';
-
 import { AppComponent } from './app.component';
 import { STORY } from './app.token';
 import { getAnnotations, getParameters, getPropMetadata } from './utils';
diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
index 3548803ca008..bb049e704d16 100644
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@@ -33,7 +33,7 @@
     "@storybook/addon-actions": "^3.4.0-alpha.0",
     "@storybook/addon-links": "^3.4.0-alpha.0",
     "@storybook/addon-notes": "^3.4.0-alpha.0",
-	"@storybook/addon-storyshots": "^3.4.0-alpha.0",
+    "@storybook/addon-storyshots": "^3.4.0-alpha.0",
     "@storybook/addons": "^3.4.0-alpha.0",
     "@storybook/angular": "^3.4.0-alpha.0",
     "@types/jasmine": "~2.8.3",
diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json
index 368001c3be7a..31d9222ba6d6 100644
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@@ -8,7 +8,7 @@
     "@storybook/addon-knobs": "^3.4.0-alpha.0",
     "@storybook/addon-links": "^3.4.0-alpha.0",
     "@storybook/addon-notes": "^3.4.0-alpha.0",
-	"@storybook/addon-storyshots": "^3.4.0-alpha.0",
+    "@storybook/addon-storyshots": "^3.4.0-alpha.0",
     "@storybook/addon-viewport": "^3.4.0-alpha.0",
     "@storybook/addons": "^3.4.0-alpha.0",
     "@storybook/vue": "^3.4.0-alpha.0",

From b0f4064daed0709bc12e0150cbba24685f8ab812 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Mon, 8 Jan 2018 18:19:13 +0200
Subject: [PATCH 33/41] Update snapshots

---
 .../addon-actions.stories.storyshot           | 16 +++++-----
 .../addon-knobs.stories.storyshot             | 16 +++++-----
 .../addon-links.stories.storyshot             |  8 ++---
 .../addon-notes.stories.storyshot             | 16 +++++-----
 .../app.component.stories.storyshot           |  8 ++---
 .../custom-metadata.stories.storyshot         | 32 +++++++++----------
 .../src/stories/__snapshots__/index.storyshot | 30 +++++++++--------
 .../di.component.stories.storyshot            | 16 +++++-----
 .../custom-cva-component.stories.storyshot    |  8 ++---
 9 files changed, 76 insertions(+), 74 deletions(-)

diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
index e26575399fee..9f6613568a36 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Addon Actions Action and method 1`] = `
-<app-root
+<storybook-storyshot-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
-  <button-component
+  <storybook-button-component
     _nghost-c4=""
   >
     
@@ -18,17 +18,17 @@ exports[`Storyshots Addon Actions Action and method 1`] = `
     </button>
     
     
-  </button-component>
-</app-root>
+  </storybook-button-component>
+</storybook-storyshot-root>
 `;
 
 exports[`Storyshots Addon Actions Action only 1`] = `
-<app-root
+<storybook-storyshot-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
-  <button-component
+  <storybook-button-component
     _nghost-c3=""
   >
     
@@ -40,6 +40,6 @@ exports[`Storyshots Addon Actions Action only 1`] = `
     </button>
     
     
-  </button-component>
-</app-root>
+  </storybook-button-component>
+</storybook-storyshot-root>
 `;
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot
index cedc4feb53b5..9afeb5350b78 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Addon Knobs All knobs 1`] = `
-<app-root
+<storybook-storyshot-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
-  <simple-knobs-component>
+  <storybook-simple-knobs-component>
     
       
     <div
@@ -80,17 +80,17 @@ exports[`Storyshots Addon Knobs All knobs 1`] = `
     </div>
     
     
-  </simple-knobs-component>
-</app-root>
+  </storybook-simple-knobs-component>
+</storybook-storyshot-root>
 `;
 
 exports[`Storyshots Addon Knobs Simple 1`] = `
-<app-root
+<storybook-storyshot-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
-  <simple-knobs-component>
+  <storybook-simple-knobs-component>
     
       
     <div>
@@ -103,6 +103,6 @@ exports[`Storyshots Addon Knobs Simple 1`] = `
     </div>
     
     
-  </simple-knobs-component>
-</app-root>
+  </storybook-simple-knobs-component>
+</storybook-storyshot-root>
 `;
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot
index c22268469bf9..b1b709a13690 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Another Button button with link to another story 1`] = `
-<app-root
+<storybook-storyshot-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
-  <button-component
+  <storybook-button-component
     _nghost-c5=""
   >
     
@@ -18,6 +18,6 @@ exports[`Storyshots Another Button button with link to another story 1`] = `
     </button>
     
     
-  </button-component>
-</app-root>
+  </storybook-button-component>
+</storybook-storyshot-root>
 `;
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot
index df9e22bb61e4..df6bfc07f115 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Addon Notes Note with HTML 1`] = `
-<app-root
+<storybook-storyshot-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
-  <button-component
+  <storybook-button-component
     _nghost-c7=""
   >
     
@@ -18,17 +18,17 @@ exports[`Storyshots Addon Notes Note with HTML 1`] = `
     </button>
     
     
-  </button-component>
-</app-root>
+  </storybook-button-component>
+</storybook-storyshot-root>
 `;
 
 exports[`Storyshots Addon Notes Simple note 1`] = `
-<app-root
+<storybook-storyshot-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
-  <button-component
+  <storybook-button-component
     _nghost-c6=""
   >
     
@@ -40,6 +40,6 @@ exports[`Storyshots Addon Notes Simple note 1`] = `
     </button>
     
     
-  </button-component>
-</app-root>
+  </storybook-button-component>
+</storybook-storyshot-root>
 `;
diff --git a/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot
index 2b6d704b77a0..088761db49a1 100644
--- a/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots App Component Component with separate template 1`] = `
-<app-root
+<storybook-storyshot-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
-  <app-root>
+  <storybook-app-root>
     
   
     <div
@@ -90,6 +90,6 @@ exports[`Storyshots App Component Component with separate template 1`] = `
     
   
   
-  </app-root>
-</app-root>
+  </storybook-app-root>
+</storybook-storyshot-root>
 `;
diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot
index d3f4bf8f9585..8f945df59235 100644
--- a/examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot
@@ -1,40 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Custom Pipe Default 1`] = `
-<app-root
+<storybook-storyshot-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
-  <name>
+  <storybook-name>
     <h1>
       CustomPipe: foobar
     </h1>
-  </name>
-</app-root>
+  </storybook-name>
+</storybook-storyshot-root>
 `;
 
 exports[`Storyshots Custom Pipe/With Knobs NameComponent 1`] = `
-<app-root
+<storybook-storyshot-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
-  <name>
+  <storybook-name>
     <h1>
       CustomPipe: foobar
     </h1>
-  </name>
-</app-root>
+  </storybook-name>
+</storybook-storyshot-root>
 `;
 
 exports[`Storyshots Custom ngModule metadata simple 1`] = `
-<app-root
+<storybook-storyshot-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
-  <simple-service-component>
+  <storybook-simple-service-component>
     
       
     <p>
@@ -51,17 +51,17 @@ exports[`Storyshots Custom ngModule metadata simple 1`] = `
     </ul>
     
     
-  </simple-service-component>
-</app-root>
+  </storybook-simple-service-component>
+</storybook-storyshot-root>
 `;
 
 exports[`Storyshots Custom ngModule metadata with knobs 1`] = `
-<app-root
+<storybook-storyshot-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
-  <simple-service-component>
+  <storybook-simple-service-component>
     
       
     <p>
@@ -78,6 +78,6 @@ exports[`Storyshots Custom ngModule metadata with knobs 1`] = `
     </ul>
     
     
-  </simple-service-component>
-</app-root>
+  </storybook-simple-service-component>
+</storybook-storyshot-root>
 `;
diff --git a/examples/angular-cli/src/stories/__snapshots__/index.storyshot b/examples/angular-cli/src/stories/__snapshots__/index.storyshot
index 2544eccd0523..d628736b6cff 100644
--- a/examples/angular-cli/src/stories/__snapshots__/index.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/index.storyshot
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Button with some emoji 1`] = `
-<app-root
+<storybook-storyshot-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
-  <button-component
+  <storybook-button-component
     _nghost-c2=""
   >
     
@@ -18,17 +18,17 @@ exports[`Storyshots Button with some emoji 1`] = `
     </button>
     
     
-  </button-component>
-</app-root>
+  </storybook-button-component>
+</storybook-storyshot-root>
 `;
 
 exports[`Storyshots Button with text 1`] = `
-<app-root
+<storybook-storyshot-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
-  <button-component
+  <storybook-button-component
     _nghost-c1=""
   >
     
@@ -40,17 +40,17 @@ exports[`Storyshots Button with text 1`] = `
     </button>
     
     
-  </button-component>
-</app-root>
+  </storybook-button-component>
+</storybook-storyshot-root>
 `;
 
 exports[`Storyshots Welcome to Storybook 1`] = `
-<app-root
+<storybook-storyshot-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
-  <welcome-component
+  <storybook-welcome-component
     _nghost-c0=""
   >
     
@@ -115,7 +115,8 @@ exports[`Storyshots Welcome to Storybook 1`] = `
         >
           stories
         </a>
-         for a component called 
+         for a component called
+            
         <span
           _ngcontent-c0=""
           class="inline-code"
@@ -212,7 +213,8 @@ exports[`Storyshots Welcome to Storybook 1`] = `
         >
           .storybook/webpack.config.js
         </span>
-         to add webpack loaders and plugins you are using in this project.
+        
+            to add webpack loaders and plugins you are using in this project.
           
       </p>
       
@@ -220,6 +222,6 @@ exports[`Storyshots Welcome to Storybook 1`] = `
     </main>
     
     
-  </welcome-component>
-</app-root>
+  </storybook-welcome-component>
+</storybook-storyshot-root>
 `;
diff --git a/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot b/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot
index b517ff0d36a5..e31179b53c6f 100644
--- a/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot
+++ b/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Component dependencies inputs and inject dependencies 1`] = `
-<app-root
+<storybook-storyshot-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
-  <di-component>
+  <storybook-di-component>
     <div>
       
     
@@ -41,17 +41,17 @@ exports[`Storyshots Component dependencies inputs and inject dependencies 1`] =
     </div>
     
   
-  </di-component>
-</app-root>
+  </storybook-di-component>
+</storybook-storyshot-root>
 `;
 
 exports[`Storyshots Component dependencies inputs and inject dependencies with knobs 1`] = `
-<app-root
+<storybook-storyshot-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
-  <di-component>
+  <storybook-di-component>
     <div>
       
     
@@ -86,6 +86,6 @@ exports[`Storyshots Component dependencies inputs and inject dependencies with k
     </div>
     
   
-  </di-component>
-</app-root>
+  </storybook-di-component>
+</storybook-storyshot-root>
 `;
diff --git a/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot b/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
index 37e35e803b56..aaf0c3adcf47 100644
--- a/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
+++ b/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots ngModel custom ControlValueAccessor 1`] = `
-<app-root
+<storybook-storyshot-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
-  <custom-cva-component>
+  <storybook-custom-cva-component>
     
       
     <div>
@@ -19,6 +19,6 @@ exports[`Storyshots ngModel custom ControlValueAccessor 1`] = `
     />
     
     
-  </custom-cva-component>
-</app-root>
+  </storybook-custom-cva-component>
+</storybook-storyshot-root>
 `;

From 805f73e9b06e542cc0664d8498c25873455d5615 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Wed, 10 Jan 2018 16:33:51 +0200
Subject: [PATCH 34/41] Update snapshots

---
 .../__snapshots__/app.component.stories.storyshot      | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot
index 088761db49a1..0607bde7dba8 100644
--- a/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot
@@ -9,6 +9,16 @@ exports[`Storyshots App Component Component with separate template 1`] = `
   <storybook-app-root>
     
   
+    <div
+      class="hide"
+      style="color: red; font-size: 30px; text-align: center;"
+    >
+      
+    This should be hidden, if not - scss is not loaded as needed.
+  
+    </div>
+    
+  
     <div
       style="text-align:center"
     >

From a5eb21c745da99ab98a1531f7294fcedb882c058 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Wed, 10 Jan 2018 17:08:13 +0200
Subject: [PATCH 35/41] Update storyshots to use helpers with templates support

---
 .../storyshots/src/angular/app.component.ts   |  73 +++++-
 addons/storyshots/src/angular/helpers.ts      | 139 ++++-------
 .../src/angular/setPropsToComponent.ts        |  55 -----
 addons/storyshots/src/angular/types.ts        |  14 +-
 addons/storyshots/src/angular/utils.ts        |  38 ---
 .../addon-actions.stories.storyshot           |  16 +-
 .../addon-knobs.stories.storyshot             |   8 +-
 .../addon-links.stories.storyshot             |   8 +-
 .../addon-notes.stories.storyshot             |  16 +-
 .../app.component.stories.storyshot           |   4 +-
 .../custom-metadata.stories.storyshot         |  16 +-
 .../src/stories/__snapshots__/index.storyshot | 219 ++++++++++++++++--
 .../di.component.stories.storyshot            |   8 +-
 .../custom-cva-component.stories.storyshot    |   6 +-
 14 files changed, 357 insertions(+), 263 deletions(-)
 delete mode 100644 addons/storyshots/src/angular/setPropsToComponent.ts
 delete mode 100644 addons/storyshots/src/angular/utils.ts

diff --git a/addons/storyshots/src/angular/app.component.ts b/addons/storyshots/src/angular/app.component.ts
index 628dd09b5cb1..297624ac8b79 100644
--- a/addons/storyshots/src/angular/app.component.ts
+++ b/addons/storyshots/src/angular/app.component.ts
@@ -1,3 +1,7 @@
+// We could use NgComponentOutlet here but there's currently no easy way
+// to provide @Inputs and subscribe to @Outputs, see
+// https://github.com/angular/angular/issues/15360
+// For the time being, the ViewContainerRef approach works pretty well.
 import {
   Component,
   Inject,
@@ -5,33 +9,84 @@ import {
   ViewChild,
   ViewContainerRef,
   ComponentFactoryResolver,
+  OnDestroy,
+  EventEmitter,
+  SimpleChanges,
+  SimpleChange,
 } from '@angular/core';
 import { STORY } from './app.token';
-import { NgStory } from './types';
-import { setProps } from './setPropsToComponent';
+import { NgStory, ICollection } from './types';
 
 @Component({
-  selector: 'storybook-storyshot-root',
+  selector: 'storybook-dynamic-app-root',
   template: '<ng-template #target></ng-template>',
 })
-export class AppComponent implements OnInit {
+export class AppComponent implements OnInit, OnDestroy {
   @ViewChild('target', { read: ViewContainerRef })
   target: ViewContainerRef;
   constructor(private cfr: ComponentFactoryResolver, @Inject(STORY) private data: NgStory) {}
 
-  /*
-  * We need to use here the ngOnInit instead of ngAfterViewInit,
-  * otherwise there will be ExpressionChangedAfterItHasBeenCheckedError in tests
-   */
   ngOnInit(): void {
     this.putInMyHtml();
   }
 
+  ngOnDestroy(): void {
+    this.target.clear();
+  }
+
   private putInMyHtml(): void {
     this.target.clear();
     const compFactory = this.cfr.resolveComponentFactory(this.data.component);
     const instance = this.target.createComponent(compFactory).instance;
 
-    setProps(instance, this.data);
+    this.setProps(instance, this.data);
+  }
+
+  /**
+   * Set inputs and outputs
+   */
+  private setProps(instance: any, { props = {} }: NgStory): void {
+    const changes: SimpleChanges = {};
+    const hasNgOnChangesHook = !!instance['ngOnChanges'];
+
+    Object.keys(props).map((key: string) => {
+      const value = props[key];
+      const instanceProperty = instance[key];
+
+      if (!(instanceProperty instanceof EventEmitter) && !!value) {
+        instance[key] = value;
+        if (hasNgOnChangesHook) {
+          changes[key] = new SimpleChange(undefined, value, instanceProperty === undefined);
+        }
+      } else if (typeof value === 'function' && key !== 'ngModelChange') {
+        instanceProperty.subscribe(value);
+      }
+    });
+
+    this.callNgOnChangesHook(instance, changes);
+    this.setNgModel(instance, props);
+  }
+
+  /**
+   * Manually call 'ngOnChanges' hook because angular doesn't do that for dynamic components
+   * Issue: [https://github.com/angular/angular/issues/8903]
+   */
+  private callNgOnChangesHook(instance: any, changes: SimpleChanges): void {
+    if (!!Object.keys(changes).length) {
+      instance.ngOnChanges(changes);
+    }
+  }
+
+  /**
+   * If component implements ControlValueAccessor interface try to set ngModel
+   */
+  private setNgModel(instance: any, props: ICollection): void {
+    if (!!props['ngModel']) {
+      instance.writeValue(props.ngModel);
+    }
+
+    if (typeof props.ngModelChange === 'function') {
+      instance.registerOnChange(props.ngModelChange);
+    }
   }
 }
diff --git a/addons/storyshots/src/angular/helpers.ts b/addons/storyshots/src/angular/helpers.ts
index 87dde03a0e44..d1d42e746434 100644
--- a/addons/storyshots/src/angular/helpers.ts
+++ b/addons/storyshots/src/angular/helpers.ts
@@ -1,123 +1,64 @@
-import { Type, NgModule, Component } from '@angular/core';
+import { Component, Type } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent } from './app.component';
 import { STORY } from './app.token';
-import { getAnnotations, getParameters, getPropMetadata } from './utils';
-import { NgModuleMetadata, NgStory } from './types';
+import { NgStory } from './types';
 
-interface IComponent extends Type<any> {
-  annotations: any[];
-  parameters: any[];
-  propsMetadata: any[];
-}
-
-const getComponentMetadata = ({
-  component,
-  props = {},
-  propsMeta = {},
-  moduleMetadata = {
-    imports: [],
-    schemas: [],
-    declarations: [],
-    providers: [],
-  },
-}: NgStory) => {
-  if (!component || typeof component !== 'function') {
-    throw new Error('No valid component provided');
-  }
-
-  const componentMetadata = getAnnotations(component)[0] || {};
-  const propsMetadata = getPropMetadata(component);
-  const paramsMetadata = getParameters(component);
-
-  Object.keys(propsMeta).map(key => {
-    (<any>propsMetadata)[key] = (<any>propsMeta)[key];
-  });
-
-  const { imports = [], schemas = [], declarations = [], providers = [] } = moduleMetadata;
-
-  return {
-    component,
-    props,
-    componentMeta: componentMetadata,
-    propsMeta: propsMetadata,
-    params: paramsMetadata,
-    moduleMeta: {
-      imports,
-      schemas,
-      declarations,
-      providers,
-    },
-  };
-};
-
-const getAnnotatedComponent = (
-  meta: NgModule,
-  component: any,
-  propsMeta: { [p: string]: any },
-  params: any[]
-): IComponent => {
-  const NewComponent: any = function(...args: any[]) {
-    component.call(this, ...args);
-  };
-
-  NewComponent.prototype = Object.create(component.prototype);
-  NewComponent.annotations = [new Component(meta)];
-  NewComponent.parameters = params;
-  NewComponent.propsMetadata = propsMeta;
-
-  return NewComponent;
-};
-
-const getModule = (
+const getModuleMeta = (
   declarations: Array<Type<any> | any[]>,
   entryComponents: Array<Type<any> | any[]>,
   bootstrap: Array<Type<any> | any[]>,
   data: NgStory,
-  moduleMetadata: NgModuleMetadata = {
-    imports: [],
-    schemas: [],
-    declarations: [],
-    providers: [],
-  }
-): any => {
+  moduleMetadata: any
+) => {
   return {
-    declarations: [...declarations, ...moduleMetadata.declarations],
-    imports: [...moduleMetadata.imports],
-    providers: [{ provide: STORY, useValue: Object.assign({}, data) }, ...moduleMetadata.providers],
-    entryComponents: [...entryComponents],
-    schemas: [...moduleMetadata.schemas],
+    declarations: [...declarations, ...(moduleMetadata.declarations || [])],
+    imports: [BrowserModule, FormsModule, ...(moduleMetadata.imports || [])],
+    providers: [
+      { provide: STORY, useValue: Object.assign({}, data) },
+      ...(moduleMetadata.providers || []),
+    ],
+    entryComponents: [...entryComponents, ...(moduleMetadata.entryComponents || [])],
+    schemas: [...(moduleMetadata.schemas || [])],
     bootstrap: [...bootstrap],
   };
 };
 
-export const initModuleData = (currentStory: NgStory): any => {
-  const { component, componentMeta, props, propsMeta, params, moduleMeta } = getComponentMetadata(
-    currentStory
-  );
+const createComponentFromTemplate = (template: string): Function => {
+  const componentClass = class DynamicComponent {};
 
-  if (!componentMeta) {
-    throw new Error('No component metadata available');
-  }
+  return Component({
+    template: template,
+  })(componentClass);
+};
+
+export const initModuleData = (storyObj: NgStory): any => {
+  const { component, template, props, moduleMetadata = {} } = storyObj;
+
+  let AnnotatedComponent;
 
-  const AnnotatedComponent = getAnnotatedComponent(componentMeta, component, propsMeta, [
-    ...params,
-    ...moduleMeta.providers.map(provider => [provider]),
-  ]);
+  if (template) {
+    AnnotatedComponent = createComponentFromTemplate(template);
+  } else {
+    AnnotatedComponent = component;
+  }
 
   const story = {
     component: AnnotatedComponent,
     props,
-    propsMeta,
   };
 
+  const moduleMeta = getModuleMeta(
+    [AppComponent, AnnotatedComponent],
+    [AnnotatedComponent],
+    [AppComponent],
+    story,
+    moduleMetadata
+  );
+
   return {
     AppComponent,
-    moduleMeta: getModule(
-      [AppComponent, AnnotatedComponent],
-      [AnnotatedComponent],
-      [AppComponent],
-      story,
-      moduleMeta
-    ),
+    moduleMeta,
   };
 };
diff --git a/addons/storyshots/src/angular/setPropsToComponent.ts b/addons/storyshots/src/angular/setPropsToComponent.ts
deleted file mode 100644
index ddf965f5abe0..000000000000
--- a/addons/storyshots/src/angular/setPropsToComponent.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as _ from 'lodash';
-
-import { EventEmitter, SimpleChanges, SimpleChange } from '@angular/core';
-
-import { NgStory, ICollection } from './types';
-
-/**
- * Set inputs and outputs
- */
-function setProps(instance: any, { props = {}, propsMeta = {} }: NgStory): void {
-  const changes: SimpleChanges = {};
-  const hasNgOnChangesHook = _.has(instance, 'ngOnChanges');
-
-  _.forEach(propsMeta, (meta, key) => {
-    const value = props[key];
-    const instanceProperty = <any>_.get(instance, key);
-
-    if (!(instanceProperty instanceof EventEmitter) && !_.isUndefined(value)) {
-      _.set(instance, key, value);
-      if (hasNgOnChangesHook) {
-        changes[key] = new SimpleChange(undefined, value, instanceProperty === undefined);
-      }
-    } else if (_.isFunction(value) && key !== 'ngModelChange') {
-      instanceProperty.subscribe(value);
-    }
-  });
-
-  callNgOnChangesHook(instance, changes);
-  setNgModel(instance, props);
-}
-
-/**
- * Manually call 'ngOnChanges' hook because angular doesn't do that for dynamic components
- * Issue: [https://github.com/angular/angular/issues/8903]
- */
-function callNgOnChangesHook(instance: any, changes: SimpleChanges): void {
-  if (!_.isEmpty(changes)) {
-    _.invoke(instance, 'ngOnChanges', changes);
-  }
-}
-
-/**
- * If component implements ControlValueAccessor interface try to set ngModel
- */
-function setNgModel(instance: any, props: ICollection): void {
-  if (_.has(props, 'ngModel')) {
-    _.invoke(instance, 'writeValue', props.ngModel);
-  }
-
-  if (_.isFunction(props.ngModelChange)) {
-    _.invoke(instance, 'registerOnChange', props.ngModelChange);
-  }
-}
-
-export { setProps };
diff --git a/addons/storyshots/src/angular/types.ts b/addons/storyshots/src/angular/types.ts
index 5dd89008e028..191d2ed44c07 100644
--- a/addons/storyshots/src/angular/types.ts
+++ b/addons/storyshots/src/angular/types.ts
@@ -1,8 +1,9 @@
 export interface NgModuleMetadata {
-  declarations: Array<any>;
-  imports: Array<any>;
-  schemas: Array<any>;
-  providers: Array<any>;
+  declarations?: Array<any>;
+  entryComponents?: Array<any>;
+  imports?: Array<any>;
+  schemas?: Array<any>;
+  providers?: Array<any>;
 }
 
 export interface ICollection {
@@ -10,8 +11,9 @@ export interface ICollection {
 }
 
 export interface NgStory {
-  component: any;
+  component?: any;
   props: ICollection;
-  propsMeta: ICollection;
+  propsMeta?: ICollection;
   moduleMetadata?: NgModuleMetadata;
+  template?: string;
 }
diff --git a/addons/storyshots/src/angular/utils.ts b/addons/storyshots/src/angular/utils.ts
deleted file mode 100644
index 48ef75b953dc..000000000000
--- a/addons/storyshots/src/angular/utils.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { ɵReflectionCapabilities } from '@angular/core';
-
-const reflectionCapabilities = new ɵReflectionCapabilities();
-
-function getMeta(component: any, [name1, name2]: any, defaultValue: any) {
-  if (!name2) {
-    name2 = name1;
-    name1 = `__${name1}__`;
-  }
-
-  if (component[name1]) {
-    return component[name1];
-  }
-
-  if (component[name2]) {
-    return component[name2];
-  }
-
-  return (<any>window)['Reflect'].getMetadata(name2, component) || defaultValue;
-}
-
-export function getAnnotations(component: any) {
-  return getMeta(component, ['annotations'], []);
-}
-
-export function getPropMetadata(component: any) {
-  return getMeta(component, ['__prop__metadata__', 'propMetadata'], {});
-}
-
-export function getParameters(component: any) {
-  const params = reflectionCapabilities.parameters(component);
-
-  if (!params || !params[0]) {
-    return getMeta(component, ['parameters'], []);
-  }
-
-  return params;
-}
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
index 9f6613568a36..744f3a1be919 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
@@ -1,45 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Addon Actions Action and method 1`] = `
-<storybook-storyshot-root
+<storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-c4=""
+    _nghost-c5=""
   >
     
         
     <button
-      _ngcontent-c4=""
+      _ngcontent-c5=""
     >
       Action and Method
     </button>
     
     
   </storybook-button-component>
-</storybook-storyshot-root>
+</storybook-dynamic-app-root>
 `;
 
 exports[`Storyshots Addon Actions Action only 1`] = `
-<storybook-storyshot-root
+<storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-c3=""
+    _nghost-c4=""
   >
     
         
     <button
-      _ngcontent-c3=""
+      _ngcontent-c4=""
     >
       Action only
     </button>
     
     
   </storybook-button-component>
-</storybook-storyshot-root>
+</storybook-dynamic-app-root>
 `;
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot
index 9afeb5350b78..414dcc6097ba 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Addon Knobs All knobs 1`] = `
-<storybook-storyshot-root
+<storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
@@ -81,11 +81,11 @@ exports[`Storyshots Addon Knobs All knobs 1`] = `
     
     
   </storybook-simple-knobs-component>
-</storybook-storyshot-root>
+</storybook-dynamic-app-root>
 `;
 
 exports[`Storyshots Addon Knobs Simple 1`] = `
-<storybook-storyshot-root
+<storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
@@ -104,5 +104,5 @@ exports[`Storyshots Addon Knobs Simple 1`] = `
     
     
   </storybook-simple-knobs-component>
-</storybook-storyshot-root>
+</storybook-dynamic-app-root>
 `;
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot
index b1b709a13690..08d0da6171b5 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot
@@ -1,23 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Another Button button with link to another story 1`] = `
-<storybook-storyshot-root
+<storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-c5=""
+    _nghost-c6=""
   >
     
         
     <button
-      _ngcontent-c5=""
+      _ngcontent-c6=""
     >
       Go to Welcome Story
     </button>
     
     
   </storybook-button-component>
-</storybook-storyshot-root>
+</storybook-dynamic-app-root>
 `;
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot
index df6bfc07f115..94b5ff1c35a0 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot
@@ -1,45 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Addon Notes Note with HTML 1`] = `
-<storybook-storyshot-root
+<storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-c7=""
+    _nghost-c8=""
   >
     
         
     <button
-      _ngcontent-c7=""
+      _ngcontent-c8=""
     >
       Notes with HTML
     </button>
     
     
   </storybook-button-component>
-</storybook-storyshot-root>
+</storybook-dynamic-app-root>
 `;
 
 exports[`Storyshots Addon Notes Simple note 1`] = `
-<storybook-storyshot-root
+<storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-c6=""
+    _nghost-c7=""
   >
     
         
     <button
-      _ngcontent-c6=""
+      _ngcontent-c7=""
     >
       Notes on some Button
     </button>
     
     
   </storybook-button-component>
-</storybook-storyshot-root>
+</storybook-dynamic-app-root>
 `;
diff --git a/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot
index 0607bde7dba8..675463672c7a 100644
--- a/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots App Component Component with separate template 1`] = `
-<storybook-storyshot-root
+<storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
@@ -101,5 +101,5 @@ exports[`Storyshots App Component Component with separate template 1`] = `
   
   
   </storybook-app-root>
-</storybook-storyshot-root>
+</storybook-dynamic-app-root>
 `;
diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot
index 8f945df59235..d927a530a22b 100644
--- a/examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Custom Pipe Default 1`] = `
-<storybook-storyshot-root
+<storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
@@ -11,11 +11,11 @@ exports[`Storyshots Custom Pipe Default 1`] = `
       CustomPipe: foobar
     </h1>
   </storybook-name>
-</storybook-storyshot-root>
+</storybook-dynamic-app-root>
 `;
 
 exports[`Storyshots Custom Pipe/With Knobs NameComponent 1`] = `
-<storybook-storyshot-root
+<storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
@@ -25,11 +25,11 @@ exports[`Storyshots Custom Pipe/With Knobs NameComponent 1`] = `
       CustomPipe: foobar
     </h1>
   </storybook-name>
-</storybook-storyshot-root>
+</storybook-dynamic-app-root>
 `;
 
 exports[`Storyshots Custom ngModule metadata simple 1`] = `
-<storybook-storyshot-root
+<storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
@@ -52,11 +52,11 @@ exports[`Storyshots Custom ngModule metadata simple 1`] = `
     
     
   </storybook-simple-service-component>
-</storybook-storyshot-root>
+</storybook-dynamic-app-root>
 `;
 
 exports[`Storyshots Custom ngModule metadata with knobs 1`] = `
-<storybook-storyshot-root
+<storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
@@ -79,5 +79,5 @@ exports[`Storyshots Custom ngModule metadata with knobs 1`] = `
     
     
   </storybook-simple-service-component>
-</storybook-storyshot-root>
+</storybook-dynamic-app-root>
 `;
diff --git a/examples/angular-cli/src/stories/__snapshots__/index.storyshot b/examples/angular-cli/src/stories/__snapshots__/index.storyshot
index d628736b6cff..4b9cce2ec8be 100644
--- a/examples/angular-cli/src/stories/__snapshots__/index.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/index.storyshot
@@ -1,51 +1,238 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Button with some emoji 1`] = `
-<storybook-storyshot-root
+<storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-c2=""
+    _nghost-c3=""
   >
     
         
     <button
-      _ngcontent-c2=""
+      _ngcontent-c3=""
     >
       😀 😎 👍 💯
     </button>
     
     
   </storybook-button-component>
-</storybook-storyshot-root>
+</storybook-dynamic-app-root>
 `;
 
 exports[`Storyshots Button with text 1`] = `
-<storybook-storyshot-root
+<storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
-  <storybook-button-component
-    _nghost-c1=""
-  >
+  <ng-component>
     
         
-    <button
-      _ngcontent-c1=""
+    <h1>
+       This is a template 
+    </h1>
+    
+        
+    <storybook-button-component
+      _nghost-c1=""
+      ng-reflect-text="Hello Button"
     >
-      Hello Button
-    </button>
+      
+        
+      <button
+        _ngcontent-c1=""
+      >
+        Hello Button
+      </button>
+      
     
+    </storybook-button-component>
     
-  </storybook-button-component>
-</storybook-storyshot-root>
+        
+    <storybook-welcome-component
+      _nghost-c2=""
+    >
+      
+        
+      <main
+        _ngcontent-c2=""
+      >
+        
+          
+        <h1
+          _ngcontent-c2=""
+        >
+          Welcome to storybook
+        </h1>
+        
+          
+        <p
+          _ngcontent-c2=""
+        >
+          This is a UI component dev environment for your app.
+        </p>
+        
+          
+        <p
+          _ngcontent-c2=""
+        >
+          
+            We've added some basic stories inside the 
+          <span
+            _ngcontent-c2=""
+            class="inline-code"
+          >
+            src/stories
+          </span>
+           directory.
+            
+          <br
+            _ngcontent-c2=""
+          />
+          
+            A story is a single state of one or more UI components. You can have as many stories as
+            you want.
+            
+          <br
+            _ngcontent-c2=""
+          />
+          
+            (Basically a story is like a visual test case.)
+          
+        </p>
+        
+          
+        <p
+          _ngcontent-c2=""
+        >
+          
+            See these sample 
+          <a
+            _ngcontent-c2=""
+            role="button"
+            tabindex="0"
+          >
+            stories
+          </a>
+           for a component called
+            
+          <span
+            _ngcontent-c2=""
+            class="inline-code"
+          >
+            Button
+          </span>
+           .
+          
+        </p>
+        
+          
+        <p
+          _ngcontent-c2=""
+        >
+          
+            Just like that, you can add your own components as stories.
+            
+          <br
+            _ngcontent-c2=""
+          />
+          
+            You can also edit those components and see changes right away.
+            
+          <br
+            _ngcontent-c2=""
+          />
+          
+            (Try editing the 
+          <span
+            _ngcontent-c2=""
+            class="inline-code"
+          >
+            Button
+          </span>
+           stories
+            located at 
+          <span
+            _ngcontent-c2=""
+            class="inline-code"
+          >
+            src/stories/index.js
+          </span>
+          .)
+          
+        </p>
+        
+          
+        <p
+          _ngcontent-c2=""
+        >
+          
+            Usually we create stories with smaller UI components in the app.
+          <br
+            _ngcontent-c2=""
+          />
+          
+            Have a look at the 
+          <a
+            _ngcontent-c2=""
+            href="https://storybook.js.org/basics/writing-stories"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            
+              Writing Stories
+            
+          </a>
+           section in our documentation.
+          
+        </p>
+        
+          
+        <p
+          _ngcontent-c2=""
+          class="note"
+        >
+          
+            
+          <b
+            _ngcontent-c2=""
+          >
+            NOTE:
+          </b>
+          
+            
+          <br
+            _ngcontent-c2=""
+          />
+          
+            Have a look at the 
+          <span
+            _ngcontent-c2=""
+            class="inline-code"
+          >
+            .storybook/webpack.config.js
+          </span>
+          
+            to add webpack loaders and plugins you are using in this project.
+          
+        </p>
+        
+        
+      </main>
+      
+    
+    </storybook-welcome-component>
+    
+      
+  </ng-component>
+</storybook-dynamic-app-root>
 `;
 
 exports[`Storyshots Welcome to Storybook 1`] = `
-<storybook-storyshot-root
+<storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
@@ -223,5 +410,5 @@ exports[`Storyshots Welcome to Storybook 1`] = `
     
     
   </storybook-welcome-component>
-</storybook-storyshot-root>
+</storybook-dynamic-app-root>
 `;
diff --git a/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot b/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot
index e31179b53c6f..84e7b5be377d 100644
--- a/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot
+++ b/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Component dependencies inputs and inject dependencies 1`] = `
-<storybook-storyshot-root
+<storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
@@ -42,11 +42,11 @@ exports[`Storyshots Component dependencies inputs and inject dependencies 1`] =
     
   
   </storybook-di-component>
-</storybook-storyshot-root>
+</storybook-dynamic-app-root>
 `;
 
 exports[`Storyshots Component dependencies inputs and inject dependencies with knobs 1`] = `
-<storybook-storyshot-root
+<storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
@@ -87,5 +87,5 @@ exports[`Storyshots Component dependencies inputs and inject dependencies with k
     
   
   </storybook-di-component>
-</storybook-storyshot-root>
+</storybook-dynamic-app-root>
 `;
diff --git a/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot b/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
index aaf0c3adcf47..63c11a12c5e8 100644
--- a/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
+++ b/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots ngModel custom ControlValueAccessor 1`] = `
-<storybook-storyshot-root
+<storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
@@ -15,10 +15,12 @@ exports[`Storyshots ngModel custom ControlValueAccessor 1`] = `
     
       
     <input
+      class="ng-untouched ng-pristine ng-valid"
+      ng-reflect-model="Type anything"
       type="text"
     />
     
     
   </storybook-custom-cva-component>
-</storybook-storyshot-root>
+</storybook-dynamic-app-root>
 `;

From 9ba4b748947ddc90478bdd96e9a9ad6b14e0d2d6 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Thu, 11 Jan 2018 00:06:38 +0200
Subject: [PATCH 36/41] Generalize api. import react-test-renderer only in
 react loader

---
 addons/storyshots/src/angular/loader.js       |   3 +
 addons/storyshots/src/index.js                |  13 +-
 addons/storyshots/src/react/loader.js         |   1 +
 .../storyshots/src/react/renderShallowTree.js |  10 ++
 addons/storyshots/src/react/test-bodies.js    |  14 --
 addons/storyshots/src/rn/loader.js            |   1 +
 addons/storyshots/src/test-bodies.js          |  15 +++
 addons/storyshots/src/vue/loader.js           |   3 +
 .../storyshot.shallow.test.js.snap            | 122 ++++++++++++++++++
 .../storyshot.shallowWithOptions.test.js.snap |  11 ++
 .../stories/storyshot.renderOnly.test.js      |   8 ++
 .../stories/storyshot.shallow.test.js         |   8 ++
 .../storyshot.shallowWithOptions.test.js      |  14 ++
 13 files changed, 206 insertions(+), 17 deletions(-)
 create mode 100644 addons/storyshots/src/react/renderShallowTree.js
 delete mode 100644 addons/storyshots/src/react/test-bodies.js
 create mode 100644 addons/storyshots/stories/__snapshots__/storyshot.shallow.test.js.snap
 create mode 100644 addons/storyshots/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap
 create mode 100644 addons/storyshots/stories/storyshot.renderOnly.test.js
 create mode 100644 addons/storyshots/stories/storyshot.shallow.test.js
 create mode 100644 addons/storyshots/stories/storyshot.shallowWithOptions.test.js

diff --git a/addons/storyshots/src/angular/loader.js b/addons/storyshots/src/angular/loader.js
index 66ab73ebf777..aae9bb4a3cf8 100644
--- a/addons/storyshots/src/angular/loader.js
+++ b/addons/storyshots/src/angular/loader.js
@@ -30,6 +30,9 @@ function load(options) {
   return {
     framework: 'angular',
     renderTree: require.requireActual('./renderTree').default,
+    renderShallowTree: () => {
+      throw new Error('Shallow renderer is not supported for angular');
+    },
     storybook: require.requireActual('@storybook/angular'),
   };
 }
diff --git a/addons/storyshots/src/index.js b/addons/storyshots/src/index.js
index f5c2339fbc65..7829bbda9036 100644
--- a/addons/storyshots/src/index.js
+++ b/addons/storyshots/src/index.js
@@ -6,8 +6,14 @@ import addons from '@storybook/addons';
 import loadFramework from './frameworkLoader';
 import createChannel from './storybook-channel-mock';
 import { getPossibleStoriesFiles, getSnapshotFileName } from './utils';
-import { multiSnapshotWithOptions, snapshotWithOptions, snapshot } from './test-bodies';
-import { shallowSnapshot, renderOnly } from './react/test-bodies';
+
+import {
+  multiSnapshotWithOptions,
+  snapshotWithOptions,
+  snapshot,
+  shallowSnapshot,
+  renderOnly,
+} from './test-bodies';
 
 global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || {};
 
@@ -27,7 +33,7 @@ export default function testStorySnapshots(options = {}) {
 
   addons.setChannel(createChannel());
 
-  const { storybook, framework, renderTree } = loadFramework(options);
+  const { storybook, framework, renderTree, renderShallowTree } = loadFramework(options);
   const stories = storybook.getStorybook();
 
   if (stories.length === 0) {
@@ -70,6 +76,7 @@ export default function testStorySnapshots(options = {}) {
               story,
               context,
               renderTree,
+              renderShallowTree,
             });
           });
         }
diff --git a/addons/storyshots/src/react/loader.js b/addons/storyshots/src/react/loader.js
index fd0a8171a4ac..552ed5b5ea80 100644
--- a/addons/storyshots/src/react/loader.js
+++ b/addons/storyshots/src/react/loader.js
@@ -17,6 +17,7 @@ function load(options) {
   return {
     framework: 'react',
     renderTree: require.requireActual('./renderTree').default,
+    renderShallowTree: require.requireActual('./renderShallowTree').default,
     storybook: require.requireActual('@storybook/react'),
   };
 }
diff --git a/addons/storyshots/src/react/renderShallowTree.js b/addons/storyshots/src/react/renderShallowTree.js
new file mode 100644
index 000000000000..4b7b6a9225cf
--- /dev/null
+++ b/addons/storyshots/src/react/renderShallowTree.js
@@ -0,0 +1,10 @@
+import shallow from 'react-test-renderer/shallow';
+
+function getRenderedTree(story, context, { renderer, serializer }) {
+  const storyElement = story.render(context);
+  const shallowRenderer = renderer || shallow.createRenderer();
+  const tree = shallowRenderer.render(storyElement);
+  return serializer ? serializer(tree) : tree;
+}
+
+export default getRenderedTree;
diff --git a/addons/storyshots/src/react/test-bodies.js b/addons/storyshots/src/react/test-bodies.js
deleted file mode 100644
index e100771499d1..000000000000
--- a/addons/storyshots/src/react/test-bodies.js
+++ /dev/null
@@ -1,14 +0,0 @@
-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);
-}
diff --git a/addons/storyshots/src/rn/loader.js b/addons/storyshots/src/rn/loader.js
index eaddd550bb4f..5d0d3a92534c 100644
--- a/addons/storyshots/src/rn/loader.js
+++ b/addons/storyshots/src/rn/loader.js
@@ -17,6 +17,7 @@ function load(options) {
 
   return {
     renderTree: require('../react/renderTree').default,
+    renderShallowTree: require('../react/renderShallowTree').default,
     framework: 'rn',
     storybook,
   };
diff --git a/addons/storyshots/src/test-bodies.js b/addons/storyshots/src/test-bodies.js
index 9c0c036a060c..2cc98c8c72bc 100644
--- a/addons/storyshots/src/test-bodies.js
+++ b/addons/storyshots/src/test-bodies.js
@@ -36,4 +36,19 @@ export const multiSnapshotWithOptions = options => ({ story, context, renderTree
     snapshotFileName: getSnapshotFileName(context),
   });
 
+export function shallowSnapshot({ story, context, renderShallowTree, options = {} }) {
+  const result = renderShallowTree(story, context, options);
+  expect(result).toMatchSnapshot();
+}
+
+export function renderOnly({ story, context, renderTree }) {
+  const result = renderTree(story, context, {});
+
+  if (typeof result.then === 'function') {
+    return result;
+  }
+
+  return undefined;
+}
+
 export const snapshot = snapshotWithOptions({});
diff --git a/addons/storyshots/src/vue/loader.js b/addons/storyshots/src/vue/loader.js
index 8789bf6d3b57..4b8e33429437 100644
--- a/addons/storyshots/src/vue/loader.js
+++ b/addons/storyshots/src/vue/loader.js
@@ -25,6 +25,9 @@ function load(options) {
   return {
     framework: 'vue',
     renderTree: require.requireActual('./renderTree').default,
+    renderShallowTree: () => {
+      throw new Error('Shallow renderer is not supported for vue');
+    },
     storybook: require.requireActual('@storybook/vue'),
   };
 }
diff --git a/addons/storyshots/stories/__snapshots__/storyshot.shallow.test.js.snap b/addons/storyshots/stories/__snapshots__/storyshot.shallow.test.js.snap
new file mode 100644
index 000000000000..15dd9f09577d
--- /dev/null
+++ b/addons/storyshots/stories/__snapshots__/storyshot.shallow.test.js.snap
@@ -0,0 +1,122 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Another Button with some emoji 1`] = `
+<Unknown
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  😀 😎 👍 💯
+</Unknown>
+`;
+
+exports[`Storyshots Another Button with text 1`] = `
+<Unknown
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  Hello Button
+</Unknown>
+`;
+
+exports[`Storyshots Button with some emoji 1`] = `
+<Unknown
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  😀 😎 👍 💯
+</Unknown>
+`;
+
+exports[`Storyshots Button with text 1`] = `
+<Unknown
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  Hello Button
+</Unknown>
+`;
+
+exports[`Storyshots Welcome to Storybook 1`] = `
+<glamorous(article)>
+  <glamorous(h1)>
+    Welcome to storybook
+  </glamorous(h1)>
+  <p>
+    This is a UI component dev environment for your app.
+  </p>
+  <p>
+    We've added some basic stories inside the
+     
+    <glamorous(code)>
+      src/stories
+    </glamorous(code)>
+     
+    directory.
+    <br />
+    A story is a single state of one or more UI components. You can have as many stories as you want.
+    <br />
+    (Basically a story is like a visual test case.)
+  </p>
+  <p>
+    See these sample
+     
+    <glamorous(a)
+      onClick={[Function]}
+      role="button"
+      tabIndex="0"
+    >
+      stories
+    </glamorous(a)>
+     
+    for a component called
+     
+    <glamorous(code)>
+      Button
+    </glamorous(code)>
+    .
+  </p>
+  <p>
+    Just like that, you can add your own components as stories.
+    <br />
+    You can also edit those components and see changes right away.
+    <br />
+    (Try editing the 
+    <glamorous(code)>
+      Button
+    </glamorous(code)>
+     stories located at 
+    <glamorous(code)>
+      src/stories/index.js
+    </glamorous(code)>
+    .)
+  </p>
+  <p>
+    Usually we create stories with smaller UI components in the app.
+    <br />
+    Have a look at the
+     
+    <glamorous(a)
+      href="https://storybook.js.org/basics/writing-stories"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      Writing Stories
+    </glamorous(a)>
+     
+    section in our documentation.
+  </p>
+  <glamorous(p)>
+    <b>
+      NOTE:
+    </b>
+    <br />
+    Have a look at the
+     
+    <glamorous(code)>
+      .storybook/webpack.config.js
+    </glamorous(code)>
+     
+    to add webpack loaders and plugins you are using in this project.
+  </glamorous(p)>
+</glamorous(article)>
+`;
diff --git a/addons/storyshots/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap b/addons/storyshots/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap
new file mode 100644
index 000000000000..c9abf91b5660
--- /dev/null
+++ b/addons/storyshots/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Another Button with some emoji 1`] = `"{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"😀 😎 👍 💯\\",\\"className\\":\\"css-1yjiefr\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
+
+exports[`Storyshots Another Button with text 1`] = `"{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Hello Button\\",\\"className\\":\\"css-1yjiefr\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
+
+exports[`Storyshots Button with some emoji 1`] = `"{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"😀 😎 👍 💯\\",\\"className\\":\\"css-1yjiefr\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
+
+exports[`Storyshots Button with text 1`] = `"{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Hello Button\\",\\"className\\":\\"css-1yjiefr\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
+
+exports[`Storyshots Welcome to Storybook 1`] = `"{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Welcome to storybook\\"},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"This is a UI component dev environment for your app.\\"},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[\\"We've added some basic stories inside the\\",\\" \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"src/stories\\"},\\"_owner\\":null,\\"_store\\":{}},\\" \\",\\"directory.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"A story is a single state of one or more UI components. You can have as many stories as you want.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"(Basically a story is like a visual test case.)\\"]},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[\\"See these sample\\",\\" \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"role\\":\\"button\\",\\"tabIndex\\":\\"0\\",\\"children\\":\\"stories\\"},\\"_owner\\":null,\\"_store\\":{}},\\" \\",\\"for a component called\\",\\" \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Button\\"},\\"_owner\\":null,\\"_store\\":{}},\\".\\"]},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[\\"Just like that, you can add your own components as stories.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"You can also edit those components and see changes right away.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"(Try editing the \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Button\\"},\\"_owner\\":null,\\"_store\\":{}},\\" stories located at \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"src/stories/index.js\\"},\\"_owner\\":null,\\"_store\\":{}},\\".)\\"]},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[\\"Usually we create stories with smaller UI components in the app.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"Have a look at the\\",\\" \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"href\\":\\"https://storybook.js.org/basics/writing-stories\\",\\"target\\":\\"_blank\\",\\"rel\\":\\"noopener noreferrer\\",\\"children\\":\\"Writing Stories\\"},\\"_owner\\":null,\\"_store\\":{}},\\" \\",\\"section in our documentation.\\"]},\\"_owner\\":null,\\"_store\\":{}},{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[{\\"type\\":\\"b\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"NOTE:\\"},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"Have a look at the\\",\\" \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\".storybook/webpack.config.js\\"},\\"_owner\\":null,\\"_store\\":{}},\\" \\",\\"to add webpack loaders and plugins you are using in this project.\\"]},\\"_owner\\":null,\\"_store\\":{}}]},\\"_owner\\":null,\\"_store\\":{}}"`;
diff --git a/addons/storyshots/stories/storyshot.renderOnly.test.js b/addons/storyshots/stories/storyshot.renderOnly.test.js
new file mode 100644
index 000000000000..e620764ed585
--- /dev/null
+++ b/addons/storyshots/stories/storyshot.renderOnly.test.js
@@ -0,0 +1,8 @@
+import path from 'path';
+import initStoryshots, { renderOnly } from '../src';
+
+initStoryshots({
+  framework: 'react',
+  configPath: path.join(__dirname, '..', '.storybook'),
+  test: renderOnly,
+});
diff --git a/addons/storyshots/stories/storyshot.shallow.test.js b/addons/storyshots/stories/storyshot.shallow.test.js
new file mode 100644
index 000000000000..ade88a49a696
--- /dev/null
+++ b/addons/storyshots/stories/storyshot.shallow.test.js
@@ -0,0 +1,8 @@
+import path from 'path';
+import initStoryshots, { shallowSnapshot } from '../src';
+
+initStoryshots({
+  framework: 'react',
+  configPath: path.join(__dirname, '..', '.storybook'),
+  test: shallowSnapshot,
+});
diff --git a/addons/storyshots/stories/storyshot.shallowWithOptions.test.js b/addons/storyshots/stories/storyshot.shallowWithOptions.test.js
new file mode 100644
index 000000000000..c5c9a79871c6
--- /dev/null
+++ b/addons/storyshots/stories/storyshot.shallowWithOptions.test.js
@@ -0,0 +1,14 @@
+import path from 'path';
+import initStoryshots, { shallowSnapshot } from '../src';
+
+initStoryshots({
+  framework: 'react',
+  configPath: path.join(__dirname, '..', '.storybook'),
+  test: data =>
+    shallowSnapshot({
+      ...data,
+      options: {
+        serializer: JSON.stringify,
+      },
+    }),
+});

From 64506b43b2ede9cfebe42b34e2452d84259a4184 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Thu, 11 Jan 2018 00:22:29 +0200
Subject: [PATCH 37/41] Remove jest-preset-angular and react-test-renderer from
 deps.

---
 addons/storyshots/package.json                   | 2 --
 addons/storyshots/src/angular/renderTree.js      | 2 ++
 addons/storyshots/src/react/renderShallowTree.js | 1 +
 addons/storyshots/src/react/renderTree.js        | 1 +
 4 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/addons/storyshots/package.json b/addons/storyshots/package.json
index a18fa1eb922e..7806a6f1f5c5 100644
--- a/addons/storyshots/package.json
+++ b/addons/storyshots/package.json
@@ -20,10 +20,8 @@
     "babel-runtime": "^6.26.0",
     "glob": "^7.1.2",
     "global": "^4.3.2",
-    "jest-preset-angular": "^5.0.0",
     "jest-specific-snapshot": "^0.3.0",
     "prop-types": "^15.6.0",
-    "react-test-renderer": "^16.2.0",
     "read-pkg-up": "^3.0.0"
   },
   "devDependencies": {
diff --git a/addons/storyshots/src/angular/renderTree.js b/addons/storyshots/src/angular/renderTree.js
index b03ac81d57ef..ebe9f0e8f0a0 100644
--- a/addons/storyshots/src/angular/renderTree.js
+++ b/addons/storyshots/src/angular/renderTree.js
@@ -1,4 +1,6 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 import AngularSnapshotSerializer from 'jest-preset-angular/AngularSnapshotSerializer';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import HTMLCommentSerializer from 'jest-preset-angular/HTMLCommentSerializer';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { TestBed } from '@angular/core/testing';
diff --git a/addons/storyshots/src/react/renderShallowTree.js b/addons/storyshots/src/react/renderShallowTree.js
index 4b7b6a9225cf..022b7c9ae0a0 100644
--- a/addons/storyshots/src/react/renderShallowTree.js
+++ b/addons/storyshots/src/react/renderShallowTree.js
@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 import shallow from 'react-test-renderer/shallow';
 
 function getRenderedTree(story, context, { renderer, serializer }) {
diff --git a/addons/storyshots/src/react/renderTree.js b/addons/storyshots/src/react/renderTree.js
index 4d35e7dff84f..3ad4b81b9eb3 100644
--- a/addons/storyshots/src/react/renderTree.js
+++ b/addons/storyshots/src/react/renderTree.js
@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 import reactTestRenderer from 'react-test-renderer';
 
 function getRenderedTree(story, context, { renderer, serializer, ...rendererOptions }) {

From c2ced8d353822409e7a906e7664494171c21d2b7 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Thu, 11 Jan 2018 08:49:07 +0200
Subject: [PATCH 38/41] Update README

---
 addons/storyshots/README.md | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/addons/storyshots/README.md b/addons/storyshots/README.md
index a5a6e2552b14..e88f85cd80f9 100644
--- a/addons/storyshots/README.md
+++ b/addons/storyshots/README.md
@@ -38,8 +38,14 @@ Usually, you might already have completed this step. If not, here are some resou
 
 > Note: If you use React 16, you'll need to follow [these additional instructions](https://github.com/facebook/react/issues/9102#issuecomment-283873039).
 
+### Configure Jest for React
+StoryShots addon for React is dependent on [react-test-renderer](https://github.com/facebook/react/tree/master/packages/react-test-renderer), but 
+doesn't install it, so you need yo install it separately.
+
 ### Configure Jest for Angular
-StoryShots addon brings with it a [jest-preset-angular](https://github.com/thymikee/jest-preset-angular). 
+StoryShots addon for Angular is dependent on [jest-preset-angular](https://github.com/thymikee/jest-preset-angular), but 
+doesn't install it, so you need yo install it separately.
+
 If you already use Jest for testing your angular app - probably you already have the needed jest configuration.
 Anyway you can add these lines to your jest config:
 ```js
@@ -55,7 +61,9 @@ module.exports = {
 };
 ```
 ### Configure Jest for Vue
-StoryShots addon brings with it a [jest-vue-preprocessor](https://github.com/vire/jest-vue-preprocessor). 
+StoryShots addon for Vue is dependent on [jest-vue-preprocessor](https://github.com/vire/jest-vue-preprocessor), but 
+doesn't install it, so you need yo install it separately.
+ 
 If you already use Jest for testing your vue app - probably you already have the needed jest configuration.
 Anyway you can add these lines to your jest config:
 ```js

From 9091f4ab9becf1fd514550eec136037479ce9c70 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Thu, 11 Jan 2018 16:47:57 +0200
Subject: [PATCH 39/41] Add deps issue description to README

---
 addons/storyshots/README.md | 32 +++++++++++++++++++++++++++++---
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/addons/storyshots/README.md b/addons/storyshots/README.md
index e88f85cd80f9..204f1606959f 100644
--- a/addons/storyshots/README.md
+++ b/addons/storyshots/README.md
@@ -40,11 +40,19 @@ Usually, you might already have completed this step. If not, here are some resou
 
 ### Configure Jest for React
 StoryShots addon for React is dependent on [react-test-renderer](https://github.com/facebook/react/tree/master/packages/react-test-renderer), but 
-doesn't install it, so you need yo install it separately.
+doesn't install it, so you need to install it separately (read [here](#deps-issue) why).
+
+```sh
+npm install --save-dev react-test-renderer
+```
 
 ### Configure Jest for Angular
 StoryShots addon for Angular is dependent on [jest-preset-angular](https://github.com/thymikee/jest-preset-angular), but 
-doesn't install it, so you need yo install it separately.
+doesn't install it, so you need to install it separately (read [here](#deps-issue) why).
+
+```sh
+npm install --save-dev jest-preset-angular
+```
 
 If you already use Jest for testing your angular app - probably you already have the needed jest configuration.
 Anyway you can add these lines to your jest config:
@@ -62,7 +70,11 @@ module.exports = {
 ```
 ### Configure Jest for Vue
 StoryShots addon for Vue is dependent on [jest-vue-preprocessor](https://github.com/vire/jest-vue-preprocessor), but 
-doesn't install it, so you need yo install it separately.
+doesn't install it, so you need yo install it separately (read [here](#deps-issue) why).
+ 
+ ```sh
+ npm install --save-dev jest-vue-preprocessor
+ ```
  
 If you already use Jest for testing your vue app - probably you already have the needed jest configuration.
 Anyway you can add these lines to your jest config:
@@ -75,6 +87,20 @@ module.exports = {
   moduleFileExtensions: ['vue', 'js', 'jsx', 'json', 'node'],
 };
 ```
+
+### <a name="deps-issue"></a>Why don't we install dependencies of each framework ?
+Storyshots addon is currently supporting React, Angular and Vue. Each framework needs its own packages to be integrated with Jest. We don't want people that use only React will need to bring other dependencies that do not make sense for them. 
+
+`dependancies` - will installed an exact version of the particular dep - Storyshots can work with different versions of the same framework (let's say React v16 and React v15), that have to be compatible with a version of its plugin (react-test-renderer).
+
+`optionalDependencies` - behaves like a regular dependency, but do not fail the installation in case there is a problem to bring the dep.
+
+`peerDependancies` - listing all the deps in peer will trigger warnings during the installation - we don't want users to install unneeded deps by hand.
+
+`optionalPeerDependancies` - unfortunately there is nothing like this =(
+    
+For more information read npm [docs](https://docs.npmjs.com/files/package.json#dependencies)
+
 ## Configure Storyshots
 
 Create a new test file with the name `Storyshots.test.js`. (Or whatever the name you prefer, as long as it matches Jest's config [`testMatch`](http://facebook.github.io/jest/docs/en/configuration.html#testmatch-array-string)).

From d17f61b29f573db8932d8cf13f8a98ab117bd69f Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Thu, 11 Jan 2018 20:39:27 +0200
Subject: [PATCH 40/41] Fix docs

---
 addons/storyshots/README.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/addons/storyshots/README.md b/addons/storyshots/README.md
index 204f1606959f..94a3a0c6ece8 100644
--- a/addons/storyshots/README.md
+++ b/addons/storyshots/README.md
@@ -40,7 +40,7 @@ Usually, you might already have completed this step. If not, here are some resou
 
 ### Configure Jest for React
 StoryShots addon for React is dependent on [react-test-renderer](https://github.com/facebook/react/tree/master/packages/react-test-renderer), but 
-doesn't install it, so you need to install it separately (read [here](#deps-issue) why).
+[doesn't](#deps-issue) install it, so you need to install it separately.
 
 ```sh
 npm install --save-dev react-test-renderer
@@ -48,7 +48,7 @@ npm install --save-dev react-test-renderer
 
 ### Configure Jest for Angular
 StoryShots addon for Angular is dependent on [jest-preset-angular](https://github.com/thymikee/jest-preset-angular), but 
-doesn't install it, so you need to install it separately (read [here](#deps-issue) why).
+[doesn't](#deps-issue) install it, so you need to install it separately.
 
 ```sh
 npm install --save-dev jest-preset-angular
@@ -70,7 +70,7 @@ module.exports = {
 ```
 ### Configure Jest for Vue
 StoryShots addon for Vue is dependent on [jest-vue-preprocessor](https://github.com/vire/jest-vue-preprocessor), but 
-doesn't install it, so you need yo install it separately (read [here](#deps-issue) why).
+[doesn't](#deps-issue) install it, so you need yo install it separately.
  
  ```sh
  npm install --save-dev jest-vue-preprocessor
@@ -91,13 +91,13 @@ module.exports = {
 ### <a name="deps-issue"></a>Why don't we install dependencies of each framework ?
 Storyshots addon is currently supporting React, Angular and Vue. Each framework needs its own packages to be integrated with Jest. We don't want people that use only React will need to bring other dependencies that do not make sense for them. 
 
-`dependancies` - will installed an exact version of the particular dep - Storyshots can work with different versions of the same framework (let's say React v16 and React v15), that have to be compatible with a version of its plugin (react-test-renderer).
+`dependencies` - will installed an exact version of the particular dep - Storyshots can work with different versions of the same framework (let's say React v16 and React v15), that have to be compatible with a version of its plugin (react-test-renderer).
 
 `optionalDependencies` - behaves like a regular dependency, but do not fail the installation in case there is a problem to bring the dep.
 
-`peerDependancies` - listing all the deps in peer will trigger warnings during the installation - we don't want users to install unneeded deps by hand.
+`peerDependencies` - listing all the deps in peer will trigger warnings during the installation - we don't want users to install unneeded deps by hand.
 
-`optionalPeerDependancies` - unfortunately there is nothing like this =(
+`optionalPeerDependencies` - unfortunately there is nothing like this =(
     
 For more information read npm [docs](https://docs.npmjs.com/files/package.json#dependencies)
 

From 53b9a3a32b2276eb29c11b9f26a5196347c5f7a3 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Sun, 14 Jan 2018 18:20:58 +0200
Subject: [PATCH 41/41] Fix image snapshot to err on RN

---
 addons/storyshots/src/test-body-image-snapshot.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/storyshots/src/test-body-image-snapshot.js b/addons/storyshots/src/test-body-image-snapshot.js
index 94aadf4de741..f05b83464b0b 100644
--- a/addons/storyshots/src/test-body-image-snapshot.js
+++ b/addons/storyshots/src/test-body-image-snapshot.js
@@ -11,7 +11,7 @@ export const imageSnapshot = ({
   let page; // Hold ref to the page to screenshot.
 
   const testFn = ({ context }) => {
-    if (context.isRNStorybook) {
+    if (context.framework === 'rn') {
       // Skip tests since we de not support RN image snapshots.
       console.error(
         "It seems you are running imageSnapshot on RN app and it's not supported. Skipping test."