Storybook addon Jest angular suport

ADDONS_SUPPORT.md

@@ -9,7 +9,7 @@
 |[events](addons/events)          |+| | | | | |
 |[graphql](addons/graphql)        |+| | | | | |
 |[info](addons/info)              |+| | | | | |
-|[jest](addons/jest)              |+| | | | | |
+|[jest](addons/jest)              |+| | |+| | |
 |[knobs](addons/knobs)            |+|+|+|+|+|+|
 |[links](addons/links)            |+|+|+|+|+|+|
 |[notes](addons/notes)            |+| |+|+|+|+|

addons/jest/README.md

@@ -118,6 +118,48 @@ storiesOf('MyComponent', module)
 - **options.results**: OBJECT jest output results. *mandatory*
 - **filesExt**: STRING test file extention. *optionnal*. This allow you to write "MyComponent" and not "MyComponent.test.js". It will be used as regex to find your file results. Default value is `((\\.specs?)|(\\.tests?))?(\\.js)?$`. That mean it will match: MyComponent.js, MyComponent.test.js, MyComponent.tests.js, MyComponent.spec.js, MyComponent.specs.js...
 
+## Usage with Angular
+
+Assuming that you have created a test files `my.component.spec.ts` and `my-other.comonent.spec.ts`
+
+Config Jest with [jest-preset-angular](https://www.npmjs.com/package/jest-preset-angular)
+
+In project `typings.d.ts` add
+
+```ts
+declare module '*.json' {
+  const value: any;
+  export default value;
+}
+```
+
+Create a simple file `withTests.ts`:
+
+```ts
+import * as results from '../.jest-test-results.json';
+import { withTests } from '@storybook/addon-jest';
+
+export const wTests = withTests({
+  results,
+  filesExt: '((\\.specs?)|(\\.tests?))?(\\.ts)?$'
+});
+```
+
+Then in your story:
+
+```js
+// import your file
+import wTests from '.withTests';
+
+storiesOf('MyComponent', module)
+  .addDecorator(wTests('my.component', 'my-other.component'))
+  .add('This story shows test results from MyComponent.test.js and MyOtherComponent.test.js', () => (
+    <div>Jest results in storybook</div>
+  ));
+```
+
+##### Example [here](https://github.com/storybooks/storybook/tree/master/examples/angular-cli)
+
 ## TODO
 
 - [ ] Add coverage

examples/angular-cli/.gitignore

@@ -41,3 +41,4 @@ yarn-error.log
 # System Files
 .DS_Store
 Thumbs.db
+.jest-test-results.json

examples/angular-cli/.storybook/addons.js

@@ -4,3 +4,4 @@ import '@storybook/addon-links/register';
 import '@storybook/addon-notes/register';
 import '@storybook/addon-knobs/register';
 import '@storybook/addon-options/register';
+import '@storybook/addon-jest/register';

examples/angular-cli/.storybook/withTests.ts

@@ -0,0 +1,7 @@
+import * as results from '../.jest-test-results.json';
+import { withTests } from '@storybook/addon-jest';
+
+export const wTests = withTests({
+  results,
+  filesExt: '((\\.specs?)|(\\.tests?))?(\\.ts)?$'
+});

examples/angular-cli/README.md

@@ -16,7 +16,7 @@ Run `ng build` to build the project. The build artifacts will be stored in the `
 
 ## Running unit tests
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+Run `ng test` to execute the unit tests via [Jest](https://facebook.github.io/jest/).
 
 ## Running end-to-end tests
 

examples/angular-cli/jest-config/globalMocks.ts

@@ -0,0 +1,20 @@
+const mock = () => {
+    let storage = {};
+    return {
+      getItem: key => (key in storage ? storage[key] : null),
+      setItem: (key, value) => (storage[key] = value || ''),
+      removeItem: key => delete storage[key],
+      clear: () => (storage = {})
+    };
+  };
+
+  Object.defineProperty(window, 'localStorage', {
+    value: mock()
+  });
+  Object.defineProperty(window, 'sessionStorage', {
+    value: mock()
+  });
+  Object.defineProperty(window, 'getComputedStyle', {
+    value: () => ['-webkit-appearance']
+  });
+

examples/angular-cli/jest-config/setup.ts

@@ -0,0 +1,2 @@
+import 'jest-preset-angular';
+import './globalMocks';

examples/angular-cli/package.json

@@ -5,12 +5,16 @@
   "license": "MIT",
   "scripts": {
     "build": "ng build",
-    "build-storybook": "build-storybook -s src",
+    "build-storybook": "npm run storybook:prebuild && build-storybook -s src",
     "e2e": "ng e2e",
     "ng": "ng",
     "start": "ng serve",
-    "storybook": "start-storybook -p 9008 -s src/assets",
-    "test": "ng test"
+    "storybook:prebuild": "npm run test:generate-output",
+    "storybook": "npm run storybook:prebuild && start-storybook -p 9008 -s src/assets",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "test:generate-output": "jest --json --outputFile=.jest-test-results.json || true"
   },
   "dependencies": {
     "@angular/common": "^5.2.10",
@@ -28,6 +32,7 @@
     "@angular/cli": "1.7.4",
     "@angular/compiler-cli": "^5.2.10",
     "@storybook/addon-actions": "4.0.0-alpha.4",
+    "@storybook/addon-jest": "^3.4.3",
     "@storybook/addon-knobs": "4.0.0-alpha.4",
     "@storybook/addon-links": "4.0.0-alpha.4",
     "@storybook/addon-notes": "4.0.0-alpha.4",
@@ -38,19 +43,31 @@
     "@storybook/angular": "4.0.0-alpha.4",
     "@types/jasmine": "~2.8.6",
     "@types/jasminewd2": "^2.0.3",
+    "@types/jest": "^22.2.3",
     "@types/node": "~9.6.7",
     "babel-core": "^6.26.3",
     "global": "^4.3.2",
     "jasmine-core": "~3.1.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~2.0.2",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^1.4.2",
-    "karma-jasmine": "~1.1.0",
-    "karma-jasmine-html-reporter": "^1.0.0",
+    "jest": "^22.4.3",
+    "jest-preset-angular": "^5.2.2",
     "protractor": "~5.3.1",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
     "ts-node": "~6.0.2",
     "typescript": "^2.8.3"
+  },
+  "jest": {
+    "preset": "jest-preset-angular",
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "/build/",
+      "angularshots.test.js"
+    ],
+    "coveragePathIgnorePatterns": [
+      "/jest-config/",
+      "/node_modules/"
+    ],
+    "setupTestFrameworkScriptFile": "./jest-config/setup.ts"
   }
 }

examples/angular-cli/src/stories/__snapshots__/addon-jest.stories.storyshot

@@ -0,0 +1,105 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Jest app.component with jest tests 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <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"
+    >
+
+
+      <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>
+
+
+
+  </storybook-app-root>
+</storybook-dynamic-app-root>
+`;

examples/angular-cli/src/stories/addon-jest.stories.ts

@@ -0,0 +1,10 @@
+import { storiesOf } from '@storybook/angular';
+import { AppComponent } from '../app/app.component';
+import { wTests } from '../../.storybook/withTests';
+
+storiesOf('Addon|Jest', module)
+  .addDecorator(wTests('app.component'))
+  .add('app.component with jest tests', () => ({
+    component: AppComponent,
+    props: {},
+  }));

examples/angular-cli/src/typings.d.ts

@@ -3,3 +3,8 @@ declare var module: NodeModule;
 interface NodeModule {
   id: string;
 }
+
+declare module '*.json' {
+  const value: any;
+  export default value;
+}