Add deeper Playwright coverage for Preview Generator V2 UI and behavior - PR_26126_044-preview-generator-v2-playwright-depth

DavidQ · DavidQ · commit 50e525956b8a · 2026-05-05T19:38:25.000-04:00
diff --git a/docs/dev/reports/preview_generator_v2_playwright_depth.txt b/docs/dev/reports/preview_generator_v2_playwright_depth.txt
@@ -0,0 +1,57 @@
+PR_26126_044 Preview Generator V2 Playwright depth
+
+Scope
+- Extended tests/playwright/PreviewGeneratorV2Baseline.spec.mjs.
+- Added one minimal Preview Generator V2 CSS fix because the deeper accordion test found a real right-column collapse bug.
+- No samples, schemas, or start_of_day files were modified.
+
+Playwright coverage added
+- Generate Preview required-field state:
+  - disabled before a repo destination is selected.
+  - remains disabled when only Paths or IDs is filled.
+  - becomes enabled after a repo destination is selected and required existing defaults remain valid.
+- Target Source default:
+  - verifies Games is selected by default.
+- Accordion behavior:
+  - verifies close/open state for left-column sections:
+    - Repo Destination
+    - Target Source
+    - Asset folder
+    - Capture mode
+    - Render Controls
+  - verifies close/open state for right-column Output Summary.
+- Paths or IDs input:
+  - verifies the input accepts text.
+  - verifies it remains visible.
+  - verifies it uses the expected stretch-related styling and width inside its accordion content.
+- Status log:
+  - verifies Clear empties the status log output area.
+- Phase input behavior:
+  - uses a browser-side fake File System Access repo handle.
+  - verifies samples/phase-01 is resolved by directory enumeration.
+  - verifies only folders with index.html are processed.
+  - verifies missing numeric folders and file entries are not processed.
+  - verifies preview.svg write targets the enumerated sample folder only.
+
+Bug found and fixed
+- Output Summary content received the hidden attribute but stayed visually visible because a Preview Generator V2 CSS rule overrode the shared hidden rule.
+- Added a scoped hidden override:
+  .preview-generator-v2__output-summary .accordion-v2__content[hidden] { display: none; }
+- This preserves intended accordion behavior and does not alter generation logic.
+
+Validation
+- node --check tests/playwright/PreviewGeneratorV2Baseline.spec.mjs passed.
+- npm run test:workspace-v2 passed.
+- Result: 3 passed.
+- Confirmed no samples, schemas, or start_of_day changes.
+
+Full samples smoke test
+- Skipped intentionally.
+- Reason: this PR adds targeted Preview Generator V2 Playwright coverage and does not modify sample JSON or the shared sample runtime.
+
+Manual validation
+- Open tools/preview-generator-v2/index.html.
+- Confirm Generate Preview is disabled until required fields are present.
+- Toggle left-column accordions and Output Summary.
+- Enter text into Paths or IDs and confirm it remains visible in the center panel.
+- Use Clear in Status and confirm the log output clears.
diff --git a/tests/playwright/PreviewGeneratorV2Baseline.spec.mjs b/tests/playwright/PreviewGeneratorV2Baseline.spec.mjs
@@ -1,18 +1,139 @@
 import { expect, test } from "@playwright/test";
 import { startRepoServer } from "../helpers/playwrightRepoServer.mjs";
 
+async function installFakeRepoPicker(page, { validSampleIds = ["0102"], invalidSampleIds = [] } = {}) {
+  await page.addInitScript(({ validSampleIds: validIds, invalidSampleIds: invalidIds }) => {
+    class FakeFileHandle {
+      constructor(name, path, contents = "") {
+        this.kind = "file";
+        this.name = name;
+        this.path = path;
+        this.contents = contents;
+      }
+
+      async getFile() {
+        const handle = this;
+        return {
+          async text() {
+            return handle.contents;
+          }
+        };
+      }
+
+      async createWritable() {
+        const handle = this;
+        return {
+          async write(contents) {
+            handle.contents = String(contents);
+            window.__previewGeneratorV2Writes.push({ path: handle.path, contents: handle.contents });
+          },
+          async close() {}
+        };
+      }
+    }
+
+    class FakeDirectoryHandle {
+      constructor(name, path = name) {
+        this.kind = "directory";
+        this.name = name;
+        this.path = path;
+        this.children = new Map();
+      }
+
+      addDirectory(name) {
+        const directory = new FakeDirectoryHandle(name, `${this.path}/${name}`);
+        this.children.set(name, directory);
+        return directory;
+      }
+
+      addFile(name, contents = "") {
+        const file = new FakeFileHandle(name, `${this.path}/${name}`, contents);
+        this.children.set(name, file);
+        return file;
+      }
+
+      async getDirectoryHandle(name, options = {}) {
+        const child = this.children.get(name);
+        if (child?.kind === "directory") {
+          return child;
+        }
+        if (options.create) {
+          return this.addDirectory(name);
+        }
+        throw new Error(`Missing directory: ${this.path}/${name}`);
+      }
+
+      async getFileHandle(name, options = {}) {
+        const child = this.children.get(name);
+        if (child?.kind === "file") {
+          return child;
+        }
+        if (options.create) {
+          return this.addFile(name);
+        }
+        throw new Error(`Missing file: ${this.path}/${name}`);
+      }
+
+      async *entries() {
+        for (const entry of this.children.entries()) {
+          yield entry;
+        }
+      }
+    }
+
+    const repo = new FakeDirectoryHandle("HTML-JavaScript-Gaming");
+    const samples = repo.addDirectory("samples");
+    const phase01 = samples.addDirectory("phase-01");
+    repo.addDirectory("games");
+    repo.addDirectory("tools");
+
+    for (const sampleId of validIds) {
+      phase01.addDirectory(sampleId).addFile("index.html", "<!doctype html><canvas></canvas>");
+    }
+    for (const sampleId of invalidIds) {
+      phase01.addDirectory(sampleId);
+    }
+    phase01.addFile("0199", "not a sample folder");
+
+    window.__previewGeneratorV2Writes = [];
+    window.showDirectoryPicker = async () => repo;
+  }, { validSampleIds, invalidSampleIds });
+}
+
+async function openPreviewGenerator(page, { withFakeRepo = false, validSampleIds, invalidSampleIds } = {}) {
+  const server = await startRepoServer();
+  if (withFakeRepo) {
+    await installFakeRepoPicker(page, { validSampleIds, invalidSampleIds });
+  }
+  await page.goto(`${server.baseUrl}/tools/preview-generator-v2/index.html`, { waitUntil: "domcontentloaded" });
+  return server;
+}
+
+async function expectAccordionToggles(page, contentId) {
+  const header = page.locator(`.accordion-v2__header[aria-controls="${contentId}"]`);
+  const content = page.locator(`#${contentId}`);
+  await expect(header).toBeVisible();
+  await expect(content).toBeVisible();
+
+  await header.click();
+  await expect(content).toBeHidden();
+  await expect(header).toHaveAttribute("aria-expanded", "false");
+
+  await header.click();
+  await expect(content).toBeVisible();
+  await expect(header).toHaveAttribute("aria-expanded", "true");
+}
+
 test.describe("Preview Generator V2 baseline", () => {
   test("launches the tool shell and toggles a working accordion", async ({ page }) => {
-    const server = await startRepoServer();
+    const server = await openPreviewGenerator(page);
     const pageErrors = [];
 
     page.on("pageerror", (error) => {
       pageErrors.push(error.message);
     });
 
     try {
-      await page.goto(`${server.baseUrl}/tools/preview-generator-v2/index.html`, { waitUntil: "domcontentloaded" });
-
       await expect(page.locator(".preview-generator-v2.app-shell")).toBeVisible();
       await expect(page.locator('link[href="../common/toolShellCommon.css"]')).toHaveCount(1);
       await expect(page.locator("h1", { hasText: "Preview Generator V2" })).toBeVisible();
@@ -79,4 +200,110 @@ test.describe("Preview Generator V2 baseline", () => {
       await server.close();
     }
   });
+
+  test("exercises controls, required-field gating, accordions, paths layout, and status clear", async ({ page }) => {
+    const server = await openPreviewGenerator(page, { withFakeRepo: true });
+    const pageErrors = [];
+
+    page.on("pageerror", (error) => {
+      pageErrors.push(error.message);
+    });
+
+    try {
+      await expect(page.locator("#targetTypeGames")).toBeChecked();
+      await expect(page.locator("#executeBtn")).toBeDisabled();
+
+      await page.locator("#sampleList").fill("my-game");
+      await expect(page.locator("#sampleList")).toHaveValue("my-game");
+      await expect(page.locator("#executeBtn")).toBeDisabled();
+
+      const pathsLayout = await page.locator("#sampleList").evaluate((input) => {
+        const content = document.getElementById("pathsOrIdsContent");
+        const inputRect = input.getBoundingClientRect();
+        const contentRect = content.getBoundingClientRect();
+        const inputStyle = getComputedStyle(input);
+        const contentStyle = getComputedStyle(content);
+        return {
+          inputHeight: inputRect.height,
+          contentHeight: contentRect.height,
+          inputWidth: inputRect.width,
+          contentWidth: contentRect.width,
+          display: inputStyle.display,
+          height: inputStyle.height,
+          overflow: inputStyle.overflow,
+          resize: inputStyle.resize,
+          contentDisplay: contentStyle.display
+        };
+      });
+      expect(pathsLayout.display).not.toBe("none");
+      expect(pathsLayout.contentDisplay).toBe("flex");
+      expect(pathsLayout.inputHeight).toBeGreaterThan(0);
+      expect(pathsLayout.height).not.toBe("auto");
+      expect(pathsLayout.overflow).toBe("auto");
+      expect(pathsLayout.resize).toBe("none");
+      expect(pathsLayout.contentHeight - pathsLayout.inputHeight).toBeLessThan(40);
+      expect(pathsLayout.contentWidth - pathsLayout.inputWidth).toBeLessThan(40);
+
+      await page.locator("#pickRepoBtn").click();
+      await expect(page.locator("#repoSelectedValue")).toHaveText("HTML-JavaScript-Gaming");
+      await expect(page.locator("#executeBtn")).toBeEnabled();
+
+      await page.locator("#clearLogBtn").click();
+      await expect(page.locator("#log")).toHaveText("");
+
+      for (const contentId of [
+        "repoDestinationContent",
+        "targetSourceContent",
+        "assetFolderContent",
+        "captureModeContent",
+        "renderControlsContent",
+        "outputSummaryContent"
+      ]) {
+        await expectAccordionToggles(page, contentId);
+      }
+
+      expect(pageErrors).toEqual([]);
+    } finally {
+      await server.close();
+    }
+  });
+
+  test("phase folder input enumerates existing sample folders only", async ({ page }) => {
+    const server = await openPreviewGenerator(page, {
+      withFakeRepo: true,
+      validSampleIds: ["0102"],
+      invalidSampleIds: ["0101", "0103"]
+    });
+    const pageErrors = [];
+
+    page.on("pageerror", (error) => {
+      pageErrors.push(error.message);
+    });
+
+    try {
+      await page.locator("#pickRepoBtn").click();
+      await page.locator("#targetTypeSamples").check();
+      await page.locator("#sampleList").fill("samples/phase-01");
+
+      await expect(page.locator("#writeFolderActualValue")).toHaveText("samples\\phase-01\\0102\\assets\\images");
+      await expect(page.locator("#executeBtn")).toBeEnabled();
+
+      await page.locator("#executeBtn").click();
+      await expect(page.locator("#log")).toContainText("RUN  0102", { timeout: 10000 });
+      await expect(page.locator("#log")).toContainText("Done.", { timeout: 10000 });
+
+      const logText = await page.locator("#log").textContent();
+      expect(logText).not.toContain("RUN  0101");
+      expect(logText).not.toContain("RUN  0103");
+      expect(logText).not.toContain("RUN  0199");
+
+      const writes = await page.evaluate(() => window.__previewGeneratorV2Writes);
+      expect(writes).toHaveLength(1);
+      expect(writes[0].path).toBe("HTML-JavaScript-Gaming/samples/phase-01/0102/assets/images/preview.svg");
+
+      expect(pageErrors).toEqual([]);
+    } finally {
+      await server.close();
+    }
+  });
 });
diff --git a/tools/preview-generator-v2/previewGeneratorV2.css b/tools/preview-generator-v2/previewGeneratorV2.css
@@ -50,6 +50,10 @@ body.tools-platform-tool-page[data-tool-id="preview-generator-v2"] > .palette-ma
   padding: 8px;
 }
 
+.preview-generator-v2__output-summary .accordion-v2__content[hidden] {
+  display: none;
+}
+
 .preview-generator-v2__output-summary .accordion-v2__header {
   flex-basis: 38px;
   min-height: 38px;
