@crvy/strybk 0.0.6 → 0.0.7

package/CHANGELOG.md

@@ -5,6 +5,25 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.0.7] - 2026-08-26
+
+### Added
+
+- Nest one describe per story title segment
+
+### Documentation
+
+- Add nested describe titles design spec
+- Add nested describe titles implementation plan
+- Note nested describes and --grep caveat
+
+### Fixed
+
+- Escape backslashes in generated titles and story names
+
+### Miscellaneous
+
+- Upgrade bun to 1.4.0
 ## [0.0.6] - 2026-08-24
 
 ### Added

package/README.md

@@ -40,6 +40,8 @@ export default defineConfig({
 
 Each generated spec renders a Playwright test per story. At runtime, `parameters.creevey` (read from the running Storybook, merged across global / kind / story levels) drives capture and skip behavior — no Storybook addon required:
 
+Generated suites nest one `test.describe` per title segment — `Components/Button` becomes `describe('Components') > describe('Button')` — so the Playwright HTML reporter shows a collapsible tree. Snapshot filenames are unaffected. Note that `--grep` patterns containing `/` no longer match (Playwright greps the space-joined title path); grep by a single segment instead, e.g. `--grep CommentLine`.
+
 - `captureElement: '<selector>'` — captures `page.locator('<selector>')`.
 - `captureElement: null` (or unset) — captures the viewport.
 - `skip: { '<reason>': { in, kinds, stories } }` — marks the test skipped with `<reason>`. Note: `in` matches the **Playwright project name** (not the browser engine), so with the default project name `chromium`, a rule like `{ in: 'chrome' }` won't match — name your Playwright projects to line up with your `in:` rules, or scope rules via `kinds`/`stories`.

package/dist/src/generate/render.js

@@ -1,17 +1,38 @@
-const escapeSingleQuotes = (value) => value.replace(/'/gu, "\\'");
-const renderTest = (story) => [
-    `  test('${escapeSingleQuotes(story.name)}', async ({ sharedPage, creevey }) => {`,
-    `    const { skip, reason, captureElement, ignoreElements } = creevey.params('${story.id}');`,
-    `    test.skip(skip, reason);`,
-    `    await switchStory(sharedPage, '${story.id}');`,
-    `    const target = captureElement ? sharedPage.locator(captureElement) : sharedPage;`,
-    `    await expect(target).toHaveScreenshot({`,
-    `      mask: ignoreElements.map((selector) => sharedPage.locator(selector)),`,
-    `    });`,
-    `  });`,
-].join("\n");
+const escapeSingleQuotes = (value) => value.replace(/\\/gu, "\\\\").replace(/'/gu, "\\'");
+const splitTitleSegments = (title) => title
+    .split("/")
+    .map((segment) => segment.trim())
+    .filter((segment) => segment.length > 0);
+const renderTest = (story, depth) => {
+    const indent = "  ".repeat(depth);
+    return [
+        `${indent}test('${escapeSingleQuotes(story.name)}', async ({ sharedPage, creevey }) => {`,
+        `${indent}  const { skip, reason, captureElement, ignoreElements } = creevey.params('${story.id}');`,
+        `${indent}  test.skip(skip, reason);`,
+        `${indent}  await switchStory(sharedPage, '${story.id}');`,
+        `${indent}  const target = captureElement ? sharedPage.locator(captureElement) : sharedPage;`,
+        `${indent}  await expect(target).toHaveScreenshot({`,
+        `${indent}    mask: ignoreElements.map((selector) => sharedPage.locator(selector)),`,
+        `${indent}  });`,
+        `${indent}});`,
+    ].join("\n");
+};
+const wrapInDescribes = (segments, tests, depth) => {
+    const indent = "  ".repeat(depth);
+    const [segment, ...rest] = segments;
+    if (segment === undefined) {
+        return tests;
+    }
+    return [
+        `${indent}test.describe('${escapeSingleQuotes(segment)}', () => {`,
+        wrapInDescribes(rest, tests, depth + 1),
+        `${indent}});`,
+    ].join("\n");
+};
 export function renderScreenshotSpec(args) {
     const generatedRegionName = args.config.generatedRegionName ?? "auto-screenshots";
-    const tests = args.stories.map(renderTest).join("\n\n");
-    return `import { test, expect, switchStory } from '@crvy/strybk';\n\n// @generated-begin ${generatedRegionName}\ntest.describe('${escapeSingleQuotes(args.title)}', () => {\n${tests}\n});\n// @generated-end ${generatedRegionName}\n\n${args.manualRegion}`;
+    const segments = splitTitleSegments(args.title);
+    const tests = args.stories.map((story) => renderTest(story, segments.length)).join("\n\n");
+    const body = wrapInDescribes(segments, tests, 0);
+    return `import { test, expect, switchStory } from '@crvy/strybk';\n\n// @generated-begin ${generatedRegionName}\n${body}\n// @generated-end ${generatedRegionName}\n\n${args.manualRegion}`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crvy/strybk",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Generator-first Playwright screenshot testing for Storybook.",
   "keywords": [
     "crvy",
@@ -72,7 +72,7 @@
   },
   "devDependencies": {
     "@playwright/test": "1.59.1",
-    "@types/bun": "^1.3.7",
+    "@types/bun": "^1.4.0",
     "@types/node": "25.9.0",
     "git-cliff": "2.13.1",
     "jscpd": "^4.0.8",
@@ -88,8 +88,8 @@
     "@playwright/test": ">=1.59.0"
   },
   "engines": {
-    "bun": ">=1.3.0",
+    "bun": ">=1.4.0",
     "node": ">=22"
   },
-  "packageManager": "bun@1.3.13"
+  "packageManager": "bun@1.4.0"
 }