@hyperframes/studio 0.7.71 → 0.7.73

package/src/components/editor/propertyPanelFlatEffectsSection.test.tsx

@@ -0,0 +1,331 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  HF_COLOR_GRADING_ACTIVE_EFFECT_KEYS,
+  HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS,
+  HF_COLOR_GRADING_PALETTES,
+  getHfColorGradingCapabilities,
+  normalizeHfColorGrading,
+} from "@hyperframes/core/color-grading";
+import {
+  activeColorGradingEffectCount,
+  FlatEffectsAccessory,
+  FlatEffectsSection,
+} from "./propertyPanelFlatEffectsSection";
+import { EFFECT_SPECS } from "./propertyPanelFlatEffectSpecs";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function neutralGrading() {
+  const grading = normalizeHfColorGrading("neutral");
+  if (!grading) throw new Error("expected neutral grading");
+  return grading;
+}
+
+function renderInto(node: React.ReactElement) {
+  const host = document.body.appendChild(document.createElement("div"));
+  const root = createRoot(host);
+  act(() => root.render(node));
+  return { host, root };
+}
+
+function sectionProps(
+  grading: ReturnType<typeof neutralGrading>,
+  onCommitColorGrading: ReturnType<typeof vi.fn> = vi.fn(),
+) {
+  return {
+    grading,
+    previews: {
+      status: "ready" as const,
+      images: { pixelate: "data:image/png;base64,pixelate" },
+      width: 160,
+      height: 90,
+    },
+    presetPreviews: {
+      status: "ready" as const,
+      images: { "vhs-playback": "data:image/png;base64,vhs" },
+      width: 160,
+      height: 90,
+    },
+    onCommitColorGrading,
+    onPreviewColorGrading: vi.fn(),
+    onRequestEffectPreviews: vi.fn(),
+    onRequestPresetPreviews: vi.fn(),
+  };
+}
+
+describe("FlatEffectsSection", () => {
+  it("places missing composite treatments in their effect family without a Styles section", () => {
+    const onCommit = vi.fn();
+    const props = sectionProps(neutralGrading(), onCommit);
+    const { host, root } = renderInto(<FlatEffectsSection {...props} />);
+    expect(host.textContent).not.toContain("Styles");
+    expect(props.onRequestPresetPreviews).not.toHaveBeenCalled();
+    const retro = host.querySelector<HTMLButtonElement>(
+      '[data-flat-effect-group="Retro & Glitch"]',
+    );
+    act(() => retro?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(props.onRequestPresetPreviews).toHaveBeenCalledTimes(1);
+    expect(host.querySelector('[data-flat-effect-preset-preview="vhs-playback"]')).not.toBeNull();
+    const vhs = host.querySelector<HTMLButtonElement>('[data-flat-effect-preset="vhs-playback"]');
+    act(() => vhs?.dispatchEvent(new MouseEvent("pointerover", { bubbles: true })));
+    expect(props.onPreviewColorGrading.mock.calls.at(-1)?.[0]).toMatchObject({
+      preset: "vhs-playback",
+      effects: { tapeDamage: 0.82, scanlineCount: 0.17 },
+    });
+    expect(onCommit).not.toHaveBeenCalled();
+    act(() => vhs?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onCommit.mock.calls[0][0].preset).toBe("vhs-playback");
+
+    const print = host.querySelector<HTMLButtonElement>('[data-flat-effect-group="Print"]');
+    act(() => print?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(host.querySelector('[data-flat-effect-preset="editorial-halftone"]')).not.toBeNull();
+    expect(host.querySelector('[data-flat-effect-preset="two-ink-print"]')).not.toBeNull();
+    act(() => root.unmount());
+  });
+
+  it("offers every shader master once in four intentional families", () => {
+    const { host, root } = renderInto(<FlatEffectsSection {...sectionProps(neutralGrading())} />);
+    const renderedKeys: Array<string | null> = [];
+    for (const label of ["Essentials", "Retro & Glitch", "Print", "Art"]) {
+      const tab = host.querySelector<HTMLButtonElement>(`[data-flat-effect-group="${label}"]`);
+      expect(tab).not.toBeNull();
+      act(() => tab?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+      renderedKeys.push(
+        ...Array.from(host.querySelectorAll("[data-flat-effect-option]"), (element) =>
+          element.getAttribute("data-flat-effect-option"),
+        ),
+      );
+    }
+    expect(renderedKeys.sort()).toEqual([...HF_COLOR_GRADING_ACTIVE_EFFECT_KEYS].sort());
+    const capabilities = new Map(
+      getHfColorGradingCapabilities().effects.map((effect) => [effect.key, effect]),
+    );
+    for (const effect of EFFECT_SPECS) {
+      expect(Boolean(effect.palette)).toBe(capabilities.get(effect.key)?.supportsPalette);
+    }
+    expect(host.querySelectorAll('[data-flat-slider-track="true"]')).toHaveLength(0);
+    act(() => root.unmount());
+  });
+
+  it("requests exact cards and auditions a chosen default without persisting", () => {
+    const props = sectionProps(neutralGrading());
+    const { host, root } = renderInto(<FlatEffectsSection {...props} />);
+    expect(props.onRequestEffectPreviews).toHaveBeenCalledTimes(1);
+    expect(props.onRequestEffectPreviews).toHaveBeenCalledWith(["blur", "pixelate", "bloom"]);
+    expect(host.querySelector('[data-flat-effect-preview="pixelate"]')).not.toBeNull();
+    const pixelate = host.querySelector<HTMLButtonElement>('[data-flat-effect-option="pixelate"]');
+    act(() => pixelate?.dispatchEvent(new MouseEvent("pointerover", { bubbles: true })));
+    expect(props.onPreviewColorGrading.mock.calls.at(-1)?.[0].effects.pixelate).toBe(
+      HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS.pixelate.pixelate,
+    );
+    expect(props.onPreviewColorGrading.mock.calls.at(-1)?.[1]).toEqual({
+      animatedPreview: { kind: "effects", id: "pixelate" },
+    });
+    expect(props.onCommitColorGrading).not.toHaveBeenCalled();
+    act(() => pixelate?.dispatchEvent(new MouseEvent("pointerout", { bubbles: true })));
+    expect(props.onPreviewColorGrading).toHaveBeenLastCalledWith(null);
+    act(() => root.unmount());
+  });
+
+  it("applies a useful canonical default when an effect is chosen", () => {
+    const onCommit = vi.fn();
+    const grading = { ...neutralGrading(), intensity: 0 };
+    const { host, root } = renderInto(<FlatEffectsSection {...sectionProps(grading, onCommit)} />);
+    const pixelate = host.querySelector<HTMLButtonElement>('[data-flat-effect-option="pixelate"]');
+    act(() => pixelate?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onCommit).toHaveBeenCalledTimes(1);
+    expect(onCommit.mock.calls[0][0].effects.pixelate).toBe(
+      HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS.pixelate.pixelate,
+    );
+    expect(onCommit.mock.calls[0][0].intensity).toBe(0);
+    act(() => root.unmount());
+  });
+
+  it("uses a complete treatment card as a fresh starting point while preserving the LUT", () => {
+    const onCommit = vi.fn();
+    const base = neutralGrading();
+    const grading = {
+      ...base,
+      adjust: { ...base.adjust, exposure: 0.4 },
+      effects: { ...base.effects, blur: 0.6 },
+      palette: ["#112233", "#ffffff"],
+      lut: { src: "assets/luts/custom.cube", intensity: 0.5 },
+    };
+    const { host, root } = renderInto(<FlatEffectsSection {...sectionProps(grading, onCommit)} />);
+    const toggle = host.querySelector<HTMLButtonElement>('[data-flat-effects-add-toggle="true"]');
+    act(() => toggle?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    const retro = host.querySelector<HTMLButtonElement>(
+      '[data-flat-effect-group="Retro & Glitch"]',
+    );
+    act(() => retro?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    const vhs = host.querySelector<HTMLButtonElement>('[data-flat-effect-preset="vhs-playback"]');
+    act(() => vhs?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    const committed = onCommit.mock.calls[0][0];
+    expect(committed).toMatchObject({
+      preset: "vhs-playback",
+      lut: { src: "assets/luts/custom.cube", intensity: 0.5 },
+    });
+    expect(committed.effects.tapeDamage).toBeGreaterThan(0);
+    expect(committed.effects.blur).toBe(0);
+    expect(committed.palette).toBeNull();
+    expect(committed.adjust.exposure).not.toBe(0.4);
+    act(() => root.unmount());
+  });
+
+  it("shows only the selected active effect controls and converts degrees to shader units", () => {
+    const onCommit = vi.fn();
+    const grading = normalizeHfColorGrading({
+      effects: HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS.chromaticAberration,
+    });
+    if (!grading) throw new Error("expected chromatic grading");
+    const { host, root } = renderInto(<FlatEffectsSection {...sectionProps(grading, onCommit)} />);
+    expect(host.textContent).toContain("Angle");
+    const effect = host.querySelector('[data-flat-effect-editor="chromaticAberration"]');
+    if (!effect) throw new Error("expected chromatic effect");
+    const rows = effect.querySelectorAll('[data-flat-slider-track="true"]');
+    const angleTrack = rows[1] as HTMLElement | undefined;
+    if (!angleTrack) throw new Error("expected angle slider");
+    Object.defineProperty(angleTrack, "getBoundingClientRect", {
+      value: () => ({ left: 0, width: 100, top: 0, height: 2, right: 100, bottom: 2 }),
+    });
+    act(() => {
+      angleTrack.dispatchEvent(new MouseEvent("pointerdown", { bubbles: true, clientX: 50 }));
+      angleTrack.dispatchEvent(new MouseEvent("pointerup", { bubbles: true, clientX: 50 }));
+    });
+    expect(onCommit.mock.calls.at(-1)?.[0].effects.chromaticAngle).toBe(0.5);
+    act(() => root.unmount());
+  });
+
+  it("offers native ASCII styles, binary controls, and a bounded custom palette", () => {
+    const onCommit = vi.fn();
+    const grading = normalizeHfColorGrading({
+      effects: HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS.ascii,
+    });
+    if (!grading) throw new Error("expected ASCII grading");
+    const { host, root } = renderInto(<FlatEffectsSection {...sectionProps(grading, onCommit)} />);
+    expect(
+      host.querySelector<HTMLSelectElement>('select[aria-label="Style"]')?.options,
+    ).toHaveLength(8);
+    expect(host.querySelectorAll('[data-flat-toggle="true"]')).toHaveLength(2);
+    expect(host.querySelector('[data-flat-effect-editor="ascii"]')?.textContent).not.toContain(
+      "Mix",
+    );
+    expect(host.querySelectorAll("[data-flat-effects-palette-preset]")).toHaveLength(
+      HF_COLOR_GRADING_PALETTES.length,
+    );
+    const synthwave = host.querySelector<HTMLButtonElement>(
+      '[data-flat-effects-palette-preset="synthwave"]',
+    );
+    act(() => synthwave?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onCommit.mock.calls.at(-1)?.[0].palette).toEqual(
+      HF_COLOR_GRADING_PALETTES.find(({ id }) => id === "synthwave")?.colors,
+    );
+    const addPalette = host.querySelector<HTMLButtonElement>(
+      '[data-flat-effects-add-palette="true"]',
+    );
+    act(() => addPalette?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onCommit.mock.calls.at(-1)?.[0].palette).toEqual(["#000000", "#ffffff"]);
+    act(() => root.unmount());
+  });
+
+  it("resets the selected effect to its authored defaults", () => {
+    const onCommit = vi.fn();
+    const grading = normalizeHfColorGrading({
+      effects: { ...HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS.digitalGlitch, digitalGlitch: 0.9 },
+    });
+    if (!grading) throw new Error("expected digital glitch grading");
+    const { host, root } = renderInto(<FlatEffectsSection {...sectionProps(grading, onCommit)} />);
+    expect(
+      host.querySelector('[data-flat-effect-editor="digitalGlitch"]')?.textContent,
+    ).not.toContain("Mix");
+    const reset = host.querySelector<HTMLButtonElement>('[title="Reset Digital Glitch"]');
+    act(() => reset?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onCommit.mock.calls.at(-1)?.[0].effects).toMatchObject(
+      HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS.digitalGlitch,
+    );
+    act(() => root.unmount());
+  });
+
+  it("removes only the selected effect and preserves another active effect", () => {
+    const onCommit = vi.fn();
+    const grading = normalizeHfColorGrading({
+      effects: {
+        ...HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS.blur,
+        ...HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS.pixelate,
+      },
+    });
+    if (!grading) throw new Error("expected multi-effect grading");
+    const { host, root } = renderInto(<FlatEffectsSection {...sectionProps(grading, onCommit)} />);
+    const remove = host.querySelector<HTMLButtonElement>('[title="Remove Blur"]');
+    act(() => remove?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onCommit.mock.calls.at(-1)?.[0].effects.blur).toBe(0);
+    expect(onCommit.mock.calls.at(-1)?.[0].effects.pixelate).toBe(
+      HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS.pixelate.pixelate,
+    );
+    act(() => root.unmount());
+  });
+
+  it("closes the catalog when an already active effect is selected", () => {
+    const grading = normalizeHfColorGrading({
+      effects: HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS.blur,
+    });
+    if (!grading) throw new Error("expected blur grading");
+    const props = sectionProps(grading);
+    const { host, root } = renderInto(<FlatEffectsSection {...props} />);
+    expect(props.onRequestEffectPreviews).not.toHaveBeenCalled();
+    const toggle = host.querySelector<HTMLButtonElement>('[data-flat-effects-add-toggle="true"]');
+    act(() => toggle?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(toggle?.getAttribute("aria-expanded")).toBe("true");
+    expect(props.onRequestEffectPreviews).toHaveBeenCalledWith(["blur", "pixelate", "bloom"]);
+    const blur = host.querySelector<HTMLButtonElement>('[data-flat-effect-option="blur"]');
+    act(() => blur?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(toggle?.getAttribute("aria-expanded")).toBe("false");
+    act(() => root.unmount());
+  });
+
+  it("requests only the visible family when the catalog tab changes", () => {
+    const props = sectionProps(neutralGrading());
+    const { host, root } = renderInto(<FlatEffectsSection {...props} />);
+    const art = host.querySelector<HTMLButtonElement>('[data-flat-effect-group="Art"]');
+    act(() => art?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(props.onRequestEffectPreviews).toHaveBeenLastCalledWith([
+      "ascii",
+      "engraving",
+      "crosshatch",
+      "kuwahara",
+    ]);
+    act(() => root.unmount());
+  });
+});
+
+describe("FlatEffectsAccessory", () => {
+  it("counts active masters and resets only effects and palette", () => {
+    const base = neutralGrading();
+    const grading = {
+      ...base,
+      adjust: { ...base.adjust, contrast: 0.2 },
+      effects: { ...base.effects, blur: 0.4, ascii: 1 },
+      palette: ["#112233", "#ffffff"],
+    };
+    expect(activeColorGradingEffectCount(grading)).toBe(2);
+    const onCommit = vi.fn();
+    const { host, root } = renderInto(
+      <FlatEffectsAccessory grading={grading} onCommitColorGrading={onCommit} />,
+    );
+    const reset = host.querySelector<HTMLButtonElement>('[data-flat-effects-reset="true"]');
+    act(() => reset?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onCommit.mock.calls[0][0].adjust.contrast).toBe(0.2);
+    expect(onCommit.mock.calls[0][0].effects.blur).toBe(0);
+    expect(onCommit.mock.calls[0][0].effects.ascii).toBe(0);
+    expect(onCommit.mock.calls[0][0].palette).toBeNull();
+    act(() => root.unmount());
+  });
+});