✨ add storybook v7 support

.github/workflows/lint.yml

@@ -12,12 +12,12 @@ jobs:
       - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac
       - uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 16
       - uses: actions/cache@v3
         with:
           path: node_modules
-          key: ${{ runner.os }}/node-14/${{ hashFiles('**/yarn.lock') }}
-          restore-keys: ${{ runner.os }}/node-14/
+          key: ${{ runner.os }}/node-16/${{ hashFiles('**/yarn.lock') }}
+          restore-keys: ${{ runner.os }}/node-16/
       - run: yarn
         env:
           PERCY_POSTINSTALL_BROWSER: true

.github/workflows/release.yml

@@ -9,7 +9,7 @@ jobs:
     - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac
     - uses: actions/setup-node@v3
       with:
-        node-version: 14
+        node-version: 16
         registry-url: 'https://registry.npmjs.org'
     - run: yarn
     - run: yarn build

.github/workflows/test-storybook-v6.yml

@@ -0,0 +1,58 @@
+name: Test
+on:
+  push:
+  workflow_dispatch:
+    inputs:
+      branch:
+        required: false
+        type: string
+        default: master
+jobs:
+  test:
+    name: Test Storybook v6
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node: [14]
+    runs-on: ${{ matrix.os }}
+    steps:
+      - uses: actions-ecosystem/action-regex-match@9e6c4fb3d5e898f505be7a1fb6e7b0a278f6665b
+        id: regex-match
+        if: ${{ github.event_name == 'workflow_dispatch' }}
+        with:
+          text: ${{ inputs.branch }}
+          regex: '^[a-zA-Z0-9_/\-]+$'
+      - name: Break on invalid branch name
+        run: exit 1
+        if: ${{ github.event_name == 'workflow_dispatch' && steps.regex-match.outputs && steps.regex-match.outputs.match == '' }}
+      - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac
+      - uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+      - run: ./prepare-storybook-v6-tests.sh
+      - uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: ${{ runner.os }}/node-${{ matrix.node }}/${{ hashFiles('**/yarn.lock') }}
+          restore-keys: ${{ runner.os }}/node-${{ matrix.node }}/
+      - run: yarn
+        env:
+          PERCY_POSTINSTALL_BROWSER: true
+      - run: yarn build
+      - name: Set up @percy/cli from git
+        if: ${{ github.event_name == 'workflow_dispatch' }}
+        run: |
+          cd /tmp
+          git clone --branch ${{ inputs.branch }}  --depth 1 https://github.com/percy/cli
+          cd cli
+          PERCY_PACKAGES=`find packages -type d -mindepth 1 -maxdepth 1 | sed -e 's/packages/@percy/g' | tr '\n' ' '`
+          echo "Packages: $PERCY_PACKAGES"
+          git log -1
+          yarn
+          yarn build
+          yarn global:link
+          cd ${{ github.workspace }} 
+          yarn link `echo $PERCY_PACKAGES`
+          npx percy --version
+
+      - run: yarn test

.github/workflows/test.yml → .github/workflows/test-storybook-v7.yml

@@ -9,18 +9,18 @@ on:
         default: master
 jobs:
   test:
-    name: Test
+    name: Test Storybook v7
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [14]
+        node: [16]
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions-ecosystem/action-regex-match@v2
+      - uses: actions-ecosystem/action-regex-match@9e6c4fb3d5e898f505be7a1fb6e7b0a278f6665b
         id: regex-match
         if: ${{ github.event_name == 'workflow_dispatch' }}
         with:
-          text: ${{ github.event.inputs.branch }}
+          text: ${{ inputs.branch }}
           regex: '^[a-zA-Z0-9_/\-]+$'
       - name: Break on invalid branch name
         run: exit 1
@@ -42,7 +42,7 @@ jobs:
         if: ${{ github.event_name == 'workflow_dispatch' }}
         run: |
           cd /tmp
-          git clone --branch ${{ github.event.inputs.branch }}  --depth 1 https://github.com/percy/cli
+          git clone --branch ${{ inputs.branch }}  --depth 1 https://github.com/percy/cli
           cd cli
           PERCY_PACKAGES=`find packages -type d -mindepth 1 -maxdepth 1 | sed -e 's/packages/@percy/g' | tr '\n' ' '`
           echo "Packages: $PERCY_PACKAGES"

README.md

@@ -328,3 +328,7 @@ JavaScript is disabled by default to prevent flakey diffs caused by animations o
 running on the page. With the new SDK and real DOM snapshots, JS is disabled by default. If you
 upgrade and experience diffs due to the lack of JavaScript, it can be re-enabled using the matching
 Percy config file or per-snapshot option, [`enableJavaScript`](https://docs.percy.io/docs/cli-configuration#snapshot).
+
+## Development
+- Current package.json and yarn.lock install storybook v7 as devDependency and hence require node 16 for development.
+- There are separate package.json and config files for storybook v6, for testing purposes. Please check `prepare-storybook-v6-tests.sh` file for more details around changes for storybook v6 testing.

package.json

@@ -24,7 +24,7 @@
     "clean": "git clean -Xdf -e !node_modules -e !node_modules/**",
     "lint": "eslint --ignore-path .gitignore .",
     "readme": "percy-cli-readme",
-    "pretest": "build-storybook --config-dir=./test/.storybook --output-dir=./test/.storybook-build --loglevel error",
+    "pretest": "storybook build --config-dir=./test/.storybook --output-dir=./test/.storybook-build --loglevel error",
     "test": "yarn test:env jasmine --config=./test/jasmine.json",
     "test:env": "cross-env NODE_ENV=test NODE_OPTIONS='--loader=./test/loader.js'",
     "test:coverage": "nyc yarn test"
@@ -45,7 +45,8 @@
     "@babel/eslint-parser": "^7.19.1",
     "@babel/eslint-plugin": "^7.19.1",
     "@babel/preset-env": "^7.22.9",
-    "@storybook/react": "^6.5.13",
+    "@storybook/react": "^7.5.0",
+    "@storybook/react-webpack5": "^7.5.0",
     "babel-eslint": "^10.0.3",
     "babel-plugin-istanbul": "^6.1.1",
     "cross-env": "^7.0.3",
@@ -61,6 +62,7 @@
     "nock": "^13.2.9",
     "nyc": "^15.1.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "storybook": "^7.5.0"
   }
 }

packageV6.json

@@ -0,0 +1,66 @@
+{
+  "name": "@percy/storybook",
+  "version": "4.3.7",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/percy/percy-storybook.git"
+  },
+  "engine": {
+    "node": ">=14"
+  },
+  "files": [
+    "bin",
+    "dist"
+  ],
+  "bin": {
+    "percy-storybook": "./bin/percy-storybook.cjs"
+  },
+  "main": "./dist/index.js",
+  "exports": "./dist/index.js",
+  "type": "module",
+  "scripts": {
+    "build": "babel src --out-dir dist",
+    "clean": "git clean -Xdf -e !node_modules -e !node_modules/**",
+    "lint": "eslint --ignore-path .gitignore .",
+    "readme": "percy-cli-readme",
+    "pretest": "build-storybook --config-dir=./test/.storybook --output-dir=./test/.storybook-build --loglevel error",
+    "test": "yarn test:env jasmine --config=./test/jasmine.json",
+    "test:env": "cross-env NODE_ENV=test NODE_OPTIONS='--loader=./test/loader.js'",
+    "test:coverage": "nyc yarn test"
+  },
+  "@percy/cli": {
+    "commands": [
+      "./dist/storybook.js"
+    ]
+  },
+  "dependencies": {
+    "@percy/cli-command": "^1.24.0",
+    "cross-spawn": "^7.0.3",
+    "qs": "^6.11.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.23.0",
+    "@babel/core": "^7.23.2",
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/eslint-plugin": "^7.19.1",
+    "@babel/preset-env": "^7.22.9",
+    "@storybook/react": "^6.5.13",
+    "babel-eslint": "^10.0.3",
+    "babel-plugin-istanbul": "^6.1.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.51.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-n": "^15.4.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "jasmine": "^4.5.0",
+    "jasmine-spec-reporter": "^7.0.0",
+    "mock-require": "^3.0.3",
+    "nock": "^13.2.9",
+    "nyc": "^15.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

prepare-storybook-v6-tests.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+
+# move package and storybook configs
+mv ./packageV6.json ./package.json
+mv ./test/.storybook/mainV6.js ./test/.storybook/main.js

src/start.js

@@ -1,5 +1,6 @@
 import command from '@percy/cli-command';
 import * as common from './common.js';
+import { checkStorybookVersion } from './utils.js';
 
 export const start = command('start', {
   description: 'Run start-storybook to snapshot stories',
@@ -31,12 +32,17 @@ export const start = command('start', {
   let { takeStorybookSnapshots } = yield import('./snapshots.js');
   let { default: { spawn } } = yield import('cross-spawn');
   let { host, port } = flags;
+  let storybookVersion = await checkStorybookVersion();
 
-  let args = ['--ci', `--host=${host}`, `--port=${port}`, ...argv];
-  log.info(`Running "start-storybook ${args.join(' ')}"`);
+  let args = storybookVersion === 7 ? ['dev'] : [];
+  args = args.concat(['--ci', `--host=${host}`, `--port=${port}`, ...argv]);
+
+  let storybookBinary = storybookVersion === 7 ? 'storybook' : 'start-storybook';
+
+  log.info(`Running "${storybookBinary} ${args.join(' ')}"`);
 
   let proc = yield new Promise((resolve, reject) => resolve(
-    spawn('start-storybook', args, { stdio: 'inherit' }).on('error', reject)
+    spawn(storybookBinary, args, { stdio: 'inherit' }).on('error', reject)
   ));
 
   /* istanbul ignore next: this is a storybook flag we don't need to test */

src/utils.js

@@ -1,4 +1,19 @@
 import { request, createRootResource, yieldTo } from '@percy/cli-command/utils';
+import spawn from 'cross-spawn';
+
+// check storybook version
+export function checkStorybookVersion() {
+  return new Promise((resolve, reject) => {
+    spawn('storybook', ['--version'])
+      .on('exit', (code) => { if (code === 0) resolve(7); })
+      .on('error', (err) => {
+        if (err.code === 'ENOENT') {
+          resolve(6);
+        }
+        reject(err);
+      });
+  });
+}
 
 // Transforms authorization credentials into a basic auth header and returns all config request
 // headers with the additional authorization header if not already set.
@@ -127,7 +142,7 @@ export async function* withPage(percy, url, callback, retry) {
     return yield* yieldTo(callback(page));
   } catch (error) {
     // if the page crashed and retry returns truthy, try again
-    if (error.message?.includes('crashed') && retry?.()) {
+    if (error?.message?.includes('crashed') && retry?.()) {
       return yield* withPage(...arguments);
     }
 
@@ -147,7 +162,10 @@ export async function* withPage(percy, url, callback, retry) {
 // Evaluate and return Storybook environment information from the about page
 /* istanbul ignore next: no instrumenting injected code */
 export function evalStorybookEnvironmentInfo({ waitForXPath }) {
-  return waitForXPath("//header[starts-with(text(), 'Storybook ')]", 5000)
+  let possibleEnvs = [];
+  possibleEnvs.push(waitForXPath("//header[starts-with(text(), 'Storybook ')]", 5000));
+  possibleEnvs.push(waitForXPath("//strong[starts-with(text(), 'You are on Storybook ')]", 5000));
+  return Promise.any(possibleEnvs)
     .then(el => `storybook/${el.innerText.match(/-?\d*\.?\d+/g).join('')}`)
     .catch(() => 'storybook/unknown');
 }
@@ -180,6 +198,9 @@ export function evalStorybookStorySnapshots({ waitFor }) {
   };
 
   return waitFor(async () => {
+    // uncache stories, if cached via storyStorev7: true
+    await (window.__STORYBOOK_PREVIEW__?.cacheAllCSFFiles?.() ||
+      window.__STORYBOOK_STORY_STORE__?.cacheAllCSFFiles?.());
     // use newer storybook APIs before old APIs
     await (window.__STORYBOOK_PREVIEW__?.extract?.() ||
            window.__STORYBOOK_STORY_STORE__?.extract?.());

test/.storybook/main.js

@@ -2,5 +2,9 @@ module.exports = {
   stories: ['*.stories.js'],
   features: {
     postcss: false
+  },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
   }
 };

test/.storybook/mainV6.js

@@ -0,0 +1,6 @@
+module.exports = {
+  stories: ['*.stories.js'],
+  features: {
+    postcss: false
+  }
+};

test/storybook-start.test.js

@@ -27,7 +27,7 @@ describe('percy storybook:start', () => {
     ] : []);
 
     expect(logger.stdout).toEqual(jasmine.arrayContaining([
-      `[percy] Running "start-storybook --ci --host=localhost --port=9000 ${args.join(' ')}"`,
+      jasmine.stringMatching(`\\[percy\\] Running "(start-storybook|storybook dev) --ci --host=localhost --port=9000 ${args.join(' ').replace('.', '\\.')}"`),
       '[percy] Percy has started!',
       '[percy] Snapshot taken: Snapshot: First',
       '[percy] Snapshot taken: Snapshot: Second',
@@ -51,7 +51,7 @@ describe('percy storybook:start', () => {
     await expectAsync(start([...args])).toBeRejectedWithError('FAKE ENOENT');
 
     expect(logger.stdout).toEqual([
-      `[percy] Running "start-storybook --ci --host=localhost --port=9000 ${args.join(' ')}"`
+      jasmine.stringMatching(`\\[percy\\] Running "(start-storybook|storybook dev) --ci --host=localhost --port=9000 ${args.join(' ').replace('.', '\\.')}"`)
     ]);
     expect(logger.stderr).toEqual([
       '[percy] Error: FAKE ENOENT'

test/storybook.test.js

@@ -3,6 +3,7 @@ import spawn from 'cross-spawn';
 import { request } from '@percy/cli-command/utils';
 import { api, logger, setupTest, createTestServer } from '@percy/cli-command/test/helpers';
 import { storybook } from '../src/index.js';
+import { checkStorybookVersion } from '../src/utils.js';
 
 describe('percy storybook', () => {
   let server, proc;
@@ -16,11 +17,16 @@ describe('percy storybook', () => {
       default: () => [200, 'text/html', '<p>Not Storybook</p>']
     });
 
-    proc = spawn('start-storybook', [
+    let storybookVersion = await checkStorybookVersion();
+    let args = storybookVersion === 7 ? ['dev'] : [];
+    args = args.concat([
       '--config-dir=./test/.storybook',
       '--port=9000',
       '--ci'
     ]);
+    let storybookBinary = storybookVersion === 7 ? 'storybook' : 'start-storybook';
+
+    proc = spawn(storybookBinary, args, { stdio: 'inherit' });
 
     // wait for storybook to become available
     await request('http://localhost:9000', {
@@ -49,7 +55,11 @@ describe('percy storybook', () => {
   it('snapshots live urls', async () => {
     await storybook(['http://localhost:9000']);
 
-    expect(logger.stderr).toEqual([]);
+    // if there are stderr logs ensure it is only an acceptable warning
+    expect(logger.stderr).toEqual(logger.stderr.length ? [
+      '[percy] Waiting on a response from Storybook...'
+    ] : []);
+
     expect(logger.stdout).toEqual(jasmine.arrayContaining([
       '[percy] Percy has started!',
       '[percy] Snapshot taken: Snapshot: First',