@demon-utils/playwright 0.1.5 → 0.1.6

package/src/html-generator.test.ts

@@ -1,15 +1,26 @@
 import { describe, test, expect } from "bun:test";
 
-import type { ReviewMetadata } from "./review-types.ts";
+import type { ReviewMetadata, CodeReview } from "./review-types.ts";
 import { generateReviewHtml } from "./html-generator.ts";
 
+function makeReview(overrides?: Partial<CodeReview>): CodeReview {
+  return {
+    summary: "Good changes overall",
+    highlights: ["Clean implementation", "Good test coverage"],
+    verdict: "approve",
+    verdictReason: "No major issues found",
+    issues: [],
+    ...overrides,
+  };
+}
+
 function makeMetadata(overrides?: Partial<ReviewMetadata>): ReviewMetadata {
   return {
     demos: [
       {
         file: "login-flow.webm",
         summary: "Shows the login flow end to end",
-        annotations: [
+        steps: [
           { timestampSeconds: 0, text: "Page loads" },
           { timestampSeconds: 5, text: "User types credentials" },
           { timestampSeconds: 12, text: "Login succeeds" },
@@ -18,12 +29,13 @@ function makeMetadata(overrides?: Partial<ReviewMetadata>): ReviewMetadata {
       {
         file: "signup.webm",
         summary: "Demonstrates the signup process",
-        annotations: [
+        steps: [
           { timestampSeconds: 0, text: "Signup form appears" },
           { timestampSeconds: 8, text: "Form submitted" },
         ],
       },
     ],
+    review: makeReview(),
     ...overrides,
   };
 }
@@ -54,9 +66,13 @@ describe("generateReviewHtml", () => {
       expect(html).toContain('src="login-flow.webm"');
     });
 
-    test("has controls attribute", () => {
+    test("has custom controls bar instead of native controls", () => {
       const html = generateReviewHtml({ metadata: makeMetadata() });
-      expect(html).toContain("<video id=\"review-video\" controls");
+      expect(html).not.toMatch(/<video[^>]*\bcontrols\b/);
+      expect(html).toContain('class="video-controls"');
+      expect(html).toContain('id="vc-play"');
+      expect(html).toContain('id="vc-seek"');
+      expect(html).toContain('id="vc-time"');
     });
   });
 
@@ -119,7 +135,7 @@ describe("generateReviewHtml", () => {
           {
             file: "test.webm",
             summary: "contains </script> tag",
-            annotations: [],
+            steps: [],
           },
         ],
       });
@@ -136,7 +152,7 @@ describe("generateReviewHtml", () => {
           {
             file: '<img src="x">.webm',
             summary: "normal summary",
-            annotations: [],
+            steps: [],
           },
         ],
       });
@@ -161,19 +177,19 @@ describe("generateReviewHtml", () => {
       ).toThrow("metadata.demos must not be empty");
     });
 
-    test("handles demo with many annotations", () => {
-      const annotations = Array.from({ length: 100 }, (_, i) => ({
+    test("handles demo with many steps", () => {
+      const steps = Array.from({ length: 100 }, (_, i) => ({
         timestampSeconds: i * 10,
-        text: `Annotation ${i}`,
+        text: `Step ${i}`,
       }));
       const metadata: ReviewMetadata = {
         demos: [
-          { file: "long.webm", summary: "Long demo", annotations },
+          { file: "long.webm", summary: "Long demo", steps },
         ],
       };
       const html = generateReviewHtml({ metadata });
-      expect(html).toContain("Annotation 0");
-      expect(html).toContain("Annotation 99");
+      expect(html).toContain("Step 0");
+      expect(html).toContain("Step 99");
     });
 
     test("handles single demo", () => {
@@ -182,7 +198,7 @@ describe("generateReviewHtml", () => {
           {
             file: "only.webm",
             summary: "The only demo",
-            annotations: [{ timestampSeconds: 3, text: "Something happens" }],
+            steps: [{ timestampSeconds: 3, text: "Something happens" }],
           },
         ],
       };
@@ -192,4 +208,354 @@ describe("generateReviewHtml", () => {
       expect(html).toContain('src="only.webm"');
     });
   });
+
+  describe("steps section", () => {
+    test("renders Steps section", () => {
+      const html = generateReviewHtml({ metadata: makeMetadata() });
+      expect(html).toContain('id="steps-section"');
+      expect(html).toContain('id="steps-list"');
+    });
+
+    test("includes step-active CSS class", () => {
+      const html = generateReviewHtml({ metadata: makeMetadata() });
+      expect(html).toContain("step-active");
+    });
+
+    test("includes timeupdate event handler", () => {
+      const html = generateReviewHtml({ metadata: makeMetadata() });
+      expect(html).toContain("timeupdate");
+      expect(html).toContain("#steps-list button[data-time]");
+    });
+
+    test("embeds step data in metadata JSON", () => {
+      const metadata: ReviewMetadata = {
+        demos: [
+          {
+            file: "demo.webm",
+            summary: "Demo with steps",
+            steps: [
+              { timestampSeconds: 1.5, text: "Step one" },
+            ],
+          },
+        ],
+      };
+      const html = generateReviewHtml({ metadata });
+      expect(html).toContain("Step one");
+      expect(html).toContain("1.5");
+    });
+
+    test("does not contain annotations section", () => {
+      const html = generateReviewHtml({ metadata: makeMetadata() });
+      expect(html).not.toContain("annotations-section");
+      expect(html).not.toContain("annotations-list");
+    });
+  });
+
+  describe("tabs", () => {
+    test("renders tab bar with Summary and Demos tabs when review present", () => {
+      const html = generateReviewHtml({ metadata: makeMetadata() });
+      expect(html).toContain('class="tab-bar"');
+      expect(html).toContain('data-tab="summary"');
+      expect(html).toContain('data-tab="demos"');
+      expect(html).toContain(">Summary</button>");
+      expect(html).toContain(">Demos</button>");
+    });
+
+    test("renders only Demos tab when review is absent", () => {
+      const html = generateReviewHtml({
+        metadata: makeMetadata({ review: undefined }),
+      });
+      expect(html).toContain('class="tab-bar"');
+      expect(html).not.toContain('data-tab="summary"');
+      expect(html).toContain('data-tab="demos"');
+    });
+
+    test("Summary tab is active by default when review present", () => {
+      const html = generateReviewHtml({ metadata: makeMetadata() });
+      const summaryBtn = html.match(/class="tab-btn([^"]*)"[^>]*data-tab="summary"/);
+      expect(summaryBtn).toBeTruthy();
+      expect(summaryBtn![1]).toContain("active");
+
+      const demosBtn = html.match(/class="tab-btn([^"]*)"[^>]*data-tab="demos"/);
+      expect(demosBtn).toBeTruthy();
+      expect(demosBtn![1]).not.toContain("active");
+    });
+
+    test("Demos tab is active by default when review is absent", () => {
+      const html = generateReviewHtml({
+        metadata: makeMetadata({ review: undefined }),
+      });
+      const demosBtn = html.match(/class="tab-btn([^"]*)"[^>]*data-tab="demos"/);
+      expect(demosBtn).toBeTruthy();
+      expect(demosBtn![1]).toContain("active");
+    });
+
+    test("tab-summary panel is active when review present", () => {
+      const html = generateReviewHtml({ metadata: makeMetadata() });
+      expect(html).toContain('id="tab-summary"');
+      const panel = html.match(/id="tab-summary"[^>]*class="tab-panel([^"]*)"/);
+      expect(panel).toBeTruthy();
+      expect(panel![1]).toContain("active");
+    });
+
+    test("tab-demos panel is not active when review present", () => {
+      const html = generateReviewHtml({ metadata: makeMetadata() });
+      const panel = html.match(/id="tab-demos"[^>]*class="tab-panel([^"]*)"/);
+      expect(panel).toBeTruthy();
+      expect(panel![1]).not.toContain("active");
+    });
+
+    test("tab-demos panel is active when review absent", () => {
+      const html = generateReviewHtml({
+        metadata: makeMetadata({ review: undefined }),
+      });
+      const panel = html.match(/id="tab-demos"[^>]*class="tab-panel([^"]*)"/);
+      expect(panel).toBeTruthy();
+      expect(panel![1]).toContain("active");
+    });
+
+    test("no tab-summary panel when review absent", () => {
+      const html = generateReviewHtml({
+        metadata: makeMetadata({ review: undefined }),
+      });
+      expect(html).not.toContain('id="tab-summary"');
+    });
+
+    test("includes tab switching JS", () => {
+      const html = generateReviewHtml({ metadata: makeMetadata() });
+      expect(html).toContain("tabBtns");
+      expect(html).toContain("tabPanels");
+      expect(html).toContain('data-tab');
+    });
+  });
+
+  describe("review section", () => {
+    test("renders review section when review is present", () => {
+      const html = generateReviewHtml({ metadata: makeMetadata() });
+      expect(html).toContain('class="review-section"');
+      expect(html).toContain('class="review-body"');
+    });
+
+    test("does not render review section when review is absent", () => {
+      const html = generateReviewHtml({
+        metadata: makeMetadata({ review: undefined }),
+      });
+      expect(html).not.toContain('class="review-section"');
+      expect(html).not.toContain('class="verdict-banner');
+    });
+
+    test("verdict banner has approve class for approve verdict", () => {
+      const html = generateReviewHtml({
+        metadata: makeMetadata({ review: makeReview({ verdict: "approve" }) }),
+      });
+      expect(html).toContain('class="verdict-banner approve"');
+      expect(html).toContain("Approved");
+    });
+
+    test("verdict banner has request-changes class for request_changes verdict", () => {
+      const html = generateReviewHtml({
+        metadata: makeMetadata({ review: makeReview({ verdict: "request_changes" }) }),
+      });
+      expect(html).toContain('class="verdict-banner request-changes"');
+      expect(html).toContain("Changes Requested");
+    });
+
+    test("renders review summary", () => {
+      const html = generateReviewHtml({
+        metadata: makeMetadata({ review: makeReview({ summary: "Overall solid work" }) }),
+      });
+      expect(html).toContain("Overall solid work");
+    });
+
+    test("renders highlights list", () => {
+      const html = generateReviewHtml({
+        metadata: makeMetadata({
+          review: makeReview({ highlights: ["Fast response", "Good error handling"] }),
+        }),
+      });
+      expect(html).toContain('class="highlights-list"');
+      expect(html).toContain("Fast response");
+      expect(html).toContain("Good error handling");
+    });
+
+    test("renders issues with severity badges", () => {
+      const html = generateReviewHtml({
+        metadata: makeMetadata({
+          review: makeReview({
+            issues: [
+              { severity: "major", description: "Memory leak in handler" },
+              { severity: "minor", description: "Missing edge case" },
+              { severity: "nit", description: "Rename variable" },
+            ],
+          }),
+        }),
+      });
+      expect(html).toContain('class="issue major"');
+      expect(html).toContain('class="issue minor"');
+      expect(html).toContain('class="issue nit"');
+      expect(html).toContain('class="severity-badge">MAJOR');
+      expect(html).toContain('class="severity-badge">MINOR');
+      expect(html).toContain('class="severity-badge">NIT');
+      expect(html).toContain("Memory leak in handler");
+      expect(html).toContain("Missing edge case");
+      expect(html).toContain("Rename variable");
+    });
+
+    test("shows no-issues message when issues array is empty", () => {
+      const html = generateReviewHtml({
+        metadata: makeMetadata({ review: makeReview({ issues: [] }) }),
+      });
+      expect(html).toContain('class="no-issues"');
+      expect(html).toContain("No issues found");
+    });
+
+    test("escapes HTML in review text", () => {
+      const html = generateReviewHtml({
+        metadata: makeMetadata({
+          review: makeReview({
+            summary: '<script>alert("xss")</script>',
+            verdictReason: "Uses <b>dangerous</b> patterns",
+            highlights: ['Handles <img src="x"> gracefully'],
+            issues: [
+              { severity: "major", description: 'Found <script>alert("xss")</script>' },
+            ],
+          }),
+        }),
+      });
+      expect(html).not.toContain('<script>alert("xss")</script>');
+      expect(html).toContain("&lt;script&gt;alert");
+      expect(html).toContain("&lt;b&gt;dangerous&lt;/b&gt;");
+    });
+
+    test("review section is inside summary tab panel", () => {
+      const html = generateReviewHtml({ metadata: makeMetadata() });
+      const summaryPanelIdx = html.indexOf('id="tab-summary"');
+      const reviewSectionIdx = html.indexOf('class="review-section"');
+      const demosPanelIdx = html.indexOf('id="tab-demos"');
+      expect(summaryPanelIdx).toBeGreaterThan(-1);
+      expect(reviewSectionIdx).toBeGreaterThan(summaryPanelIdx);
+      expect(reviewSectionIdx).toBeLessThan(demosPanelIdx);
+    });
+
+    test("renders verdict reason", () => {
+      const html = generateReviewHtml({
+        metadata: makeMetadata({
+          review: makeReview({ verdictReason: "All tests pass and code is clean" }),
+        }),
+      });
+      expect(html).toContain("All tests pass and code is clean");
+    });
+  });
+
+  describe("feedback tab", () => {
+    test("renders Feedback tab button when review is present", () => {
+      const html = generateReviewHtml({ metadata: makeMetadata() });
+      expect(html).toContain('data-tab="feedback"');
+      expect(html).toContain(">Feedback</button>");
+    });
+
+    test("does not render Feedback tab button when review is absent", () => {
+      const html = generateReviewHtml({
+        metadata: makeMetadata({ review: undefined }),
+      });
+      expect(html).not.toContain('data-tab="feedback"');
+    });
+
+    test("renders Feedback tab panel when review is present", () => {
+      const html = generateReviewHtml({ metadata: makeMetadata() });
+      expect(html).toContain('id="tab-feedback"');
+    });
+
+    test("does not render Feedback tab panel when review is absent", () => {
+      const html = generateReviewHtml({
+        metadata: makeMetadata({ review: undefined }),
+      });
+      expect(html).not.toContain('id="tab-feedback"');
+    });
+
+    test("Feedback tab is not active by default", () => {
+      const html = generateReviewHtml({ metadata: makeMetadata() });
+      const feedbackBtn = html.match(/class="tab-btn([^"]*)"[^>]*data-tab="feedback"/);
+      expect(feedbackBtn).toBeTruthy();
+      expect(feedbackBtn![1]).not.toContain("active");
+
+      const feedbackPanel = html.match(/id="tab-feedback"[^>]*class="tab-panel([^"]*)"/);
+      expect(feedbackPanel).toBeTruthy();
+      expect(feedbackPanel![1]).not.toContain("active");
+    });
+
+    test("renders + buttons on issues matching issue count", () => {
+      const issues = [
+        { severity: "major" as const, description: "Memory leak" },
+        { severity: "minor" as const, description: "Missing test" },
+        { severity: "nit" as const, description: "Rename var" },
+      ];
+      const html = generateReviewHtml({
+        metadata: makeMetadata({ review: makeReview({ issues }) }),
+      });
+      const matches = html.match(/class="feedback-add-issue"/g);
+      expect(matches).toBeTruthy();
+      expect(matches!.length).toBe(3);
+    });
+
+    test("+ buttons have escaped data-issue attribute", () => {
+      const html = generateReviewHtml({
+        metadata: makeMetadata({
+          review: makeReview({
+            issues: [{ severity: "major", description: 'Use <b>"safe"</b> API' }],
+          }),
+        }),
+      });
+      expect(html).toContain('data-issue="Use &lt;b&gt;&quot;safe&quot;&lt;/b&gt; API"');
+    });
+
+    test("does not render + buttons when there are no issues", () => {
+      const html = generateReviewHtml({
+        metadata: makeMetadata({ review: makeReview({ issues: [] }) }),
+      });
+      expect(html).not.toContain('class="feedback-add-issue"');
+    });
+
+    test("renders floating selection button when review is present", () => {
+      const html = generateReviewHtml({ metadata: makeMetadata() });
+      expect(html).toContain('id="feedback-selection-btn"');
+    });
+
+    test("does not render floating selection button when review is absent", () => {
+      const html = generateReviewHtml({
+        metadata: makeMetadata({ review: undefined }),
+      });
+      expect(html).not.toContain('id="feedback-selection-btn"');
+    });
+
+    test("includes feedback CSS classes in output", () => {
+      const html = generateReviewHtml({ metadata: makeMetadata() });
+      expect(html).toContain(".feedback-add-issue");
+      expect(html).toContain("#feedback-selection-btn");
+      expect(html).toContain(".feedback-layout");
+      expect(html).toContain(".feedback-left");
+      expect(html).toContain(".feedback-right");
+      expect(html).toContain(".feedback-remove");
+      expect(html).toContain("#feedback-general");
+      expect(html).toContain("#feedback-preview");
+      expect(html).toContain("#feedback-copy");
+    });
+
+    test("includes feedback JS function names in output", () => {
+      const html = generateReviewHtml({ metadata: makeMetadata() });
+      expect(html).toContain("addFeedbackItem");
+      expect(html).toContain("removeFeedbackItem");
+      expect(html).toContain("renderFeedback");
+      expect(html).toContain("updatePreview");
+    });
+
+    test("feedback panel is inside main element", () => {
+      const html = generateReviewHtml({ metadata: makeMetadata() });
+      const mainIdx = html.indexOf("<main>");
+      const feedbackIdx = html.indexOf('id="tab-feedback"');
+      const mainCloseIdx = html.indexOf("</main>");
+      expect(feedbackIdx).toBeGreaterThan(mainIdx);
+      expect(feedbackIdx).toBeLessThan(mainCloseIdx);
+    });
+  });
 });