@applitools/eyes-storybook 3.37.4 → 3.37.5

package/CHANGELOG.md

@@ -4,6 +4,13 @@
 
 
 
+## [3.37.5](https://github.com/applitools/eyes.sdk.javascript1/compare/js/eyes-storybook@3.37.4...js/eyes-storybook@3.37.5) (2023-07-24)
+
+
+### Bug Fixes
+
+* wait for initializationPromise ([#1628](https://github.com/applitools/eyes.sdk.javascript1/issues/1628)) ([01c528a](https://github.com/applitools/eyes.sdk.javascript1/commit/01c528ac9379239c445018f1c12d87a7b404e214))
+
 ## [3.37.4](https://github.com/applitools/eyes.sdk.javascript1/compare/js/eyes-storybook@3.37.3...js/eyes-storybook@3.37.4) (2023-07-21)
 
 

package/README.md

@@ -131,6 +131,7 @@ Options:
   --storybookStaticDir, --storybook-static-dir      Path to Storybook's static files folder                                          [string]
   --showStorybookOutput, --show-storybook-output    Whether or not you want to see Storybook output                                 [boolean]
   --readStoriesTimeout, --read-stories-timeout      The time to wait until all stories are read, before starting the visual tests    [number]
+  --startStorybookServerTimeout                     The time to wait until the storybook server is built and serving (in seconds)    [number]
   --exitcode, -e                                    If tests failed close with non-zero exit code                                   [boolean]
 ```
 
@@ -183,7 +184,7 @@ In addition to command-line arguments, it's possible to define the following con
 | `tapFilePath`             | undefined                   | Directory path of a results file. If set, then a [TAP](https://en.wikipedia.org/wiki/Test_Anything_Protocol#Specification) file is created in this directory, the file is created with the name eyes.tap and contains the Eyes test results. |
 | `xmlFilePath`             | undefined                   | Directory path of a results file. If set, then a [XUnit XML](https://google.github.io/rich-test-results/xunitxml) file is created in this directory, the file is created with the name eyes.xml and contains the Eyes test results. |
 | `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). |
+| `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```, ```index```  and ```parameters``` properties.<br/>For example (exclude all stories with a name that start with [SKIP]):<br/>```({name,  kind, storyTitle, index, 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).|
 | `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. |
@@ -376,7 +377,7 @@ All these properties except  `storyTitle` come from `storybook` and they represe
 
 More information can be found in the [Storybook docs - Naming components and hierarchy](https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy).
 
-You can filter by `kind`, `name`, `storyTitle`, `parameters`, a combination of them or any logic that will result in a `boolean`. For example:
+You can filter by `kind`, `name`, `storyTitle`, `index`, `parameters`, a combination of them or any logic that will result in a `boolean`. For example:
 ```js
 // applitools.config.js
 module.exports = {
@@ -409,6 +410,18 @@ include: /Button: */,
 ...
 }
 ```
+
+The `include` method can also be used for test sharding, to split the stories between multiple machines:
+```js
+module.exports = {
+...
+  include: ({index}) => {
+    return index % totalShards === currShard - 1
+  }
+...
+}
+```
+
 > NOTE you can use regular expressions or any other method you'd like, as long as you return a `boolean` from this function
 
 #### component

package/dist/getClientAPI.js

@@ -125,6 +125,7 @@ function __getClientAPI(...args) {
                   });
                 } else {
                   // storybook v7
+                  await clientAPI.storyStore.initializationPromise;
                   frameWindow.__STORYBOOK_PREVIEW__.selectionStore.setSelection({storyId});
                 }
                 await frameWindow.__STORYBOOK_PREVIEW__.renderSelection();

package/dist/getStories.js

@@ -125,6 +125,7 @@ function __getStories(...args) {
                   });
                 } else {
                   // storybook v7
+                  await clientAPI.storyStore.initializationPromise;
                   frameWindow.__STORYBOOK_PREVIEW__.selectionStore.setSelection({storyId});
                 }
                 await frameWindow.__STORYBOOK_PREVIEW__.renderSelection();

package/dist/renderStoryWithClientAPI.js

@@ -125,6 +125,7 @@ function __renderStoryWithClientAPI(...args) {
                   });
                 } else {
                   // storybook v7
+                  await clientAPI.storyStore.initializationPromise;
                   frameWindow.__STORYBOOK_PREVIEW__.selectionStore.setSelection({storyId});
                 }
                 await frameWindow.__STORYBOOK_PREVIEW__.renderSelection();

package/dist/runRunAfterScript.js

@@ -125,6 +125,7 @@ function __runRunAfterScript(...args) {
                   });
                 } else {
                   // storybook v7
+                  await clientAPI.storyStore.initializationPromise;
                   frameWindow.__STORYBOOK_PREVIEW__.selectionStore.setSelection({storyId});
                 }
                 await frameWindow.__STORYBOOK_PREVIEW__.renderSelection();

package/dist/runRunBeforeScript.js

@@ -125,6 +125,7 @@ function __runRunBeforeScript(...args) {
                   });
                 } else {
                   // storybook v7
+                  await clientAPI.storyStore.initializationPromise;
                   frameWindow.__STORYBOOK_PREVIEW__.selectionStore.setSelection({storyId});
                 }
                 await frameWindow.__STORYBOOK_PREVIEW__.renderSelection();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/eyes-storybook",
-  "version": "3.37.4",
+  "version": "3.37.5",
   "description": "",
   "keywords": [
     "applitools",
@@ -77,7 +77,7 @@
     "yargs": "17.7.2"
   },
   "devDependencies": {
-    "@applitools/bongo": "^5.1.5",
+    "@applitools/bongo": "^5.3.0",
     "@applitools/sdk-shared": "0.9.15",
     "@applitools/snaptdout": "^1.0.1",
     "@applitools/test-server": "^1.2.2",

package/src/browser/getClientAPI.js

@@ -122,6 +122,7 @@ function getClientAPI() {
                 });
               } else {
                 // storybook v7
+                await clientAPI.storyStore.initializationPromise;
                 frameWindow.__STORYBOOK_PREVIEW__.selectionStore.setSelection({storyId});
               }
               await frameWindow.__STORYBOOK_PREVIEW__.renderSelection();

package/src/storybookConnector.js

@@ -95,7 +95,9 @@ class StorybookConnector extends EventEmitter {
         timeout,
         `Storybook dev server didn't start after waiting ${minutes ? `${minutes} minutes` : ''}${
           minutes && seconds ? ' and ' : ''
-        }${seconds ? `${seconds} seconds` : ''}.`,
+        }${
+          seconds ? `${seconds} seconds` : ''
+        }.\nPlease consider setting a higher timeout using the --startStorybookServerTimeout option (in seconds). For example: eyes-storybook --startStorybookServerTimeout 600`,
       );
     });
   }