@applitools/eyes-storybook 3.33.1 → 3.34.1

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 ## Unreleased
 
 
+## 3.34.1 - 2023/5/9
+
+### Features
+### Bug fixes
+- Fix the issue where storybook v6 will not start if storybook cli is being used
+
+## 3.34.0 - 2023/5/4
+
+### Features
+- Add the option to send a list of browsers from the component configuration
+### Bug fixes
+
 ## 3.33.1 - 2023/4/26
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/eyes-storybook",
-  "version": "3.33.1",
+  "version": "3.34.1",
   "description": "",
   "keywords": [
     "applitools",
@@ -73,14 +73,14 @@
     }
   },
   "dependencies": {
-    "@applitools/core": "2.5.5",
-    "@applitools/driver": "1.11.46",
+    "@applitools/core": "2.5.10",
+    "@applitools/driver": "1.11.49",
     "@applitools/functional-commons": "1.6.0",
     "@applitools/logger": "1.1.52",
     "@applitools/monitoring-commons": "1.0.19",
-    "@applitools/spec-driver-puppeteer": "1.1.57",
+    "@applitools/spec-driver-puppeteer": "1.1.60",
     "@applitools/test-server": "1.1.31",
-    "@applitools/ufg-client": "1.2.11",
+    "@applitools/ufg-client": "1.2.12",
     "@applitools/utils": "1.3.35",
     "boxen": "4.2.0",
     "chalk": "3.0.0",

package/src/eyesStorybook.js

@@ -112,7 +112,13 @@ async function eyesStorybook({
   });
   const pagePool = createPagePool({initPage, logger});
 
-  const doTakeDomSnapshots = async ({page, renderers, layoutBreakpoints, waitBeforeCapture}) => {
+  const doTakeDomSnapshots = async ({
+    page,
+    renderers,
+    layoutBreakpoints,
+    waitBeforeCapture,
+    disableBrowserFetching,
+  }) => {
     const driver = await new Driver({spec, driver: page, logger});
     const skipResources = client.getCachedResourceUrls();
     const result = await takeDomSnapshots({
@@ -125,6 +131,7 @@ async function eyesStorybook({
           renderers,
           waitBeforeCapture,
           skipResources,
+          disableBrowserFetching,
         },
       }),
       provides: {
@@ -175,7 +182,6 @@ async function eyesStorybook({
     const getStoryData = makeGetStoryData({
       logger,
       takeDomSnapshots: doTakeDomSnapshots,
-      waitBeforeCapture,
     });
     const closeSettings = {
       ...settings,

package/src/getStoriesWithConfig.js

@@ -13,7 +13,7 @@ function makeGetStoriesWithConfig({config}) {
   return function getStoriesWithConfig({stories, logger = console}) {
     const storiesWithTitle = addStoryTitleAndBaselineName(stories);
     if (!config.storyConfiguration) {
-      addConfigToStories({config, stories: storiesWithTitle});
+      addConfigToStories({config, stories: storiesWithTitle, isStoryConfig: false});
     } else {
       const storyConfigurations = Array.isArray(config.storyConfiguration)
         ? config.storyConfiguration
@@ -37,6 +37,7 @@ function makeGetStoriesWithConfig({config}) {
           addConfigToStories({
             config: transformBrowser(allowedProps(storyConfig)),
             stories: storiesSubset,
+            isStoryConfig: true,
           });
 
           remainingStories = remainingStories.filter(story => !storiesSubset.includes(story));
@@ -44,7 +45,7 @@ function makeGetStoriesWithConfig({config}) {
       }
 
       if (remainingStories.length) {
-        addConfigToStories({config: basicConfig, stories: remainingStories});
+        addConfigToStories({config: basicConfig, stories: remainingStories, isStoryConfig: true});
       }
     }
     return {
@@ -53,20 +54,21 @@ function makeGetStoriesWithConfig({config}) {
     };
   };
 
-  function addConfigToStories({config, stories}) {
+  function addConfigToStories({config, stories, isStoryConfig}) {
     const configs = config.fakeIE ? splitConfigsByBrowser(config) : [config];
     for (const config of configs) {
       for (const story of stories) {
-        addConfigToStoy({
+        addConfigToStory({
           story,
           config,
           isIE: shouldRenderIE(config),
+          isStoryConfig,
         });
       }
     }
   }
 
-  function addConfigToStoy({story, config, isIE}) {
+  function addConfigToStory({story, config, isIE, isStoryConfig}) {
     const storiesToUpdate = isIE ? storiesWithConfigIE : storiesWithConfig;
     storiesToUpdate.set(story.baselineName, {
       ...story,
@@ -74,6 +76,13 @@ function makeGetStoriesWithConfig({config}) {
         ...basicConfig,
         ...storiesToUpdate.get(story.baselineName)?.config,
         ...config,
+        ...transformBrowser({...story.parameters?.eyes}),
+        properties: [
+          ...(isStoryConfig ? basicConfig.properties || [] : []),
+          ...(storiesToUpdate.get(story.baselineName)?.config.properties || []),
+          ...(config.properties || []),
+          ...(story.parameters?.eyes?.properties || []),
+        ],
       },
     });
   }

package/src/getStoryData.js

@@ -10,15 +10,8 @@ const PAGE_EVALUATE_TIMEOUT = 120000;
 const DOM_SNAPSHOTS_TIMEOUT = 5 * 60 * 1000;
 const utils = require('@applitools/utils');
 
-function makeGetStoryData({logger, takeDomSnapshots, waitBeforeCapture, reloadPagePerStory}) {
-  return async function getStoryData({
-    story,
-    storyUrl,
-    page,
-    renderers,
-    waitBeforeStory,
-    layoutBreakpoints,
-  }) {
+function makeGetStoryData({logger, takeDomSnapshots, reloadPagePerStory}) {
+  return async function getStoryData({story, storyUrl, page}) {
     const title = getStoryBaselineName(story);
     logger.log(`getting data from story`, title);
 
@@ -50,7 +43,7 @@ function makeGetStoryData({logger, takeDomSnapshots, waitBeforeCapture, reloadPa
       await renderStoryLegacy();
     }
 
-    const wait = waitBeforeStory || waitBeforeCapture;
+    const wait = story.config.waitBeforeCapture;
     if (typeof wait === 'number') {
       utils.guard.isGreaterThenOrEqual(wait, 0, {name: 'waitBeforeCapture'});
     }
@@ -64,14 +57,15 @@ function makeGetStoryData({logger, takeDomSnapshots, waitBeforeCapture, reloadPa
     logger.log(`running takeDomSnapshot(s) for story ${title}`);
     const domSnapshotsPromise = takeDomSnapshots({
       page,
-      renderers,
-      layoutBreakpoints: eyesParameters ? eyesParameters.layoutBreakpoints : layoutBreakpoints,
+      renderers: story.config.renderers,
+      layoutBreakpoints: story.config.layoutBreakpoints,
       waitBeforeCapture: wait
         ? async () => {
             logger.log(`waiting before screenshot of ${title} ${wait}`);
             await waitFor(page, wait);
           }
         : undefined,
+      disableBrowserFetching: story.config.disableBrowserFetching,
     });
 
     const result = await ptimeoutWithError(

package/src/renderStories.js

@@ -58,17 +58,12 @@ function makeRenderStories({
         const story = stories[currIndex++];
         const storyUrl = getStoryUrl(story, storybookUrl);
         const title = getStoryBaselineName(story);
-        const {waitBeforeCapture} = (story.parameters && story.parameters.eyes) || {};
-
         try {
           let [error, storyData] = await presult(
             getStoryData({
               story,
               storyUrl,
-              renderers: story.config.renderers,
               page,
-              layoutBreakpoints: story.config.layoutBreakpoints,
-              waitBeforeStory: waitBeforeCapture || story.config.waitBeforeCapture,
             }),
           );
 
@@ -92,9 +87,7 @@ function makeRenderStories({
               getStoryData({
                 story,
                 storyUrl,
-                renderers: story.config.renderers,
                 page: newPageObj.page,
-                waitBeforeStory: waitBeforeCapture,
               }),
             );
             error = newError;
@@ -116,6 +109,7 @@ function makeRenderStories({
           });
           return onDoneStory(testResults, story);
         } catch (ex) {
+          logger.log(`[page ${pageId}] error while processing story "${title}". ${ex}`);
           return onDoneStory(ex, story);
         }
       }

package/src/renderStory.js

@@ -18,12 +18,6 @@ function makeRenderStory({
     const {name, kind, parameters, hasPlayFunction} = story;
     const baselineName = story.baselineName;
     const title = story.storyTitle;
-    const eyesParameters = (parameters && parameters.eyes) || {};
-    const eyesOptions = {
-      ...config,
-      ...eyesParameters,
-      properties: [...(config.properties || []), ...(eyesParameters.properties || [])],
-    };
     const {
       ignoreDisplacements,
       ignoreRegions,
@@ -58,7 +52,7 @@ function makeRenderStory({
       ignoreCaret,
       matchLevel,
       ignoreBaseline,
-    } = eyesOptions;
+    } = config;
 
     if (sizeMode) {
       console.log(deprecationWarning({deprecatedThing: "'sizeMode'", newThing: "'target'"}));

package/src/startStorybookServer.js

@@ -3,6 +3,11 @@ 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,
@@ -16,12 +21,18 @@ async function startStorybookServer({
 }) {
   const isWindows = process.platform.startsWith('win');
   let storybookPath, sbArg;
-
-  if (fs.existsSync(resolve(packagePath, 'node_modules/.bin/sb'))) {
-    storybookPath = resolve(packagePath, 'node_modules/.bin/sb');
-    sbArg = 'dev';
+  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 = resolve(packagePath, 'node_modules/.bin/start-storybook');
+    storybookPath = storybookPathV6;
   }
 
   const storybookConnector = new StorybookConnector({

package/src/utils/prepare-settings.js

@@ -2,7 +2,10 @@ function prepareTakeDomSnapshotsSettings({config, options}) {
   let result = {...options};
   result.layoutBreakpoints =
     result.layoutBreakpoints !== undefined ? result.layoutBreakpoints : config.layoutBreakpoints;
-  result.disableBrowserFetching = config.disableBrowserFetching;
+  result.disableBrowserFetching =
+    result.disableBrowserFetching !== undefined
+      ? result.disableBrowserFetching
+      : config.disableBrowserFetching;
   return result;
 }