hyperframes/packages/studio/src/components/editor/LayersPanel.test.ts

// @vitest-environment happy-dom

import { describe, expect, it } from "vitest";
import { Window } from "happy-dom";
import type { DomEditLayerItem } from "./domEditingTypes";
import { sortLayersByZIndex } from "./LayersPanel";
import { isLayerDraggable } from "./useLayerDrag";

function makeLayer(
  overrides: Partial<DomEditLayerItem> & { zIndex?: string; locked?: boolean },
): DomEditLayerItem {
  const win = new Window();
  const doc = win.document;
  const parent = doc.createElement("div") as unknown as HTMLElement;
  if (overrides.locked) {
    (parent as unknown as Element).setAttribute("data-timeline-locked", "true");
  }
  const el = doc.createElement("div") as unknown as HTMLElement;
  parent.appendChild(el as unknown as Node);
  if (overrides.zIndex != null) {
    (el as unknown as { style: { zIndex: string } }).style.zIndex = overrides.zIndex;
  }
  if (overrides.id) {
    (el as unknown as Element).setAttribute("id", overrides.id);
  }
  return {
    key: overrides.key ?? `layer-${Math.random()}`,
    element: el,
    label: overrides.label ?? "div",
    tagName: overrides.tagName ?? "div",
    depth: overrides.depth ?? 0,
    childCount: overrides.childCount ?? 0,
    id: overrides.id,
    selector: overrides.selector,
    selectorIndex: overrides.selectorIndex,
    sourceFile: overrides.sourceFile ?? "index.html",
  };
}

describe("sortLayersByZIndex", () => {
  it("sorts siblings by z-index descending", () => {
    const a = makeLayer({ key: "a", zIndex: "1", depth: 0 });
    const b = makeLayer({ key: "b", zIndex: "3", depth: 0 });
    const c = makeLayer({ key: "c", zIndex: "2", depth: 0 });

    const sorted = sortLayersByZIndex([a, b, c]);
    expect(sorted.map((l) => l.key)).toEqual(["b", "c", "a"]);
  });

  it("preserves DOM order (reversed) for siblings with auto z-index", () => {
    const a = makeLayer({ key: "a", depth: 0 });
    const b = makeLayer({ key: "b", depth: 0 });
    const c = makeLayer({ key: "c", depth: 0 });

    const sorted = sortLayersByZIndex([a, b, c]);
    expect(sorted.map((l) => l.key)).toEqual(["c", "b", "a"]);
  });

  it("sorts explicit z-index above auto, auto elements maintain reversed DOM order", () => {
    const a = makeLayer({ key: "a", depth: 0 });
    const b = makeLayer({ key: "b", zIndex: "5", depth: 0 });
    const c = makeLayer({ key: "c", depth: 0 });

    const sorted = sortLayersByZIndex([a, b, c]);
    expect(sorted.map((l) => l.key)).toEqual(["b", "c", "a"]);
  });

  it("sorts children independently of their parent's siblings", () => {
    const parent1 = makeLayer({ key: "p1", zIndex: "1", depth: 0, childCount: 2 });
    const child1a = makeLayer({ key: "c1a", zIndex: "3", depth: 1 });
    const child1b = makeLayer({ key: "c1b", zIndex: "1", depth: 1 });
    const parent2 = makeLayer({ key: "p2", zIndex: "2", depth: 0, childCount: 1 });
    const child2a = makeLayer({ key: "c2a", zIndex: "1", depth: 1 });

    const sorted = sortLayersByZIndex([parent1, child1a, child1b, parent2, child2a]);
    expect(sorted.map((l) => l.key)).toEqual(["p2", "c2a", "p1", "c1a", "c1b"]);
  });

  it("handles single-element groups without crash", () => {
    const single = makeLayer({ key: "only", zIndex: "5", depth: 0 });
    const sorted = sortLayersByZIndex([single]);
    expect(sorted).toEqual([single]);
  });

  it("returns empty array for empty input", () => {
    expect(sortLayersByZIndex([])).toEqual([]);
  });

  it("handles duplicate z-index values with reverse DOM order tiebreak", () => {
    const a = makeLayer({ key: "a", zIndex: "2", depth: 0 });
    const b = makeLayer({ key: "b", zIndex: "1", depth: 0 });
    const c = makeLayer({ key: "c", zIndex: "2", depth: 0 });

    const sorted = sortLayersByZIndex([a, b, c]);
    expect(sorted.map((l) => l.key)).toEqual(["c", "a", "b"]);
  });

  it("preserves deeply nested structure with sorting at each level", () => {
    const root = makeLayer({ key: "root", depth: 0, childCount: 2 });
    const a = makeLayer({ key: "a", zIndex: "1", depth: 1, childCount: 2 });
    const a1 = makeLayer({ key: "a1", zIndex: "10", depth: 2 });
    const a2 = makeLayer({ key: "a2", zIndex: "20", depth: 2 });
    const b = makeLayer({ key: "b", zIndex: "2", depth: 1 });

    const sorted = sortLayersByZIndex([root, a, a1, a2, b]);
    expect(sorted.map((l) => l.key)).toEqual(["root", "b", "a", "a2", "a1"]);
  });
});

describe("isLayerDraggable", () => {
  it("returns false for layers without id or selector", () => {
    const layer = makeLayer({ key: "anon" });
    expect(isLayerDraggable(layer)).toBe(false);
  });

  it("returns true for layers with an id", () => {
    const layer = makeLayer({ key: "with-id", id: "my-el" });
    expect(isLayerDraggable(layer)).toBe(true);
  });

  it("returns true for layers with a selector", () => {
    const layer = makeLayer({ key: "with-sel", selector: ".my-class" });
    expect(isLayerDraggable(layer)).toBe(true);
  });

  it("returns false for layers inside a locked composition", () => {
    const layer = makeLayer({ key: "locked", id: "locked-el", locked: true });
    expect(isLayerDraggable(layer)).toBe(false);
  });

  it("returns true for layers with id and no locked ancestor", () => {
    const layer = makeLayer({ key: "free", id: "free-el" });
    expect(isLayerDraggable(layer)).toBe(true);
  });
});