@applitools/eyes-storybook 3.34.1 → 3.35.0

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 ## 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
+- Add support for reloading the page when using layoutBreakpoints
+### Bug fixes
+
 ## 3.34.1 - 2023/5/9
 
 ### 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.1",
+  "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": "2.5.10",
-    "@applitools/driver": "1.11.49",
+    "@applitools/core": "3.2.1",
+    "@applitools/driver": "1.12.1",
     "@applitools/functional-commons": "1.6.0",
-    "@applitools/logger": "1.1.52",
+    "@applitools/logger": "2.0.2",
     "@applitools/monitoring-commons": "1.0.19",
-    "@applitools/spec-driver-puppeteer": "1.1.60",
-    "@applitools/test-server": "1.1.31",
-    "@applitools/ufg-client": "1.2.12",
-    "@applitools/utils": "1.3.35",
+    "@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

@@ -25,7 +25,6 @@ const {makeCore} = require('@applitools/core');
 const {makeUFGClient} = require('@applitools/ufg-client');
 const makeGetStoriesWithConfig = require('./getStoriesWithConfig');
 
-const CONCURRENT_PAGES = 3;
 const MAX_RETRIES = 10;
 const RETRY_INTERVAL = 1000;
 
@@ -35,6 +34,7 @@ async function eyesStorybook({
   performance,
   timeItAsync,
   outputStream = process.stderr,
+  isVersion7,
 }) {
   let memoryTimeout;
   let renderIE = false;
@@ -42,14 +42,12 @@ async function eyesStorybook({
   takeMemLoop();
   logger.log('eyesStorybook started');
 
-  const {
-    storybookUrl,
-    waitBeforeCapture,
-    readStoriesTimeout,
-    reloadPagePerStory,
-    proxy,
-    testConcurrency,
-  } = config;
+  const CONCURRENT_TABS = isNaN(Number(process.env.APPLITOOLS_CONCURRENT_TABS))
+    ? 3
+    : Number(process.env.APPLITOOLS_CONCURRENT_TABS);
+  logger.log(`Running with ${CONCURRENT_TABS} concurrent tabs`);
+
+  const {storybookUrl, readStoriesTimeout, reloadPagePerStory, proxy, testConcurrency} = config;
 
   let iframeUrl;
   try {
@@ -151,14 +149,21 @@ async function eyesStorybook({
     },
   });
   try {
-    const [stories] = await Promise.all(
-      [getStoriesWithSpinner()].concat(
-        new Array(CONCURRENT_PAGES).fill().map(async () => {
+    const stories = await getStoriesWithSpinner();
+
+    if (CONCURRENT_TABS <= 3) {
+      await Promise.all(
+        new Array(CONCURRENT_TABS).fill().map(async () => {
           const {pageId} = await pagePool.createPage();
           pagePool.addToPool(pageId);
         }),
-      ),
-    );
+      );
+    } else {
+      for (const _x of new Array(CONCURRENT_TABS).fill()) {
+        const {pageId} = await pagePool.createPage();
+        pagePool.addToPool(pageId);
+      }
+    }
 
     const filteredStories = filterStories({stories, config});
     const storiesIncludingVariations = addVariationStories({
@@ -209,6 +214,7 @@ async function eyesStorybook({
       logger,
       stream: outputStream,
       pagePool,
+      isVersion7,
     });
 
     logger.log('finished creating functions');

package/src/generateConfig.js

@@ -77,7 +77,7 @@ function generateConfig({argv = {}, defaultConfig = {}, externalConfigParams = [
     );
   }
 
-  transformBrowser(result);
+  transformConfig(result);
   if (!result.renderers) {
     result.renderers = [{name: 'chrome', width: 1024, height: 768}];
   }
@@ -85,6 +85,11 @@ function generateConfig({argv = {}, defaultConfig = {}, externalConfigParams = [
   return result;
 }
 
+function transformConfig(result) {
+  transformLayoutBreakpoints(result);
+  transformBrowser(result);
+}
+
 function transformBrowser(result) {
   if (result.browser) {
     result.renderers = [];
@@ -104,4 +109,14 @@ function transformBrowser(result) {
   delete result.browser;
   return result;
 }
-module.exports = {generateConfig, transformBrowser};
+
+function transformLayoutBreakpoints(result) {
+  if (
+    utils.types.isBoolean(result.layoutBreakpoints) ||
+    utils.types.isArray(result.layoutBreakpoints)
+  ) {
+    result.layoutBreakpoints = {breakpoints: result.layoutBreakpoints};
+  }
+}
+
+module.exports = {generateConfig, transformConfig};

package/src/getStoriesWithConfig.js

@@ -1,6 +1,6 @@
 const {splitConfigsByBrowser, shouldRenderIE} = require('./shouldRenderIE');
 const getStoryTitle = require('./getStoryTitle');
-const {transformBrowser} = require('./generateConfig');
+const {transformConfig} = require('./generateConfig');
 const {checkSettingsParams} = require('./checkSettingsParams');
 const getStoryBaselineName = require('./getStoryBaselineName');
 
@@ -34,8 +34,11 @@ function makeGetStoriesWithConfig({config}) {
               }
             })
             .filter(Boolean);
+
+          const storyConfigReduced = allowedProps(storyConfig);
+          transformConfig(storyConfigReduced);
           addConfigToStories({
-            config: transformBrowser(allowedProps(storyConfig)),
+            config: storyConfigReduced,
             stories: storiesSubset,
             isStoryConfig: true,
           });
@@ -70,13 +73,15 @@ function makeGetStoriesWithConfig({config}) {
 
   function addConfigToStory({story, config, isIE, isStoryConfig}) {
     const storiesToUpdate = isIE ? storiesWithConfigIE : storiesWithConfig;
+    const storyEyesParameters = {...story.parameters?.eyes};
+    transformConfig(storyEyesParameters);
     storiesToUpdate.set(story.baselineName, {
       ...story,
       config: {
         ...basicConfig,
         ...storiesToUpdate.get(story.baselineName)?.config,
         ...config,
-        ...transformBrowser({...story.parameters?.eyes}),
+        ...storyEyesParameters,
         properties: [
           ...(isStoryConfig ? basicConfig.properties || [] : []),
           ...(storiesToUpdate.get(story.baselineName)?.config.properties || []),

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/initPage.js

@@ -3,9 +3,16 @@ const browserLog = require('./browserLog');
 const fakeIE = require('./fakeIE');
 
 function makeInitPage({iframeUrl, config, browser, logger, getTransitiongIntoIE, getRenderIE}) {
+  const browserContexts = [browser.defaultBrowserContext()];
+
   return async function initPage({pageId, pagePool}) {
     logger.log('initializing puppeteer page number ', pageId);
-    const page = await browser.newPage();
+    const pages = await browserContexts[browserContexts.length - 1].pages();
+    if (pages.length === 5) {
+      const browserContext = await browser.createIncognitoBrowserContext();
+      browserContexts.push(browserContext);
+    }
+    const page = await browserContexts[browserContexts.length - 1].newPage();
 
     if (config.viewportSize) {
       await page.setViewport(config.viewportSize);

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/renderStory.js

@@ -15,7 +15,7 @@ function makeRenderStory({
   const throttle = throat(storyDataGap);
   return function renderStory({story, snapshots, url}) {
     const config = story.config;
-    const {name, kind, parameters, hasPlayFunction} = story;
+    const {name, kind, hasPlayFunction} = story;
     const baselineName = story.baselineName;
     const title = story.storyTitle;
     const {

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;