@drip-apex/sdk 0.1.0

package/src/qa-assistant-view.test.ts

@@ -0,0 +1,185 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { QaAssistantState, QaAssistantStore } from "./qa-assistant-state";
+import { mountQaAssistantView, QA_ASSISTANT_HOST_ID } from "./qa-assistant-view";
+
+function state(subline = "Showing Variant B"): QaAssistantState {
+  return {
+    experiments: [{
+      id: "exp_products", name: "Product CTA", variationId: "var_b", variationName: "Variant B",
+      applied: true, forced: false, subline,
+      triggerPill: "accepted", segmentPill: "all visitors", displayFrequencyPill: "accepted",
+      conditions: [{
+        id: "page:products", group: "pages", state: "pass", text: "Product pages",
+        detail: 'Expected: [{"include":true,"matchType":"simple","pattern":"/products/*"}] · Actual: https://shop.test/products/shirt — passed',
+        rawCode: null,
+      }],
+      variations: [
+        { id: "var_a", name: "Control", isControl: true, isCurrent: false, isReal: true },
+        { id: "var_b", name: "Variant B", isControl: false, isCurrent: true, isReal: true },
+      ],
+    }],
+    events: [], transactions: { kind: "unsupported" }, forcedSummary: null,
+  };
+}
+
+function fakeStore(initial: QaAssistantState) {
+  let current = initial;
+  const listeners = new Set<(value: QaAssistantState) => void>();
+  const store: QaAssistantStore = {
+    getState: () => current,
+    subscribe(listener) { listeners.add(listener); return () => listeners.delete(listener); },
+    forceVariation: vi.fn(), resetForce: vi.fn(), exitQa: vi.fn(),
+  };
+  return { store, emit(next: QaAssistantState) { current = next; listeners.forEach((listener) => listener(next)); } };
+}
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  vi.useRealTimers();
+});
+
+describe("mountQaAssistantView", () => {
+  it("coalesces refresh bursts while preserving the panel, expanded rows, and scroll", () => {
+    vi.useFakeTimers();
+    const source = fakeStore(state());
+    const view = mountQaAssistantView(source.store);
+    const shadow = document.getElementById(QA_ASSISTANT_HOST_ID)!.shadowRoot!;
+    const panel = shadow.querySelector(".panel")!;
+    (shadow.querySelector('[data-action="toggle-exp"]') as HTMLElement).click();
+    const body = shadow.querySelector<HTMLElement>(".body")!;
+    body.scrollTop = 37;
+
+    source.emit(state("refresh one"));
+    source.emit(state("refresh two"));
+    expect(shadow.querySelector(".panel")).toBe(panel);
+    vi.advanceTimersByTime(100);
+
+    expect(shadow.querySelector(".panel")).toBe(panel);
+    expect(shadow.querySelector('[data-action="toggle-exp"]')?.getAttribute("data-open")).toBe("true");
+    expect(body.scrollTop).toBe(37);
+    expect(shadow.textContent).toContain('/products/*');
+    view.destroy();
+  });
+
+  it("keeps in-progress search text across store-driven refreshes", () => {
+    vi.useFakeTimers();
+    const source = fakeStore(state());
+    const view = mountQaAssistantView(source.store);
+    const shadow = document.getElementById(QA_ASSISTANT_HOST_ID)!.shadowRoot!;
+    const search = shadow.querySelector<HTMLInputElement>('[data-action="search"]')!;
+    search.focus();
+    search.value = "cta";
+    search.dispatchEvent(new Event("input", { bubbles: true }));
+
+    source.emit(state("refresh while typing"));
+    vi.advanceTimersByTime(100);
+
+    const rebuilt = shadow.querySelector<HTMLInputElement>('[data-action="search"]')!;
+    expect(rebuilt.value).toBe("cta");
+    view.destroy();
+  });
+
+  it("shows unevaluated targeting honestly in details and excludes it from the on-page filter", () => {
+    const base = state();
+    const unevaluated: QaAssistantState = {
+      ...base,
+      experiments: [{
+        ...base.experiments[0],
+        applied: false,
+        triggerPill: "not evaluated",
+        segmentPill: "not evaluated",
+        displayFrequencyPill: "not running",
+        conditions: [],
+      }],
+    };
+    const source = fakeStore(unevaluated);
+    const view = mountQaAssistantView(source.store);
+    const shadow = document.getElementById(QA_ASSISTANT_HOST_ID)!.shadowRoot!;
+    (shadow.querySelector('[data-action="toggle-exp"]') as HTMLElement).click();
+    const text = shadow.textContent ?? "";
+    expect(text).toContain("Not evaluated");
+    expect(text).not.toContain("All pages");
+    expect(text).not.toContain("All visitors");
+
+    const pageFilter = shadow.querySelector<HTMLSelectElement>('[data-action="page-filter"]')!;
+    pageFilter.value = "on";
+    pageFilter.dispatchEvent(new Event("change", { bubbles: true }));
+    expect(shadow.textContent).not.toContain("Product CTA");
+    view.destroy();
+  });
+
+  it("filters a targeting-rejected force request as not applied, not forced", () => {
+    const base = state();
+    const rejectedRequest: QaAssistantState = {
+      ...base,
+      experiments: [{
+        ...base.experiments[0],
+        applied: false,
+        forced: false,
+        variationId: null,
+        variationName: null,
+        subline: "Product pages",
+        triggerPill: "rejected",
+        displayFrequencyPill: "not evaluated",
+      }],
+      forcedSummary: "Product CTA: Variant B",
+    };
+    const source = fakeStore(rejectedRequest);
+    const view = mountQaAssistantView(source.store);
+    const shadow = document.getElementById(QA_ASSISTANT_HOST_ID)!.shadowRoot!;
+
+    expect(shadow.querySelector(".exp .chip-off")?.textContent).toBe("Not applied");
+    expect(shadow.querySelector(".exp .chip-forced")).toBeNull();
+
+    const statusFilter = shadow.querySelector<HTMLSelectElement>('[data-action="status-filter"]')!;
+    statusFilter.value = "forced";
+    statusFilter.dispatchEvent(new Event("change", { bubbles: true }));
+    expect(shadow.querySelectorAll(".exp")).toHaveLength(0);
+
+    const rebuiltFilter = shadow.querySelector<HTMLSelectElement>('[data-action="status-filter"]')!;
+    rebuiltFilter.value = "rejected";
+    rebuiltFilter.dispatchEvent(new Event("change", { bubbles: true }));
+    expect(shadow.querySelectorAll(".exp")).toHaveLength(1);
+    expect(shadow.querySelector(".exp .chip-off")?.textContent).toBe("Not applied");
+    view.destroy();
+  });
+
+  it("preserves the search input and defers filtering during IME composition", () => {
+    vi.useFakeTimers();
+    const source = fakeStore(state());
+    const view = mountQaAssistantView(source.store);
+    const shadow = document.getElementById(QA_ASSISTANT_HOST_ID)!.shadowRoot!;
+    const search = shadow.querySelector<HTMLInputElement>('[data-action="search"]')!;
+
+    search.dispatchEvent(new CompositionEvent("compositionstart", { bubbles: true }));
+    search.value = "missing";
+    search.dispatchEvent(new Event("input", { bubbles: true }));
+    source.emit(state("refresh during composition"));
+    vi.advanceTimersByTime(100);
+
+    expect(shadow.querySelector('[data-action="search"]')).toBe(search);
+    expect(search.value).toBe("missing");
+    expect(shadow.textContent).toContain("Product CTA");
+
+    search.dispatchEvent(new CompositionEvent("compositionend", { bubbles: true }));
+    expect(shadow.querySelector('[data-action="search"]')).not.toBe(search);
+    expect(shadow.textContent).not.toContain("Product CTA");
+    view.destroy();
+  });
+
+  it("does not remount or rerun the enter animation for identical notifications", () => {
+    vi.useFakeTimers();
+    const initial = state();
+    const source = fakeStore(initial);
+    const view = mountQaAssistantView(source.store);
+    const shadow = document.getElementById(QA_ASSISTANT_HOST_ID)!.shadowRoot!;
+    const panel = shadow.querySelector(".panel")!;
+    source.emit(initial);
+    source.emit(initial);
+    vi.advanceTimersByTime(100);
+    expect(shadow.querySelector(".panel")).toBe(panel);
+    expect(shadow.querySelectorAll(".panel")).toHaveLength(1);
+    view.destroy();
+  });
+});