feat: implement new parameters api, make cli --help work and notify user on page errors that occured while processing stories for Steps #73

Hotell · 2025-02-17T16:16:46Z

Fixes:

false positives about `Steps` presence and execution

fixes false positives regarding story missing Steps definition.

Previously .steps property was always set on story because of logical error.

With this fix .step will exist on processed story only IFF a story really defines Steps

proper `--help` output

Features:

new API for defining `Steps`

This API should be used going forward as it supports various use-cases and Storybook version beyond v8

Before:

import {StoryWright, Steps} from 'storywright';
import {Button} from 'ui'

export default {
  component: Button,
  decorators: [ 
    (Story)=>{
       return <StoryWright steps={new Steps().snapshot('default').end()}>{ Story() }</StoryWright>
    }
  ]
}

After:

import {Steps, type StoryParameter} from 'storywright';
import {Button} from 'ui'

export default {
  component: Button,
  parameters: {
   storyWright: { 
       steps: new Steps().snapshot('default').end()
   }
  } satisfies StoryParameter
}

new CLI flag `--bailOnStoriesError`

💡 This is very useful for CI/CD pipelines to fail if there are any issues with stories or SW and Storybook stories fetching pipeline.

fails SW process in 2 places if enables:

1. errors occurred while processing stories -> it will exit process immediately.

2. errors occurred during creating snapshots images per story

new notification about issues that occurred while processing stories for Steps

previously these issues were consumed within page evaluation which consumer never received

improved Steps execution logging

Before:

After:

Related Issues

…s for Steps

Hotell · 2025-02-17T16:19:56Z

src/StoryWrightProcessor/StoryWrightProcessor.ts

@@ -100,19 +111,23 @@ export class StoryWrightProcessor {
            itemsForBatch.map(async (story: object) => {
              const id: string = story["id"];
              const tags: string = story["tags"];
-              if(tags && tags.includes("no-screenshot")){
-                console.log(`StoryId: ${id} has tag no-screenshot hence skipping.`);
+              if (tags && tags.includes("no-screenshot")) {


outcome of running prettier -w

Hotell · 2025-02-17T16:20:00Z

src/StoryWrightProcessor/StoryWrightProcessor.ts

@@ -65,7 +76,7 @@ export class StoryWrightProcessor {
          } = require(storiesJsonPath);
          stories = Object.values(rawStoriesObject.stories ?? {});
          console.log(`${stories.length} stories found`);
-          console.warn('NOTE: stories Steps will not be processed')
+          console.warn("NOTE: stories Steps will not be processed");


outcome of running prettier -w

Hotell · 2025-02-17T16:20:08Z

src/StoryWrightProcessor/StoryWrightProcessor.ts

                // regex test to check if exclude pattern is present in ssNamePrefix
                let regex = new RegExp(excludePattern);
-                if(regex.test(ssNamePrefix)){
-                  console.log(`Skipping story ${ssNamePrefix} as it matches exclude pattern ${excludePattern}`);
+                if (regex.test(ssNamePrefix)) {


outcome of running prettier -w

Hotell · 2025-02-17T16:20:49Z

src/main.ts

@@ -26,7 +36,6 @@ const args = argv
    type: "string",
  })
  .option("browsers", {
-    alias: "browsers",


these were clashing with actual args preventing proper --help output

… stories for Steps

…teps

…any story processing occurred

…undefined check when obtaining steps via findSteps fn

Hotell · 2025-02-19T12:19:02Z

src/StoryWrightProcessor/GetStories.js

-          let steps = findSteps(res);
-          if (steps !== "undefined" && steps !== null) {
+          const steps = findSteps(res);
+          if (steps !== undefined && steps !== null) {


this fixes false positives regarding story missing Steps definition. this was previously always setting steps property. with this fix .step will exist on processed story only IFF a story really defines Steps

…flaky

…ely if any story processing occurred

Hotell added 2 commits February 17, 2025 14:12

fix: make --help render all supported arguments

f9fea66

feat: notify user on page errors that occured while processing storie…

d576d27

…s for Steps

Hotell changed the title ~~Feat/improve cli args~~ feat: notify user on page errors that occured while processing stories for Steps Feb 17, 2025

Hotell commented Feb 17, 2025

View reviewed changes

Hotell added 2 commits February 17, 2025 18:09

fixup! feat: notify user on page errors that occured while processing…

7f05bd9

… stories for Steps

chore: bump version for release

3b59439

Hotell marked this pull request as ready for review February 17, 2025 17:23

feat: support more robust CSF2/3 storybook parameters API to define S…

e26087e

…teps

Hotell changed the title ~~feat: notify user on page errors that occured while processing stories for Steps~~ feat: implement new parameters api, make cli --help work and notify user on page errors that occured while processing stories for Steps Feb 18, 2025

Hotell mentioned this pull request Feb 18, 2025

fix(vr-tests-react-components): migrate to new StoryWright api to define Steps to resolve VR snapshoting issues microsoft/fluentui#33860

Draft

Hotell added 3 commits February 18, 2025 16:58

feat: add --bailOnStoriesError to CLI to exit process imeediately if …

265d42b

…any story processing occurred

chore: add better type-safety by introducing Story interface and fix …

0d6a32d

…undefined check when obtaining steps via findSteps fn

feat: provide better logging output when executing Steps

87813bd

Hotell commented Feb 19, 2025

View reviewed changes

Hotell added 4 commits February 19, 2025 16:00

fixup! feat: provide better logging output when executing Steps

9b792be

feat: use waitForSelector within PWE within hover to make steps less …

a8e5c40

…flaky

fixup! feat: add --bailOnStoriesError to CLI to exit process imeediat…

12e0814

…ely if any story processing occurred

fix: improve StoryParamaters api

ea99f9d

Hotell mentioned this pull request Feb 20, 2025

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

Draft

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: implement new parameters api, make cli --help work and notify user on page errors that occured while processing stories for Steps #73

feat: implement new parameters api, make cli --help work and notify user on page errors that occured while processing stories for Steps #73

Hotell commented Feb 17, 2025 •

edited

Loading

Hotell Feb 17, 2025

Hotell Feb 17, 2025

Hotell Feb 17, 2025

Hotell Feb 17, 2025

Hotell Feb 19, 2025

feat: implement new parameters api, make cli --help work and notify user on page errors that occured while processing stories for Steps #73

Are you sure you want to change the base?

feat: implement new parameters api, make cli --help work and notify user on page errors that occured while processing stories for Steps #73

Conversation

Hotell commented Feb 17, 2025 • edited Loading

Fixes:

false positives about Steps presence and execution

proper --help output

Features:

new API for defining Steps

new CLI flag --bailOnStoriesError

new notification about issues that occurred while processing stories for Steps

improved Steps execution logging

Related Issues

Hotell Feb 17, 2025

Choose a reason for hiding this comment

Hotell Feb 17, 2025

Choose a reason for hiding this comment

Hotell Feb 17, 2025

Choose a reason for hiding this comment

Hotell Feb 17, 2025

Choose a reason for hiding this comment

Hotell Feb 19, 2025

Choose a reason for hiding this comment

Hotell commented Feb 17, 2025 •

edited

Loading

false positives about `Steps` presence and execution

proper `--help` output

new API for defining `Steps`

new CLI flag `--bailOnStoriesError`