@applitools/eyes-storybook 3.25.2 → 3.27.0

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 ## Unreleased
 
 
+## 3.27.0 - 2021/12/6
+
+- support custom properties and query params
+- remove `queryParams` api from story and global config
+
+## 3.26.1 - 2021/11/28
+
+- add custom test properties to stories with query params
+
+## 3.26.0 - 2021/11/26
+
+- add support for `queryParams` config property
+- updated to @applitools/driver@1.3.5 (from 1.2.7)
+- updated to @applitools/eyes-puppeteer@1.9.0 (from 1.8.5)
+- updated to @applitools/eyes-sdk-core@12.24.5 (from 12.23.24)
+- updated to @applitools/logger@1.0.6 (from 1.0.5)
+- updated to @applitools/test-server@1.0.7 (from 1.0.6)
+- updated to @applitools/visual-grid-client@15.8.49 (from 15.8.43)
+
+ ## 3.25.3 - 2021/11/1
+
+- add a retry mechanism for cases we get 0 stories
+
 ## 3.25.2 - 2021/10/30
 
 - replace legacy logger construction with new

package/README.md

@@ -423,10 +423,9 @@ storiesOf('Some kind', module)
 
 ### `variations`
 
-An array of string values, which specifies which variations to add for this story. For each value, an additional visual test will be executed for the component. It will have the same name only with a `[<variation name>]` suffix, and when the component is loaded, the URL will have an additional param: `eyes-variation=<variation name>`.
+An array of object values, which specifies which variations to add for this story. For each value, an additional visual test will be executed for the component. Each variation could contain `queryParams` and `properties` fields to specifies custom query parameters and eyes properties respectfully. Variation tests will have the same name.
 
-This can accommodate many use cases, for example RTL (right to left).
-It's now possible for the component to render its variation version when the relevant URL param is present. For Example, here's a storybook that handles an RTL variation:
+This can accommodate many use cases, for example `@storybook/addon-contexts`. With addons like this it is possible to render components in a different way depends on query parameters in URL. For Example, here's a storybook that handles an RTL variation:
 
 ```js
 const isRTL = new URL(window.location).searchParams.get('eyes-variation') === 'RTL';
@@ -443,7 +442,7 @@ storiesOf('Components that support RTL', module)
         <span>I am visually perfect!</span>
         <span>{isRTL ? ' and rendered right to left as well :)' : ''}</span>
       </div>,
-    {eyes: {variations: ['RTL']}}
+    {eyes: {variations: [{queryParams: {'eyes-variation': 'RTL'}, properties: {name: 'isRTL', value: 'true'}, {properties: {name: 'isRTL', value: 'false'}}]}}
   )
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/eyes-storybook",
-  "version": "3.25.2",
+  "version": "3.27.0",
   "description": "",
   "engines": {
     "node": ">=8.6.0"
@@ -25,10 +25,12 @@
     "storybook": "start-storybook -c test/fixtures/appWithStorybook -p 9001 -s test/fixtures",
     "storybook:jslayout": "start-storybook -c test/fixtures/jsLayoutStorybookLocal -p 9001 -s test/fixtures",
     "storybook:heavy": "start-storybook -c test/fixtures/heavyStorybook -p 9002 -s test/fixtures",
+    "storybook:zeroStories": "start-storybook -c test/fixtures/zeroStoriesRetry -p 9003 -s test/fixtures",
     "eyes-storybook": "node bin/eyes-storybook.js -f test/fixtures/applitools.config.js",
     "eyes-storybook:jslayout": "node bin/eyes-storybook.js -f test/e2e/happy-config/layout-breakpoints-local.config.js",
     "eyes-storybook:heavy": "node bin/eyes-storybook.js -f test/fixtures/heavyStorybook/applitools.config.js",
     "eyes-storybook:configured": "node bin/eyes-storybook.js -f scripts/preconfigured.config.js",
+    "eyes-storybook:zeroStories": "node bin/eyes-storybook.js -f test/fixtures/zeroStoriesRetry/applitools.config.js",
     "changelog": "git changelog -x -p -f v$npm_package_version > History.md && git add ./History.md && git commit -am 'changelog'",
     "changelog:init": "git config changelog.format \"* %s [[%h]($(echo $npm_package_repository_url|cut -d+ -f2|cut -d. -f1-2)/commit/%H)]\"",
     "changelog:install": "sudo apt-get install git-extras",
@@ -56,14 +58,14 @@
     "directory": "packages/eyes-storybook"
   },
   "dependencies": {
-    "@applitools/driver": "1.2.7",
-    "@applitools/eyes-puppeteer": "1.8.5",
-    "@applitools/eyes-sdk-core": "12.23.24",
+    "@applitools/driver": "1.3.5",
+    "@applitools/eyes-sdk-core": "12.24.5",
     "@applitools/functional-commons": "1.6.0",
-    "@applitools/logger": "1.0.5",
+    "@applitools/logger": "1.0.6",
     "@applitools/monitoring-commons": "1.0.19",
-    "@applitools/test-server": "1.0.6",
-    "@applitools/visual-grid-client": "15.8.43",
+    "@applitools/spec-driver-puppeteer": "1.1.0",
+    "@applitools/test-server": "1.0.7",
+    "@applitools/visual-grid-client": "15.8.49",
     "boxen": "4.2.0",
     "chalk": "3.0.0",
     "detect-port": "1.3.0",
@@ -77,7 +79,7 @@
   "devDependencies": {
     "@applitools/scripts": "^1.0.1",
     "@applitools/sdk-release-kit": "0.13.4",
-    "@applitools/sdk-shared": "0.9.7",
+    "@applitools/sdk-shared": "0.9.9",
     "@applitools/snaptdout": "^1.0.1",
     "@applitools/utils": "1.2.4",
     "@storybook/addon-options": "^5.2.8",

package/src/addVariationStories.js

@@ -1,54 +1,104 @@
 'use strict';
 
 function addVariationStories({stories, config}) {
-  const globalVariationFunc =
-    typeof config.variations === 'function' ? config.variations : undefined;
-  const globalVariationArray = Array.isArray(config.variations) ? config.variations : undefined;
-  const storiesToAddVariations = stories.filter(getStoryVariations);
+  const defaultStories = [];
+  const variationStories = {};
+  for (const story of stories) {
+    const variations = getStoryVariations(story, config);
+    if (variations) {
+      for (const variation of variations) {
+        const variationKey = stringifyVariation(variation);
+        const variationStoriesArray =
+          variationStories[variationKey] || (variationStories[variationKey] = []);
+        const variationStory = {...story};
+        if (variation.queryParams || variation.properties) {
+          variationStory.parameters = addVariation(story.parameters, variation);
+        }
+        variationStoriesArray.push(variationStory);
+      }
+    } else {
+      defaultStories.push(story);
+    }
+  }
 
-  const storiesByVariation = {};
+  return Object.values(variationStories).reduce((allStories, variationStories) => {
+    return allStories.concat(variationStories);
+  }, defaultStories);
+}
 
-  for (const story of storiesToAddVariations) {
-    const variations = getStoryVariations(story);
-    if (!Array.isArray(variations)) {
+function getStoryVariations(story, config) {
+  if (story.parameters && story.parameters.eyes && story.parameters.eyes.variations) {
+    if (!Array.isArray(story.parameters.eyes.variations)) {
       throw new Error('variations should be an array');
     }
+    return normalizeVariations(story.parameters.eyes.variations);
+  }
 
-    for (const variation of variations) {
-      const variationArr = storiesByVariation[variation] || (storiesByVariation[variation] = []);
-      variationArr.push({
-        ...story,
-        parameters: addFlagToParameters(story.parameters, variation),
-      });
+  if (config.variations) {
+    if (Array.isArray(config.variations)) {
+      return normalizeVariations(config.variations);
+    } else if (typeof config.variations === 'function') {
+      const variations = config.variations(story);
+      if (variations) {
+        if (!Array.isArray(variations)) {
+          throw new Error('global variations should be a function that returns array');
+        }
+        return normalizeVariations(variations);
+      }
+    } else {
+      throw new Error('global variations should be an array or a function that returns array');
     }
   }
+}
 
-  return Object.keys(storiesByVariation).reduce((storiesWithVariations, variation) => {
-    return storiesWithVariations.concat(storiesByVariation[variation]);
-  }, stories);
-
-  function getStoryVariations(story) {
-    if (story.parameters && story.parameters.eyes && story.parameters.eyes.variations) {
-      return story.parameters.eyes.variations;
+function normalizeVariations(variations) {
+  let shouldHasDefault = false; // default variation is one without query params
+  const normalizedVariations = variations.map(variation => {
+    if (typeof variation === 'string') {
+      shouldHasDefault = true;
+      return {
+        queryParams: {'eyes-variation': variation},
+        properties: [{name: 'eyes-variation', value: variation}],
+      };
     }
-
-    if (globalVariationFunc) {
-      return globalVariationFunc(story);
+    if (variation.queryParams && (!variation.properties || variation.properties.length === 0)) {
+      return {
+        ...variation,
+        properties: Object.entries(variation.queryParams).map(([name, value]) => ({name, value})),
+      };
     }
+    return variation;
+  });
 
-    if (globalVariationArray) return globalVariationArray;
+  // if it should has default variation and it is not already there
+  if (shouldHasDefault && !normalizedVariations.some(variation => !variation.queryParams)) {
+    normalizedVariations.unshift({});
   }
+
+  return normalizedVariations;
 }
 
-function addFlagToParameters(parameters, variation) {
-  return parameters
-    ? {
-        ...parameters,
-        eyes: parameters.eyes
-          ? {...parameters.eyes, variationUrlParam: variation}
-          : {variationUrlParam: variation},
-      }
-    : {eyes: {variationUrlParam: variation}};
+function stringifyVariation(variation) {
+  if (!variation.queryParams) return '';
+  return Object.keys(variation.queryParams)
+    .sort()
+    .map(name => `${name}=${variation.queryParams[name]}`)
+    .join('&');
+}
+
+function addVariation(parameters, variation) {
+  parameters = {...parameters};
+  parameters.eyes = {...parameters.eyes};
+  if (variation.queryParams) {
+    parameters.eyes.queryParams = variation.queryParams;
+  }
+  if (variation.properties) {
+    parameters.eyes.properties = [
+      ...(parameters.eyes.properties || []),
+      ...(variation.properties || []),
+    ];
+  }
+  return parameters;
 }
 
 module.exports = addVariationStories;

package/src/eyesStorybook.js

@@ -2,7 +2,7 @@
 const puppeteer = require('puppeteer');
 const getStories = require('../dist/getStories');
 const {makeVisualGridClient} = require('@applitools/visual-grid-client');
-const {presult} = require('@applitools/functional-commons');
+const {presult, delay} = require('@applitools/functional-commons');
 const chalk = require('./chalkify');
 const makeInitPage = require('./initPage');
 const makeRenderStory = require('./renderStory');
@@ -18,12 +18,14 @@ const createPagePool = require('./pagePool');
 const getClientAPI = require('../dist/getClientAPI');
 const {takeDomSnapshots} = require('@applitools/eyes-sdk-core');
 const {Driver} = require('@applitools/driver');
-const spec = require('@applitools/eyes-puppeteer/dist/spec-driver');
+const spec = require('@applitools/spec-driver-puppeteer');
 const {refineErrorMessage} = require('./errMessages');
 const {splitConfigsByBrowser} = require('./shouldRenderIE');
 const executeRenders = require('./executeRenders');
 
 const CONCURRENT_PAGES = 3;
+const MAX_RETRIES = 10;
+const RETRY_INTERVAL = 1000;
 
 async function eyesStorybook({
   config,
@@ -76,14 +78,14 @@ async function eyesStorybook({
   });
   const pagePool = createPagePool({initPage, logger});
 
-  const doTakeDomSnapshots = async ({page, layoutBreakpoints, waitBeforeCapture}) => {
-    const driver = new Driver({spec, driver: page, logger});
+  const doTakeDomSnapshots = async ({page, browser, layoutBreakpoints, waitBeforeCapture}) => {
+    const driver = await new Driver({spec, driver: page, logger}).init();
     const skipResources = getResourceUrlsInCache();
     const result = await takeDomSnapshots({
       logger,
       driver,
       breakpoints: layoutBreakpoints !== undefined ? layoutBreakpoints : config.layoutBreakpoints,
-      browsers: config.browser || [true], // this is a hack, since takeDomSnapshots expects an array. And VGC has a default in case browser is not specified. So we just need an array with length of 1 here.
+      browsers: browser || [true], // this is a hack, since takeDomSnapshots expects an array. And VGC has a default in case browser is not specified. So we just need an array with length of 1 here.
       skipResources,
       showLogs: !!config.showLogs,
       disableBrowserFetching: !!config.disableBrowserFetching,
@@ -114,7 +116,10 @@ async function eyesStorybook({
     );
 
     const filteredStories = filterStories({stories, config});
-    const storiesIncludingVariations = addVariationStories({stories: filteredStories, config});
+    const storiesIncludingVariations = addVariationStories({
+      stories: filteredStories,
+      config,
+    });
 
     logger.log(`starting to run ${storiesIncludingVariations.length} stories`);
 
@@ -203,9 +208,9 @@ async function eyesStorybook({
       spinner.fail(failMsg);
       throw new Error();
     }
-    const [getStoriesErr, stories] = await presult(
-      page.evaluate(getStories, {timeout: readStoriesTimeout}),
-    );
+
+    const [getStoriesErr, stories] = await readStoriesWithRetry(MAX_RETRIES);
+
     if (getStoriesErr) {
       logger.log('Error in getStories:', getStoriesErr);
       const failMsg = refineErrorMessage({
@@ -257,6 +262,19 @@ async function eyesStorybook({
   function getTransitiongIntoIE() {
     return transitioning;
   }
+
+  async function readStoriesWithRetry(remainingRetries) {
+    const [getStoriesErr, stories] = await presult(
+      page.evaluate(getStories, {timeout: readStoriesTimeout}),
+    );
+    if (getStoriesErr || stories.length > 0 || remainingRetries == 0) {
+      return [getStoriesErr, stories];
+    } else {
+      logger.log(`Got 0 stories, retrying to read stories... ${remainingRetries - 1} are left`);
+      await delay(RETRY_INTERVAL);
+      return await readStoriesWithRetry(remainingRetries - 1);
+    }
+  }
 }
 
 module.exports = eyesStorybook;

package/src/getStoryBaselineName.js

@@ -0,0 +1,19 @@
+'use strict';
+const getStoryTitle = require('./getStoryTitle');
+
+function getStoryBaselineName({name, kind, parameters}) {
+  const storyTitle = getStoryTitle({name, kind, parameters});
+  const queryParams = parameters && parameters.eyes && parameters.eyes.queryParams;
+  if (!queryParams) return storyTitle;
+  const customQueryParams = {...queryParams};
+  delete customQueryParams['eyes-variation'];
+  if (Object.keys(customQueryParams).length === 0) return storyTitle;
+
+  const queryParamsString = Object.entries(customQueryParams)
+    .map(([name, value]) => `${name}=${value}`)
+    .join('&');
+
+  return `${storyTitle} [${queryParamsString}]`;
+}
+
+module.exports = getStoryBaselineName;

package/src/getStoryData.js

@@ -3,26 +3,21 @@ const {presult} = require('@applitools/functional-commons');
 const {ArgumentGuard} = require('@applitools/eyes-sdk-core');
 const renderStoryWithClientAPI = require('../dist/renderStoryWithClientAPI');
 const runRunBeforeScript = require('../dist/runRunBeforeScript');
-const getStoryTitle = require('./getStoryTitle');
+const getStoryBaselineName = require('./getStoryBaselineName');
 const {URL} = require('url');
 const runRunAfterScript = require('../dist/runRunAfterScript');
 const waitFor = require('./waitFor');
 
 function makeGetStoryData({logger, takeDomSnapshots, waitBeforeCapture, reloadPagePerStory}) {
-  return async function getStoryData({story, storyUrl, page, waitBeforeStory}) {
-    const title = getStoryTitle(story);
+  return async function getStoryData({story, storyUrl, page, browser, waitBeforeStory}) {
+    const title = getStoryBaselineName(story);
     logger.log(`getting data from story`, title);
 
     const eyesParameters = story.parameters && story.parameters.eyes;
     if (story.isApi && !reloadPagePerStory) {
-      const actualVariationParam = await getEyesVariationParam(page);
-      const expectedVariationUrlParam = eyesParameters
-        ? eyesParameters.variationUrlParam
-        : undefined;
-      if (
-        (!actualVariationParam && !expectedVariationUrlParam) ||
-        actualVariationParam === expectedVariationUrlParam
-      ) {
+      const currentUrl = page.url();
+      const expectedQueryParams = eyesParameters ? eyesParameters.queryParams : undefined;
+      if (urlQueryParamsEquals(currentUrl, expectedQueryParams)) {
         const err = await page.evaluate(renderStoryWithClientAPI, story.index);
         err && handleRenderStoryError(err);
       } else {
@@ -49,8 +44,9 @@ function makeGetStoryData({logger, takeDomSnapshots, waitBeforeCapture, reloadPa
 
     logger.log(`running takeDomSnapshot(s) for story ${title}`);
 
-    const snapshots = await takeDomSnapshots({
+    const result = await takeDomSnapshots({
       page,
+      browser,
       layoutBreakpoints: eyesParameters ? eyesParameters.layoutBreakpoints : undefined,
       waitBeforeCapture: wait
         ? async () => {
@@ -67,7 +63,7 @@ function makeGetStoryData({logger, takeDomSnapshots, waitBeforeCapture, reloadPa
     }
 
     logger.log(`done getting data from story`, title);
-    return snapshots;
+    return result;
 
     async function renderStoryLegacy() {
       logger.log(`getting data from story ${storyUrl}`);
@@ -78,12 +74,28 @@ function makeGetStoryData({logger, takeDomSnapshots, waitBeforeCapture, reloadPa
       }
     }
 
-    async function getEyesVariationParam() {
+    function urlQueryParamsEquals(url, expectedQueryParams) {
       try {
-        return new URL(await page.url()).searchParams.get('eyes-variation');
-      } catch (ex) {
-        logger.log('failed to get url from page (in need of eyes-variation param)');
+        url = new URL(url);
+      } catch (err) {
+        logger.error('Error during parsing page url', err);
+        return false;
       }
+
+      expectedQueryParams = expectedQueryParams || {};
+      const expectedQueryParamNames = Object.keys(expectedQueryParams);
+      const actualQueryParamNames = [];
+      for (const [name, value] of url.searchParams) {
+        if (['eyes-storybook', 'selectedKind', 'selectedStory'].includes(name)) continue;
+        if (!expectedQueryParams.hasOwnProperty(name) || !expectedQueryParams[name] === value) {
+          return false;
+        }
+        actualQueryParamNames.push(name);
+      }
+
+      if (actualQueryParamNames.length !== expectedQueryParamNames.length) return false;
+
+      return true;
     }
 
     // TODO (amit): handle this error in the caller (probably renderStories)

package/src/getStoryTitle.js

@@ -1,10 +1,10 @@
 'use strict';
 
 function getStoryTitle({name, kind, parameters}) {
-  const variationUrlParam = parameters && parameters.eyes && parameters.eyes.variationUrlParam;
-  const urlSuffix = variationUrlParam ? ` [${variationUrlParam}]` : '';
+  const queryParams = (parameters && parameters.eyes && parameters.eyes.queryParams) || {};
+  const eyesVariation = queryParams['eyes-variation'];
 
-  return `${kind}: ${name}${urlSuffix}`;
+  return `${kind}: ${name}${eyesVariation ? ` [${eyesVariation}]` : ''}`;
 }
 
 module.exports = getStoryTitle;

package/src/getStoryUrl.js

@@ -2,12 +2,15 @@
 const getIframeUrl = require('./getIframeUrl');
 
 function getStoryUrl({name, kind, parameters}, baseUrl) {
-  const variationUrlParam = parameters && parameters.eyes && parameters.eyes.variationUrlParam;
-  const variation = variationUrlParam ? `&eyes-variation=${variationUrlParam}` : '';
+  const queryParams = (parameters && parameters.eyes && parameters.eyes.queryParams) || {};
+  const queryString = Object.entries(queryParams).reduce(
+    (queryString, [name, value]) => queryString + `&${name}=${value}`,
+    '',
+  );
 
   return `${getIframeUrl(baseUrl)}&selectedKind=${encodeURIComponent(
     kind,
-  )}&selectedStory=${encodeURIComponent(name)}${variation}`;
+  )}&selectedStory=${encodeURIComponent(name)}${queryString}`;
 }
 
 module.exports = getStoryUrl;

package/src/renderStories.js

@@ -1,6 +1,6 @@
 'use strict';
 const getStoryUrl = require('./getStoryUrl');
-const getStoryTitle = require('./getStoryTitle');
+const getStoryBaselineName = require('./getStoryBaselineName');
 const ora = require('ora');
 const {presult} = require('@applitools/functional-commons');
 const {shouldRenderIE} = require('./shouldRenderIE');
@@ -61,7 +61,7 @@ function makeRenderStories({
       async function processStory() {
         const story = stories[currIndex++];
         const storyUrl = getStoryUrl(story, storybookUrl);
-        const title = getStoryTitle(story);
+        const title = getStoryBaselineName(story);
         const {waitBeforeCapture} = (story.parameters && story.parameters.eyes) || {};
 
         try {
@@ -69,6 +69,7 @@ function makeRenderStories({
             getStoryData({
               story,
               storyUrl,
+              browser: config.browser,
               page,
               waitBeforeStory: waitBeforeCapture,
             }),
@@ -89,6 +90,7 @@ function makeRenderStories({
               getStoryData({
                 story,
                 storyUrl,
+                browser: config.browser,
                 page: newPageObj.page,
                 waitBeforeStory: waitBeforeCapture,
               }),
@@ -107,7 +109,8 @@ function makeRenderStories({
           }
 
           const testResults = await renderStory({
-            snapshot: storyData,
+            snapshot: storyData.snapshots,
+            cookies: storyData.cookies,
             url: storyUrl,
             story,
             config,
@@ -139,7 +142,7 @@ function makeRenderStories({
 
     function onDoneStory(resultsOrErr, story) {
       spinner.text = updateSpinnerText(++doneStories, stories.length);
-      const title = getStoryTitle(story);
+      const title = getStoryBaselineName(story);
       allTestResults.push({title, resultsOrErr});
       return {title, resultsOrErr};
     }

package/src/renderStory.js

@@ -1,12 +1,19 @@
 'use strict';
 const getStoryTitle = require('./getStoryTitle');
+const getStoryBaselineName = require('./getStoryBaselineName');
 const {deprecationWarning} = require('@applitools/eyes-sdk-core').GeneralUtils;
 
 function makeRenderStory({logger, testWindow, performance, timeItAsync}) {
   return function renderStory({config, story, snapshot, url}) {
     const {name, kind, parameters} = story;
+    const baselineName = getStoryBaselineName({name, kind, parameters});
     const title = getStoryTitle({name, kind, parameters});
-    const eyesOptions = Object.assign({}, config, (parameters && parameters.eyes) || {});
+    const eyesParameters = (parameters && parameters.eyes) || {};
+    const eyesOptions = {
+      ...config,
+      ...eyesParameters,
+      properties: [...(config.properties || []), ...(eyesParameters.properties || [])],
+    };
     const {
       ignoreDisplacements,
       ignoreRegions,
@@ -41,16 +48,19 @@ function makeRenderStory({logger, testWindow, performance, timeItAsync}) {
       ignoreRegionsBackCompat = ignore;
     }
 
-    logger.log('running story', title);
+    logger.log(`running story ${title} with baseline ${baselineName}`);
+
+    const storyProperties = [
+      {name: 'Component name', value: kind},
+      {name: 'State', value: name},
+      ...(properties || []),
+    ];
 
     const openParams = {
-      testName: title,
+      testName: baselineName,
+      displayName: title,
       browser: config.browser,
-      properties: [
-        {name: 'Component name', value: kind},
-        {name: 'State', value: name},
-        ...(properties || []),
-      ],
+      properties: storyProperties,
       accessibilitySettings: accessibilityValidation,
     };
 
@@ -77,12 +87,12 @@ function makeRenderStory({logger, testWindow, performance, timeItAsync}) {
       ignoreDisplacements,
     };
 
-    return timeItAsync(title, async () => {
+    return timeItAsync(baselineName, async () => {
       return testWindow({openParams, checkParams, throwEx: false});
     }).then(onDoneStory);
 
     function onDoneStory(results) {
-      logger.log('finished story', title, 'in', performance[title]);
+      logger.log('finished story', baselineName, 'in', performance[baselineName]);
       return results;
     }
   };