feat: added util funciton to fetch storybook version and switch tests

.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@v2
+        id: regex-match
+        if: ${{ github.event_name == 'workflow_dispatch' }}
+        with:
+          text: ${{ github.event.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 ${{ github.event.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:coverage

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

@@ -9,7 +9,7 @@ on:
         default: master
 jobs:
   test:
-    name: Test
+    name: Test Storybook v7
     strategy:
       matrix:
         os: [ubuntu-latest]

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": "node ./test/pretest.js",
+    "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,7 @@
     "@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",

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": ">=16"
+  },
+  "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,12 @@ export const start = command('start', {
   let { takeStorybookSnapshots } = yield import('./snapshots.js');
   let { default: { spawn } } = yield import('cross-spawn');
   let { host, port } = flags;
-  let storybookVersion = process.env.STORYBOOK_VERSION || '6';
+  let storybookVersion = await checkStorybookVersion();
 
-  let args = storybookVersion === '7' ? ['dev'] : [];
+  let args = storybookVersion === 7 ? ['dev'] : [];
   args = args.concat(['--ci', `--host=${host}`, `--port=${port}`, ...argv]);
 
-  let storybookBinary = storybookVersion === '7' ? 'storybook' : 'start-storybook';
+  let storybookBinary = storybookVersion === 7 ? 'storybook' : 'start-storybook';
 
   log.info(`Running "${storybookBinary} ${args.join(' ')}"`);
 

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.

test/.storybook/main.js

@@ -1,16 +1,10 @@
-let storybookVersion = process.env.STORYBOOK_VERSION || '6';
-let config = {
+module.exports = {
   stories: ['*.stories.js'],
   features: {
     postcss: false
-  }
-};
-
-if(storybookVersion === '7'){
-  config['framework'] = {
+  },
+  framework: {
     name: '@storybook/react-webpack5',
     options: {}
   }
-}
-
-module.exports = config
+};

test/.storybook/mainV6.js

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

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,14 +17,14 @@ describe('percy storybook', () => {
       default: () => [200, 'text/html', '<p>Not Storybook</p>']
     });
 
-    let storybookVersion = process.env.STORYBOOK_VERSION || '6';
-    let args = storybookVersion === '7' ? ['dev'] : [];
+    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';
+    let storybookBinary = storybookVersion === 7 ? 'storybook' : 'start-storybook';
 
     proc = spawn(storybookBinary, args, { stdio: 'inherit' });