alpenwerk-hr/tests/components/PrintChart.test.tsx

import { render, screen, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { afterAll, beforeAll, describe, expect, it } from "vitest";
import { PrintChart } from "@/components/orgchart/PrintChart";
import type { OrgEmployee, OrgUnitNode, OrgVacancy } from "@/components/orgchart/types";
import { buildPrintModel } from "@/lib/orgchart-print";

// Der Druck ist die einzige Ansicht, deren Ergebnis niemand mehr korrigieren
// kann: was auf dem Papier fehlt, fällt erst im Besprechungsraum auf. Deshalb
// wird hier die Auswahl geprüft — die Tiefe und das Ab-/Anwählen von
// Bereichen entscheiden, was überhaupt gezeichnet wird.

function unit(id: string, name: string, type: OrgUnitNode["unit_type"], parent: string | null, nr: string): OrgUnitNode {
  return { id, org_number: nr, name, parent_id: parent, unit_type: type };
}

const UNITS: OrgUnitNode[] = [
  unit("g", "Alpenwerk GmbH", "Gesellschaft", null, "1000"),
  unit("b1", "Produktion", "Bereich", "g", "1100"),
  unit("a1", "Fertigung", "Abteilung", "b1", "1110"),
  unit("t1", "Schicht A", "Team", "a1", "1111"),
  unit("b2", "Vertrieb", "Bereich", "g", "1200"),
  unit("a2", "Innendienst", "Abteilung", "b2", "1210"),
];

function person(id: string, last: string, unitId: string, chief = false): OrgEmployee {
  return {
    id,
    personnel_number: Number(id),
    first_name: "Test",
    last_name: last,
    job_title: chief ? "Leitung" : "Sachbearbeitung",
    manager_id: null,
    formal_manager_id: null,
    absent: false,
    absence_type: null,
    org_unit_id: unitId,
    is_chief: chief,
    position_id: `p${id}`,
    position_number: `S${id}`,
  };
}

const EMPLOYEES: OrgEmployee[] = [
  person("1", "Wiesinger", "g", true),
  person("2", "Steinbacher", "b1", true),
  person("3", "Aigner", "t1"),
  person("4", "Berger", "b2", true),
  person("5", "Cerny", "a2"),
];

const VACANCIES: OrgVacancy[] = [
  { position_id: "p9", position_number: "S9", job_title: "Disposition", org_unit_id: "a1", is_chief: false },
];

function renderChart() {
  const model = buildPrintModel(UNITS, EMPLOYEES, VACANCIES);
  return render(<PrintChart model={model} asOf="2026-08-11" today="2026-08-11" />);
}

/** Die Blätter der Vorschau — je Blatt eine Druckseite. */
function blaetter(): HTMLElement[] {
  return Array.from(document.querySelectorAll<HTMLElement>(".blatt"));
}

async function zurVorschau(user: ReturnType<typeof userEvent.setup>) {
  await user.click(screen.getByRole("button", { name: /Vorschau/ }));
}

// Die Vorschau misst sich selbst, um den Massstab zu bestimmen. Das ist eine
// Rückkopplung: messen → Zustand ändern → neu rendern → messen. Bricht sie
// nicht ab, friert der Browser-Tab ein, sobald jemand die Vorschau öffnet.
//
// In jsdom hat jedes Element die Grösse 0, deshalb steigt die Messung dort
// sonst sofort aus und die Schleife entsteht gar nicht erst — genau deshalb
// ist der Fehler durch alle bisherigen Tests gekommen. Hier bekommen die
// Elemente Masse, damit die Rückkopplung wirklich läuft.
describe("PrintChart — Messung", () => {
  const masse = { clientWidth: 900, clientHeight: 600 };
  const gesichert: Record<string, PropertyDescriptor | undefined> = {};

  beforeAll(() => {
    for (const [name, wert] of Object.entries(masse)) {
      gesichert[name] = Object.getOwnPropertyDescriptor(HTMLElement.prototype, name);
      Object.defineProperty(HTMLElement.prototype, name, { configurable: true, value: wert });
    }
  });

  afterAll(() => {
    for (const name of Object.keys(masse)) {
      if (gesichert[name]) Object.defineProperty(HTMLElement.prototype, name, gesichert[name]!);
      else delete (HTMLElement.prototype as unknown as Record<string, unknown>)[name];
    }
  });

  it("kommt zur Ruhe, statt sich selbst immer weiter neu zu vermessen", async () => {
    const user = userEvent.setup();
    renderChart();
    // Ein Durchlauf, der nicht abbricht, endet in React mit „Maximum update
    // depth exceeded" — der Klick wirft dann.
    await user.click(screen.getByRole("button", { name: /Vorschau/ }));
    expect(blaetter()).toHaveLength(3);
  });
});

// Von Max gewünscht (30.09.), ausdrücklich zum An- und Abwählen. Die Nummer
// steht hinter dem Namen und nicht in einer eigenen Zeile: auf einem Blatt mit
// zweihundert Kästen kostet jede Zeile Massstab.
describe("PrintChart — Personalnummer", () => {
  /** Die Zeile, in der eine Person steht — nicht die Kopfzeile ihrer Einheit. */
  function personZeile(nachname: string): string {
    return screen.getAllByText(new RegExp(nachname))[0].closest("p")!.textContent ?? "";
  }

  it("druckt sie erst, wenn sie angehakt ist", async () => {
    const user = userEvent.setup();
    renderChart();
    await zurVorschau(user);
    // Wiesinger führt die Gesellschaft und steht damit auf jedem Blatt.
    expect(personZeile("Wiesinger")).not.toContain("· 1");
  });

  it("stellt sie hinter den Namen, sobald sie angehakt ist", async () => {
    const user = userEvent.setup();
    renderChart();
    await user.click(screen.getByLabelText(/Personalnummer/));
    await zurVorschau(user);
    // Die Leitung steht auch auf Blättern ohne Namensliste — deshalb ist das
    // Häkchen auf jeder Tiefe zu haben.
    expect(personZeile("Wiesinger")).toContain("· 1");
  });
});

describe("PrintChart", () => {
  it("fragt zuerst, was gedruckt wird, und zeigt vorher kein Blatt", () => {
    renderChart();
    expect(screen.getByText("Was soll aufs Papier?")).toBeInTheDocument();
    expect(blaetter()).toHaveLength(0);
  });

  it("wählt alle Bereiche vor und druckt je Bereich eine Seite plus Übersicht", async () => {
    const user = userEvent.setup();
    renderChart();
    expect(screen.getByRole("checkbox", { name: /Produktion/ })).toBeChecked();
    expect(screen.getByRole("checkbox", { name: /Vertrieb/ })).toBeChecked();

    await zurVorschau(user);
    expect(blaetter()).toHaveLength(3);
  });

  it("lässt einen abgewählten Bereich ganz weg — auch aus der Übersicht", async () => {
    const user = userEvent.setup();
    renderChart();
    await user.click(screen.getByRole("checkbox", { name: /Vertrieb/ }));
    await zurVorschau(user);

    const seiten = blaetter();
    expect(seiten).toHaveLength(2);
    expect(within(seiten[0]).queryByText("Vertrieb")).not.toBeInTheDocument();
    expect(within(seiten[0]).getByText("Produktion")).toBeInTheDocument();
  });

  it("„Keine“ lässt nur die Übersicht übrig", async () => {
    const user = userEvent.setup();
    renderChart();
    await user.click(screen.getByRole("button", { name: "Keine" }));
    await zurVorschau(user);
    expect(blaetter()).toHaveLength(1);
  });

  it("bricht bei „Bereiche“ nach der ersten Ebene ab", async () => {
    const user = userEvent.setup();
    renderChart();
    await user.click(screen.getByRole("button", { name: /Bereiche/ }));
    await zurVorschau(user);

    const seiten = blaetter();
    // Nur die Übersicht, und darin keine Abteilung.
    expect(seiten).toHaveLength(1);
    expect(within(seiten[0]).getByText("Produktion")).toBeInTheDocument();
    expect(within(seiten[0]).queryByText("Fertigung")).not.toBeInTheDocument();
  });

  it("zeichnet hierarchisch: die Abteilung hängt unter ihrem Bereich", async () => {
    const user = userEvent.setup();
    renderChart();
    await zurVorschau(user);

    // Die Abteilungen hängen in einer Reihe unter dem Bereich …
    const seite = blaetter()[1];
    const reihe = seite.querySelector<HTMLElement>("ul.reihe")!;
    const fertigung = within(reihe).getByText("Fertigung");
    // … und das Team längs unter seiner Abteilung.
    const abteilungsKnoten = fertigung.closest("li")!;
    const stapel = abteilungsKnoten.querySelector<HTMLElement>("ul.stapel")!;
    expect(within(stapel).getByText("Schicht A")).toBeInTheDocument();
  });

  it("breitet nur eine Ebene waagrecht aus — der Rest hängt längs", async () => {
    const user = userEvent.setup();
    renderChart();
    await zurVorschau(user);

    // Der Grund: zwei waagrechte Ebenen multiplizieren sich in der Breite und
    // laufen über den Blattrand. Je Blatt darf es genau eine Reihe geben.
    for (const seite of blaetter()) {
      expect(seite.querySelectorAll("ul.reihe")).toHaveLength(1);
    }
    expect(blaetter()[1].querySelectorAll("ul.stapel").length).toBeGreaterThan(0);
  });

  it("nennt Namen erst bei „mit Personen“", async () => {
    const user = userEvent.setup();
    renderChart();
    await zurVorschau(user);
    // Führungskräfte stehen immer im Kasten, gewöhnliche Mitarbeitende nicht.
    expect(screen.getAllByText("Steinbacher, Test").length).toBeGreaterThan(0);
    expect(screen.queryByText("Aigner, Test")).not.toBeInTheDocument();

    await user.click(screen.getByRole("button", { name: /mit Personen/ }));
    expect(screen.getByText("Aigner, Test")).toBeInTheDocument();
    expect(screen.getByText(/offen · Disposition/)).toBeInTheDocument();
    // Mit Namen bekommt jede Abteilung ihr eigenes Blatt — ein ganzer Bereich
    // mit allen Namen wäre auf einem Blatt nicht mehr lesbar.
    expect(blaetter()).toHaveLength(3);
    expect(screen.getByText("Produktion · Fertigung")).toBeInTheDocument();
  });

  it("meldet unbesetzte Leitungen statt sie zu verschweigen", async () => {
    const user = userEvent.setup();
    renderChart();
    await zurVorschau(user);
    // Auf der Produktionsseite: Fertigung und Schicht A stehen ohne Leitung da.
    const seite = blaetter()[1];
    expect(within(seite).getAllByText("Leitung unbesetzt")).toHaveLength(2);
    expect(within(seite).getByText("Steinbacher, Test")).toBeInTheDocument();
  });
});

// Beim Kunden liegt zwischen der Gesellschaft und den fachlichen Bereichen
// noch „CEO" — selbst ein Bereich. Daran ist der Druck gescheitert: die
// Auswahl bot einen einzigen Eintrag an, und aus dem ganzen Haus wurde ein
// Blatt für CEO.
describe("PrintChart — ein Bereich über den Bereichen", () => {
  const UNITS_TIEF: OrgUnitNode[] = [
    unit("ag", "Manner AG", "Gesellschaft", null, "0000"),
    unit("ceo", "CEO", "Bereich", "ag", "0080"),
    unit("cfo", "CFO", "Bereich", "ceo", "0001"),
    unit("coo", "COO", "Bereich", "ceo", "0083"),
    unit("w17", "Standortleitung W17", "Abteilung", "coo", "0088"),
    unit("schnitte", "Leitung Schnitte", "Team", "w17", "0101"),
  ];
  const PERSONEN_TIEF: OrgEmployee[] = [
    // Die Gesellschaft bleibt bewusst ohne Leitung — so ist es beim Kunden.
    person("11", "Obermayr", "ceo", true),
    person("12", "Hofer", "cfo", true),
    person("13", "Gruber", "coo", true),
    person("14", "Nagl", "schnitte"),
  ];

  function renderTief() {
    return render(
      <PrintChart model={buildPrintModel(UNITS_TIEF, PERSONEN_TIEF, [])} asOf="2026-09-23" today="2026-09-23" />
    );
  }

  it("bietet die untersten Bereiche an, nicht den darüber", () => {
    renderTief();
    expect(screen.getByRole("checkbox", { name: /CFO/ })).toBeInTheDocument();
    expect(screen.getByRole("checkbox", { name: /COO/ })).toBeInTheDocument();
    // CEO enthält die beiden anderen; als eigenes Blatt stünde das ganze Haus
    // ein zweites Mal darin.
    expect(screen.queryByRole("checkbox", { name: /^CEO/ })).not.toBeInTheDocument();
    expect(blaetter()).toHaveLength(0);
  });

  it("zeichnet die Zwischenebene mit, statt sie zu überspringen", async () => {
    const user = userEvent.setup();
    renderTief();
    await zurVorschau(user);

    const uebersicht = blaetter()[0];
    // Zweimal: als Überschrift des Blatts und als oberster Kasten.
    expect(within(uebersicht).getAllByText("Manner AG")).toHaveLength(2);
    // Ohne diese Zeile hinge CFO unmittelbar unter der AG — eine Ebene, die
    // es gibt, wäre aus dem Organigramm verschwunden.
    expect(within(uebersicht).getByText("CEO")).toBeInTheDocument();
    expect(within(uebersicht).getByText("CFO")).toBeInTheDocument();
    expect(within(uebersicht).getByText("COO")).toBeInTheDocument();
  });

  it("gibt jedem untersten Bereich ein Blatt", async () => {
    const user = userEvent.setup();
    renderTief();
    await zurVorschau(user);
    // Übersicht plus CFO plus COO.
    expect(blaetter()).toHaveLength(3);
  });

  it("vermerkt bei der Gesellschaft keine unbesetzte Leitung", async () => {
    const user = userEvent.setup();
    renderTief();
    await zurVorschau(user);
    // Die oberste Einheit wird nicht geführt, sondern ist das Ganze. Alle
    // übrigen Kästen der Übersicht haben eine Leitung.
    expect(within(blaetter()[0]).queryByText("Leitung unbesetzt")).not.toBeInTheDocument();
  });
});