Merge branch 'master' of github.com:storybooks/storybook into addmarkosupport

2025-03-19 05:02:40 +08:00 · 2018-05-07 13:09:43 -07:00 · 2018-05-07 13:09:43 -07:00 · 554f4f115d
commit 554f4f115d
parent d8e0673d31 ddbcc2330c
34 changed files with 801 additions and 1034 deletions
--- a/ADDONS_SUPPORT.md
+++ b/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)            |+| |+|+|+|+|+| |
--- a/addons/info/package.json
+++ b/addons/info/package.json
@ -16,7 +16,7 @@
    "@storybook/client-logger": "4.0.0-alpha.4",
    "@storybook/components": "4.0.0-alpha.4",
    "babel-runtime": "^6.26.0",
-    "core-js": "2.5.5",
+    "core-js": "2.5.6",
    "glamor": "^2.20.40",
    "glamorous": "^4.12.5",
    "global": "^4.3.2",
--- a/addons/jest/README.md
+++ b/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
--- a/addons/storysource/package.json
+++ b/addons/storysource/package.json
@ -27,7 +27,7 @@
    "loader-utils": "^1.1.0",
    "prettier": "^1.12.1",
    "prop-types": "^15.6.1",
-    "react-syntax-highlighter": "^7.0.2"
+    "react-syntax-highlighter": "^7.0.4"
  },
  "peerDependencies": {
    "react": "*"
--- a/app/angular/package.json
+++ b/app/angular/package.json
@ -33,14 +33,14 @@
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^6.23.0",
    "case-sensitive-paths-webpack-plugin": "^2.1.2",
-    "core-js": "^2.5.5",
+    "core-js": "^2.5.6",
    "dotenv-webpack": "^1.5.5",
    "global": "^4.3.2",
    "html-webpack-plugin": "^3.2.0",
    "raw-loader": "^0.5.1",
    "sass-loader": "^7.0.1",
    "ts-loader": "^4.2.0",
-    "webpack": "^4.6.0",
+    "webpack": "^4.8.0",
    "webpack-hot-middleware": "^2.22.1",
    "zone.js": "^0.8.26"
  },
--- a/app/html/package.json
+++ b/app/html/package.json
@ -29,18 +29,18 @@
    "babel-plugin-transform-regenerator": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.0",
-    "babel-preset-minify": "^0.4.0",
+    "babel-preset-minify": "^0.4.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "case-sensitive-paths-webpack-plugin": "^2.1.2",
    "common-tags": "^1.4.0",
-    "core-js": "^2.5.5",
+    "core-js": "^2.5.6",
    "dotenv-webpack": "^1.5.5",
    "global": "^4.3.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "raw-loader": "^0.5.1",
-    "webpack": "^4.6.0",
+    "webpack": "^4.8.0",
    "webpack-hot-middleware": "^2.22.1"
  },
  "peerDependencies": {
--- a/app/mithril/package.json
+++ b/app/mithril/package.json
@ -30,17 +30,17 @@
    "babel-plugin-transform-regenerator": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
-    "babel-preset-minify": "^0.4.0",
+    "babel-preset-minify": "^0.4.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "case-sensitive-paths-webpack-plugin": "^2.1.2",
    "common-tags": "^1.7.2",
-    "core-js": "^2.5.5",
+    "core-js": "^2.5.6",
    "dotenv-webpack": "^1.5.5",
    "global": "^4.3.2",
    "html-webpack-plugin": "^3.2.0",
    "raw-loader": "^0.5.1",
-    "webpack": "^4.6.0",
+    "webpack": "^4.8.0",
    "webpack-hot-middleware": "^2.22.1"
  },
  "devDependencies": {
--- a/app/polymer/package.json
+++ b/app/polymer/package.json
@ -31,27 +31,27 @@
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.0",
-    "babel-preset-minify": "^0.4.0",
+    "babel-preset-minify": "^0.4.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "case-sensitive-paths-webpack-plugin": "^2.1.2",
    "common-tags": "^1.4.0",
-    "core-js": "^2.5.5",
+    "core-js": "^2.5.6",
    "dotenv-webpack": "^1.5.5",
    "global": "^4.3.2",
    "html-webpack-plugin": "^3.2.0",
    "raw-loader": "^0.5.1",
-    "webpack": "^4.6.0",
+    "webpack": "^4.8.0",
    "webpack-hot-middleware": "^2.22.1"
  },
  "devDependencies": {
-    "lit-html": "^0.9.0",
+    "lit-html": "^0.10.0",
    "polymer-webpack-loader": "^2.0.2"
  },
  "peerDependencies": {
    "babel-core": "^6.26.0 || ^7.0.0-0",
    "babel-runtime": ">=6.0.0",
-    "lit-html": "0.9.0",
+    "lit-html": "0.10.0",
    "polymer-webpack-loader": "2.0.2"
  }
 }
--- a/app/react-native/package.json
+++ b/app/react-native/package.json
@ -43,7 +43,7 @@
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-flow": "^6.23.0",
-    "babel-preset-minify": "^0.4.0",
+    "babel-preset-minify": "^0.4.1",
    "babel-preset-react": "^6.24.1",
    "babel-register": "^6.26.0",
    "babel-runtime": "^6.26.0",
@ -63,7 +63,7 @@
    "url-parse": "^1.4.0",
    "util-deprecate": "^1.0.2",
    "uuid": "^3.2.1",
-    "webpack": "^4.6.0",
+    "webpack": "^4.8.0",
    "webpack-dev-middleware": "^3.1.3",
    "webpack-hot-middleware": "^2.22.1",
    "ws": "^5.1.1"
--- a/app/react/package.json
+++ b/app/react/package.json
@ -31,13 +31,13 @@
    "babel-plugin-transform-regenerator": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
-    "babel-preset-minify": "^0.4.0",
+    "babel-preset-minify": "^0.4.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "case-sensitive-paths-webpack-plugin": "^2.1.2",
    "common-tags": "^1.7.2",
-    "core-js": "^2.5.5",
+    "core-js": "^2.5.6",
    "dotenv-webpack": "^1.5.5",
    "glamor": "^2.20.40",
    "glamorous": "^4.12.5",
@ -46,7 +46,7 @@
    "lodash.flattendeep": "^4.4.0",
    "prop-types": "^15.6.1",
    "raw-loader": "^0.5.1",
-    "webpack": "^4.6.0",
+    "webpack": "^4.8.0",
    "webpack-hot-middleware": "^2.22.1"
  },
  "peerDependencies": {
--- a/app/vue/package.json
+++ b/app/vue/package.json
@ -30,17 +30,17 @@
    "babel-plugin-transform-regenerator": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.0",
-    "babel-preset-minify": "^0.4.0",
+    "babel-preset-minify": "^0.4.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "case-sensitive-paths-webpack-plugin": "^2.1.2",
    "common-tags": "^1.7.2",
-    "core-js": "^2.5.5",
+    "core-js": "^2.5.6",
    "dotenv-webpack": "^1.5.5",
    "global": "^4.3.2",
    "html-webpack-plugin": "^3.2.0",
    "raw-loader": "^0.5.1",
-    "webpack": "^4.6.0",
+    "webpack": "^4.8.0",
    "webpack-hot-middleware": "^2.22.1"
  },
  "devDependencies": {
--- a/docs/package.json
+++ b/docs/package.json
@ -24,14 +24,14 @@
    "@storybook/react": "^3.4.3",
    "babel-loader": "^6.4.1",
    "bootstrap": "^3.3.7",
-    "gatsby": "^1.9.255",
-    "gatsby-link": "^1.6.41",
-    "gatsby-plugin-sharp": "^1.6.43",
-    "gatsby-remark-autolink-headers": "^1.4.17",
+    "gatsby": "^1.9.259",
+    "gatsby-link": "^1.6.44",
+    "gatsby-plugin-sharp": "^1.6.44",
+    "gatsby-remark-autolink-headers": "^1.4.18",
    "gatsby-remark-copy-linked-files": "^1.5.32",
-    "gatsby-remark-images": "^1.5.62",
+    "gatsby-remark-images": "^1.5.63",
    "gatsby-remark-smartypants": "^1.4.12",
-    "gatsby-source-filesystem": "^1.5.34",
+    "gatsby-source-filesystem": "^1.5.35",
    "gatsby-transformer-remark": "^1.7.40",
    "gh-pages": "^1.1.0",
    "global": "^4.3.2",
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@ -4589,9 +4589,9 @@ gatsby-cli@^1.1.51:
    yargs "^11.1.0"
    yurnalist "^0.2.1"

-gatsby-link@^1.6.41:
-  version "1.6.41"
-  resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-1.6.41.tgz#26e81e3cbb841b6843fd720152c48d5c43feb7b5"
+gatsby-link@^1.6.44:
+  version "1.6.44"
+  resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-1.6.44.tgz#31912e66d3b21632ce27e5b7310ec88d9a75eac3"
  dependencies:
    "@types/history" "^4.6.2"
    "@types/react-router-dom" "^4.2.2"
@ -4606,9 +4606,9 @@ gatsby-module-loader@^1.0.11:
    babel-runtime "^6.26.0"
    loader-utils "^0.2.16"

-gatsby-plugin-sharp@^1.6.43:
-  version "1.6.43"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-1.6.43.tgz#045e1d00c4453a9e5cbf99358ad5a5f6c0e4bf3e"
+gatsby-plugin-sharp@^1.6.44:
+  version "1.6.44"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-1.6.44.tgz#397e53e2962e5e1dc870408610aad7d6d2d64cb8"
  dependencies:
    async "^2.1.2"
    babel-runtime "^6.26.0"
@ -4617,23 +4617,24 @@ gatsby-plugin-sharp@^1.6.43:
    imagemin-pngquant "5.0.1"
    imagemin-webp "^4.0.0"
    lodash "^4.17.4"
+    mini-svg-data-uri "^1.0.0"
    potrace "^2.1.1"
    probe-image-size "^4.0.0"
    progress "^1.1.8"
    sharp "^0.20.0"
    svgo "^0.7.2"

-gatsby-react-router-scroll@^1.0.14:
-  version "1.0.14"
-  resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-1.0.14.tgz#7e3b59c2266772030c6bfeaa8914c71dd3c12c59"
+gatsby-react-router-scroll@^1.0.17:
+  version "1.0.17"
+  resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-1.0.17.tgz#16b9c67da7f4a997ebb8c784f4feba2b23af4f98"
  dependencies:
    babel-runtime "^6.26.0"
    scroll-behavior "^0.9.9"
    warning "^3.0.0"

-gatsby-remark-autolink-headers@^1.4.17:
-  version "1.4.17"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-autolink-headers/-/gatsby-remark-autolink-headers-1.4.17.tgz#47c4d28493d5df06ce2da88f0499762cf6fc3252"
+gatsby-remark-autolink-headers@^1.4.18:
+  version "1.4.18"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-autolink-headers/-/gatsby-remark-autolink-headers-1.4.18.tgz#7f1536b3c67b32d902da5cd96cc2de863b8c1f6f"
  dependencies:
    babel-runtime "^6.26.0"
    github-slugger "^1.1.1"
@ -4653,13 +4654,13 @@ gatsby-remark-copy-linked-files@^1.5.32:
    probe-image-size "^4.0.0"
    unist-util-visit "^1.1.1"

-gatsby-remark-images@^1.5.62:
-  version "1.5.62"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-images/-/gatsby-remark-images-1.5.62.tgz#5349598e50be43a202769991657f216b2741bbb3"
+gatsby-remark-images@^1.5.63:
+  version "1.5.63"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-images/-/gatsby-remark-images-1.5.63.tgz#0ddfd3bcd3386129749024d6ddb88178b87422f2"
  dependencies:
    babel-runtime "^6.26.0"
    cheerio "^1.0.0-rc.2"
-    gatsby-plugin-sharp "^1.6.43"
+    gatsby-plugin-sharp "^1.6.44"
    is-relative-url "^2.0.0"
    lodash "^4.17.4"
    slash "^1.0.0"
@ -4674,9 +4675,9 @@ gatsby-remark-smartypants@^1.4.12:
    retext-smartypants "^2.0.0"
    unist-util-visit "^1.1.1"

-gatsby-source-filesystem@^1.5.34:
-  version "1.5.34"
-  resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-1.5.34.tgz#cfac995cd8f2d5f406ad073a213ca7566de17f44"
+gatsby-source-filesystem@^1.5.35:
+  version "1.5.35"
+  resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-1.5.35.tgz#1d7a92c60def1ba6f7f33c468cf4832af0e904ed"
  dependencies:
    babel-cli "^6.26.0"
    babel-runtime "^6.26.0"
@ -4716,9 +4717,9 @@ gatsby-transformer-remark@^1.7.40:
    unist-util-select "^1.5.0"
    unist-util-visit "^1.1.1"

-gatsby@^1.9.255:
-  version "1.9.255"
-  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.255.tgz#e5572acebd415dde7b1ef6dba5bfc3a5a6fdca70"
+gatsby@^1.9.259:
+  version "1.9.259"
+  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.259.tgz#4abd0e3fa84be9281e0981423ee355689879a7ab"
  dependencies:
    async "^2.1.2"
    babel-code-frame "^6.22.0"
@ -4761,9 +4762,9 @@ gatsby@^1.9.255:
    gatsby-1-config-css-modules "^1.0.11"
    gatsby-1-config-extract-plugin "^1.0.3"
    gatsby-cli "^1.1.51"
-    gatsby-link "^1.6.41"
+    gatsby-link "^1.6.44"
    gatsby-module-loader "^1.0.11"
-    gatsby-react-router-scroll "^1.0.14"
+    gatsby-react-router-scroll "^1.0.17"
    glob "^7.1.1"
    graphql "^0.11.7"
    graphql-relay "^0.5.1"
@ -7222,6 +7223,10 @@ min-document@^2.19.0:
  dependencies:
    dom-walk "^0.1.0"

+mini-svg-data-uri@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.0.0.tgz#a9c09bbc7e1908b89534cf1d918c4c0766855769"
+
 minimalistic-assert@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
--- a/examples/angular-cli/.gitignore
+++ b/examples/angular-cli/.gitignore
@ -41,3 +41,6 @@ yarn-error.log
 # System Files
 .DS_Store
 Thumbs.db
+
+/jest_0
+.jest-test-results.json
--- a/examples/angular-cli/.storybook/addons.js
+++ b/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';
--- a/examples/angular-cli/.storybook/withTests.ts
+++ b/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)?$',
+});
--- a/examples/angular-cli/README.md
+++ b/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

--- a/examples/angular-cli/addon-jest.testresults.json
+++ b/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}
--- a/examples/angular-cli/jest-config/globalMocks.ts
+++ b/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'],
+});
--- a/examples/angular-cli/jest-config/setup.ts
+++ b/examples/angular-cli/jest-config/setup.ts
@ -0,0 +1,2 @@
+import 'jest-preset-angular';
+import './globalMocks';
--- a/examples/angular-cli/karma.conf.js
+++ b/examples/angular-cli/karma.conf.js
@ -1,35 +0,0 @@
-/*eslint-disable*/
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/0.13/config/configuration-file.html
-
-module.exports = function(config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular/cli'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma'),
-    ],
-    client: {
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      reports: ['html', 'lcovonly'],
-      fixWebpackSourcePaths: true,
-    },
-    angularCli: {
-      environment: 'dev',
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    webpack: { node: { fs: 'empty', } },
-  });
-};
--- a/examples/angular-cli/package.json
+++ b/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",
@ -20,7 +24,7 @@
    "@angular/platform-browser": "^5.2.10",
    "@angular/platform-browser-dynamic": "^5.2.10",
    "@ngrx/store": "^5.2.0",
-    "core-js": "^2.5.5",
+    "core-js": "^2.5.6",
    "rxjs": "^5.5.10",
    "zone.js": "^0.8.26"
  },
@ -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",
@ -36,21 +41,39 @@
    "@storybook/addon-storysource": "4.0.0-alpha.4",
    "@storybook/addons": "4.0.0-alpha.4",
    "@storybook/angular": "4.0.0-alpha.4",
-    "@types/jasmine": "~2.8.6",
+    "@types/jasmine": "~2.8.7",
    "@types/jasminewd2": "^2.0.3",
-    "@types/node": "~9.6.7",
+    "@types/jest": "^22.2.3",
+    "@types/node": "~9.6.12",
    "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",
+    "ts-node": "~6.0.3",
    "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"
  }
 }
--- a/examples/angular-cli/src/stories/snapshots/addon-jest.stories.storyshot
+++ b/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>
+`;
--- a/examples/angular-cli/src/stories/addon-jest.stories.ts
+++ b/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: {},
+  }));
--- a/examples/angular-cli/src/typings.d.ts
+++ b/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;
+}
--- a/examples/cra-kitchen-sink/package.json
+++ b/examples/cra-kitchen-sink/package.json
@ -39,6 +39,6 @@
    "enzyme-to-json": "^3.3.3",
    "jest": "^20.0.4",
    "react-scripts": "^1.1.4",
-    "webpack": "^4.6.0"
+    "webpack": "^4.8.0"
  }
 }
--- a/examples/mithril-kitchen-sink/package.json
+++ b/examples/mithril-kitchen-sink/package.json
@ -24,6 +24,6 @@
    "@storybook/mithril": "4.0.0-alpha.4",
    "babel-core": "^6.26.3",
    "babel-plugin-transform-react-jsx": "^6.24.1",
-    "webpack": "^4.6.0"
+    "webpack": "^4.8.0"
  }
 }
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@ -47,6 +47,6 @@
    "react-chromatic": "^0.8.3",
    "react-dom": "^16.3.2",
    "uuid": "^3.2.1",
-    "webpack": "^4.6.0"
+    "webpack": "^4.8.0"
  }
 }
--- a/examples/polymer-cli/package.json
+++ b/examples/polymer-cli/package.json
@ -19,9 +19,9 @@
    "@storybook/polymer": "4.0.0-alpha.4",
    "@webcomponents/webcomponentsjs": "^1.2.0",
    "global": "^4.3.2",
-    "lit-html": "^0.9.0",
+    "lit-html": "^0.10.0",
    "polymer-webpack-loader": "^2.0.2",
-    "webpack": "^4.6.0"
+    "webpack": "^4.8.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
@ -29,6 +29,6 @@
    "babel-runtime": "^6.26.0",
    "copy-webpack-plugin": "^4.5.1",
    "html-webpack-plugin": "^3.2.0",
-    "webpack-dev-server": "^3.1.3"
+    "webpack-dev-server": "^3.1.4"
  }
 }
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@ -33,7 +33,7 @@
    "file-loader": "^1.1.11",
    "svg-url-loader": "^2.3.2",
    "vue-loader": "^14.2.2",
-    "webpack": "^4.6.0",
-    "webpack-dev-server": "^3.1.3"
+    "webpack": "^4.8.0",
+    "webpack-dev-server": "^3.1.4"
  }
 }
--- a/lib/core/package.json
+++ b/lib/core/package.json
@ -36,16 +36,16 @@
    "json-loader": "^0.5.7",
    "json5": "^1.0.1",
    "postcss-flexbugs-fixes": "^3.3.1",
-    "postcss-loader": "^2.1.4",
+    "postcss-loader": "^2.1.5",
    "prop-types": "^15.6.1",
-    "qs": "^6.5.1",
+    "qs": "^6.5.2",
    "redux": "^4.0.0",
    "serve-favicon": "^2.5.0",
    "shelljs": "^0.8.1",
    "style-loader": "^0.21.0",
    "svg-url-loader": "^2.3.2",
    "url-loader": "^1.0.1",
-    "webpack": "^4.6.0",
+    "webpack": "^4.8.0",
    "webpack-dev-middleware": "^3.1.3",
    "webpack-hot-middleware": "^2.22.1"
  },
--- a/lib/ui/package.json
+++ b/lib/ui/package.json
@ -31,7 +31,7 @@
    "lodash.sortby": "^4.7.0",
    "lodash.throttle": "^4.1.1",
    "prop-types": "^15.6.1",
-    "qs": "^6.5.1",
+    "qs": "^6.5.2",
    "react-fuzzy": "^0.5.2",
    "react-icons": "^2.2.7",
    "react-lifecycles-compat": "^3.0.2",
--- a/package.json
+++ b/package.json
@ -58,7 +58,7 @@
    "commander": "^2.15.1",
    "concurrently": "^3.5.1",
    "cross-env": "^5.1.4",
-    "danger": "^3.6.1",
+    "danger": "^3.6.5",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "eslint": "^4.19.1",
@ -87,7 +87,7 @@
    "jest-teamcity-reporter": "^0.9.0",
    "jest-vue-preprocessor": "^1.4.0",
    "lerna": "2.11.0",
-    "lint-staged": "^7.0.5",
+    "lint-staged": "^7.1.0",
    "lodash": "^4.17.10",
    "marko-loader": "^1.3.3",
    "npmlog": "^4.1.2",
@ -101,7 +101,7 @@
    "remark-lint": "^6.0.1",
    "remark-preset-lint-recommended": "^3.0.1",
    "shelljs": "^0.8.1",
-    "tslint": "~5.9.1",
+    "tslint": "~5.10.0",
    "tslint-config-prettier": "^1.12.0",
    "tslint-plugin-prettier": "^1.3.0",
    "typescript": "^2.8.3"
--- a/yarn.lock
+++ b/yarn.lock
				`@ -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}