@applitools/eyes-storybook 3.25.3 → 3.26.0

package/CHANGELOG.md

@@ -2,9 +2,20 @@
 
 ## Unreleased
 
+
+## 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 machanisem for cases we get 0 stories
+- add a retry mechanism for cases we get 0 stories
 
 ## 3.25.2 - 2021/10/30
 

package/README.md

@@ -28,6 +28,7 @@ Applitools Eyes SDK for [Storybook](http://storybook.js.org).
       - [global](#global)
       - [component](#component)
     - [`variations`](#variations)
+    - [`queryParams`](#queryparams)
     - [`waitBeforeCapture`](#waitbeforecapture)
     - [`properties`](#properties)
     - [`ignoreRegions`](#ignoreregions)
@@ -180,6 +181,7 @@ In addition to command-line arguments, it's possible to define the following con
 | `waitBeforeCapture`    | undefined                   | Selector, function or timeout.<br/>If ```number``` then the argument is treated as time in milliseconds to wait before all screenshots.<br/>If ```string``` then the argument is treated as a selector for elements to wait for before all screenshots.<br/>If ```function```, then the argument is treated as a predicate to wait for before all screenshots.<br/><hr/>For per component configuration see [waitBeforeCapture.](#waitBeforeCapture)<br/>Note that we use Puppeteer's [page.waitForTimeout()](https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#pagewaitfortimeoutmilliseconds), [page.waitForSelector()](https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#pagewaitforselectorselector-options), [page.waitForXPath()](https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#pagewaitforxpathxpath-options) and [page.waitForFunction()](https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#pagewaitforfunctionpagefunction-options-args), checkout it's API for more details. |
 | `include`                 | true                        | A predicate function, a string or a regular expression specifying which stories should be visually tested.<br/>Visual baselines will be created only for the components specified.<br/>The function receives an object with ```name```, ```kind```, ```storyTitle```  and ```parameters``` properties.<br/>For example (exclude all stories with a name that start with [SKIP]):<br/>```({name,  kind, storyTitle, parameters}) => !/^\[SKIP\]/.test(name)```<br/>For more information, see [per component configuration - include](#include). |
 | `variations`              | undefined                   | Specifies additional variations for all or some of the stories. For example, RTL. For more information, see [per component  configuration - variations](#variations).|
+| `queryParam`              | undefined                   | Specifies additional query parameters for all or some of the stories. For more information, see [per component  configuration - queryParams](#queryParams).|
 | `notifyOnCompletion`      | false                       | If `true` batch completion notifications are sent. |
 | `dontCloseBatches`        | false                       | If true, batches are not closed for notifyOnCompletion.|
 | `testConcurrency`             | 5                          | The maximum number of tests that can run concurrently. The default value is the allowed amount for free accounts. For paid accounts, set this number to the quota set for your account. |
@@ -447,6 +449,13 @@ storiesOf('Components that support RTL', module)
   )
 ```
 
+### `queryParams`
+
+An array of object values, which specifies `name` and `value` of query parameter which will be added to the story. For each value, an additional visual test will be executed for the component. It will have the same name display name, but still generate a different baseline.
+
+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.
+
 ### `waitBeforeCapture`
 
 Selector or timeout, see [advanced configuration](#advanced-configuration) for more details.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/eyes-storybook",
-  "version": "3.25.3",
+  "version": "3.26.0",
   "description": "",
   "engines": {
     "node": ">=8.6.0"
@@ -58,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",
@@ -79,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/addParametrizedStories.js

@@ -0,0 +1,81 @@
+'use strict';
+
+function addParametrizedStories({stories, config}) {
+  const parametrizedStories = {};
+  for (const story of stories) {
+    const queryParams = getStoryQueryParams(story, config);
+    if (!queryParams) continue;
+    for (const queryParam of queryParams) {
+      const queryParamString = `${queryParam.name}=${queryParam.value}`;
+      const parametrizeStoriesArray =
+        parametrizedStories[queryParamString] || (parametrizedStories[queryParamString] = []);
+      parametrizeStoriesArray.push({
+        ...story,
+        parameters: addQueryParam(story.parameters, queryParam),
+      });
+    }
+  }
+
+  return Object.values(parametrizedStories).reduce((allStories, parametrizedStories) => {
+    return allStories.concat(parametrizedStories);
+  }, stories);
+}
+
+function getStoryQueryParams(story, config) {
+  let queryParams;
+  if (story.parameters && story.parameters.eyes && story.parameters.eyes.queryParams) {
+    if (!Array.isArray(story.parameters.eyes.queryParams)) {
+      throw new Error('queryParams should be an array');
+    }
+    queryParams = [...story.parameters.eyes.queryParams];
+  }
+  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');
+    }
+    queryParams = [
+      ...(queryParams || []),
+      ...variationsToQueryParams(story.parameters.eyes.variations),
+    ];
+  }
+
+  if (queryParams) return queryParams;
+
+  if (config.queryParams) {
+    if (!Array.isArray(config.queryParams)) {
+      throw new Error('global queryParams should be an array');
+    }
+    queryParams = [...config.queryParams];
+  }
+
+  if (config.variations) {
+    if (Array.isArray(config.variations)) {
+      queryParams = [...(queryParams || []), ...variationsToQueryParams(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');
+        }
+        queryParams = [...(queryParams || []), ...variationsToQueryParams(variations)];
+      }
+    } else {
+      throw new Error('global variations should be an array or a function that returns array');
+    }
+  }
+
+  if (queryParams) return queryParams;
+}
+
+function variationsToQueryParams(variations) {
+  return variations.map(variation => ({name: 'eyes-variation', value: variation}));
+}
+
+function addQueryParam(parameters, queryParam) {
+  parameters = {...parameters};
+  parameters.eyes = {...parameters.eyes};
+  parameters.eyes.queryParam = queryParam;
+  return parameters;
+}
+
+module.exports = addParametrizedStories;

package/src/eyesStorybook.js

@@ -10,7 +10,7 @@ const makeRenderStories = require('./renderStories');
 const makeGetStoryData = require('./getStoryData');
 const ora = require('ora');
 const filterStories = require('./filterStories');
-const addVariationStories = require('./addVariationStories');
+const addParametrizedStories = require('./addParametrizedStories');
 const browserLog = require('./browserLog');
 const memoryLog = require('./memoryLog');
 const getIframeUrl = require('./getIframeUrl');
@@ -18,7 +18,7 @@ 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');
@@ -78,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,
@@ -116,9 +116,12 @@ async function eyesStorybook({
     );
 
     const filteredStories = filterStories({stories, config});
-    const storiesIncludingVariations = addVariationStories({stories: filteredStories, config});
+    const storiesIncludingParametrizedVariations = addParametrizedStories({
+      stories: filteredStories,
+      config,
+    });
 
-    logger.log(`starting to run ${storiesIncludingVariations.length} stories`);
+    logger.log(`starting to run ${storiesIncludingParametrizedVariations.length} stories`);
 
     const getStoryData = makeGetStoryData({
       logger,
@@ -155,7 +158,7 @@ async function eyesStorybook({
         setRenderIE,
         setTransitioningIntoIE,
         configs,
-        stories: storiesIncludingVariations,
+        stories: storiesIncludingParametrizedVariations,
         pagePool,
         logger,
         timeItAsync,

package/src/getStoryBaselineName.js

@@ -0,0 +1,13 @@
+'use strict';
+const getStoryTitle = require('./getStoryTitle');
+
+function getStoryBaselineName({name, kind, parameters}) {
+  const storyTitle = getStoryTitle({name, kind, parameters});
+  const queryParam = parameters && parameters.eyes && parameters.eyes.queryParam;
+
+  if (!queryParam || queryParam.name === 'eyes-variation') return storyTitle;
+
+  return `${storyTitle} [${queryParam.name}=${queryParam.value}]`;
+}
+
+module.exports = getStoryBaselineName;

package/src/getStoryData.js

@@ -3,25 +3,30 @@ 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;
+      const expectedQueryParam = eyesParameters ? eyesParameters.queryParam : undefined;
+      const actualQueryParam = await getQueryParam(
+        eyesParameters && eyesParameters.queryParams
+          ? eyesParameters.queryParams.map(queryParam => queryParam.name)
+          : undefined,
+      );
       if (
-        (!actualVariationParam && !expectedVariationUrlParam) ||
-        actualVariationParam === expectedVariationUrlParam
+        (!actualQueryParam && !expectedQueryParam) ||
+        (actualQueryParam &&
+          expectedQueryParam &&
+          actualQueryParam.value === expectedQueryParam.name &&
+          actualQueryParam.value === expectedQueryParam.value)
       ) {
         const err = await page.evaluate(renderStoryWithClientAPI, story.index);
         err && handleRenderStoryError(err);
@@ -49,8 +54,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 +73,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,9 +84,16 @@ function makeGetStoryData({logger, takeDomSnapshots, waitBeforeCapture, reloadPa
       }
     }
 
-    async function getEyesVariationParam() {
+    async function getQueryParam(queryParamNames = []) {
       try {
-        return new URL(await page.url()).searchParams.get('eyes-variation');
+        const url = new URL(await page.url());
+        queryParamNames = [...queryParamNames, 'eyes-variation'];
+        const queryParamName = queryParamNames.find(queryParamName =>
+          url.searchParams.has(queryParamName),
+        );
+        if (queryParamName) {
+          return {name: queryParamName, value: url.searchParams.get(queryParamName)};
+        }
       } catch (ex) {
         logger.log('failed to get url from page (in need of eyes-variation param)');
       }

package/src/getStoryTitle.js

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

package/src/getStoryUrl.js

@@ -2,12 +2,12 @@
 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 queryParam = parameters && parameters.eyes && parameters.eyes.queryParam;
+  const queryParamString = queryParam ? `&${queryParam.name}=${queryParam.value}` : '';
 
   return `${getIframeUrl(baseUrl)}&selectedKind=${encodeURIComponent(
     kind,
-  )}&selectedStory=${encodeURIComponent(name)}${variation}`;
+  )}&selectedStory=${encodeURIComponent(name)}${queryParamString}`;
 }
 
 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,10 +1,12 @@
 '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 {
@@ -41,10 +43,11 @@ function makeRenderStory({logger, testWindow, performance, timeItAsync}) {
       ignoreRegionsBackCompat = ignore;
     }
 
-    logger.log('running story', title);
+    logger.log(`running story ${title} with baseline ${baselineName}`);
 
     const openParams = {
-      testName: title,
+      testName: baselineName,
+      displayName: title,
       browser: config.browser,
       properties: [
         {name: 'Component name', value: kind},
@@ -77,12 +80,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;
     }
   };

package/src/addVariationStories.js

@@ -1,54 +0,0 @@
-'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 storiesByVariation = {};
-
-  for (const story of storiesToAddVariations) {
-    const variations = getStoryVariations(story);
-    if (!Array.isArray(variations)) {
-      throw new Error('variations should be an array');
-    }
-
-    for (const variation of variations) {
-      const variationArr = storiesByVariation[variation] || (storiesByVariation[variation] = []);
-      variationArr.push({
-        ...story,
-        parameters: addFlagToParameters(story.parameters, variation),
-      });
-    }
-  }
-
-  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;
-    }
-
-    if (globalVariationFunc) {
-      return globalVariationFunc(story);
-    }
-
-    if (globalVariationArray) return globalVariationArray;
-  }
-}
-
-function addFlagToParameters(parameters, variation) {
-  return parameters
-    ? {
-        ...parameters,
-        eyes: parameters.eyes
-          ? {...parameters.eyes, variationUrlParam: variation}
-          : {variationUrlParam: variation},
-      }
-    : {eyes: {variationUrlParam: variation}};
-}
-
-module.exports = addVariationStories;