@applitools/eyes-storybook 3.27.2 → 3.27.5

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 ## Unreleased
 
+## 3.27.5 - 2022/3/29
+
+### Features
+- Preserve search parameters in Storybook URLs
+### Bug fixes
+
+## 3.27.4 - 2022/2/9
+
+- updated to @applitools/driver@1.4.9 (from 1.4.7)
+- updated to @applitools/eyes-sdk-core@13.0.0 (from 12.24.9)
+- updated to @applitools/logger@1.0.9 (from 1.0.8)
+- updated to @applitools/visual-grid-client@15.8.62 (from 15.8.55)
+- support adding new test(s) and the value of saveNewTest is false will warn
+- README.md update default value of 'exitcode' to 'true' (from 'false')
+- updated to @applitools/driver@1.4.12 (from 1.4.9)
+- updated to @applitools/eyes-sdk-core@13.0.2 (from 13.0.0)
+- updated to @applitools/logger@1.0.10 (from 1.0.9)
+- updated to @applitools/visual-grid-client@15.8.63 (from 15.8.62)
+- updated to @applitools/utils@1.2.12 (from 1.2.11)
+
+## 3.27.3 - 2022/1/26
+
+- avoid unwanted page reloading due to unknown query parameters
+- updated to @applitools/driver@1.4.9 (from 1.4.7)
+- updated to @applitools/eyes-sdk-core@13.0.0 (from 12.24.9)
+- updated to @applitools/logger@1.0.9 (from 1.0.8)
+- updated to @applitools/visual-grid-client@15.8.62 (from 15.8.55)
 
 ## 3.27.2 - 2021/12/23
 

package/README.md

@@ -153,12 +153,15 @@ In addition to command-line arguments, it's possible to define the following con
 | `storybookStaticDir`      | undefined                   | Path to Storybook's static files folder (also available as command-line argument). |
 | `showStorybookOutput`     | undefined                   | Whether or not you want to see Storybook output (also available as command-line argument). |
 | `viewportSize`            | { width: 1024, height: 600} | The size of the puppeteer browser's window. This is the browser window which renders the stories originally (and opens at the size provided in the `viewportSize` parameter), and then a DOM snapshot is uploaded to the server, which renders this snapshot on all the browsers and sizes provided in the `browser` parameter.|
-| `exitcode`                | false                       | If tests failed close with non-zero exit code (also available as command-line argument). |
+| `exitcode`                | true                       | If tests failed close with non-zero exit code (also available as command-line argument). |
 | `browser`                 | { width: 800, height: 600, name: 'chrome' } | The size and browser of the generated screenshots. For more info and possible values, see the [browser section below](#configuring-the-browser).|
 | `showLogs`                | false                       | Whether or not you want to see logs of the Eyes-Storybook plugin. |
-| `batchId`                 | random                      | Provides ability to group tests into batches. Read more about batches [here](https://applitools.com/docs/topics/working-with-test-batches/how-to-group-tests-into-batches.html). |
-| `batchName`               | undefined                   | Provides a name to the batch. |
-| `batchSequenceName`       | undefined                   | Name for managing batch statistics. |
+| `batch`                     | undefined                   | An object which describes different aspects of the batch. The following lines in this table depict the various ways to configure the batch. |
+| `batch.id`                  | random                      | Provides ability to group tests into batches. Read more about batches [here](https://applitools.com/docs/topics/working-with-test-batches/how-to-group-tests-into-batches.html). |
+| `batch.name`                | The name of the first test in the batch                   | Provides a name to the batch (for display purpose only). |
+| `batch.sequenceName`        | undefined                   | Name for managing batch statistics. |
+| `batch.notifyOnCompletion`  | false                       | If `true` batch completion notifications are sent. |
+| `batch.properties`          | undefined                   | Custom properties for the entire batch. The format is an array of objects with name/value properties. For example: `[{name: 'My prop', value:'My value'}]`. |
 | `baselineEnvName`         | undefined                   | The name of the environment of the baseline. |
 | `envName`                 | undefined                   | A name for the environment in which the application under test is running. |
 | `ignoreCaret`             | false                       | Whether to ignore or the blinking caret or not when comparing images. |
@@ -180,7 +183,6 @@ 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).|
-| `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. |
 | `readStoriesTimeout`      | 60000                       | The amount of time (in milliseconds) Eyes-Storybook waits for storybook to load. For old storybook versions 2 and 3, this is also the time it takes for Eyes-Storybook to acknowledge it is working on those versions. So it is recommended to make this value small (e.g. 3000) when working with Storybook version 2 or 3. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/eyes-storybook",
-  "version": "3.27.2",
+  "version": "3.27.5",
   "description": "",
   "engines": {
     "node": ">=8.6.0"
@@ -15,9 +15,9 @@
   },
   "scripts": {
     "test": "yarn build && yarn test:mocha && yarn lint",
-    "test:mocha": "mocha --no-timeouts --trace-warnings 'test/unit/*.test.js' 'test/it/*.test.js' 'test/e2e/*.test.js'",
-    "test:unit": "mocha --no-timeouts --trace-warnings 'test/unit/*.test.js'",
-    "test:it": "mocha --no-timeouts --trace-warnings 'test/it/*.test.js'",
+    "test:mocha": "yarn test:unit && yarn test:it && yarn test:e2e",
+    "test:unit": "STDOUT_LEVEL=0 mocha --no-timeouts --trace-warnings 'test/unit/*.test.js'",
+    "test:it": "STDOUT_LEVEL=1 mocha --no-timeouts --trace-warnings 'test/it/*.test.js'",
     "test:e2e": "mocha --no-timeouts --trace-warnings 'test/e2e/*.test.js'",
     "build": "rollup -c rollup.config.js",
     "build:heavy": "node scripts/bitmap.js",
@@ -34,9 +34,10 @@
     "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",
+    "gh:publish": "gh workflow run publish-storybook.yml --ref $(git rev-parse --abbrev-ref HEAD)",
     "postinstall": "node src/postinstall",
-    "preversion": "bongo preversion",
-    "version": "bongo version",
+    "preversion": "bongo preversion --verifyPendingChanges",
+    "version": "bongo version --withPendingChanges",
     "postversion": "bongo postversion --skip-release-notification",
     "deps": "bongo deps",
     "prepublish:setup": "echo 'setup is a no-op. Move along, nothing to see here.'"
@@ -58,14 +59,15 @@
     "directory": "packages/eyes-storybook"
   },
   "dependencies": {
-    "@applitools/driver": "1.4.7",
-    "@applitools/eyes-sdk-core": "12.24.9",
+    "@applitools/driver": "1.5.5",
+    "@applitools/eyes-sdk-core": "13.1.2",
     "@applitools/functional-commons": "1.6.0",
-    "@applitools/logger": "1.0.8",
+    "@applitools/logger": "1.0.11",
     "@applitools/monitoring-commons": "1.0.19",
     "@applitools/spec-driver-puppeteer": "1.1.0",
     "@applitools/test-server": "1.0.8",
-    "@applitools/visual-grid-client": "15.8.55",
+    "@applitools/utils": "1.2.13",
+    "@applitools/visual-grid-client": "15.10.1",
     "boxen": "4.2.0",
     "chalk": "3.0.0",
     "detect-port": "1.3.0",
@@ -77,11 +79,10 @@
     "yargs": "15.4.1"
   },
   "devDependencies": {
-    "@applitools/scripts": "^1.0.1",
-    "@applitools/sdk-release-kit": "0.13.4",
+    "@applitools/scripts": "^1.1.0",
+    "@applitools/sdk-release-kit": "1.2.1",
     "@applitools/sdk-shared": "0.9.11",
     "@applitools/snaptdout": "^1.0.1",
-    "@applitools/utils": "1.2.5",
     "@storybook/react": "^6.4.0",
     "@testing-library/dom": "^5.6.1",
     "babel-core": "^6.26.3",

package/src/cli.js

@@ -47,6 +47,7 @@ const {performance, timeItAsync} = makeTiming();
         results,
         totalTime,
         testConcurrency: config.testConcurrency,
+        saveNewTests: config.saveNewTests,
       });
       console.log(outputStr);
       if (config.jsonFilePath) {

package/src/getIframeUrl.js

@@ -2,7 +2,8 @@
 const {URL} = require('url');
 
 function getIframeUrl(baseUrl) {
-  const {origin, pathname} = new URL(baseUrl);
+  const {origin, pathname, search} = new URL(baseUrl);
+  const searchParam = search && search.replace(/^\?/, '&');
 
   let baseUrlFixed = `${origin}${pathname.replace(/\/[^\/]+\.html/, '')}`;
 
@@ -10,7 +11,10 @@ function getIframeUrl(baseUrl) {
     baseUrlFixed += '/';
   }
 
-  const url = new URL(`iframe.html?eyes-storybook=true`, baseUrlFixed);
+  const url = new URL(
+    `iframe.html?eyes-storybook=true${searchParam ? searchParam : ''}`,
+    baseUrlFixed,
+  );
   return url.href;
 }
 

package/src/getStoryData.js

@@ -82,19 +82,20 @@ function makeGetStoryData({logger, takeDomSnapshots, waitBeforeCapture, reloadPa
         return false;
       }
 
-      expectedQueryParams = expectedQueryParams || {};
+      const currentQueryParams = url.searchParams.get('eyes-query-params');
+      if (!currentQueryParams && !expectedQueryParams) return true;
+      if (!currentQueryParams || !expectedQueryParams) return false;
+
       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) {
+      const currentQueryParamNames = currentQueryParams.split(',');
+
+      if (currentQueryParamNames.length !== expectedQueryParamNames.length) return false;
+
+      for (const queryParamName of currentQueryParamNames) {
+        if (url.searchParams.get(queryParamName) !== expectedQueryParams[queryParamName]) {
           return false;
         }
-        actualQueryParamNames.push(name);
       }
-
-      if (actualQueryParamNames.length !== expectedQueryParamNames.length) return false;
-
       return true;
     }
 

package/src/getStoryUrl.js

@@ -2,15 +2,19 @@
 const getIframeUrl = require('./getIframeUrl');
 
 function getStoryUrl({name, kind, parameters}, baseUrl) {
-  const queryParams = (parameters && parameters.eyes && parameters.eyes.queryParams) || {};
-  const queryString = Object.entries(queryParams).reduce(
-    (queryString, [name, value]) => queryString + `&${name}=${value}`,
-    '',
-  );
+  let storyUrl = getIframeUrl(baseUrl);
+  storyUrl += `&selectedKind=${encodeURIComponent(kind)}`;
+  storyUrl += `&selectedStory=${encodeURIComponent(name)}`;
 
-  return `${getIframeUrl(baseUrl)}&selectedKind=${encodeURIComponent(
-    kind,
-  )}&selectedStory=${encodeURIComponent(name)}${queryString}`;
+  const queryParams = parameters && parameters.eyes && parameters.eyes.queryParams;
+  if (queryParams) {
+    storyUrl += `&eyes-query-params=${Object.keys(queryParams).join(',')}`;
+    for (const [name, value] of Object.entries(queryParams)) {
+      storyUrl += `&${name}=${encodeURIComponent(value)}`;
+    }
+  }
+
+  return storyUrl;
 }
 
 module.exports = getStoryUrl;

package/src/processResults.js

@@ -2,17 +2,21 @@
 const flatten = require('lodash.flatten');
 const chalk = require('./chalkify');
 const {TestResultsError, TestResultsFormatter} = require('@applitools/eyes-sdk-core');
+const utils = require('@applitools/utils');
 const uniq = require('./uniq');
 const concurrencyMsg = require('./concurrencyMsg');
 
-function processResults({results = [], totalTime, testConcurrency}) {
+function processResults({results = [], totalTime, testConcurrency, saveNewTests = true}) {
   let outputStr = '\n';
   const formatter = new TestResultsFormatter();
-
+  const pluralize = utils.general.pluralize;
   let testResults = results.map(r => r.resultsOrErr);
   testResults = flatten(testResults).filter(r => r.constructor.name !== 'Error');
   const unresolved = testResults.filter(r => r.getIsDifferent());
   const passedOrNew = testResults.filter(r => !r.getIsDifferent());
+  const newTests = testResults.filter(r => r.getIsNew());
+  const newTestsSize = newTests.length;
+  const warnForUnsavedNewTests = !!(!saveNewTests && newTestsSize);
 
   let errors = results.map(({title, resultsOrErr}) =>
     Array.isArray(resultsOrErr)
@@ -31,10 +35,10 @@ function processResults({results = [], totalTime, testConcurrency}) {
 
   outputStr += '[EYES: TEST RESULTS]:\n\n';
   if (passedOrNew.length > 0) {
-    outputStr += testResultsOutput(passedOrNew);
+    outputStr += testResultsOutput(passedOrNew, warnForUnsavedNewTests);
   }
   if (unresolved.length > 0) {
-    outputStr += testResultsOutput(unresolved);
+    outputStr += testResultsOutput(unresolved, warnForUnsavedNewTests);
   }
   if (errors.length) {
     const sortedErrors = errors.sort((a, b) => a.title.localeCompare(b.title));
@@ -52,23 +56,38 @@ function processResults({results = [], totalTime, testConcurrency}) {
 
   if (errors.length && !unresolved.length) {
     outputStr += chalk.red(
-      `\nA total of ${errors.length} stor${
-        errors.length > 1 ? 'ies' : 'y'
-      } failed for unexpected error${errors.length > 1 ? 's' : ''}.`,
+      `\nA total of ${errors.length} stor${pluralize(errors, [
+        'ies',
+        'y',
+      ])} failed for unexpected error${pluralize(errors)}.`,
     );
   } else if (unresolved.length && !errors.length) {
     outputStr += chalk.keyword('orange')(
-      `\nA total of ${unresolved.length} difference${
-        unresolved.length > 1 ? 's were' : ' was'
-      } found.`,
+      `\nA total of ${unresolved.length} difference${pluralize(unresolved, [
+        's were',
+        ' was',
+      ])} found.`,
     );
   } else if (unresolved.length || errors.length) {
     outputStr += chalk.red(
-      `\nA total of ${unresolved.length} difference${
-        unresolved.length > 1 ? 's were' : ' was'
-      } found and ${errors.length} stor${errors.length > 1 ? 'ies' : 'y'} failed for ${
-        errors.length > 1 ? '' : 'an '
-      }unexpected error${errors.length > 1 ? 's' : ''}.`,
+      `\nA total of ${unresolved.length} difference${pluralize(unresolved, [
+        's were',
+        ' was',
+      ])} found and ${errors.length} stor${pluralize(errors, [
+        'ies',
+        'y',
+      ])} failed for ${pluralize(errors, ['', 'an '])}unexpected error${pluralize(errors)}.`,
+    );
+  } else if (warnForUnsavedNewTests) {
+    const countText =
+      newTestsSize > 1
+        ? `are ${newTestsSize} new tests`
+        : `is a new test: '${newTests[0].getName()}'`;
+    outputStr += chalk.red(
+      `\n'saveNewTests' was set to false and there ${countText}. Please approve ${pluralize(
+        newTestsSize,
+        ['their', 'its'],
+      )} baseline${pluralize(newTestsSize)} in Eyes dashboard.\n`,
     );
   } else if (passedOrNew.length) {
     outputStr += chalk.green(`\nNo differences were found!`);
@@ -93,7 +112,9 @@ function processResults({results = [], totalTime, testConcurrency}) {
       }),
     );
   });
-  const exitCode = passedOrNew.length && !errors.length && !unresolved.length ? 0 : 1;
+  const exitCode =
+    !warnForUnsavedNewTests && passedOrNew.length && !errors.length && !unresolved.length ? 0 : 1;
+
   return {
     outputStr,
     formatter,
@@ -101,7 +122,7 @@ function processResults({results = [], totalTime, testConcurrency}) {
   };
 }
 
-function testResultsOutput(results) {
+function testResultsOutput(results, warnForUnsavedNewTests) {
   let outputStr = '';
   const sortedTestResults = results.sort((a, b) => a.getName().localeCompare(b.getName()));
   sortedTestResults.forEach(result => {
@@ -110,7 +131,8 @@ function testResultsOutput(results) {
       .toString()}] - `;
 
     if (result.getIsNew()) {
-      outputStr += `${storyTitle}${chalk.blue('New')}\n`;
+      const newResColor = warnForUnsavedNewTests ? 'orange' : 'blue';
+      outputStr += `${storyTitle}${chalk.keyword(newResColor)('New')}\n`;
     } else if (result.isPassed()) {
       outputStr += `${storyTitle}${chalk.green('Passed')}\n`;
     } else {