@applitools/eyes-storybook 3.31.5 → 3.32.0

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 ## Unreleased
 
 
+## 3.32.0 - 2023/3/30
+
+### Features
+- Add support for configuration per subsets of stories
+### Bug fixes
+- Improve performance in DOM snapshot
+
 ## 3.31.5 - 2023/3/28
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/eyes-storybook",
-  "version": "3.31.5",
+  "version": "3.32.0",
   "description": "",
   "keywords": [
     "applitools",
@@ -73,7 +73,7 @@
     }
   },
   "dependencies": {
-    "@applitools/core": "2.4.3",
+    "@applitools/core": "2.4.4",
     "@applitools/driver": "1.11.37",
     "@applitools/functional-commons": "1.6.0",
     "@applitools/logger": "1.1.48",

package/src/checkSettingsParams.js

@@ -0,0 +1,29 @@
+'use strict';
+
+const checkSettingsParams = [
+  'browser',
+  'ignoreCaret',
+  'matchLevel',
+  'waitBeforeCapture',
+  'ignoreDisplacements',
+  'ignoreRegions',
+  'floatingRegions',
+  'layoutRegions',
+  'strictRegions',
+  'contentRegions',
+  'accessibilityRegions',
+  'accessibilityValidation',
+  'layoutBreakpoints',
+  'sendDom',
+  'useDom',
+  'enablePatterns',
+  'visualGridOptions',
+  'scriptHooks',
+  'target',
+  'region',
+  'selector',
+  'fully',
+  'fakeIE',
+];
+
+module.exports = {checkSettingsParams};

package/src/cli.js

@@ -7,7 +7,7 @@ const eyesStorybook = require('./eyesStorybook');
 const processResults = require('./processResults');
 const validateAndPopulateConfig = require('./validateAndPopulateConfig');
 const yargsOptions = require('./yargsOptions');
-const generateConfig = require('./generateConfig');
+const {generateConfig} = require('./generateConfig');
 const defaultConfig = require('./defaultConfig');
 const configDigest = require('./configDigest');
 const {makeTiming} = require('@applitools/monitoring-commons');

package/src/executeRenders.js

@@ -1,30 +1,32 @@
-const {shouldRenderIE} = require('./shouldRenderIE');
-
 async function executeRenders({
   timeItAsync,
   setTransitioningIntoIE,
   renderStories,
-  configs,
   pagePool,
-  stories,
+  storiesByBrowserWithConfig,
   logger,
   setRenderIE,
 }) {
   const results = [];
-  for (const config of configs) {
-    logger.verbose(`executing render story with ${JSON.stringify(config)}`);
-    if (shouldRenderIE(config)) {
-      setRenderIE(true);
-      setTransitioningIntoIE(true);
-      await pagePool.drain();
-      setTransitioningIntoIE(false);
-    }
-
-    const result = await timeItAsync('renderStories', () => renderStories(stories, config));
-
+  if (storiesByBrowserWithConfig.stories.length) {
+    logger.verbose(`executing render stories for non fakeIE browsers`);
+    const result = await timeItAsync('renderStories', () =>
+      renderStories(storiesByBrowserWithConfig.stories, false),
+    );
     results.push(...result);
   }
+  if (storiesByBrowserWithConfig.storiesWithIE.length) {
+    logger.verbose(`executing render stories for fakeIE`);
+    setRenderIE(true);
+    setTransitioningIntoIE(true);
+    await pagePool.drain();
+    setTransitioningIntoIE(false);
 
+    const result = await timeItAsync('renderStories', () =>
+      renderStories(storiesByBrowserWithConfig.storiesWithIE, true),
+    );
+    results.push(...result);
+  }
   return results;
 }
 

package/src/eyesStorybook.js

@@ -19,10 +19,10 @@ const {takeDomSnapshots} = require('@applitools/core');
 const {Driver} = require('@applitools/driver');
 const spec = require('@applitools/spec-driver-puppeteer');
 const {refineErrorMessage} = require('./errMessages');
-const {splitConfigsByBrowser} = require('./shouldRenderIE');
 const executeRenders = require('./executeRenders');
 const {makeCore} = require('@applitools/core');
 const {makeUFGClient} = require('@applitools/ufg-client');
+const makeGetStoriesWithConfig = require('./getStoriesWithConfig');
 
 const CONCURRENT_PAGES = 3;
 const MAX_RETRIES = 10;
@@ -65,19 +65,13 @@ async function eyesStorybook({
   if (config.puppeteerExtraHTTPHeaders) {
     await page.setExtraHTTPHeaders(config.puppeteerExtraHTTPHeaders);
   }
-  const core = await makeCore({
-    spec,
-    concurrency: testConcurrency,
-    logger,
-    agentId,
-  });
+  const core = await makeCore({spec, agentId, logger});
   const manager = await core.makeManager({
-    spec,
-    concurrency: testConcurrency,
-    agentId,
-    logger,
-    core,
     type: 'ufg',
+    settings: {
+      concurrency: testConcurrency,
+    },
+    logger,
   });
 
   const settings = {
@@ -88,6 +82,8 @@ async function eyesStorybook({
   };
   const [error, account] = await presult(core.getAccountInfo({settings, logger}));
 
+  const getStoriesWithConfig = makeGetStoriesWithConfig({config});
+
   if (error && error.message && error.message.includes('Unauthorized(401)')) {
     const failMsg = 'Incorrect API Key';
     logger.log(failMsg);
@@ -161,7 +157,18 @@ async function eyesStorybook({
       config,
     });
 
-    logger.log(`starting to run ${storiesIncludingVariations.length} stories`);
+    logger.log(
+      `there are ${storiesIncludingVariations.length} stories after filtering and adding variations `,
+    );
+
+    const storiesByBrowserWithConfig = getStoriesWithConfig({
+      stories: storiesIncludingVariations,
+      logger,
+    });
+
+    logger.log(
+      `starting to run ${storiesByBrowserWithConfig.stories.length} normal stories ("non fake IE") and ${storiesByBrowserWithConfig.storiesWithIE.length} "fake IE stories"`,
+    );
 
     const getStoryData = makeGetStoryData({
       logger,
@@ -197,14 +204,13 @@ async function eyesStorybook({
     });
 
     logger.log('finished creating functions');
-    const configs = config.fakeIE ? splitConfigsByBrowser(config) : [config];
+
     const [error, results] = await presult(
       executeRenders({
         renderStories,
         setRenderIE,
         setTransitioningIntoIE,
-        configs,
-        stories: storiesIncludingVariations,
+        storiesByBrowserWithConfig,
         pagePool,
         logger,
         timeItAsync,

package/src/generateConfig.js

@@ -40,7 +40,7 @@ function generateConfig({argv = {}, defaultConfig = {}, externalConfigParams = [
     result.waitBeforeCapture = Number(result.waitBeforeCapture);
   }
 
-  if (result.showLogs === '1') {
+  if (result.showLogs === '1' || process.env.APPLITOOLS_SHOW_LOGS === 'true') {
     result.showLogs = true;
   }
 
@@ -77,18 +77,31 @@ function generateConfig({argv = {}, defaultConfig = {}, externalConfigParams = [
     );
   }
 
-  if (!result.browser) {
+  transformBrowser(result);
+  if (!result.renderers) {
     result.renderers = [{name: 'chrome', width: 1024, height: 768}];
-  } else {
+  }
+
+  return result;
+}
+
+function transformBrowser(result) {
+  if (result.browser) {
     result.renderers = [];
     if (!Array.isArray(result.browser)) {
       result.browser = [result.browser];
     }
     result.renderers = result.browser.map(browser => {
-      return browser.deviceName ? {chromeEmulationInfo: browser} : browser;
+      if (browser.deviceName) {
+        return {chromeEmulationInfo: browser};
+      } else if (!browser.name) {
+        return {...browser, name: 'chrome'};
+      } else {
+        return browser;
+      }
     });
   }
   delete result.browser;
   return result;
 }
-module.exports = generateConfig;
+module.exports = {generateConfig, transformBrowser};

package/src/getStoriesWithConfig.js

@@ -0,0 +1,102 @@
+const {splitConfigsByBrowser, shouldRenderIE} = require('./shouldRenderIE');
+const getStoryTitle = require('./getStoryTitle');
+const {transformBrowser} = require('./generateConfig');
+const {checkSettingsParams} = require('./checkSettingsParams');
+const getStoryBaselineName = require('./getStoryBaselineName');
+
+function makeGetStoriesWithConfig({config}) {
+  const storiesWithConfig = new Map();
+  const storiesWithConfigIE = new Map();
+  const basicConfig = {...config};
+  delete basicConfig.storyConfiguration;
+
+  return function getStoriesWithConfig({stories, logger = console}) {
+    const storiesWithTitle = addStoryTitleAndBaselineName(stories);
+    if (!config.storyConfiguration) {
+      addConfigToStories({config, stories: storiesWithTitle});
+    } else {
+      const storyConfigurations = Array.isArray(config.storyConfiguration)
+        ? config.storyConfiguration
+        : [config.storyConfiguration];
+      let remainingStories = [...storiesWithTitle];
+      for (const storyConfig of storyConfigurations) {
+        const filterStories = storyConfig.stories;
+        delete storyConfig.stories;
+
+        if (filterStories) {
+          const storiesSubset = storiesWithTitle
+            .filter(story => {
+              try {
+                return filterStories(story);
+              } catch (err) {
+                logger.log(`An error was thrown from substory function: ${err}`);
+                return;
+              }
+            })
+            .filter(Boolean);
+          addConfigToStories({
+            config: transformBrowser(allowedProps(storyConfig)),
+            stories: storiesSubset,
+          });
+
+          remainingStories = remainingStories.filter(story => !storiesSubset.includes(story));
+        }
+      }
+
+      if (remainingStories.length) {
+        addConfigToStories({config: basicConfig, stories: remainingStories});
+      }
+    }
+    return {
+      stories: Array.from(storiesWithConfig.values()),
+      storiesWithIE: Array.from(storiesWithConfigIE.values()),
+    };
+  };
+
+  function addConfigToStories({config, stories}) {
+    const configs = config.fakeIE ? splitConfigsByBrowser(config) : [config];
+    for (const config of configs) {
+      for (const story of stories) {
+        addConfigToStoy({
+          story,
+          config,
+          isIE: shouldRenderIE(config),
+        });
+      }
+    }
+  }
+
+  function addConfigToStoy({story, config, isIE}) {
+    const storiesToUpdate = isIE ? storiesWithConfigIE : storiesWithConfig;
+    storiesToUpdate.set(story.baselineName, {
+      ...story,
+      config: {
+        ...basicConfig,
+        ...storiesToUpdate.get(story.baselineName)?.config,
+        ...config,
+      },
+    });
+  }
+
+  function addStoryTitleAndBaselineName(stories) {
+    return stories.map(story => {
+      return {
+        ...story,
+        storyTitle: getStoryTitle(story),
+        baselineName: getStoryBaselineName(story),
+      };
+    });
+  }
+
+  function allowedProps(config) {
+    const configKeys = Object.keys(config);
+    for (const key of configKeys) {
+      if (!checkSettingsParams.includes(key)) {
+        delete config[key];
+      }
+    }
+    return config;
+  }
+}
+
+module.exports = makeGetStoriesWithConfig;

package/src/renderStories.js

@@ -3,7 +3,6 @@ const getStoryUrl = require('./getStoryUrl');
 const getStoryBaselineName = require('./getStoryBaselineName');
 const ora = require('ora');
 const {presult} = require('@applitools/functional-commons');
-const {shouldRenderIE} = require('./shouldRenderIE');
 
 function makeRenderStories({
   getStoryData,
@@ -17,7 +16,7 @@ function makeRenderStories({
 }) {
   let newPageIdToAdd;
 
-  return async function renderStories(stories, config) {
+  return async function renderStories(stories, isIE) {
     let doneStories = 0;
     const allTestResults = [];
     let allStoriesPromise = Promise.resolve();
@@ -66,7 +65,7 @@ function makeRenderStories({
             getStoryData({
               story,
               storyUrl,
-              renderers: config.renderers,
+              renderers: story.config.renderers,
               page,
               waitBeforeStory: waitBeforeCapture,
             }),
@@ -92,7 +91,7 @@ function makeRenderStories({
               getStoryData({
                 story,
                 storyUrl,
-                renderers: config.renderers,
+                renderers: story.config.renderers,
                 page: newPageObj.page,
                 waitBeforeStory: waitBeforeCapture,
               }),
@@ -113,7 +112,6 @@ function makeRenderStories({
             snapshots: storyData,
             url: storyUrl,
             story,
-            config,
           });
           return onDoneStory(testResults, story);
         } catch (ex) {
@@ -134,11 +132,11 @@ function makeRenderStories({
     }
 
     function updateSpinnerText(number, length) {
-      return `Done ${number} stories out of ${length} ${shouldRenderIE(config) ? '(IE)' : ''}`;
+      return `Done ${number} stories out of ${length} ${isIE ? '(IE)' : ''}`;
     }
 
     function onDoneStory(resultsOrErr, story) {
-      spinner.text = updateSpinnerText(++doneStories, stories.length);
+      spinner.text = updateSpinnerText(++doneStories, stories.length, story.config);
       const title = getStoryBaselineName(story);
       allTestResults.push({title, resultsOrErr});
       return {title, resultsOrErr};

package/src/renderStory.js

@@ -1,6 +1,4 @@
 'use strict';
-const getStoryTitle = require('./getStoryTitle');
-const getStoryBaselineName = require('./getStoryBaselineName');
 const {deprecationWarning} = require('./errMessages');
 const throat = require('throat');
 
@@ -15,10 +13,11 @@ function makeRenderStory({
   serverSettings,
 }) {
   const throttle = throat(storyDataGap);
-  return function renderStory({config, story, snapshots, url}) {
+  return function renderStory({story, snapshots, url}) {
+    const config = story.config;
     const {name, kind, parameters, hasPlayFunction} = story;
-    const baselineName = getStoryBaselineName({name, kind, parameters});
-    const title = getStoryTitle({name, kind, parameters});
+    const baselineName = story.baselineName;
+    const title = story.storyTitle;
     const eyesParameters = (parameters && parameters.eyes) || {};
     const eyesOptions = {
       ...config,
@@ -38,7 +37,6 @@ function makeRenderStory({
       target,
       fully,
       selector,
-      region,
       tag,
       properties,
       ignore,
@@ -111,10 +109,8 @@ function makeRenderStory({
       renderers,
       hooks: scriptHooks,
       sizeMode,
-      target,
+      region: target === 'region' ? selector : undefined,
       fully,
-      selector,
-      region,
       tag,
       sendDom,
       ufgOptions: visualGridOptions,
@@ -134,6 +130,23 @@ function makeRenderStory({
         : undefined,
     };
 
+    return timeItAsync(baselineName, async () => {
+      const {checkAndClose} = await openEyes({settings: openParams});
+      return new Promise((resolve, reject) => {
+        throttle(async () => {
+          try {
+            const checkResults = await checkAndClose({
+              settings: {...checkParams, ...closeSettings, throwEx: false},
+              target: snapshots,
+            });
+            resolve(checkResults);
+          } catch (ex) {
+            reject(ex);
+          }
+        });
+      });
+    }).then(onDoneStory);
+
     function mapAccessibilityRegions(accessabilityRegions) {
       if (!accessabilityRegions) return;
       if (!Array.isArray(accessabilityRegions)) accessabilityRegions = [accessabilityRegions];
@@ -196,23 +209,6 @@ function makeRenderStory({
       }
     }
 
-    return timeItAsync(baselineName, async () => {
-      const {checkAndClose} = await openEyes({settings: openParams});
-      return new Promise((resolve, reject) => {
-        throttle(async () => {
-          try {
-            const checkResults = await checkAndClose({
-              settings: {...checkParams, ...closeSettings, throwEx: false},
-              target: snapshots,
-            });
-            resolve(checkResults);
-          } catch (ex) {
-            reject(ex);
-          }
-        });
-      });
-    }).then(onDoneStory);
-
     function onDoneStory(results) {
       logger.log('finished story', baselineName, 'in', performance[baselineName]);
       return results;