feat(storybook): extract storybook tags

packages/storybook/src/test-runner.ts

@@ -9,6 +9,7 @@ import {
   getFitToContentFromParameters,
   type FitToContent,
 } from "./utils/parameters";
+import { getStoryTags } from "./utils/tags";
 
 export type { ArgosStorybookParameters } from "./utils/parameters";
 export type { ArgosScreenshotOptions };
@@ -49,6 +50,7 @@ export async function argosScreenshot(
       story: {
         id: storyContext.id,
         parameters: storyContext.parameters,
+        tags: getStoryTags(storyContext),
         // We don't have access to globals in this context.
         globals: null,
       },

packages/storybook/src/utils/screenshot.ts

@@ -39,6 +39,7 @@ export type StorybookScreenshotContext<Handler extends Page | Frame> = {
     id: string;
     parameters: Record<string, any>;
     globals: StorybookGlobals | null;
+    tags?: string[];
   };
 };
 
@@ -64,8 +65,10 @@ export async function storybookArgosScreenshot<Handler extends Page | Frame>(
    */
   options?: ArgosScreenshotOptions,
 ) {
+  const tags = mergeTags(context.story.tags, options?.tag);
   const argosOptions = {
     ...options,
+    tag: tags.length > 0 ? tags : undefined,
     // Disable aria-busy stabilization by default
     stabilize: options?.stabilize ?? {
       waitForAriaBusy: false,
@@ -153,7 +156,7 @@ export async function storybookArgosScreenshot<Handler extends Page | Frame>(
     await argosPlaywrightScreenshot(
       handler,
       composeName(context.name, getModeSuffix(currentMode)),
-      options,
+      argosOptions,
     );
   }
 
@@ -310,3 +313,13 @@ function getModeSuffix(mode: string | null) {
 function composeName(name: string, suffix: string | undefined) {
   return name + (suffix ?? "");
 }
+
+function toArray(v?: string | string[]) {
+  return Array.isArray(v) ? v : v ? [v] : [];
+}
+
+function mergeTags(...tagsArrays: (string | string[] | undefined)[]): string[] {
+  const merged = tagsArrays.flatMap((tags) => toArray(tags));
+  const uniqueTags = Array.from(new Set(merged));
+  return uniqueTags;
+}

packages/storybook/src/utils/tags.ts

@@ -0,0 +1,13 @@
+export function getStoryTags(storyContext: {
+  tags?: string[] | undefined;
+  parameters?: Record<string, any> | undefined;
+}): string[] {
+  const directTags = Array.isArray(storyContext.tags) ? storyContext.tags : [];
+  const parameterTags = Array.isArray(storyContext.parameters?.tags)
+    ? storyContext.parameters.tags
+    : [];
+  const uniqueTags = Array.from(new Set([...directTags, ...parameterTags]));
+  return uniqueTags.filter(
+    (tag): tag is string => typeof tag === "string" && tag !== "",
+  );
+}

packages/storybook/src/vitest.ts

@@ -4,6 +4,7 @@ import type { ArgosScreenshotOptions } from "./utils/screenshot";
 import type { ArgosScreenshotCommandArgs } from "./vitest-plugin";
 import type { ArgosAttachment } from "@argos-ci/playwright";
 import type { StorybookGlobals } from "./utils/parameters";
+import { getStoryTags } from "./utils/tags";
 
 export type { ArgosScreenshotOptions };
 
@@ -43,6 +44,7 @@ export function setupArgos(api: { afterEach: typeof vitest.afterEach }) {
         id: story.id,
         parameters: story.parameters,
         globals: story.globals,
+        tags: getStoryTags(story),
       },
       test: {
         id: ctx.task.id,
@@ -66,6 +68,7 @@ export async function argosScreenshot(
     parameters: Record<string, any>;
     globals: StorybookGlobals | null;
     id: string;
+    tags?: string[];
   },
   name: string,
 ) {
@@ -84,6 +87,7 @@ export async function argosScreenshot(
       id: story.id,
       parameters: story.parameters,
       globals: story.globals,
+      tags: getStoryTags(story),
     },
   });
 }