Merge pull request #3532 from klimentru1986/master

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`
+
+Configure Jest with [jest-preset-angular](https://www.npmjs.com/package/jest-preset-angular)
+
+In project`s `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 my.component.spec.ts and my-other.component.spec.ts', () => (
+    <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,6 @@ yarn-error.log
 # System Files
 .DS_Store
 Thumbs.db
+
+/jest_0
+.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 '../addon-jest.testresults.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/addon-jest.testresults.json

@@ -0,0 +1 @@
+{"numFailedTestSuites":0,"numFailedTests":0,"numPassedTestSuites":1,"numPassedTests":3,"numPendingTestSuites":0,"numPendingTests":0,"numRuntimeErrorTestSuites":0,"numTotalTestSuites":1,"numTotalTests":3,"snapshot":{"added":0,"didUpdate":false,"failure":false,"filesAdded":0,"filesRemoved":0,"filesUnmatched":0,"filesUpdated":0,"matched":0,"total":0,"unchecked":0,"uncheckedKeys":[],"unmatched":0,"updated":0},"startTime":1525677901357,"success":true,"testResults":[{"assertionResults":[{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should create the app","location":null,"status":"passed","title":"should create the app"},{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should have as title 'app'","location":null,"status":"passed","title":"should have as title 'app'"},{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should render title in a h1 tag","location":null,"status":"passed","title":"should render title in a h1 tag"}],"endTime":1525677905915,"message":"","name":"C:\\tmp\\storybook\\examples\\angular-cli\\src\\app\\app.component.spec.ts","startTime":1525677902829,"status":"passed","summary":""}],"wasInterrupted":false}

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

@@ -0,0 +1,18 @@
+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=addon-jest.testresults.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": "4.0.0-alpha.4",
     "@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,37 @@
     "@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",
     "ts-node": "~6.0.2",
     "typescript": "^2.8.3"
+  },
+  "jest": {
+    "preset": "jest-preset-angular",
+    "transform": {
+      "^.+\\.(ts|js|html)$": "<rootDir>/../../node_modules/jest-preset-angular/preprocessor.js"
+    },
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "/build/",
+      "/storybook-static/",
+      "angularshots.test.js"
+    ],
+    "coveragePathIgnorePatterns": [
+      "/jest-config/",
+      "/node_modules/"
+    ],
+    "snapshotSerializers": [
+      "<rootDir>/../../node_modules/jest-preset-angular/AngularSnapshotSerializer.js",
+      "<rootDir>/../../node_modules/jest-preset-angular/HTMLCommentSerializer.js"
+    ],
+    "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;
+}