import type { HeaderContext } from "@berry/api/web.ts";
import { assertEquals, assertStrictEquals } from "@std/assert";
import { viewContext, withDom } from "@berry/util/dom.ts";
import { headerWidgets } from "./header.ts";

Deno.test("reloading a header widget replaces it without disturbing its neighbors or leaving stale nodes", () =>
  withDom(() => {
    const widgets = headerWidgets();
    const disposed: Element[] = [];
    const create = () => {
      const element = document.createElement("button");
      return {
        element,
        update(context: HeaderContext) {
          element.textContent = context.tid;
        },
        dispose() {
          disposed.push(element);
        },
      };
    };
    const first = { name: "first", create };
    const second = { name: "second", create };
    const context = (tid: string) => viewContext({ tid });
    widgets.update([first, second], context);
    const original = widgets.element.firstElementChild!;
    const neighbor = widgets.element.lastElementChild!;

    const reloaded = { name: "first", create: () => create() };
    widgets.update([second, reloaded], context);
    const replacement = widgets.element.lastElementChild!;
    assertEquals(widgets.element.contains(original), false);
    assertStrictEquals(widgets.element.firstElementChild, neighbor);
    assertEquals(replacement.textContent, first.name);
    assertEquals(disposed, [original]);

    widgets.update([second], context);
    assertEquals(widgets.element.contains(replacement), false);
    assertStrictEquals(widgets.element.firstElementChild, neighbor);
    assertEquals(disposed, [original, replacement]);
    widgets.dispose();
    assertEquals(disposed, [original, replacement, neighbor]);
  }));