Merge pull request #2119 from storybooks/screenshot-testing

ADD integration test

.circleci/config.yml

@@ -1,7 +1,7 @@
 defaults: &defaults
   working_directory: /tmp/storybook
   docker:
-    - image: node:8
+    - image: circleci/node:latest
 
 version: 2
 dependencies:
@@ -15,7 +15,6 @@ jobs:
       - restore_cache:
           keys:
             - dependencies-{{ checksum "yarn.lock" }}
-            - dependencies-
       - run:
           name: "Install dependencies"
           command: |
@@ -32,10 +31,9 @@ jobs:
           key: dependencies-{{ checksum "yarn.lock" }}
           paths:
             - node_modules
-            - app/**/node_modules
-            - docs/**/node_modules
-            - examples/**/node_modules
-            - lib/**/node_modules
+            - docs/node_modules
+            - examples/react-native-vanilla/node_modules
+            - examples/crna-kitchen-sink/node_modules
   example-kitchen-sinks:
     <<: *defaults
     steps:
@@ -43,7 +41,6 @@ jobs:
       - restore_cache:
           keys:
             - dependencies-{{ checksum "yarn.lock" }}
-            - dependencies-
       - run:
           name: "Install dependencies"
           command: |
@@ -57,13 +54,29 @@ jobs:
           command: |
             cd examples/cra-kitchen-sink
             yarn build-storybook
-            yarn storybook --smoke-test
       - run:
           name: "Build vue kitchen-sink"
           command: |
             cd examples/vue-kitchen-sink
             yarn build-storybook
-            yarn storybook --smoke-test
+      - run:
+          name: "Run vue kitchen-sink"
+          command: |
+            cd examples/vue-kitchen-sink
+            yarn storybook
+          background: true
+      - run:
+          name: "Run react kitchen-sink"
+          command: |
+            cd examples/cra-kitchen-sink
+            yarn storybook
+          background: true
+      - run:
+          name: Workaround for https://github.com/GoogleChrome/puppeteer/issues/290
+          command: sh ./scripts/workaround-puppeteer-issue-290.sh
+      - run:
+          name: Integration Test - Kichen sinks
+          command: yarn test --integration
   example-react-native:
     <<: *defaults
     steps:
@@ -71,7 +84,6 @@ jobs:
       - restore_cache:
           keys:
             - dependencies-{{ checksum "yarn.lock" }}
-            - dependencies-
       - run:
           name: "Install dependencies"
           command: |
@@ -97,7 +109,6 @@ jobs:
       - restore_cache:
           keys:
             - dependencies-{{ checksum "yarn.lock" }}
-            - dependencies-
       - run:
           name: "Install dependencies"
           command: |
@@ -117,7 +128,6 @@ jobs:
       - restore_cache:
           keys:
             - dependencies-{{ checksum "yarn.lock" }}
-            - dependencies-
       - run:
           name: "Install dependencies"
           command: |
@@ -137,7 +147,6 @@ jobs:
       - restore_cache:
           keys:
             - dependencies-{{ checksum "yarn.lock" }}
-            - dependencies-
       - run:
           name: "Install dependencies"
           command: |
@@ -149,7 +158,7 @@ jobs:
       - run:
           name: "Unit testing"
           command: |
-            yarn test --coverage -i
+            yarn test --coverage --runInBand --core --reactnative
             yarn coverage
   deploy:
     <<: *defaults
@@ -168,9 +177,3 @@ workflows:
       - docs
       - lint
       - unit-test
-      # - deploy:
-      #     type: approval
-      #     requires:
-      #       - lint
-      #       - unit-test
-      #       - docs

.gitignore

@@ -18,3 +18,4 @@ packs/*.tgz
 package-lock.json
 .nvmrc
 storybook-static
+integration/__image_snapshots__/__diff_output__

integration/examples.test.js

@@ -0,0 +1,44 @@
+import puppeteer from 'puppeteer';
+
+const examples = [
+  {
+    name: 'cra-kitchen-sink',
+    port: 9010,
+  },
+  {
+    name: 'vue-kitchen-sink',
+    port: 9009,
+  },
+];
+
+examples.forEach(({ name, port }) => {
+  let browser = puppeteer.launch();
+
+  describe('sandboxes', () => {
+    afterAll(() => {
+      browser.close();
+    });
+
+    it.concurrent(
+      `Take screenshots for '${name}'`,
+      async () => {
+        browser = await browser;
+        const page = await browser.newPage();
+        await page.setViewport({ width: 1400, height: 1000 });
+        await page.goto(`http://localhost:${port}`);
+        await page.waitForSelector('[role="menuitem"][data-name="Welcome"]');
+        await page.waitFor(2000);
+
+        const screenshot = await page.screenshot({ fullPage: true });
+
+        expect(screenshot).toMatchImageSnapshot({
+          customDiffConfig: {
+            threshold: 0.03, // 3% threshold
+          },
+          customSnapshotIdentifier: name.split('/').join('-'),
+        });
+      },
+      1000 * 60 * 10 // 10 minutes for all tests in total
+    );
+  });
+});

integration/jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  rootDir: './',
+  setupTestFrameworkScriptFile: '<rootDir>/jest.setup.js',
+};

integration/jest.setup.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+
+expect.extend({ toMatchImageSnapshot });

package.json

@@ -34,7 +34,7 @@
     "lint:js": "eslint --cache --cache-location=.cache/eslint --ext .js,.jsx,.json",
     "lint:md": "remark",
     "publish": "lerna publish",
-    "test": "jest --projects ./ ./examples/react-native-vanilla",
+    "test": "./scripts/test.js",
     "repo-dirty-check": "node ./scripts/repo-dirty-check"
   },
   "devDependencies": {
@@ -70,12 +70,14 @@
     "inquirer": "^3.2.3",
     "jest": "^21.2.0",
     "jest-enzyme": "^4.0.1",
+    "jest-image-snapshot": "^1.0.1",
     "lerna": "^2.4.0",
     "lint-staged": "^4.3.0",
     "lodash": "^4.17.4",
     "nodemon": "^1.12.1",
     "npmlog": "^4.1.2",
     "prettier": "^1.7.4",
+    "puppeteer": "^0.12.0",
     "raf": "^3.4.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",

scripts/test.js

@@ -51,6 +51,12 @@ const tasks = {
     option: '--reactnative',
     projectLocation: './examples/react-native-vanilla',
   }),
+  integration: createProject({
+    name: `Screenshots of running apps ${chalk.gray('(integration)')}`,
+    defaultValue: false,
+    option: '--integration',
+    projectLocation: './integration',
+  }),
   // 'crna-kitchen-sink': createProject({
   //   name: `React-Native-App example ${chalk.gray('(crna-kitchen-sink)')}  ${chalk.red(
   //     '[not implemented yet]'

scripts/workaround-puppeteer-issue-290.sh

@@ -0,0 +1,9 @@
+#!/bin/sh
+# Workaround for https://github.com/GoogleChrome/puppeteer/issues/290
+ 
+sudo apt-get update
+sudo apt-get install -yq gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \
+  libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 \
+  libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 \
+  libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 \
+  ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget