Add cypress to Storybook CI

.circleci/config.yml

@@ -1,14 +1,11 @@
-version: 2
+version: 2.1
 
 aliases:
   - &defaults
     working_directory: /tmp/storybook
     docker:
       - image: circleci/node:10
 
-dependencies:
-  pre:
-    - yarn global add npm
 jobs:
   build:
     <<: *defaults
@@ -17,7 +14,7 @@ jobs:
       - restore_cache:
           name: Restore core dependencies cache
           keys:
-            - core-dependencies-v3-{{ checksum "yarn.lock" }}
+            - core-dependencies-v4-{{ checksum "yarn.lock" }}
       - run:
           name: Install dependencies
           command: yarn install
@@ -29,9 +26,11 @@ jobs:
           command: yarn bootstrap --core
       - save_cache:
           name: Cache core dependencies
-          key: core-dependencies-v3-{{ checksum "yarn.lock" }}
+          key: core-dependencies-v4-{{ checksum "yarn.lock" }}
           paths:
-            - ~/.cache/yarn
+            - ~/.cache
+            - node_modules
+            - /root/.cache
       - persist_to_workspace:
           root: .
           paths:
@@ -47,9 +46,6 @@ jobs:
       - checkout
       - attach_workspace:
           at: .
-      - run:
-          name: Generate static examples
-          command: yarn build-storybooks
       - run:
           name: Run chromatic on the pre-built storybook
           command: yarn chromatic
@@ -66,97 +62,50 @@ jobs:
             yarn packtracker
   examples:
     <<: *defaults
+    parallelism: 4
     steps:
       - checkout
       - attach_workspace:
           at: .
       - run:
-          name: Workaround for https://github.com/GoogleChrome/puppeteer/issues/290
-          command: sh ./scripts/workaround-puppeteer-issue-290.sh
-      - run:
-          name: Build react kitchen-sink
-          command: |
-            cd examples/cra-kitchen-sink
-            yarn build-storybook
-      - run:
-          name: Build react typescript kitchen-sink
-          command: |
-            cd examples/cra-ts-kitchen-sink
-            yarn build-storybook
-      - run:
-          name: Build vue kitchen-sink
-          command: |
-            cd examples/vue-kitchen-sink
-            yarn build-storybook
-      - run:
-          name: Build svelte kitchen-sink
-          command: |
-            cd examples/svelte-kitchen-sink
-            yarn build-storybook
-      - run:
-          name: Build angular-cli
+          name: examples
           command: |
-            cd examples/angular-cli
-            yarn build-storybook
-      - run:
-          name: Build ember-cli
-          command: |
-            cd examples/ember-cli
-            yarn build-storybook
-      - run:
-          name: Build polymer-cli
-          command: |
-            cd examples/polymer-cli
-            yarn build-storybook
-      - run:
-          name: Build marko-cli
-          command: |
-            cd examples/marko-cli
-            yarn build-storybook
-      - run:
-          name: Build mithril kitchen-sink
-          command: |
-            cd examples/mithril-kitchen-sink
-            yarn build-storybook
-      - run:
-          name: Build html kitchen-sink
-          command: |
-            cd examples/html-kitchen-sink
-            yarn build-storybook
-      - run:
-          name: Build riot kitchen-sink
-          command: |
-            cd examples/riot-kitchen-sink
-            yarn build-storybook
-      - run:
-          name: Build preact kitchen-sink
-          command: |
-            cd examples/preact-kitchen-sink
-            yarn build-storybook
-      - run:
-          name: Build cra react15
-          command: |
-            cd examples/cra-react15
-            yarn build-storybook
-      - run:
-          name: Build official-storybook
-          command: |
-            cd examples/official-storybook
-            yarn build-storybook
-      # - run:
-      #     name: Run image snapshots
-      #     command: yarn test --image
-      - store_artifacts:
-          path: examples/official-storybook/image-snapshots/__image_snapshots__
-          destination: official_storybook_image_snapshots
+            yarn build-storybooks
       - persist_to_workspace:
           root: .
           paths:
+            - built-storybooks
+  e2e:
+    working_directory: /tmp/storybook
+    docker:
+      - image: cypress/base:8
+        environment:
+          TERM: xterm
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run:
+          name: install cypress
+          command: yarn cypress install
+      - save_cache:
+          name: Cache core dependencies
+          key: core-dependencies-v4-{{ checksum "yarn.lock" }}
+          paths:
+            - ~/.cache
             - node_modules
-            - examples
-            - addons
-            - app
-            - lib
+            - /root/.cache
+      - run:
+          name: running example
+          command: yarn serve-storybooks
+          background: true
+      - run:
+          name: await running examples
+          command: yarn await-serve-storybooks
+      - run:
+          name: cypress run
+          command: yarn cypress run
+
   smoke-tests:
     <<: *defaults
     steps:
@@ -253,18 +202,13 @@ jobs:
       - restore_cache:
           name: Restore core dependencies cache
           keys:
-            - core-dependencies-v3-{{ checksum "yarn.lock" }}
+            - core-dependencies-v4-{{ checksum "yarn.lock" }}
       - run:
           name: Install dependencies
-          command: yarn install
+          command: yarn bootstrap --install
       - run:
           name: Trigger build
           command: ./scripts/build-frontpage.js
-      - save_cache:
-          name: Cache core dependencies
-          key: core-dependencies-v3-{{ checksum "yarn.lock" }}
-          paths:
-            - ~/.cache/yarn
   docs:
     <<: *defaults
     steps:
@@ -287,12 +231,7 @@ jobs:
           name: Cache docs dependencies
           key: docs-dependencies-v2-{{ checksum "docs/yarn.lock" }}
           paths:
-            - ~/.cache/yarn
-      - persist_to_workspace:
-          root: .
-          paths:
-            - docs/public
-            - docs/node_modules
+            - ~/.cache
   lint:
     <<: *defaults
     steps:
@@ -325,19 +264,18 @@ jobs:
           name: Upload coverage
           command: yarn coverage
 workflows:
-  version: 2
-  build_test_deploy:
+  test:
     jobs:
       - build
-      - docs
-      - frontpage
       - lint:
           requires:
-            - docs
             - build
       - examples:
           requires:
             - build
+      - e2e:
+          requires:
+            - examples
       - smoke-tests:
           requires:
             - build
@@ -355,4 +293,8 @@ workflows:
             - test
       - chromatic:
           requires:
-            - build
+            - examples
+  deploy:
+    jobs:
+      - docs
+      - frontpage

.github/workflows/tests-unit.yml

@@ -7,17 +7,11 @@ jobs:
 
     name: Test on node ${{ matrix.node_version }} and ${{ matrix.os }}
     runs-on: ${{ matrix.os }}
-    strategy:
-      matrix:
-        node-version: [10]
-        os: [ubuntu-latest]
-
     steps:
     - uses: actions/checkout@v1
-    - name: Use Node.js ${{ matrix.node_version }}
-      uses: actions/setup-node@v1
+    - uses: actions/setup-node@v1
       with:
-        version: ${{ matrix.node_version }}
+        node-version: '10.x'
     - name: install, bootstrap
       run: |
         yarn bootstrap --core

.gitignore

@@ -32,3 +32,5 @@ htpasswd
 storybook-out
 /addons/docs/common/config-*
 built-storybooks
+cypress/videos
+cypress/screenshots

cypress.json

@@ -0,0 +1 @@
+{}

cypress/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "plugin:cypress/recommended"
+  ]
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/helper.ts

@@ -0,0 +1,55 @@
+/* eslint-disable no-unused-expressions */
+/* eslint-disable jest/valid-expect */
+const baseUrl = 'http://localhost:8001';
+
+type StorybookApps = 'official-storybook';
+
+type Addons = 'Knobs';
+
+export const visitExample = (app: StorybookApps, route = '') => {
+  return cy
+    .clearLocalStorage()
+    .visit(`${baseUrl}/${app}/${route}`)
+    .get(`#storybook-preview-iframe`)
+    .then({ timeout: 10000 }, iframe => {
+      return cy.wrap(iframe).should(() => {
+        const content: Document | null = (iframe[0] as HTMLIFrameElement).contentDocument;
+        const element: HTMLElement | null = content !== null ? content.documentElement : null;
+
+        expect(element).not.null;
+
+        if (element !== null) {
+          expect(element.querySelector('#root > *')).not.null;
+        }
+      });
+    });
+};
+
+export const clickAddon = (addonName: Addons) => {
+  return cy
+    .get(`[role=tablist] button[role=tab]`)
+    .contains(addonName)
+    .click();
+};
+
+export const getStorybookPreview = () => {
+  return cy.get(`#storybook-preview-iframe`).then({ timeout: 10000 }, iframe => {
+    const content: Document | null = (iframe[0] as HTMLIFrameElement).contentDocument;
+    const element: HTMLElement | null = content !== null ? content.documentElement : null;
+
+    console.log({ element, content, iframe });
+
+    return cy
+      .wrap(iframe)
+      .should(() => {
+        expect(element).not.null;
+
+        if (element !== null) {
+          expect(element.querySelector('#root > *')).not.null;
+        }
+      })
+      .then(() => {
+        return cy.wrap(element).get('#root');
+      });
+  });
+};

cypress/integration/knobs.spec.ts

@@ -0,0 +1,21 @@
+import { clickAddon, visitExample } from '../helper';
+
+describe('Knobs', () => {
+  beforeEach(() => {
+    visitExample('official-storybook', '?path=/story/addons-knobs-withknobs--tweaks-static-values');
+  });
+
+  it('[text] it should change a string value', () => {
+    clickAddon('Knobs');
+
+    cy.get('#Name')
+      .clear()
+      .type('John Doe');
+
+    cy.preview()
+      .console('info')
+      .find('p')
+      .eq(0)
+      .should('contain.text', 'My name is John Doe');
+  });
+});