@cosmicdrift/kumiko-renderer-web 0.1.0

package/src/__tests__/language-switcher.test.tsx

@@ -0,0 +1,100 @@
+// @vitest-environment jsdom
+import type { LocaleResolver } from "@cosmicdrift/kumiko-headless";
+import { createStaticLocaleResolver, LocaleProvider } from "@cosmicdrift/kumiko-renderer";
+import { render as _render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { ReactNode } from "react";
+import { describe, expect, test, vi } from "vitest";
+import { LanguageSwitcher } from "../layout/language-switcher";
+
+// Tests greifen den LanguageSwitcher mit einem stateful Stub-Resolver
+// (setLocale + subscribe) UND einem stateless Resolver, um die zwei
+// Verzweigungen abzudecken: Switcher rendert nur wenn setLocale da ist.
+// Radix-DropdownMenu öffnet auf pointerdown, daher userEvent statt
+// fireEvent.click.
+
+function makeStatefulResolver(initial: string): LocaleResolver {
+  let current = initial;
+  const listeners = new Set<() => void>();
+  return {
+    translate: (key: string) => key,
+    locale: () => current,
+    timeZone: () => "UTC",
+    subscribe: (l: () => void) => {
+      listeners.add(l);
+      return () => {
+        listeners.delete(l);
+      };
+    },
+    setLocale: vi.fn((next: string) => {
+      current = next;
+      for (const l of listeners) l();
+    }),
+  };
+}
+
+function renderWithResolver(resolver: LocaleResolver, ui: ReactNode) {
+  return _render(<LocaleProvider resolver={resolver}>{ui}</LocaleProvider>);
+}
+
+const locales = [
+  { code: "de", label: "Deutsch" },
+  { code: "en", label: "English" },
+];
+
+describe("LanguageSwitcher", () => {
+  test("renders nothing when resolver has no setLocale", () => {
+    const resolver = createStaticLocaleResolver();
+    const { container } = renderWithResolver(
+      resolver,
+      <LanguageSwitcher locales={locales} testId="lang" />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  test("active locale shown via shorthand", () => {
+    const resolver = makeStatefulResolver("de");
+    renderWithResolver(resolver, <LanguageSwitcher locales={locales} testId="lang" />);
+    // Trigger zeigt den Locale-Code im DOM (Tailwind uppercased ihn nur
+    // visuell via CSS — der Text-Knoten bleibt lowercase). Das passt:
+    // getByText sieht den DOM-Text.
+    expect(screen.getByText("de")).toBeTruthy();
+  });
+
+  test("opens dropdown and lists all locales with active marker", async () => {
+    const user = userEvent.setup();
+    const resolver = makeStatefulResolver("de");
+    renderWithResolver(resolver, <LanguageSwitcher locales={locales} testId="lang" />);
+    await user.click(screen.getByRole("button", { name: "Sprache" }));
+    expect(screen.getByText("Deutsch")).toBeTruthy();
+    expect(screen.getByText("English")).toBeTruthy();
+  });
+
+  test("clicking a locale calls resolver.setLocale", async () => {
+    const user = userEvent.setup();
+    const resolver = makeStatefulResolver("de");
+    renderWithResolver(resolver, <LanguageSwitcher locales={locales} testId="lang" />);
+    await user.click(screen.getByRole("button", { name: "Sprache" }));
+    await user.click(screen.getByText("English"));
+    expect(resolver.setLocale).toHaveBeenCalledWith("en");
+  });
+
+  test("matches active locale via language-root (de-AT → de)", async () => {
+    const user = userEvent.setup();
+    const resolver = makeStatefulResolver("de-AT");
+    renderWithResolver(resolver, <LanguageSwitcher locales={locales} testId="lang" />);
+    // Trigger zeigt "DE" (aus de-AT abgeleitet) — der active marker im
+    // Dropdown muss bei "Deutsch" sitzen, nicht bei "English".
+    await user.click(screen.getByRole("button", { name: "Sprache" }));
+    await waitFor(() => {
+      // Radix-CheckboxItem markiert active via aria-checked="true". Der
+      // Check-Icon (lucide) sitzt im ItemIndicator und ist nur sichtbar
+      // wenn checked — die ARIA-Variante ist robust gegen Rendering-
+      // Tricks.
+      const deItem = screen.getByText("Deutsch").closest('[role="menuitemcheckbox"]');
+      expect(deItem?.getAttribute("aria-checked")).toBe("true");
+      const enItem = screen.getByText("English").closest('[role="menuitemcheckbox"]');
+      expect(enItem?.getAttribute("aria-checked")).toBe("false");
+    });
+  });
+});

package/src/__tests__/money-input.test.tsx

@@ -0,0 +1,232 @@
+// @vitest-environment jsdom
+//
+// MoneyInput hat genug Custom-Logik (focus-aware Format, +/- Buttons,
+// Locale-Parse), dass der Switch-Case-Test in primitives.test nicht
+// reicht. Hier pinnen wir die Verträge:
+//   - Blur-View formatiert mit Currency-Symbol + Tausender-Trenner.
+//   - Focus-View liefert raw editable string, ohne Grouping.
+//   - +/- Buttons mutieren Canonical-Cents direkt (nicht major-units).
+//   - Blur mit Müll-Input verwirft den Wert (kein corrupt-set).
+//   - Verschiedene Currencies → korrekte Decimal-Stellen (JPY=0).
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import { MoneyInput, parseLocaleNumber } from "../primitives/money-input";
+
+describe("MoneyInput", () => {
+  test("blur-view: de-DE EUR zeigt €-Symbol + Punkt-Tausender + Komma-Decimal", () => {
+    render(
+      <MoneyInput
+        id="eur"
+        name="eur"
+        value={123456}
+        onChange={() => undefined}
+        currency="EUR"
+        locale="de-DE"
+      />,
+    );
+    const input = screen.getByRole("textbox") as HTMLInputElement;
+    expect(input.value).toBe("1.234,56 €");
+  });
+
+  test("blur-view: en-US USD zeigt $-Prefix + Komma-Tausender + Punkt-Decimal", () => {
+    render(
+      <MoneyInput
+        id="usd"
+        name="usd"
+        value={2599}
+        onChange={() => undefined}
+        currency="USD"
+        locale="en-US"
+      />,
+    );
+    const input = screen.getByRole("textbox") as HTMLInputElement;
+    expect(input.value).toBe("$25.99");
+  });
+
+  test("blur-view: ja-JP JPY zeigt Yen-Symbol ohne Decimals", () => {
+    render(
+      <MoneyInput
+        id="jpy"
+        name="jpy"
+        value={150000}
+        onChange={() => undefined}
+        currency="JPY"
+        locale="ja-JP"
+      />,
+    );
+    const input = screen.getByRole("textbox") as HTMLInputElement;
+    // ja-JP rendert "￥150,000" (Fullwidth-Yen). 0 Decimals weil JPY
+    // keine Subunits hat — 150.000 cents → 150.000 Yen direkt.
+    expect(input.value).toContain("150,000");
+    expect(input.value).not.toContain(".00");
+  });
+
+  test("focus-view: zeigt raw editable string (kein Grouping, kein Symbol)", () => {
+    render(
+      <MoneyInput
+        id="eur"
+        name="eur"
+        value={123456}
+        onChange={() => undefined}
+        currency="EUR"
+        locale="de-DE"
+      />,
+    );
+    const input = screen.getByRole("textbox") as HTMLInputElement;
+    fireEvent.focus(input);
+    // Locale ist de-DE → Komma als Decimal-Separator, kein Punkt-Trenner
+    expect(input.value).toBe("1234,56");
+  });
+
+  test("blur mit gültigem Edit-String: onChange feuert Cents", () => {
+    const onChange = vi.fn();
+    render(
+      <MoneyInput
+        id="eur"
+        name="eur"
+        value={1000}
+        onChange={onChange}
+        currency="EUR"
+        locale="de-DE"
+      />,
+    );
+    const input = screen.getByRole("textbox") as HTMLInputElement;
+    fireEvent.focus(input);
+    fireEvent.change(input, { target: { value: "12,34" } });
+    fireEvent.blur(input);
+    expect(onChange).toHaveBeenCalledWith(1234);
+  });
+
+  test("blur mit leerem String: onChange(undefined) räumt den Wert", () => {
+    const onChange = vi.fn();
+    render(
+      <MoneyInput
+        id="eur"
+        name="eur"
+        value={1000}
+        onChange={onChange}
+        currency="EUR"
+        locale="de-DE"
+      />,
+    );
+    const input = screen.getByRole("textbox") as HTMLInputElement;
+    fireEvent.focus(input);
+    fireEvent.change(input, { target: { value: "" } });
+    fireEvent.blur(input);
+    expect(onChange).toHaveBeenCalledWith(undefined);
+  });
+
+  test("blur mit korruptem Input (Buchstaben): onChange wird NICHT gerufen", () => {
+    const onChange = vi.fn();
+    render(
+      <MoneyInput
+        id="eur"
+        name="eur"
+        value={1000}
+        onChange={onChange}
+        currency="EUR"
+        locale="de-DE"
+      />,
+    );
+    const input = screen.getByRole("textbox") as HTMLInputElement;
+    fireEvent.focus(input);
+    fireEvent.change(input, { target: { value: "abc" } });
+    fireEvent.blur(input);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  test("+ Button: addiert 1 Major-Unit (=100 cents bei EUR) zum Canonical-Wert", () => {
+    const onChange = vi.fn();
+    render(
+      <MoneyInput
+        id="eur"
+        name="eur"
+        value={1000}
+        onChange={onChange}
+        currency="EUR"
+        locale="de-DE"
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "+" }));
+    expect(onChange).toHaveBeenCalledWith(1100);
+  });
+
+  test("− Button: subtrahiert 1 Major-Unit", () => {
+    const onChange = vi.fn();
+    render(
+      <MoneyInput
+        id="eur"
+        name="eur"
+        value={1000}
+        onChange={onChange}
+        currency="EUR"
+        locale="de-DE"
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "−" }));
+    expect(onChange).toHaveBeenCalledWith(900);
+  });
+
+  test("+ Button bei leerem Wert: startet bei 0 + 1 Major-Unit", () => {
+    const onChange = vi.fn();
+    render(
+      <MoneyInput id="eur" name="eur" value="" onChange={onChange} currency="EUR" locale="de-DE" />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "+" }));
+    expect(onChange).toHaveBeenCalledWith(100);
+  });
+
+  test("+ Button bei JPY: addiert 1 Yen (1 cent, weil JPY 0 decimals hat)", () => {
+    const onChange = vi.fn();
+    render(
+      <MoneyInput
+        id="jpy"
+        name="jpy"
+        value={500}
+        onChange={onChange}
+        currency="JPY"
+        locale="ja-JP"
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "+" }));
+    // factor=1 (10^0), bump(1) → +1 statt +100
+    expect(onChange).toHaveBeenCalledWith(501);
+  });
+});
+
+describe("parseLocaleNumber (strict-Negative)", () => {
+  test("de-DE: erkennt Komma als Decimal", () => {
+    expect(parseLocaleNumber("12,34", "de-DE")).toBe(12.34);
+  });
+
+  test("en-US: erkennt Punkt als Decimal", () => {
+    expect(parseLocaleNumber("12.34", "en-US")).toBe(12.34);
+  });
+
+  test("Tausender-Trenner werden entfernt", () => {
+    expect(parseLocaleNumber("1.234,56", "de-DE")).toBe(1234.56);
+    expect(parseLocaleNumber("1,234.56", "en-US")).toBe(1234.56);
+  });
+
+  test("negativ am Anfang: wird als negative Zahl geparst", () => {
+    expect(parseLocaleNumber("-12,34", "de-DE")).toBe(-12.34);
+  });
+
+  test("Minus mitten in der Zahl: NaN (strict — kein Silent-Fallback)", () => {
+    // "1-23" könnte naiv als -123 interpretiert werden; das war der
+    // Bug der vor dem Strict-Check existierte und vertippte Inputs zu
+    // falschen Beträgen gemacht hat.
+    expect(parseLocaleNumber("1-23", "de-DE")).toBeNaN();
+  });
+
+  test("Buchstaben oder Sonderzeichen: NaN", () => {
+    expect(parseLocaleNumber("abc", "de-DE")).toBeNaN();
+    expect(parseLocaleNumber("12,3a", "de-DE")).toBeNaN();
+  });
+
+  test("Leerstring oder reines Decimal: NaN", () => {
+    expect(parseLocaleNumber("", "de-DE")).toBeNaN();
+    expect(parseLocaleNumber(",", "de-DE")).toBeNaN();
+  });
+});