Add cypress to Storybook CI

.gitignore

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

cypress.json

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

cypress/.eslintrc.json

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

cypress/helper.ts

@@ -0,0 +1,17 @@
+const baseUrl = 'http://localhost:8001';
+
+type StorybookApps = 'official-storybook';
+
+type Addons = 'Knobs';
+
+export const visitExample = (app: StorybookApps, route = '') => {
+  return cy.visit(`${baseUrl}/${app}/${route}`);
+};
+
+export const clickAddon = (addonName: Addons) => {
+  return cy.get(`[role=tablist] button[role=tab]`).contains(addonName);
+};
+
+export const getStorybookPreview = () => {
+  return cy.get('.sb-show-main');
+};

cypress/integration/knobs.spec.ts

@@ -0,0 +1,14 @@
+import { clickAddon, getStorybookPreview, 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').type('John Doe');
+    getStorybookPreview().should('contain', 'My name is John Doe');
+  });
+});

cypress/integration/navigation.spec.ts

@@ -0,0 +1,39 @@
+import { getStorybookPreview, visitExample } from '../helper';
+
+describe('Navigation', () => {
+  beforeEach(() => {
+    visitExample('official-storybook');
+  });
+
+  it('should search navigation item', () => {
+    cy.get('#storybook-explorer-searchfield')
+      .click()
+      .type('persisting the action logger');
+
+    cy.get('.sidebar-container a')
+      .should('contain', 'Persisting the action logger')
+      .and('not.contain', 'a11y');
+  });
+
+  it('should display no results after searching a non-existing navigation item', () => {
+    cy.get('#storybook-explorer-searchfield')
+      .click()
+      .type('zzzzzzzzzz');
+
+    cy.get('.sidebar-container').should('contain', 'This filter resulted in 0 results');
+  });
+});
+
+describe('Routing', () => {
+  it('should navigate to story addons-a11y-basebutton--default', () => {
+    visitExample('official-storybook');
+    cy.get('#exploreraddons-a11y-basebutton--label').click();
+
+    cy.url().should('include', 'path=/story/addons-a11y-basebutton--label');
+  });
+
+  it('should directly visit a certain story and render correctly', () => {
+    visitExample('official-storybook', '?path=/story/addons-a11y-basebutton--label');
+    getStorybookPreview().should('contain', 'Testing the a11y addon');
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,22 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+const wp = require('@cypress/webpack-preprocessor');
+const webpackConfig = require('./webpack.config');
+
+module.exports = on => {
+  const options = {
+    webpackOptions: webpackConfig,
+  };
+  on('file:preprocessor', wp(options));
+};

cypress/plugins/webpack.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        exclude: [/node_modules/],
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
+};

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

cypress/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "baseUrl": "../node_modules",
+    "target": "es5",
+    "lib": ["es2017", "dom"],
+    "types": ["cypress"]
+  },
+  "include": ["**/*.ts"]
+}

examples/ember-cli/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "build": "ember build",
-    "prebuild-storybook": "yarn build && cp -r public/* dist",
+    "prebuild-storybook": "yarn build && shx cp -r public/* dist",
     "build-storybook": "build-storybook -s dist",
     "dev": "ember serve",
     "storybook": "yarn build && start-storybook -p 9009 -s dist",

package.json

@@ -68,10 +68,13 @@
     "publish:latest": "lerna publish --exact --concurrency 1 --force-publish",
     "publish:next": "npm run publish:latest -- --npm-tag=next",
     "repo-dirty-check": "node ./scripts/repo-dirty-check",
+    "serve-storybooks": "serve ./built-storybooks -l 8001",
     "start": "yarn --cwd examples/official-storybook storybook",
     "test": "node ./scripts/test.js",
     "test-latest-cra": "yarn --prefix --cwd lib/cli run test-latest-cra",
-    "test:cli": "npm --prefix lib/cli run test"
+    "test:cli": "npm --prefix lib/cli run test",
+    "test:e2e-ci": "concurrently --success first --kill-others \"wait-on http://localhost:8001 && cypress run\" \"yarn serve-storybooks\"",
+    "test:e2e-gui": "concurrently --success first --kill-others \"cypress open\" \"yarn serve-storybooks\""
   },
   "husky": {
     "hooks": {
@@ -114,7 +117,13 @@
   },
   "browserslist": "defaults",
   "dependencies": {
-    "node-sass": "^4.12.0"
+    "@cypress/webpack-preprocessor": "^4.1.0",
+    "cypress": "^3.4.1",
+    "eslint-plugin-cypress": "^2.7.0",
+    "node-sass": "^4.12.0",
+    "serve": "^11.2.0",
+    "shx": "^0.3.2",
+    "wait-on": "^3.3.0"
   },
   "devDependencies": {
     "@angular/common": "^8.2.8",

scripts/build-storybooks.js

@@ -22,15 +22,19 @@ const logger = console;
 
 const exec = async (command, args = [], options = {}) =>
   new Promise((resolve, reject) => {
-    const child = spawn(command, args, { ...options, stdio: 'inherit' });
-
-    child.on('close', code => {
-      if (code) {
-        reject();
-      } else {
-        resolve();
-      }
-    });
+    const child = spawn(command, args, { ...options, stdio: 'inherit', shell: true });
+
+    child
+      .on('close', code => {
+        if (code) {
+          reject();
+        } else {
+          resolve();
+        }
+      })
+      .on('error', e => {
+        logger.error(e);
+      });
   });
 
 const hasBuildScript = async l => {