@applitools/eyes-storybook 3.23.0 → 3.25.1

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 ## Unreleased
 
 
+## 3.25.1 - 2021/10/20
+
+- updated to @applitools/eyes-puppeteer@1.8.4 (from 1.8.3)
+- updated to @applitools/eyes-sdk-core@12.23.18 (from 12.23.17)
+- updated to @applitools/visual-grid-client@15.8.37 (from 15.8.36)
+
+## 3.25.0 - 2021/10/18
+
+- updated to @applitools/driver@1.2.6 (from 1.1.3)
+- updated to @applitools/eyes-puppeteer@1.8.3 (from 1.8.2)
+- updated to @applitools/eyes-sdk-core@12.23.17 (from 12.23.0)
+- updated to @applitools/test-server@1.0.5 (from 1.0.4)
+- updated to @applitools/visual-grid-client@15.8.36 (from 15.8.21)
+
+## 3.24.0 - 2021/8/23
+
+- add `startStorybookServerTimeout` config param
+
+## 3.23.1 - 2021/8/23
+
+- add `visualGridOptions`, `useDom`, and `enablePatterns` config params
+
 ## 3.23.0 - 2021/8/17
 
 - add `sendDom` config param

package/README.md

@@ -187,6 +187,7 @@ In addition to command-line arguments, it's possible to define the following con
 | `accessibilityValidation` | undefined | An object that specifies the accessibility level and guidelines version to use for the screenshots. Possible values for **level** are `None`, `AA` and `AAA`, and possible values for **guidelinesVersion** are `WCAG_2_0` and `WCAG_2_1`. For example: `{level: 'AA', guidelinesVersion: 'WCAG_2_0'}`. For more information, see [per component  configuration - accessibilityValidation](#accessibilityValidation)|
 |`layoutBreakpoints`| undefined | When set to `true`, a snapshot of the DOM will be taken once for each browser/device size in the `browser` configuration. For optimization purposes, an array of numbers can be passed. The DOM snapshot will be taken once for every **width** in the array. For more information, see [per component  configuration - layoutBreakpoints](#layoutBreakpoints)|
 |`sendDom`| true | A flag to specify whether a capture of DOM and CSS should be taken when rendering the screenshot. The default value is true. This should only be modified to troubleshoot unexpected behavior, and not for normal production use. For more information, see [per component  configuration - sendDom](#sendDom)|
+| `visualGridOptions` | undefined | An object that specifies options to configure renderings on the Ultrafast grid. See more information [per component  configuration - visualGridOptions](#visualgridoptions) |
 
 There are 2 ways to specify test configuration:
 
@@ -664,6 +665,68 @@ storiesOf('Components with ignoreDisplacements', module)
 });
 ```
 
+### `sendDom`
+
+```js
+  storiesOf('Components', module)
+    .add(
+      'Some story ',
+      () =>
+        <div>Some Story</div>, { 
+          eyes: { 
+            sendDom: false
+          }
+        })
+```
+
+### `visualGridOptions`
+
+An object that specifies options to configure renderings on the Ultrafast grid.
+Available options:
+
+* `polyfillAdoptedStyleSheets`: Creates a polyfill when the DOM contains `adoptedStyleSheets` ([reference](https://developers.google.com/web/updates/2019/02/constructable-stylesheets)) for browsers that don't support it (It is currently supported only in Chrome). When `true`, those browsers will successfully include the css as inline style tags. When `false`, the css will not be included. When `undefined`, an error will be thrown with a message stating that this feature is not supported in the desired browser. 
+* `ieV2`: Use IE environment v2 in the UFG.
+
+```js
+  storiesOf('Components', module)
+    .add(
+      'Some story ',
+      () =>
+        <div>Some Story</div>, { 
+          eyes: { 
+            visualGridOptions: {
+              polyfillAdoptedStyleSheets: true,
+              ieV2: true
+            }
+          }
+        })
+```
+
+
+
+### `scriptHooks`
+
+A set of scripts to be run by the browser during the rendering. It is intended to be used as a means to alter the page's state and structure at the time of rendering. 
+An object with the following properties:
+
+  #### beforeCaptureScreenshot 
+  A script that runs after the page is loaded but before taking the screenshot. For example:
+
+
+  ```js
+  storiesOf('Components', module)
+    .add(
+      'Some story',
+      () =>
+        <div>Some Story</div>, { 
+          eyes: { 
+            scriptHooks: {
+              beforeCaptureScreenshot: "document.body.style.backgroundColor = 'gold'"
+            }
+          }
+        })
+  ```
+
 ## Parameters that cannot be set as an [advanced configuration](#advanced-configuration)
 
 ### `runBefore` and `runAfter` functions
@@ -722,29 +785,6 @@ For example, reverting back to the original background color that was changed by
 })
 ```
 
-### `scriptHooks`
-
-A set of scripts to be run by the browser during the rendering. It is intended to be used as a means to alter the page's state and structure at the time of rendering. 
-An object with the following properties:
-
-  #### beforeCaptureScreenshot 
-  A script that runs after the page is loaded but before taking the screenshot. For example:
-
-
-  ```js
-  storiesOf('Components', module)
-    .add(
-      'Some story',
-      () =>
-        <div>Some Story</div>, { 
-          eyes: { 
-            scriptHooks: {
-              beforeCaptureScreenshot: "document.body.style.backgroundColor = 'gold'"
-            }
-          }
-        })
-  ```
-
 ### `layoutBreakpoints`
 
 ```js
@@ -767,20 +807,6 @@ An object with the following properties:
         })
 ```
 
-### `sendDom`
-
-```js
-  storiesOf('Components', module)
-    .add(
-      'Some story ',
-      () =>
-        <div>Some Story</div>, { 
-          eyes: { 
-            sendDom: false
-          }
-        })
-```
-
 ## Running Eyes-Storybook in Docker
 
 When running the SDK in docker, there might be issues related to properly launching the internal chrome browser via puppeteer. If you seem to have such issues, set `runInDocker: true` in your config file. This will pass the internal chrome browser special arguments, as described [here](https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md#tips).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/eyes-storybook",
-  "version": "3.23.0",
+  "version": "3.25.1",
   "description": "",
   "engines": {
     "node": ">=8.6.0"
@@ -55,13 +55,13 @@
     "url": "git://github.com/applitools/eyes.sdk.javascript1.git"
   },
   "dependencies": {
-    "@applitools/driver": "1.1.3",
-    "@applitools/eyes-puppeteer": "1.8.2",
-    "@applitools/eyes-sdk-core": "12.23.0",
+    "@applitools/driver": "1.2.6",
+    "@applitools/eyes-puppeteer": "1.8.4",
+    "@applitools/eyes-sdk-core": "12.23.18",
     "@applitools/functional-commons": "1.6.0",
     "@applitools/monitoring-commons": "1.0.19",
-    "@applitools/test-server": "1.0.4",
-    "@applitools/visual-grid-client": "15.8.21",
+    "@applitools/test-server": "1.0.5",
+    "@applitools/visual-grid-client": "15.8.37",
     "boxen": "4.2.0",
     "chalk": "3.0.0",
     "detect-port": "1.3.0",
@@ -74,10 +74,10 @@
   },
   "devDependencies": {
     "@applitools/scripts": "^1.0.1",
-    "@applitools/sdk-release-kit": "0.13.0",
-    "@applitools/sdk-shared": "0.9.5",
+    "@applitools/sdk-release-kit": "0.13.3",
+    "@applitools/sdk-shared": "0.9.6",
     "@applitools/snaptdout": "^1.0.1",
-    "@applitools/utils": "1.2.2",
+    "@applitools/utils": "1.2.3",
     "@storybook/addon-options": "^5.2.8",
     "@storybook/react": "^5.2.8",
     "@testing-library/dom": "^5.6.1",

package/src/defaultConfig.js

@@ -16,4 +16,5 @@ module.exports = {
   readStoriesTimeout: 60000,
   reloadPagePerStory: false,
   include: undefined,
+  startStorybookServerTimeout: 300,
 };

package/src/errMessages.js

@@ -33,10 +33,6 @@ ${chalk.green(
 
 `;
 
-const startStorybookFailMsg = chalk.red(
-  'Could not find a storybook URL to test. This might be either because there was an error when starting the storybook dev server, or the parameter "storybookUrl" was not specified. Specify a URL with the "-u" parameter, or with "storybookUrl" in the config file (by default the config file is located at <project-folder>/applitools.config.js>).\n',
-);
-
 function refineErrorMessage({prefix, error}) {
   return `${prefix} ${error.message.replace('Evaluation failed: ', '')}`;
 }
@@ -45,6 +41,5 @@ module.exports = {
   missingApiKeyFailMsg,
   missingAppNameAndPackageJsonFailMsg,
   missingAppNameInPackageJsonFailMsg,
-  startStorybookFailMsg,
   refineErrorMessage,
 };

package/src/renderStory.js

@@ -6,7 +6,7 @@ function makeRenderStory({logger, testWindow, performance, timeItAsync}) {
   return function renderStory({config, story, snapshot, url}) {
     const {name, kind, parameters} = story;
     const title = getStoryTitle({name, kind, parameters});
-    const eyesOptions = (parameters && parameters.eyes) || {};
+    const eyesOptions = Object.assign({}, config, (parameters && parameters.eyes) || {});
     const {
       ignoreDisplacements,
       ignoreRegions,
@@ -26,6 +26,9 @@ function makeRenderStory({logger, testWindow, performance, timeItAsync}) {
       ignore,
       accessibilityValidation,
       sendDom,
+      visualGridOptions,
+      useDom,
+      enablePatterns,
     } = eyesOptions;
 
     if (sizeMode) {
@@ -46,26 +49,20 @@ function makeRenderStory({logger, testWindow, performance, timeItAsync}) {
       properties: [
         {name: 'Component name', value: kind},
         {name: 'State', value: name},
-        ...(properties !== undefined ? properties : config.properties || []),
+        ...(properties || []),
       ],
-      ignoreDisplacements,
-      accessibilitySettings:
-        accessibilityValidation !== undefined
-          ? accessibilityValidation
-          : config.accessibilityValidation,
+      accessibilitySettings: accessibilityValidation,
     };
 
     const checkParams = {
       url,
       snapshot,
-      ignore:
-        ignoreRegionsBackCompat !== undefined ? ignoreRegionsBackCompat : config.ignoreRegions,
-      floating: floatingRegions !== undefined ? floatingRegions : config.floatingRegions,
-      layout: layoutRegions !== undefined ? layoutRegions : config.layoutRegions,
-      strict: strictRegions !== undefined ? strictRegions : config.strictRegions,
-      content: contentRegions !== undefined ? contentRegions : config.contentRegions,
-      accessibility:
-        accessibilityRegions !== undefined ? accessibilityRegions : config.accessibilityRegions,
+      ignore: ignoreRegionsBackCompat,
+      floating: floatingRegions,
+      layout: layoutRegions,
+      strict: strictRegions,
+      content: contentRegions,
+      accessibility: accessibilityRegions,
       scriptHooks,
       sizeMode,
       target,
@@ -73,7 +70,11 @@ function makeRenderStory({logger, testWindow, performance, timeItAsync}) {
       selector,
       region,
       tag,
-      sendDom: sendDom !== undefined ? sendDom : config.sendDom,
+      sendDom,
+      visualGridOptions,
+      useDom,
+      enablePatterns,
+      ignoreDisplacements,
     };
 
     return timeItAsync(title, async () => {

package/src/startStorybookServer.js

@@ -2,7 +2,6 @@
 const {resolve} = require('path');
 const ora = require('ora');
 const StorybookConnector = require('./storybookConnector');
-const timeout = 5 * 60 * 1000; // 5 minutes
 
 async function startStorybookServer({
   packagePath,
@@ -12,6 +11,7 @@ async function startStorybookServer({
   storybookStaticDir,
   showStorybookOutput,
   logger,
+  startStorybookServerTimeout,
 }) {
   const isWindows = process.platform.startsWith('win');
   const storybookPath = resolve(packagePath, 'node_modules/.bin/start-storybook');
@@ -42,7 +42,13 @@ async function startStorybookServer({
 
   const spinner = ora('Starting storybook server');
   spinner.start();
-  await storybookConnector.start(timeout);
+
+  try {
+    await storybookConnector.start(startStorybookServerTimeout * 1000);
+  } catch (error) {
+    spinner.fail(error);
+    process.exit(1);
+  }
   spinner.succeed('Storybook was started');
 
   return `http://${storybookHost}:${storybookPort}`;

package/src/storybookConnector.js

@@ -86,11 +86,14 @@ class StorybookConnector extends EventEmitter {
       this.on('stderr', portBusyListener);
       this.on('stderr', successMessageListener);
 
-      const minutes = timeout / 1000 / 60;
+      const minutes = Math.floor(timeout / 1000 / 60);
+      const seconds = (timeout / 1000) % 60;
       const timeoutID = setTimeout(
         reject,
         timeout,
-        `Storybook didn't start after ${minutes} min waiting.`,
+        `Storybook dev server didn't start after waiting ${minutes ? `${minutes} minutes` : ''}${
+          minutes && seconds ? ' and ' : ''
+        }${seconds ? `${seconds} seconds` : ''}.`,
       );
     });
   }
@@ -115,8 +118,6 @@ class StorybookConnector extends EventEmitter {
     this._childProcess = spawn(this._storybookPath, args, {detached: false});
     this._addListeners();
 
-    console.log(this._storybookPath);
-
     this._childProcess.once('exit', code => {
       if (!code) return;
       this._removeListeners();

package/src/validateAndPopulateConfig.js

@@ -41,6 +41,7 @@ async function validateAndPopulateConfig({config, packagePath, logger}) {
 
     config.storybookUrl = await startStorybookServer(Object.assign({packagePath, logger}, config));
 
+    // NOTE (Amit): I don't understand why this condition is here. It shouldn't happen. I might have been the one to put it here, but it seems like a mistake. We should take a thorough look and remove it.
     if (!config.storybookUrl) {
       console.log(startStorybookFailMsg);
       process.exit(1);