feat: implement --stepsApi configuration flag for storybook v8, v9 and vNext support

.github/workflows/pr.yml

@@ -6,7 +6,7 @@ name: PR build
 on:
   # Triggers the workflow on push or pull request events but only for the main branch
   pull_request:
-    branches: [main]
+    branches: [storybook7]
 
   workflow_dispatch:
 

package.json

@@ -2,7 +2,7 @@
   "name": "storywright",
   "description": "Storybook setup.",
   "license": "MIT",
-  "version": "0.0.27-storybook7.12",
+  "version": "0.0.27-storybook7.13",
   "main": "lib/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -24,7 +24,7 @@
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^17.0.0 || ^16.0.0",
-    "@storybook/preview-api": ">=7.0.0 <9.0.0"
+    "@storybook/preview-api": ">=7.0.0 <10.0.0"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",

src/StoryWrightProcessor/GetStories.js

@@ -1,23 +1,10 @@
 // @ts-check
 
-/**
-    * @typedef {{
-                argTypeTargetsV7:boolean;
-                buildStoriesJson:boolean;
-                disallowImplicitActionsInRenderV8: boolean;
-                legacyDecoratorFileOrder: boolean;
-                storyStoreV7?: boolean;
-                warnOnLegacyHierarchySeparator: boolean
-            }} SbFeatures
-*/
-
-
-
 getStoriesWithSteps();
 
 function getStoriesWithSteps() {
   /**
-   * @type {SbFeatures}
+   * @type {import('../utils').StorybookFeatures}
    */
   const storybookFeatures = window["FEATURES"];
 
@@ -103,7 +90,7 @@ function findSteps(res) {
 
 /**
  *
- * @param {SbFeatures} features
+ * @param {import('../utils').StorybookFeatures} features
  * @returns {Promise<Array<import('../utils').Story>>}
  */
 function getPageStories(features) {

src/StoryWrightProcessor/GetStoriesV2.js

@@ -0,0 +1,40 @@
+// @ts-check
+
+getStoriesWithSteps();
+
+function getStoriesWithSteps() {
+  return getPageStories().then((stories) => {
+    /**
+     * @type {typeof stories}
+     */
+    const storiesWithSteps = [];
+    /**
+     * @type {string[]} story ids that failed while processing parameters
+     */
+    const errors = [];
+    for (let story of stories) {
+      try {
+        const steps = story.parameters?.storyWright.steps;
+        if (Array.isArray(steps)) {
+          story.steps = steps;
+        }
+      } catch (ex) {
+        errors.push(story["id"]);
+        console.error("Error processing 'parameters' of: " + story["id"]);
+        console.error(ex);
+      }
+
+      storiesWithSteps.push(story);
+    }
+
+    return { storiesWithSteps, errors };
+  });
+}
+
+/**
+ *
+ * @returns {Promise<Array<import('../utils').Story>>}
+ */
+function getPageStories() {
+  return window["__STORYBOOK_PREVIEW__"].extract();
+}

src/StoryWrightProcessor/StoryWrightOptions.ts

@@ -12,5 +12,9 @@ export interface StoryWrightOptions {
   totalPartitions: number;
   waitTimeScreenshot: number;
   excludePatterns: Array<string>;
-  bailOnStoriesError: boolean
+  bailOnStoriesError: boolean;
+  /**
+   * NOTE: `component` is deprecated and will be removed in next major. SB will no longer support exposing storyFn() so we won't be able to obtain dynamically steps from <StoryWright/> props.
+   */
+  stepsApi: "component" | "parameters";
 }

src/StoryWrightProcessor/StoryWrightProcessor.ts

@@ -48,10 +48,12 @@ export class StoryWrightProcessor {
 
         let stories: Story[];
         try {
-          const getStoriesScript = readFileSync(
-            join(__dirname, "GetStories.js"),
-            "utf8"
-          );
+          const scriptKind = {
+            component: join(__dirname, "GetStories.js"),
+            parameters: join(__dirname, "GetStoriesV2.js"),
+          };
+          const getStoriesScriptPath = scriptKind[options.stepsApi];
+          const getStoriesScript = readFileSync(getStoriesScriptPath, "utf8");
           const { storiesWithSteps, errors } = await page.evaluate<{
             storiesWithSteps: Story[];
             errors: string[];

src/main.ts

@@ -12,13 +12,13 @@ const args = argv
   .usage("Usage: $0 [options]")
   .example([
     [
-    "$0",
-    "Captures screenshot for all stories using default static storybook path dist/iframe.html"
+      "$0",
+      "Captures screenshot for all stories using default static storybook path dist/iframe.html",
     ],
     [
-    "$0 -url https://localhost:5555 --browsers chromium",
-    "Captures screenshot for all stories from given storybook url for chromium browser"
-    ]
+      "$0 -url https://localhost:5555 --browsers chromium",
+      "Captures screenshot for all stories from given storybook url for chromium browser",
+    ],
   ])
   .option("url", {
     alias: "storybookurl",
@@ -52,7 +52,7 @@ const args = argv
     type: "array",
     coerce: (array) => {
       return array.flatMap((v) => v.split(","));
-    }
+    },
   })
   .option("headless", {
     default: false,
@@ -89,8 +89,7 @@ const args = argv
   .option("waitTimeScreenshot", {
     alias: "waitTimeScreenshot",
     default: 1000,
-    describe:
-      "Time to wait before taking screenshot",
+    describe: "Time to wait before taking screenshot",
     nargs: 1,
     type: "number",
   })
@@ -100,15 +99,26 @@ const args = argv
       "Fail process if errors occurred while processing Stories or during making screenshots. Useful to make sure that your VR Test are valid and in CI scenarios.",
     type: "boolean",
   })
-  .strict(true)
-  .argv;
-
+  .option("stepsApi", {
+    /**
+     * NOTE: next major will use `parameters` as default
+     */
+    default: "component" as StoryWrightOptions["stepsApi"],
+    describe: [
+      "Configure which API should be used to define Story Steps.",
+      "NOTE: 'component' will be removed in next major to support Storybook 9",
+      "NOTE: 'parameters' will work only with CSF3 format of your Stories. Decorators containing StoryWright component won't be processed",
+    ].join("\n"),
+    type: "string",
+    choices: ["component", "parameters"],
+  })
+  .strict(true).argv;
 
 // When http(s) storybook url is passed no modification required.
 // When file path is provided it needs to be converted to absolute path and file:/// needs to be added to support firefox browser.
 
 //const url: string =
-  //args.url.indexOf("http") > -1 ? args.url : "file:///" + resolve(args.url);
+//args.url.indexOf("http") > -1 ? args.url : "file:///" + resolve(args.url);
 
 console.log(`================ StoryWright params =================`);
 console.log(`Storybook url = ${args.url}`);
@@ -135,7 +145,8 @@ const storyWrightOptions: StoryWrightOptions = {
   totalPartitions: args.totalPartitions,
   waitTimeScreenshot: args.waitTimeScreenshot,
   excludePatterns: args.excludePatterns,
-  bailOnStoriesError: args.bailOnStoriesError
+  bailOnStoriesError: args.bailOnStoriesError,
+  stepsApi: args.stepsApi,
 };
 
 StoryWrightProcessor.process(storyWrightOptions);

src/utils.ts

@@ -14,8 +14,23 @@ export interface Story {
   tags: string[];
   name: string;
   kind: string;
-  parameters?:  import("./StoryWright/Steps").StoryParameters;
-  steps?: import('./StoryWright/Steps').Step[];
+  parameters?: import("./StoryWright/Steps").StoryParameters;
+  steps?: import("./StoryWright/Steps").Step[];
+  /**
+   * @deprecated - will be removed in next major. won't exist with `componentApi: 'parameters'`
+   */
   storyFn?: () => unknown;
   [key: string]: unknown;
 }
+
+export interface StorybookFeatures {
+  /**
+   * @deprecated - will be removed in next major. SB v8 doesn't support this anymore
+   */
+  argTypeTargetsV7: boolean;
+  buildStoriesJson: boolean;
+  disallowImplicitActionsInRenderV8: boolean;
+  legacyDecoratorFileOrder: boolean;
+  storyStoreV7?: boolean;
+  warnOnLegacyHierarchySeparator: boolean;
+}