Angular and Vue storyshots

.editorconfig

@@ -3,6 +3,6 @@ root = true
 [*]
 end_of_line = lf
 
-[*.{js,json,ts}]
+[*.{js,json,ts,vue}]
 indent_style = space
 indent_size = 2

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,43 @@ 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 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
+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 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
+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)).

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"
   },
@@ -41,8 +41,6 @@
   },
   "peerDependencies": {
     "@storybook/addons": "^3.4.0-alpha.1",
-    "babel-core": "^6.26.0 || ^7.0.0-0",
-    "react": "*",
-    "react-test-renderer": "*"
+    "babel-core": "^6.26.0 || ^7.0.0-0"
   }
 }

addons/storyshots/src/angular/app.component.ts

@@ -0,0 +1,92 @@
+// 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,
+  OnInit,
+  ViewChild,
+  ViewContainerRef,
+  ComponentFactoryResolver,
+  OnDestroy,
+  EventEmitter,
+  SimpleChanges,
+  SimpleChange,
+} from '@angular/core';
+import { STORY } from './app.token';
+import { NgStory, ICollection } from './types';
+
+@Component({
+  selector: 'storybook-dynamic-app-root',
+  template: '<ng-template #target></ng-template>',
+})
+export class AppComponent implements OnInit, OnDestroy {
+  @ViewChild('target', { read: ViewContainerRef })
+  target: ViewContainerRef;
+  constructor(private cfr: ComponentFactoryResolver, @Inject(STORY) private data: NgStory) {}
+
+  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;
+
+    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);
+    }
+  }
+}

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');

addons/storyshots/src/angular/helpers.ts

@@ -0,0 +1,64 @@
+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 { NgStory } from './types';
+
+const getModuleMeta = (
+  declarations: Array<Type<any> | any[]>,
+  entryComponents: Array<Type<any> | any[]>,
+  bootstrap: Array<Type<any> | any[]>,
+  data: NgStory,
+  moduleMetadata: any
+) => {
+  return {
+    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],
+  };
+};
+
+const createComponentFromTemplate = (template: string): Function => {
+  const componentClass = class DynamicComponent {};
+
+  return Component({
+    template: template,
+  })(componentClass);
+};
+
+export const initModuleData = (storyObj: NgStory): any => {
+  const { component, template, props, moduleMetadata = {} } = storyObj;
+
+  let AnnotatedComponent;
+
+  if (template) {
+    AnnotatedComponent = createComponentFromTemplate(template);
+  } else {
+    AnnotatedComponent = component;
+  }
+
+  const story = {
+    component: AnnotatedComponent,
+    props,
+  };
+
+  const moduleMeta = getModuleMeta(
+    [AppComponent, AnnotatedComponent],
+    [AnnotatedComponent],
+    [AppComponent],
+    story,
+    moduleMetadata
+  );
+
+  return {
+    AppComponent,
+    moduleMeta,
+  };
+};

addons/storyshots/src/angular/loader.js

@@ -0,0 +1,43 @@
+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'))
+  );
+}
+
+function load(options) {
+  setupAngularJestPreset();
+
+  const { content, contextOpts } = loadConfig({
+    configDirPath: options.configPath,
+    babelConfigPath: '@storybook/angular/dist/server/babel_config',
+  });
+
+  runWithRequireContext(content, contextOpts);
+
+  return {
+    framework: 'angular',
+    renderTree: require.requireActual('./renderTree').default,
+    renderShallowTree: () => {
+      throw new Error('Shallow renderer is not supported for angular');
+    },
+    storybook: require.requireActual('@storybook/angular'),
+  };
+}
+
+export default {
+  load,
+  test,
+};

addons/storyshots/src/angular/renderTree.js

@@ -0,0 +1,44 @@
+// 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';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
+// 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';
+
+addSerializer(HTMLCommentSerializer);
+addSerializer(AngularSnapshotSerializer);
+
+function getRenderedTree(story, context) {
+  const currentStory = story.render(context);
+
+  const { moduleMeta, AppComponent } = initModuleData(currentStory);
+
+  TestBed.configureTestingModule({
+    imports: [...moduleMeta.imports],
+    declarations: [...moduleMeta.declarations],
+    providers: [...moduleMeta.providers],
+    schemas: [NO_ERRORS_SCHEMA, ...moduleMeta.schemas],
+    bootstrap: [...moduleMeta.bootstrap],
+  });
+
+  TestBed.overrideModule(BrowserDynamicTestingModule, {
+    set: {
+      entryComponents: [...moduleMeta.entryComponents],
+    },
+  });
+
+  return TestBed.compileComponents().then(() => {
+    const tree = TestBed.createComponent(AppComponent);
+    tree.detectChanges();
+
+    return tree;
+  });
+}
+
+export default getRenderedTree;

addons/storyshots/src/angular/types.ts

@@ -0,0 +1,19 @@
+export interface NgModuleMetadata {
+  declarations?: Array<any>;
+  entryComponents?: 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;
+  template?: string;
+}

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;

addons/storyshots/src/frameworkLoader.js

@@ -0,0 +1,18 @@
+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, loaderVue];
+
+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;