@cosmicdrift/kumiko-renderer 0.327.0 → 0.328.1

package/src/__tests__/i18n.test.tsx

@@ -1,283 +0,0 @@
-import { describe, expect, test } from "bun:test";
-import type { LocaleResolver } from "@cosmicdrift/kumiko-headless";
-import { act, render, renderHook } from "@testing-library/react";
-import type { ReactNode } from "react";
-import { renderToStaticMarkup } from "react-dom/server";
-import {
-  createStaticLocaleResolver,
-  FormalityProvider,
-  LocaleProvider,
-  type TranslationsByLocale,
-  translationsByLocaleFromKeys,
-  useLocale,
-  useOptionalTranslation,
-  useTranslation,
-} from "../i18n";
-
-// Stateful resolver fixture: we drive locale changes with setState
-// and the test asserts re-render via subscribe.
-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: (next: string) => {
-      current = next;
-      for (const l of listeners) l();
-    },
-  };
-}
-const wrap =
-  (resolver: LocaleResolver, fallbackBundles?: TranslationsByLocale[]) =>
-  ({ children }: { readonly children: ReactNode }): ReactNode => (
-    <LocaleProvider resolver={resolver} {...(fallbackBundles !== undefined && { fallbackBundles })}>
-      {children}
-    </LocaleProvider>
-  );
-describe("useTranslation — lookup order", () => {
-  test("App-Resolver wins when it returns a non-key value", () => {
-    const resolver: LocaleResolver = {
-      ...createStaticLocaleResolver({ locale: "de" }),
-      translate: (key: string) => (key === "hello" ? "Resolved by app" : key),
-    };
-    const { result } = renderHook(() => useTranslation(), { wrapper: wrap(resolver) });
-    expect(result.current("hello")).toBe("Resolved by app");
-  });
-  test("falls back to plugin-bundle for current locale", () => {
-    const resolver = createStaticLocaleResolver({ locale: "de" });
-    const bundles: TranslationsByLocale[] = [{ de: { greet: "Hallo" }, en: { greet: "Hello" } }];
-    const { result } = renderHook(() => useTranslation(), {
-      wrapper: wrap(resolver, bundles),
-    });
-    expect(result.current("greet")).toBe("Hallo");
-  });
-  test("strips region for bundle lookup (de-AT → de)", () => {
-    const resolver = createStaticLocaleResolver({ locale: "de-AT" });
-    const bundles: TranslationsByLocale[] = [{ de: { greet: "Hallo" } }];
-    const { result } = renderHook(() => useTranslation(), {
-      wrapper: wrap(resolver, bundles),
-    });
-    expect(result.current("greet")).toBe("Hallo");
-  });
-  test("falls back to fallbackLocale (en) when current locale missing", () => {
-    const resolver = createStaticLocaleResolver({ locale: "fr" });
-    const bundles: TranslationsByLocale[] = [{ de: { greet: "Hallo" }, en: { greet: "Hello" } }];
-    const { result } = renderHook(() => useTranslation(), {
-      wrapper: wrap(resolver, bundles),
-    });
-    expect(result.current("greet")).toBe("Hello");
-  });
-  test("returns key as-is when nothing resolves", () => {
-    const resolver = createStaticLocaleResolver({ locale: "de" });
-    const { result } = renderHook(() => useTranslation(), { wrapper: wrap(resolver) });
-    expect(result.current("missing.key")).toBe("missing.key");
-  });
-  test("interpolates {param}-placeholders from params arg", () => {
-    const resolver = createStaticLocaleResolver({ locale: "de" });
-    const bundles: TranslationsByLocale[] = [{ de: { greet: "Hallo {name}!" } }];
-    const { result } = renderHook(() => useTranslation(), {
-      wrapper: wrap(resolver, bundles),
-    });
-    expect(result.current("greet", { name: "Marc" })).toBe("Hallo Marc!");
-  });
-  test("resolves a plural entry's CLDR category from a fallback bundle — matches the server's output", () => {
-    const bundles: TranslationsByLocale[] = [
-      {
-        de: {
-          "notifications.unread": {
-            one: "{count} ungelesene Nachricht",
-            other: "{count} ungelesene Nachrichten",
-          },
-        },
-        en: {
-          "notifications.unread": {
-            one: "{count} unread message",
-            other: "{count} unread messages",
-          },
-        },
-      },
-    ];
-    const { result: en } = renderHook(() => useTranslation(), {
-      wrapper: wrap(createStaticLocaleResolver({ locale: "en" }), bundles),
-    });
-    expect(en.current("notifications.unread", { count: 1 })).toBe("1 unread message");
-    expect(en.current("notifications.unread", { count: 5 })).toBe("5 unread messages");
-
-    const { result: de } = renderHook(() => useTranslation(), {
-      wrapper: wrap(createStaticLocaleResolver({ locale: "de" }), bundles),
-    });
-    expect(de.current("notifications.unread", { count: 1 })).toBe("1 ungelesene Nachricht");
-  });
-});
-describe("useTranslation — formality", () => {
-  const bundles: TranslationsByLocale[] = [
-    { de: { greet: "Hallo, wie geht es dir?", save: "Speichern" } },
-    { "de-x-formal": { greet: "Guten Tag, wie geht es Ihnen?" } },
-  ];
-  const wrapFormal =
-    (formality: "formal" | "informal", locale = "de") =>
-    ({ children }: { readonly children: ReactNode }): ReactNode => (
-      <LocaleProvider resolver={createStaticLocaleResolver({ locale })} fallbackBundles={bundles}>
-        <FormalityProvider formality={formality}>{children}</FormalityProvider>
-      </LocaleProvider>
-    );
-
-  test("without a FormalityProvider the plain locale wording is used", () => {
-    const { result } = renderHook(() => useTranslation(), {
-      wrapper: wrap(createStaticLocaleResolver({ locale: "de" }), bundles),
-    });
-    expect(result.current("greet")).toBe("Hallo, wie geht es dir?");
-  });
-
-  test("formal prefers a -x-formal entry from any bundle over a plain one, also for de-AT", () => {
-    for (const locale of ["de", "de-AT"]) {
-      const { result } = renderHook(() => useTranslation(), {
-        wrapper: wrapFormal("formal", locale),
-      });
-      expect(result.current("greet")).toBe("Guten Tag, wie geht es Ihnen?");
-    }
-  });
-
-  test("formal falls back to the plain wording for keys without a formal variant", () => {
-    const { result } = renderHook(() => useTranslation(), { wrapper: wrapFormal("formal") });
-    expect(result.current("save")).toBe("Speichern");
-  });
-
-  test("useOptionalTranslation honors formality too", () => {
-    const { result } = renderHook(() => useOptionalTranslation(), {
-      wrapper: wrapFormal("formal"),
-    });
-    expect(result.current?.("greet")).toBe("Guten Tag, wie geht es Ihnen?");
-  });
-});
-
-describe("useTranslation — re-render on locale change", () => {
-  test("subscribe fires when setLocale runs, hook returns new value", () => {
-    const resolver = makeStatefulResolver("de");
-    const bundles: TranslationsByLocale[] = [{ de: { greet: "Hallo" }, en: { greet: "Hello" } }];
-    function Probe(): ReactNode {
-      const t = useTranslation();
-      return <span data-testid="msg">{t("greet")}</span>;
-    }
-    const { getByTestId } = render(
-      <LocaleProvider resolver={resolver} fallbackBundles={bundles}>
-        <Probe />
-      </LocaleProvider>,
-    );
-    expect(getByTestId("msg").textContent).toBe("Hallo");
-    act(() => {
-      resolver.setLocale?.("en");
-    });
-    expect(getByTestId("msg").textContent).toBe("Hello");
-  });
-});
-describe("useTranslation — referential stability", () => {
-  // Prod-Incident 2026-07-07: admin-shell Overview-Screens hatten `t` in
-  // einem useEffect-Dependency-Array. Ein neues `t` pro Render triggerte
-  // einen Render/Effect-Endlos-Loop (~600 Queries/Sekunde). `t` (und der
-  // gesamte Context-Value) MUSS über Re-Renders hinweg stabil bleiben,
-  // solange sich Resolver/Bundles/Locale nicht ändern.
-  test("t keeps the same reference across re-renders when nothing changed", () => {
-    const resolver = createStaticLocaleResolver({ locale: "de" });
-    const { result, rerender } = renderHook(() => useTranslation(), {
-      wrapper: wrap(resolver),
-    });
-    const firstT = result.current;
-    rerender();
-    expect(result.current).toBe(firstT);
-  });
-  test("t stays stable across parent re-renders even with a fresh fallbackBundles literal per parent-render", () => {
-    // Realistischer Fall: eine App übergibt `fallbackBundles={[...]}` als
-    // Inline-Literal. Ohne Provider-seitige Memoization würde jeder
-    // Ahnen-Re-Render den Context-Value neu bauen. Hier prüfen wir nur
-    // den Provider-internen Memoization-Pfad bei stabilen Props.
-    const resolver = createStaticLocaleResolver({ locale: "de" });
-    const bundles: TranslationsByLocale[] = [{ de: { greet: "Hallo" } }];
-    function Probe(): ReactNode {
-      const t = useTranslation();
-      (Probe as unknown as { lastT?: unknown }).lastT = t;
-      return null;
-    }
-    const { rerender } = render(
-      <LocaleProvider resolver={resolver} fallbackBundles={bundles}>
-        <Probe />
-      </LocaleProvider>,
-    );
-    const firstT = (Probe as unknown as { lastT?: unknown }).lastT;
-    rerender(
-      <LocaleProvider resolver={resolver} fallbackBundles={bundles}>
-        <Probe />
-      </LocaleProvider>,
-    );
-    expect((Probe as unknown as { lastT?: unknown }).lastT).toBe(firstT);
-  });
-});
-describe("translationsByLocaleFromKeys", () => {
-  test("pivots key-first source to locale-first bundles losslessly", () => {
-    const source = {
-      "app:nav.home": { de: "Start", en: "Home" },
-      "app:nav.settings": { de: "Einstellungen", en: "Settings" },
-    };
-    const byLocale = translationsByLocaleFromKeys(source);
-    expect(byLocale["de"]).toEqual({
-      "app:nav.home": "Start",
-      "app:nav.settings": "Einstellungen",
-    });
-    expect(byLocale["en"]).toEqual({
-      "app:nav.home": "Home",
-      "app:nav.settings": "Settings",
-    });
-  });
-});
-describe("useLocale", () => {
-  test("returns the resolver", () => {
-    const resolver = createStaticLocaleResolver({ locale: "de" });
-    const { result } = renderHook(() => useLocale(), { wrapper: wrap(resolver) });
-    expect(result.current.locale()).toBe("de");
-  });
-});
-describe("useTranslation — SSR", () => {
-  // kumiko-framework#2595: getServerSnapshot hardcoded "en", so any
-  // server render came out English regardless of the resolver's actual
-  // locale — untestable via renderToStaticMarkup until getServerSnapshot
-  // read the resolver instead of a constant.
-  test(`renderToStaticMarkup with a non-English resolver renders the resolver's locale, not "en"`, () => {
-    const resolver = createStaticLocaleResolver({ locale: "de" });
-    const bundles: TranslationsByLocale[] = [{ de: { greet: "Hallo" }, en: { greet: "Hello" } }];
-    function Probe(): ReactNode {
-      const t = useTranslation();
-      return <span>{t("greet")}</span>;
-    }
-    const html = renderToStaticMarkup(
-      <LocaleProvider resolver={resolver} fallbackBundles={bundles}>
-        <Probe />
-      </LocaleProvider>,
-    );
-    expect(html).toContain("Hallo");
-    expect(html).not.toContain("Hello");
-  });
-
-  test(`renderToStaticMarkup via useOptionalTranslation resolves the resolver's locale, not "en"`, () => {
-    const resolver = createStaticLocaleResolver({ locale: "de" });
-    const bundles: TranslationsByLocale[] = [{ de: { greet: "Hallo" }, en: { greet: "Hello" } }];
-    function Probe(): ReactNode {
-      const t = useOptionalTranslation();
-      return <span>{t?.("greet")}</span>;
-    }
-    const html = renderToStaticMarkup(
-      <LocaleProvider resolver={resolver} fallbackBundles={bundles}>
-        <Probe />
-      </LocaleProvider>,
-    );
-    expect(html).toContain("Hallo");
-    expect(html).not.toContain("Hello");
-  });
-});