@applitools/eyes-storybook 3.60.0 → 3.61.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## [3.61.0](https://github.com/Applitools-Dev/sdk/compare/js/eyes-storybook@3.60.0...js/eyes-storybook@3.61.0) (2025-10-01)
+
+
+### Features
+
+* storybook addon ([#3104](https://github.com/Applitools-Dev/sdk/issues/3104)) ([16e09cb](https://github.com/Applitools-Dev/sdk/commit/16e09cba8928c3a24b9e0d9d41e0936fbaec2773))
+
+
+### Dependencies
+
+* @applitools/screenshoter bumped to 3.12.6
+  #### Bug Fixes
+
+  * wait after scroll | FLD-3594 ([#3252](https://github.com/Applitools-Dev/sdk/issues/3252)) ([e452422](https://github.com/Applitools-Dev/sdk/commit/e4524229b64e40d9b9596a92bfa94daf5824286a))
+* @applitools/core-base bumped to 1.28.1
+  #### Bug Fixes
+
+  * unexpected concurrency values from server | AD-11465 ([#3248](https://github.com/Applitools-Dev/sdk/issues/3248)) ([0dd28c7](https://github.com/Applitools-Dev/sdk/commit/0dd28c7b297d5ad3aabc6b87e427e3e09a993825))
+* @applitools/nml-client bumped to 1.11.7
+
+* @applitools/ec-client bumped to 1.12.9
+
+* @applitools/core bumped to 4.49.0
+  #### Features
+
+  * storybook addon ([#3104](https://github.com/Applitools-Dev/sdk/issues/3104)) ([16e09cb](https://github.com/Applitools-Dev/sdk/commit/16e09cba8928c3a24b9e0d9d41e0936fbaec2773))
+
+
+  #### Bug Fixes
+
+  * duplicate concurrency warnings ([#3255](https://github.com/Applitools-Dev/sdk/issues/3255)) ([ef2f94a](https://github.com/Applitools-Dev/sdk/commit/ef2f94ab4137c78396583f166344285beeb49be7))
+
+
+
+* @applitools/eyes bumped to 1.36.9
+
+
 ## [3.60.0](https://github.com/Applitools-Dev/sdk/compare/js/eyes-storybook@3.59.1...js/eyes-storybook@3.60.0) (2025-09-22)
 
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import type { ConfigurationPlain, DesktopBrowserInfo, ChromeEmulationInfo, IOSDeviceInfo, IOSMultiDeviceInfo } from '@applitools/eyes';
-type irrelevantToStorybook = 'waitBeforeScreenshots' | 'agentId' | 'captureStatusBar' | 'concurrentSessions' | 'connectionTimeout' | 'debugScreenshots' | 'defaultMatchSettings' | 'disableNMLUrlCache' | 'forceFullPageScreenshot' | 'hideCaret' | 'hideScrollbars' | 'hostApp' | 'hostAppInfo' | 'hostOS' | 'hostOSInfo' | 'ignoreBaseline' | 'ignoreCaret' | 'latestCommitInfo' | 'isDisabled' | 'matchTimeout' | 'mobileOptions' | 'removeSession' | 'rotation' | 'scaleRatio' | 'scrollRootElement' | 'sessionType' | 'stitchMode' | 'stitchOverlap' | 'viewportSize';
+type irrelevantToStorybook = 'waitBeforeScreenshots' | 'agentId' | 'captureStatusBar' | 'concurrentSessions' | 'connectionTimeout' | 'debugScreenshots' | 'defaultMatchSettings' | 'disableNMLUrlCache' | 'forceFullPageScreenshot' | 'hideCaret' | 'hideScrollbars' | 'hostApp' | 'hostAppInfo' | 'hostOS' | 'hostOSInfo' | 'ignoreBaseline' | 'ignoreCaret' | 'latestCommitInfo' | 'isDisabled' | 'matchTimeout' | 'mobileOptions' | 'removeSession' | 'rotation' | 'scaleRatio' | 'scrollRootElement' | 'sessionType' | 'stitchMode' | 'stitchOverlap' | 'viewportSize' | 'isAddon';
 /**
  * Configuration options for Applitools Eyes Storybook integration.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/eyes-storybook",
-  "version": "3.60.0",
+  "version": "3.61.0",
   "description": "",
   "keywords": [
     "applitools",
@@ -19,6 +19,7 @@
     "eyes-setup": "./bin/eyes-setup.js",
     "eyes-storybook": "./bin/eyes-storybook.js"
   },
+  "main": "./src/main.js",
   "files": [
     "src",
     "bin",
@@ -58,9 +59,9 @@
     "up:framework": "cd test/fixtures/storybook-versions/${APPLITOOLS_FRAMEWORK_VERSION} && npm ci"
   },
   "dependencies": {
-    "@applitools/core": "4.48.0",
+    "@applitools/core": "4.49.0",
     "@applitools/driver": "1.23.5",
-    "@applitools/eyes": "1.36.8",
+    "@applitools/eyes": "1.36.9",
     "@applitools/functional-commons": "1.6.0",
     "@applitools/logger": "2.2.4",
     "@applitools/monitoring-commons": "1.0.19",

package/src/cli.js

@@ -1,22 +1,18 @@
 'use strict';
 const yargs = require('yargs');
-const {makeLogger} = require('@applitools/logger');
-const {configParams: externalConfigParams} = require('./configParams');
 const VERSION = require('../package.json').version;
-const eyesStorybook = require('./eyesStorybook');
 const processResults = require('./processResults');
-const validateAndPopulateConfig = require('./validateAndPopulateConfig');
 const yargsOptions = require('./yargsOptions');
-const {generateConfig} = require('./generateConfig');
-const defaultConfig = require('./defaultConfig');
-const configDigest = require('./configDigest');
 const {makeTiming} = require('@applitools/monitoring-commons');
 const handleJsonFile = require('./handleJsonFile');
 const handleTapFile = require('./handleTapFile');
 const handleXmlFile = require('./handleXmlFile');
+const {getConfigAndLogger} = require('./getConfigAndLogger');
 const {presult} = require('@applitools/functional-commons');
 const chalk = require('chalk');
 const utils = require('@applitools/utils');
+const {EyesError} = require('@applitools/eyes');
+const eyesStorybook = require('./eyesStorybook');
 const {performance, timeItAsync} = makeTiming();
 
 (async function () {
@@ -31,7 +27,7 @@ const {performance, timeItAsync} = makeTiming();
       .options(yargsOptions).argv;
 
     console.log(`Using @applitools/eyes-storybook version ${VERSION}.\n`);
-    const config = generateConfig({argv, defaultConfig, externalConfigParams});
+    const {config, logger} = await getConfigAndLogger(argv);
 
     if (config.shard) {
       console.log(`Running with shard: ${config.shard.current}/${config.shard.total}`);
@@ -41,13 +37,6 @@ const {performance, timeItAsync} = makeTiming();
       }
     }
 
-    const logger = makeLogger({level: config.showLogs ? 'info' : 'silent', label: 'eyes'});
-    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})),
     );
@@ -78,7 +67,11 @@ const {performance, timeItAsync} = makeTiming();
       process.exit(exitCode);
     }
   } catch (ex) {
-    console.log(ex);
+    if (utils.types.instanceOf(ex, EyesError)) {
+      console.log(ex.message);
+    } else {
+      console.log(ex);
+    }
     process.exit(1);
   }
 })();

package/src/errMessages.js

@@ -1,14 +1,7 @@
 'use strict';
-const chalk = require('chalk');
 
-const missingApiKeyFailMsg = `
-${chalk.red('Environment variable APPLITOOLS_API_KEY is not set.')}
-${chalk.green(`To fix:
-1. Register for Applitools developer account at www.applitools.com/devreg
-2. Get API key from menu
-3. Set APPLITOOLS_API_KEY environment variable
-  Mac/Linux: export APPLITOOLS_API_KEY=Your_API_Key_Here
-  Windows: set APPLITOOLS_API_KEY=Your_API_Key_Here`)}`;
+const chalk = require('chalk');
+const {MissingApiKeyError} = require('@applitools/core');
 
 const missingAppNameAndPackageJsonFailMsg = `
   ${chalk.red(
@@ -47,9 +40,9 @@ function deprecationWarning({deprecatedThing, newThing, isDead}) {
 }
 
 module.exports = {
-  missingApiKeyFailMsg,
   missingAppNameAndPackageJsonFailMsg,
   missingAppNameInPackageJsonFailMsg,
   refineErrorMessage,
   deprecationWarning,
+  MissingApiKeyError,
 };

package/src/eyesStorybook.js

@@ -1,5 +1,6 @@
 'use strict';
 const puppeteer = require('puppeteer');
+const configDigest = require('./configDigest');
 const getStories = require('../dist/getStories');
 const {presult} = require('@applitools/functional-commons');
 const {executeWithRetry} = require('./utils/executeWithRetry');
@@ -31,7 +32,11 @@ async function eyesStorybook({
   performance,
   timeItAsync,
   outputStream = process.stderr,
+  eventEmitter,
+  signal = new AbortController().signal,
 }) {
+  logger.log(`Running with the following config:\n${configDigest(config)}`);
+
   let renderIE = false;
   let transitioning = false;
   logger.log('eyesStorybook started');
@@ -51,7 +56,6 @@ async function eyesStorybook({
     logger.log(ex);
     throw new Error(`Storybook URL is not valid: ${storybookUrl}`);
   }
-  const agentId = `eyes-storybook/${require('../package.json').version}`;
   process.env.PUPPETEER_DISABLE_HEADLESS_WARNING = true;
   const browser = await puppeteer.launch(config.puppeteerOptions);
   logger.log('browser launched');
@@ -74,7 +78,7 @@ async function eyesStorybook({
   });
 
   const environment = extractEnvironment();
-  const core = await makeCore({spec, agentId, environment, logger});
+  const core = await makeCore({spec, agentId: config.agentId, environment, logger});
   const manager = await core.makeManager({
     type: 'ufg',
     settings: {concurrency: config.testConcurrency, useServerConcurrency: true},
@@ -85,7 +89,7 @@ async function eyesStorybook({
       settings: {
         eyesServerUrl: config.eyesServerUrl,
         apiKey: config.apiKey,
-        agentId,
+        agentId: config.agentId,
         proxy: config.proxy,
         useDnsCache: config.useDnsCache,
       },
@@ -182,6 +186,7 @@ async function eyesStorybook({
       concurrency: account.serverConcurrency.componentConcurrency,
       appName: config.appName,
       serverSettings: account.eyesServer,
+      signal,
     });
 
     const renderStories = makeRenderStories({
@@ -192,6 +197,8 @@ async function eyesStorybook({
       logger,
       stream: outputStream,
       pagePool,
+      eventEmitter,
+      signal,
     });
 
     logger.log('finished creating functions');
@@ -209,6 +216,15 @@ async function eyesStorybook({
         timeItAsync,
       }),
     );
+    if (signal.aborted) {
+      if (error) {
+        const msg = refineErrorMessage({prefix: 'Error in executeRenders:', error});
+        logger.log('Error in executeRenders:', error);
+        throw new Error(msg);
+      } else {
+        return {results}; // processResults (which is not used in the addon) doesn't support missing the summary. But it's not a real concern right now.
+      }
+    }
     const [errorInGetResults, testResultsSummary] = await presult(
       manager.getResults({throwErr: false}),
     );
@@ -219,7 +235,7 @@ async function eyesStorybook({
 
     if (error) {
       const msg = refineErrorMessage({prefix: 'Error in executeRenders:', error});
-      logger.log(error);
+      logger.log('Error in executeRenders:', error);
       throw new Error(msg);
     } else {
       return {summary: testResultsSummary, results};

package/src/eyesStorybookEventEmitter.js

@@ -0,0 +1,35 @@
+'use strict';
+
+const eyesStorybookOrig = require('./eyesStorybook');
+const {EventEmitter} = require('node:events');
+
+function eyesStorybookEventEmitter({
+  eyesStorybook = eyesStorybookOrig,
+  config,
+  logger,
+  performance,
+  timeItAsync,
+  signal,
+}) {
+  const eventEmitter = new EventEmitter();
+  const startedAt = Date.now();
+
+  eyesStorybook({config, logger, performance, timeItAsync, eventEmitter, signal})
+    .then(({results}) => {
+      eventEmitter.emit('result', {
+        startedAt,
+        duration: performance['renderStories'],
+        storyResults: results.map(({story, resultsOrErr}) => ({
+          story: {id: story.id, queryParams: story.config.queryParams},
+          [Array.isArray(resultsOrErr) ? 'results' : 'error']: resultsOrErr,
+        })),
+      });
+    })
+    .catch(err => {
+      eventEmitter.emit('error', err);
+    });
+
+  return eventEmitter;
+}
+
+module.exports = {eyesStorybookEventEmitter};

package/src/getConfigAndLogger.js

@@ -0,0 +1,24 @@
+'use strict';
+
+const {generateConfig} = require('./generateConfig');
+const defaultConfig = require('./defaultConfig');
+const validateAndPopulateConfig = require('./validateAndPopulateConfig');
+const {makeLogger} = require('@applitools/logger');
+const {configParams: externalConfigParams} = require('./configParams');
+
+async function getConfigAndLogger(argv = {}) {
+  const config = generateConfig({argv, defaultConfig, externalConfigParams});
+  const logger = makeLogger({
+    handler: argv.logHandler,
+    level: argv.logHandler ? 'all' : config.showLogs ? 'info' : 'silent', // if logHandler is passed, let's pass it all the logs. Otherwise, respect the config
+    label: 'eyes',
+  });
+  await validateAndPopulateConfig({
+    config,
+    logger,
+    packagePath: process.cwd(),
+  });
+  return {config, logger};
+}
+
+module.exports = {getConfigAndLogger};

package/src/index.ts

@@ -29,6 +29,7 @@ type irrelevantToStorybook = 'waitBeforeScreenshots'
     | 'stitchMode'
     | 'stitchOverlap'
     | 'viewportSize'
+    | 'isAddon'
 ;
 
 

package/src/main.js

@@ -0,0 +1,7 @@
+const {eyesStorybookEventEmitter} = require('./eyesStorybookEventEmitter');
+const {getConfigAndLogger} = require('./getConfigAndLogger');
+
+module.exports = {
+  eyesStorybookEventEmitter,
+  getConfigAndLogger,
+};

package/src/renderStories.js

@@ -2,6 +2,7 @@
 const getStoryUrl = require('./getStoryUrl');
 const getStoryBaselineName = require('./getStoryBaselineName');
 const ora = require('ora');
+const {EventEmitter} = require('node:events');
 const {presult} = require('@applitools/functional-commons');
 
 function makeRenderStories({
@@ -13,19 +14,23 @@ function makeRenderStories({
   stream,
   sanityCheckForPage,
   maxPageTTL = 60000,
+  eventEmitter = new EventEmitter(),
+  signal = new AbortController().signal,
 }) {
   let newPageIdToAdd;
 
   return async function renderStories(stories, isIE) {
     let doneStories = 0;
+    const totalStories = stories.length;
     const allTestResults = [];
     let allStoriesPromise = Promise.resolve();
     let currIndex = 0;
 
     const spinner = ora({
-      text: updateSpinnerText(0, stories.length),
+      text: updateSpinnerText(0, totalStories),
       stream,
     });
+    eventEmitter.emit('progress', {doneStories, totalStories});
     spinner.start();
     prepareNewPage();
 
@@ -35,7 +40,16 @@ function makeRenderStories({
     return allTestResults;
 
     async function processStoryLoop() {
-      if (currIndex === stories.length) return;
+      if (currIndex === totalStories) return;
+
+      if (signal.aborted) {
+        const story = stories[currIndex++];
+        const title = getStoryBaselineName(story);
+        logger.log('aborting story before processing', title);
+        onDoneStory(new Error(`${title} aborted before processing ${signal.reason}`), story);
+        return processStoryLoop();
+      }
+
       const {page, pageId, markPageAsFree, removePage, getCreatedAt} = await pagePool.getFreePage();
       const livedTime = Date.now() - getCreatedAt();
       logger.log(`[prepareNewPage] got free page: ${pageId}, lived time: ${livedTime}`);
@@ -103,6 +117,12 @@ function makeRenderStories({
             const errMsg = `[page ${pageId}] Failed to get story data for "${title}". ${error}`;
             logger.log(errMsg);
           }
+
+          if (signal.aborted) {
+            logger.log('aborting story before open', title);
+            return onDoneStory(new Error(`${title} aborted before open ${signal.reason}`), story);
+          }
+
           const testResults = await renderStory({
             snapshots: storyData,
             url: storyUrl,
@@ -132,10 +152,14 @@ function makeRenderStories({
     }
 
     function onDoneStory(resultsOrErr, story) {
-      spinner.text = updateSpinnerText(++doneStories, stories.length, story.config);
+      spinner.text = updateSpinnerText(++doneStories, totalStories, story.config);
       const title = getStoryBaselineName(story);
-      allTestResults.push({title, resultsOrErr});
-      return {title, resultsOrErr};
+      const result = {title, resultsOrErr, story};
+      allTestResults.push(result);
+
+      eventEmitter.emit('progress', {doneStories, totalStories});
+
+      return result;
     }
 
     async function prepareNewPage() {

package/src/renderStory.js

@@ -1,5 +1,7 @@
 'use strict';
+
 const throat = require('throat');
+const {EyesError} = require('@applitools/eyes');
 const {storyToCheckSettings, storyToOpenSettings} = require('./transformSettings');
 
 function makeRenderStory({
@@ -11,6 +13,7 @@ function makeRenderStory({
   appName,
   serverSettings,
   concurrency,
+  signal = new AbortController().signal,
 }) {
   const throttle = throat(storyDataGap);
   return function renderStory({story, snapshots, url}) {
@@ -24,7 +27,12 @@ function makeRenderStory({
 
     return timeItAsync(baselineName, async () => {
       const eyes = await openEyes({settings: openParams});
-      return new Promise((resolve, reject) => {
+      return new Promise(async (resolve, reject) => {
+        if (signal.aborted) {
+          return await abortStory();
+        } else {
+          signal.addEventListener('abort', abortStory);
+        }
         throttle(async () => {
           try {
             if (snapshots) {
@@ -44,6 +52,18 @@ function makeRenderStory({
             reject(err);
           }
         });
+
+        async function abortStory() {
+          logger.log('received abort signal for story', title);
+
+          // Inside core-base this will cause internal operations to be aborted
+          await eyes.abort({settings: {environments: checkParams.environments}});
+
+          // This will intentionally cause not to wait for results.
+          // Therefore there will be a "hanging" promise.
+          // But for the purpose of the addon, which is a long living process, it doesn't matter that we didn't stop the operation inside core.
+          reject(new EyesError(`${title} aborted after open ${signal.reason}`));
+        }
       });
     }).then(onDoneStory);
 

package/src/transformSettings.js

@@ -104,7 +104,6 @@ function storyToCheckSettings({story, url}) {
     useDom,
     enablePatterns,
     ignoreDisplacements,
-    fully,
     ignoreCaret,
     matchLevel,
     accessibilitySettings: accessibilityValidation

package/src/validateAndPopulateConfig.js

@@ -4,7 +4,7 @@ const fs = require('fs');
 const detect = require('detect-port');
 const {version: packageVersion} = require('../package.json');
 const {
-  missingApiKeyFailMsg,
+  MissingApiKeyError,
   missingAppNameAndPackageJsonFailMsg,
   missingAppNameInPackageJsonFailMsg,
   startStorybookFailMsg,
@@ -18,7 +18,7 @@ const utils = require('@applitools/utils');
 
 async function validateAndPopulateConfig({config, packagePath = '', logger = makeLogger()}) {
   if (!config.apiKey && !utils.general.getEnvValue('API_KEY')) {
-    throw new Error(missingApiKeyFailMsg);
+    throw new MissingApiKeyError();
   }
 
   const packageJsonPath = `${packagePath}/package.json`;
@@ -62,7 +62,8 @@ async function validateAndPopulateConfig({config, packagePath = '', logger = mak
     }
   }
 
-  config.agentId = `eyes-storybook/${packageVersion}`;
+  const agentName = config.isAddon ? 'eyes-storybook-addon' : 'eyes-storybook';
+  config.agentId = `${agentName}/${packageVersion}`;
 
   if (config.runInDocker) {
     config.puppeteerOptions = config.puppeteerOptions || {};