@applitools/eyes-storybook 3.34.1 → 3.34.2

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 ## Unreleased
 
 
+## 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/eyes-storybook",
-  "version": "3.34.1",
+  "version": "3.34.2",
   "description": "",
   "keywords": [
     "applitools",
@@ -73,15 +73,15 @@
     }
   },
   "dependencies": {
-    "@applitools/core": "2.5.10",
-    "@applitools/driver": "1.11.49",
+    "@applitools/core": "3.0.1",
+    "@applitools/driver": "1.11.51",
     "@applitools/functional-commons": "1.6.0",
-    "@applitools/logger": "1.1.52",
+    "@applitools/logger": "2.0.0",
     "@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.62",
+    "@applitools/test-server": "1.2.0",
+    "@applitools/ufg-client": "1.2.13",
+    "@applitools/utils": "1.3.36",
     "boxen": "4.2.0",
     "chalk": "3.0.0",
     "detect-port": "1.3.0",

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;
 
@@ -42,14 +41,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 +148,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({

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/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/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 {