@applitools/eyes-storybook 3.34.2 → 3.35.0

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 ## Unreleased
 
 
+
+## 3.35.0 - 2023/6/13
+
+### Features
+### Bug fixes
+- Add support for variations in storybook 7
+- Increase timeout for rendering results polling
+- Add the option to not fail on visual differences using exitcode `nodiffs`
+
 ## 3.34.2 - 2023/5/16
 
 ### Features

package/README.md

@@ -154,7 +154,7 @@ In addition to command-line arguments, it's possible to define the following con
 | `storybookStaticDir`      | undefined                   | Path to Storybook's static files folder (also available as command-line argument). |
 | `showStorybookOutput`     | undefined                   | Whether or not you want to see Storybook output (also available as command-line argument). |
 | `viewportSize`            | { width: 1024, height: 600} | The size of the puppeteer browser's window. This is the browser window which renders the stories originally (and opens at the size provided in the `viewportSize` parameter), and then a DOM snapshot is uploaded to the server, which renders this snapshot on all the browsers and sizes provided in the `browser` parameter.|
-| `exitcode`                | true                       | If tests failed or has visual differences close with non-zero exit code (also available as command-line argument).|
+| `exitcode`                | true                       | When set to `true` - if there were visual differences or other errors, close with non-zero exit code. When set to `false` - always close with zero exit code (i.e. never fail the build). When set to `nodiffs` - close with non-zero exit code only for errors and **not** for visual differences. (also available as command-line argument: `--exitcode true/false/nodiffs`) |
 | `browser`                 | { width: 1024, height: 768, name: 'chrome' } | The size and browser of the generated screenshots. For more info and possible values, see the [browser section below](#configuring-the-browser).|
 | `showLogs`                | false                       | Whether or not you want to see logs of the Eyes-Storybook plugin. |
 | `batch`                     | undefined                   | An object which describes different aspects of the batch. The following lines in this table depict the various ways to configure the batch. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/eyes-storybook",
-  "version": "3.34.2",
+  "version": "3.35.0",
   "description": "",
   "keywords": [
     "applitools",
@@ -42,6 +42,7 @@
     "test:e2e": "mocha --no-timeouts --trace-warnings 'test/e2e/*.e2e.test.js'",
     "test:e2e:versions": "npx mocha --no-timeouts --trace-warnings --require test/fixtures/storybook-versions/mochaHooks.js test/versions/*.e2e.versions.test.js",
     "test:e2e:versions_local": "STORYBOOK_VERSION=latest npx mocha --no-timeouts --trace-warnings --require test/fixtures/storybook-versions/mochaHooks.js test/versions/*.e2e.versions.test.js",
+    "test:heavy": "node bin/eyes-storybook.js -f test/fixtures/heavyStorybook/applitools.config.js",
     "storybook": "start-storybook -c test/fixtures/appWithStorybook -p 9001 -s test/fixtures",
     "storybook:httpHeaders": "start-storybook -c test/fixtures/appWithCustomHttpHeaders -p 9007",
     "storybook:jslayout": "start-storybook -c test/fixtures/jsLayoutStorybookLocal -p 9001 -s test/fixtures",
@@ -73,15 +74,15 @@
     }
   },
   "dependencies": {
-    "@applitools/core": "3.0.1",
-    "@applitools/driver": "1.11.51",
+    "@applitools/core": "3.2.1",
+    "@applitools/driver": "1.12.1",
     "@applitools/functional-commons": "1.6.0",
-    "@applitools/logger": "2.0.0",
+    "@applitools/logger": "2.0.2",
     "@applitools/monitoring-commons": "1.0.19",
-    "@applitools/spec-driver-puppeteer": "1.1.62",
-    "@applitools/test-server": "1.2.0",
-    "@applitools/ufg-client": "1.2.13",
-    "@applitools/utils": "1.3.36",
+    "@applitools/spec-driver-puppeteer": "1.1.64",
+    "@applitools/test-server": "1.2.2",
+    "@applitools/ufg-client": "1.2.18",
+    "@applitools/utils": "1.3.37",
     "boxen": "4.2.0",
     "chalk": "3.0.0",
     "detect-port": "1.3.0",
@@ -94,7 +95,7 @@
     "yargs": "15.4.1"
   },
   "devDependencies": {
-    "@applitools/bongo": "^3.0.3",
+    "@applitools/bongo": "^4.0.0",
     "@applitools/sdk-shared": "0.9.15",
     "@applitools/snaptdout": "^1.0.1",
     "@storybook/addon-interactions": "^6.4.18",

package/src/cli.js

@@ -32,14 +32,20 @@ const {performance, timeItAsync} = makeTiming();
     console.log(`Using @applitools/eyes-storybook version ${VERSION}.\n`);
     const config = generateConfig({argv, defaultConfig, externalConfigParams});
     const logger = makeLogger({level: config.showLogs ? 'info' : 'silent', label: 'eyes'});
-    await validateAndPopulateConfig({config, logger, packagePath: process.cwd()});
+    const isVersion7 = await validateAndPopulateConfig({
+      config,
+      logger,
+      packagePath: process.cwd(),
+    });
     logger.log(`Running with the following config:\n${configDigest(config)}`);
     const [err, results] = await presult(
-      timeItAsync('eyesStorybook', () => eyesStorybook({config, logger, performance, timeItAsync})),
+      timeItAsync('eyesStorybook', () =>
+        eyesStorybook({config, logger, performance, timeItAsync, isVersion7}),
+      ),
     );
     if (err) {
       console.log(chalk.red(err.message));
-      process.exit(config.exitcode ? config.exitcode : 0);
+      process.exit(config.exitcode ? 1 : 0);
     } else {
       const totalTime = performance['eyesStorybook'];
       const {exitCode, summary, outputStr} = processResults({
@@ -47,6 +53,7 @@ const {performance, timeItAsync} = makeTiming();
         totalTime,
         testConcurrency: config.testConcurrency,
         saveNewTests: config.saveNewTests,
+        configExitCode: config.exitcode,
       });
       console.log(outputStr);
       if (config.jsonFilePath) {
@@ -58,7 +65,7 @@ const {performance, timeItAsync} = makeTiming();
       if (config.xmlFilePath) {
         handleXmlFile(config.xmlFilePath, summary, {totalTime});
       }
-      process.exit(config.exitcode ? exitCode : 0);
+      process.exit(exitCode);
     }
   } catch (ex) {
     console.log(ex);

package/src/eyesStorybook.js

@@ -34,6 +34,7 @@ async function eyesStorybook({
   performance,
   timeItAsync,
   outputStream = process.stderr,
+  isVersion7,
 }) {
   let memoryTimeout;
   let renderIE = false;
@@ -213,6 +214,7 @@ async function eyesStorybook({
       logger,
       stream: outputStream,
       pagePool,
+      isVersion7,
     });
 
     logger.log('finished creating functions');

package/src/getStoryUrl.js

@@ -1,10 +1,14 @@
 'use strict';
 const getIframeUrl = require('./getIframeUrl');
 
-function getStoryUrl({name, kind, parameters}, baseUrl) {
+function getStoryUrl({name, kind, parameters, id}, baseUrl, isVersion7) {
   let storyUrl = getIframeUrl(baseUrl);
-  storyUrl += `&selectedKind=${encodeURIComponent(kind)}`;
-  storyUrl += `&selectedStory=${encodeURIComponent(name)}`;
+  if (!isVersion7) {
+    storyUrl += `&selectedKind=${encodeURIComponent(kind)}`;
+    storyUrl += `&selectedStory=${encodeURIComponent(name)}`;
+  } else {
+    storyUrl += `&path=/story/${encodeURIComponent(id)}`;
+  }
 
   const queryParams = parameters && parameters.eyes && parameters.eyes.queryParams;
   if (queryParams) {

package/src/processResults.js

@@ -5,7 +5,13 @@ const utils = require('@applitools/utils');
 const uniq = require('./uniq');
 const concurrencyMsg = require('./concurrencyMsg');
 
-function processResults({results, totalTime, testConcurrency, saveNewTests = true}) {
+function processResults({
+  results,
+  totalTime,
+  testConcurrency,
+  saveNewTests = true,
+  configExitCode,
+}) {
   let outputStr = '\n';
   const pluralize = utils.general.pluralize;
   let testResults = flatten(results.summary.results);
@@ -101,8 +107,16 @@ function processResults({results, totalTime, testConcurrency, saveNewTests = tru
     // TODO require from core
     outputStr += `\n${concurrencyMsg}\n`;
   }
-  const exitCode =
-    !warnForUnsavedNewTests && passedOrNew.length && !errors.length && !unresolved.length ? 0 : 1;
+
+  let exitCode;
+  if (!configExitCode) {
+    exitCode = 0;
+  } else if (configExitCode === 'nodiffs') {
+    exitCode = errors.length ? 1 : 0;
+  } else {
+    exitCode =
+      !warnForUnsavedNewTests && passedOrNew.length && !errors.length && !unresolved.length ? 0 : 1;
+  }
   return {
     outputStr,
     summary: results.summary,

package/src/renderStories.js

@@ -13,6 +13,7 @@ function makeRenderStories({
   stream,
   getClientAPI,
   maxPageTTL = 60000,
+  isVersion7,
 }) {
   let newPageIdToAdd;
 
@@ -56,7 +57,7 @@ function makeRenderStories({
 
       async function processStory() {
         const story = stories[currIndex++];
-        const storyUrl = getStoryUrl(story, storybookUrl);
+        const storyUrl = getStoryUrl(story, storybookUrl, isVersion7);
         const title = getStoryBaselineName(story);
         try {
           let [error, storyData] = await presult(

package/src/startStorybookServer.js

@@ -1,16 +1,8 @@
 'use strict';
-const {resolve} = require('path');
 const ora = require('ora');
 const StorybookConnector = require('./storybookConnector');
-const fs = require('fs');
-const {exec} = require('child_process');
-const {promisify: p} = require('util');
-const pexec = p(exec);
-// eslint-disable-next-line
-const semver = require('semver');
 
 async function startStorybookServer({
-  packagePath,
   storybookPort,
   storybookHost,
   storybookConfigDir,
@@ -18,22 +10,10 @@ async function startStorybookServer({
   showStorybookOutput,
   logger,
   startStorybookServerTimeout,
+  storybookPath,
+  sbArg,
 }) {
   const isWindows = process.platform.startsWith('win');
-  let storybookPath, sbArg;
-  const storybookPathV6 = resolve(packagePath, 'node_modules/.bin/start-storybook');
-  const storybookPathV7 = resolve(packagePath, 'node_modules/.bin/sb');
-  if (fs.existsSync(storybookPathV7)) {
-    const version = await pexec(`${storybookPathV7} --version`);
-    if (semver.satisfies(version.stdout, '<7.0.0')) {
-      storybookPath = storybookPathV6;
-    } else {
-      storybookPath = storybookPathV7;
-      sbArg = 'dev';
-    }
-  } else {
-    storybookPath = storybookPathV6;
-  }
 
   const storybookConnector = new StorybookConnector({
     storybookPath,

package/src/validateAndPopulateConfig.js

@@ -11,14 +11,25 @@ const {
 } = require('./errMessages');
 const startStorybookServer = require('./startStorybookServer');
 const {isIE} = require('./shouldRenderIE');
+const {resolve} = require('path');
+const {exec} = require('child_process');
+const {promisify: p} = require('util');
+const pexec = p(exec);
+// eslint-disable-next-line
+const semver = require('semver');
+const {makeLogger} = require('@applitools/logger');
 
-async function validateAndPopulateConfig({config, packagePath, logger}) {
+async function validateAndPopulateConfig({config, packagePath = '', logger = makeLogger()}) {
   if (!config.apiKey) {
     throw new Error(missingApiKeyFailMsg);
   }
 
   const packageJsonPath = `${packagePath}/package.json`;
   const packageJson = fs.existsSync(packageJsonPath) ? require(packageJsonPath) : undefined;
+  const {storybookPath, isVersion7, sbArg} = await determineStorybookVersion(packagePath);
+  logger.log(
+    `[validateAndPopulateConfig] storybookPath=${storybookPath} isVersion7=${isVersion7} sbArg=${sbArg}`,
+  );
 
   if (!config.appName) {
     if (!packageJson) {
@@ -39,7 +50,9 @@ async function validateAndPopulateConfig({config, packagePath, logger}) {
       console.log(chalk.red(`couldn't find available port around`, config.storybookPort));
     }
 
-    config.storybookUrl = await startStorybookServer(Object.assign({packagePath, logger}, config));
+    config.storybookUrl = await startStorybookServer(
+      Object.assign({packagePath, logger, storybookPath, sbArg}, config),
+    );
 
     // NOTE (Amit): I don't understand why this condition is here. It shouldn't happen. I might have been the one to put it here, but it seems like a mistake. We should take a thorough look and remove it.
     if (!config.storybookUrl) {
@@ -65,6 +78,29 @@ async function validateAndPopulateConfig({config, packagePath, logger}) {
       ),
     );
   }
+  return isVersion7;
 }
 
+async function determineStorybookVersion(packagePath) {
+  let storybookPath,
+    sbArg,
+    isVersion7 = false;
+  const storybookPathV6 = resolve(packagePath, 'node_modules/.bin/start-storybook');
+  const storybookPathV7 = resolve(packagePath, 'node_modules/.bin/sb');
+
+  if (fs.existsSync(storybookPathV7)) {
+    const version = await pexec(`${storybookPathV7} --version`);
+    if (semver.satisfies(version.stdout, '<7.0.0')) {
+      storybookPath = storybookPathV6;
+    } else {
+      storybookPath = storybookPathV7;
+      sbArg = 'dev';
+      isVersion7 = true;
+    }
+  } else {
+    storybookPath = storybookPathV6;
+  }
+
+  return {storybookPath, isVersion7, sbArg};
+}
 module.exports = validateAndPopulateConfig;