Tech/ci example overhaul clean

.circleci/config.yml

@@ -1,5 +1,5 @@
 version: 2.1
-  
+
 aliases:
   - &defaults
     working_directory: /tmp/storybook
@@ -15,6 +15,7 @@ jobs:
           name: Restore core dependencies cache
           keys:
             - core-dependencies-v5-{{ checksum "yarn.lock" }}
+            - core-dependencies-v5-
       - run:
           name: Install dependencies
           command: yarn install
@@ -25,9 +26,7 @@ jobs:
           name: Cache core dependencies
           key: core-dependencies-v5-{{ checksum "yarn.lock" }}
           paths:
-            - ~/.cache
             - node_modules
-            - /root/.cache
       - persist_to_workspace:
           root: .
           paths:
@@ -91,26 +90,89 @@ jobs:
           root: .
           paths:
             - built-storybooks
-  e2e:
+  publish:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run:
+          name: running local registry
+          command: yarn local-registry --publish
+      - persist_to_workspace:
+          root: .
+          paths:
+            - .verdaccio-cache
+  examples-v2:
+    docker:
+      - image: cypress/included:4.5.0
+        environment:
+          TERM: xterm
     working_directory: /tmp/storybook
+    parallelism: 10
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run:
+          name: running local registry
+          command: yarn local-registry --port 6000 --open
+          background: true
+      - run:
+          name: wait for registry
+          command: yarn wait-on http://localhost:6000
+      - run:
+          name: set registry
+          command: yarn config set registry http://localhost:6000/
+      - run:
+          name: test local registry
+          command: yarn info @storybook/core
+      - run:
+          name: run e2e tests
+          command: yarn test:e2e-framework
+      - store_artifacts:
+          path: /tmp/storybook/cypress
+          destination: cypress
+  examples-v2-yarn-2:
     docker:
-      - image: cypress/base:8
+      - image: cypress/included:4.5.0
         environment:
           TERM: xterm
+    working_directory: /tmp/storybook
+    # parallelism: 10
     steps:
       - checkout
       - attach_workspace:
           at: .
       - run:
-          name: install cypress
-          command: yarn cypress install
-      - save_cache:
-          name: Cache core dependencies
-          key: core-dependencies-v5-{{ checksum "yarn.lock" }}
-          paths:
-            - ~/.cache
-            - node_modules
-            - /root/.cache
+          name: running local registry
+          command: yarn local-registry --port 6000 --open
+          background: true
+      - run:
+          name: wait for registry
+          command: yarn wait-on http://localhost:6000
+      - run:
+          name: set registry
+          command: yarn config set registry http://localhost:6000/
+      - run:
+          name: test local registry
+          command: yarn info @storybook/core
+      - run:
+          name: run e2e tests
+          command: yarn test:e2e-framework yarn2Cra
+      - store_artifacts:
+          path: /tmp/storybook/cypress
+          destination: cypress
+  e2e:
+    working_directory: /tmp/storybook
+    docker:
+      - image: cypress/included:4.5.0
+        environment:
+          TERM: xterm
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
       - run:
           name: running example
           command: yarn serve-storybooks
@@ -120,7 +182,7 @@ jobs:
           command: yarn await-serve-storybooks
       - run:
           name: cypress run
-          command: yarn cypress run
+          command: yarn test:e2e
 
   smoke-tests:
     <<: *defaults
@@ -206,10 +268,6 @@ jobs:
     <<: *defaults
     steps:
       - checkout
-      - restore_cache:
-          name: Restore docs dependencies cache
-          keys:
-            - docs-dependencies-v3-{{ checksum "docs/yarn.lock" }}
       - run:
           name: Install dependencies
           command: |
@@ -220,11 +278,6 @@ jobs:
           command: |
             cd docs
             yarn build
-      - save_cache:
-          name: Cache docs dependencies
-          key: docs-dependencies-v3-{{ checksum "docs/yarn.lock" }}
-          paths:
-            - ~/.cache
   lint:
     <<: *defaults
     steps:
@@ -256,6 +309,7 @@ jobs:
       - run:
           name: Upload coverage
           command: yarn coverage
+
 workflows:
   test:
     jobs:
@@ -287,6 +341,15 @@ workflows:
       - chromatic:
           requires:
             - examples
+      - publish:
+          requires:
+            - build
+      - examples-v2:
+          requires:
+            - publish
+      - examples-v2-yarn-2:
+          requires:
+            - publish
   deploy:
     jobs:
       - docs

.eslintrc.js

@@ -5,6 +5,7 @@ module.exports = {
     {
       files: [
         '**/__tests__/**',
+        'scripts/**',
         '**/__testfixtures__/**',
         '**/*.test.*',
         '**/*.stories.*',
@@ -26,6 +27,7 @@ module.exports = {
       },
     },
     { files: '**/.storybook/config.js', rules: { 'global-require': 'off' } },
+    { files: 'cypress/**', rules: { 'jest/expect-expect': 'off' } },
     {
       files: ['**/*.stories.*'],
       rules: {

.gitignore

@@ -2,16 +2,13 @@ node_modules
 *.log
 .idea
 *.iml
-.vscode/*
-!.vscode/launch.json
 *.sw*
 npm-shrinkwrap.json
 dist
 ts3.5
 .tern-port
 *.DS_Store
 .cache
-junit.xml
 coverage/
 *.lerna_backup
 build
@@ -27,13 +24,10 @@ integration/__image_snapshots__/__diff_output__
 /examples/cra-kitchen-sink/src/__image_snapshots__/__diff_output__/
 lib/*.jar
 lib/**/dll
-.expo/packager-info.json
-scripts/storage
-htpasswd
 /false
-storybook-out
 /addons/docs/common/config-*
 built-storybooks
 cypress/videos
 cypress/screenshots
 examples/ember-cli/ember-output
+.verdaccio-cache

app/marko/src/demo/Welcome.marko

@@ -28,5 +28,5 @@ a {
 </style>
 
 <div id="app">
-  <h1>Welcome to Storybook for Marko</h1>
+  <h1>Welcome to storybook</h1>
 </div>

app/server/src/typings.d.ts

@@ -1,6 +1,5 @@
 declare module '@storybook/core/*';
 declare module 'global';
-declare module 'fs-extra';
 
 // will be provided by the webpack define plugin
 declare var NODE_ENV: string | undefined;

cypress.json

@@ -1 +1,5 @@
-{}
+{
+  "defaultCommandTimeout": 20000,
+  "requestTimeout": 20000,
+  "responseTimeout": 60000
+}

cypress/.eslintrc.json

@@ -3,6 +3,8 @@
     "plugin:cypress/recommended"
   ],
   "rules": {
-    "import/no-extraneous-dependencies": ["error", {"devDependencies": true}]
+    "import/no-extraneous-dependencies": [
+      "error", { "devDependencies": true }
+    ]
   }
 }

cypress/generated/addon-action.spec.ts

@@ -0,0 +1,31 @@
+import { visit, clickAddon } from '../helper';
+
+describe('addon-action', () => {
+  before(() => {
+    visit();
+    cy.get('#button').click();
+  });
+
+  it('should trigger an action', () => {
+    // click on the button
+    cy.get('#button--with-some-emoji-and-action').click();
+
+    // assert url changes
+    cy.url().should('include', 'path=/story/button--with-some-emoji-and-action');
+
+    // check for selected element
+    cy.get('#button--with-some-emoji-and-action').should('have.class', 'selected');
+
+    // check for content
+    cy.getStoryElement().find('button').click();
+
+    // click on addon
+    clickAddon('Actions');
+
+    // TODO @yannbf improve tab identifier on addons
+    // get the logs
+    cy.get('#storybook-panel-root')
+      .contains(/This was clicked/)
+      .should('be.visible');
+  });
+});

cypress/generated/addon-link.spec.ts

@@ -0,0 +1,25 @@
+import { visit, clickAddon } from '../helper';
+
+describe('addon-link', () => {
+  before(() => {
+    visit();
+    cy.get('#button').click();
+  });
+
+  it('should redirect to another story', () => {
+    // click on the button
+    cy.get('#button--button-with-link-to-another-story').click();
+
+    // assert url changes
+    cy.url().should('include', 'path=/story/button--button-with-link-to-another-story');
+
+    // check for selected element
+    cy.get('#button--button-with-link-to-another-story').should('have.class', 'selected');
+
+    // check for content
+    cy.getStoryElement().find('button').click();
+
+    // assert url changes
+    cy.url().should('include', 'path=/story/welcome--to-storybook');
+  });
+});

cypress/generated/basic.spec.ts

@@ -0,0 +1,35 @@
+import { visit } from '../helper';
+
+describe('Basic Flow', () => {
+  before(() => {
+    visit();
+  });
+
+  it('should load welcome flow', () => {
+    // assert url changes
+    cy.url().should('include', 'path=/story/welcome--to-storybook');
+
+    // check for selected element
+    cy.get('#welcome--to-storybook').should('have.class', 'selected');
+
+    // check for content
+    cy.getStoryElement().should('contain.text', 'Welcome to storybook');
+  });
+
+  describe('Button story', () => {
+    before(() => {
+      cy.get('#button').click();
+    });
+
+    it('should be visited succesfully', () => {
+      // assert url changes
+      cy.url().should('include', 'path=/story/button--text');
+
+      // check for selected element
+      cy.get('#button--text').should('have.class', 'selected');
+
+      // check for content
+      cy.getStoryElement().find('button').should('contain.text', 'Hello Button');
+    });
+  });
+});

cypress/helper.ts

@@ -1,15 +1,19 @@
 /* eslint-disable no-unused-expressions */
 /* eslint-disable jest/valid-expect */
-const baseUrl = 'http://localhost:8001';
-
 type StorybookApps = 'official-storybook';
 
-type Addons = 'Knobs';
+type Addons = 'Actions' | 'Knobs';
+
+const getUrl = (route: string) => {
+  const host = Cypress.env('location') || 'http://localhost:8001';
+
+  return `${host}/${route}`;
+};
 
-export const visitExample = (app: StorybookApps, route = '') => {
+export const visit = (route = '') => {
   return cy
     .clearLocalStorage()
-    .visit(`${baseUrl}/${app}/${route}`)
+    .visit(getUrl(route))
     .get(`#storybook-preview-iframe`)
     .then({ timeout: 10000 }, (iframe) => {
       return cy.wrap(iframe, { timeout: 10000 }).should(() => {