feat(i18n): localize admin users UI surfaces

2026-06-15 16:01:19 +02:00
parent 0cbbe60299
commit 73552dbb05
13 changed files with 593 additions and 58 deletions
@@ -0,0 +1,191 @@
+import { createElement } from "react"
+import { renderToStaticMarkup } from "react-dom/server"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+import { en } from "@/i18n/dictionaries/en"
+import { es } from "@/i18n/dictionaries/es"
+import type { getUsers as _getUsers } from "@/services/user.service"
+
+type UserData = Awaited<ReturnType<typeof _getUsers>>["data"][number]
+
+const mocks = vi.hoisted(() => ({
+  getUsers: vi.fn(),
+  getI18n: vi.fn(),
+}))
+
+vi.mock("@/i18n/server", () => ({
+  getI18n: mocks.getI18n,
+}))
+
+vi.mock("@/services/user.service", () => ({
+  getUsers: mocks.getUsers,
+}))
+
+vi.mock("@/components/common/pageheader", () => ({
+  default: ({ title, addLabel }: { title?: string; addLabel?: string }) =>
+    createElement(
+      "header",
+      null,
+      [title, addLabel].filter(Boolean).join(" | "),
+    ),
+}))
+
+vi.mock("@/components/common/pagination", () => ({
+  default: ({ totalPages }: { totalPages: number }) =>
+    createElement("nav", { "aria-label": "Pagination" }, totalPages),
+}))
+
+describe("user pages localization", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mocks.getI18n.mockResolvedValue({ dictionary: es, locale: "es" })
+  })
+
+  it("renders the user list in Spanish with localized headers, status/role labels, and unchanged user data", async () => {
+    const { default: UsersPage } = await import(
+      "@/app/(dashboard)/admin/users/page"
+    )
+
+    mocks.getUsers.mockResolvedValue({
+      data: [
+        {
+          id: "user-1",
+          name: "Ada Lovelace",
+          username: "ada",
+          email: "ada@example.test",
+          role: "ADMIN",
+          isActive: true,
+        },
+        {
+          id: "user-2",
+          name: "Grace Hopper",
+          username: "grace",
+          email: "grace@example.test",
+          role: "STAFF",
+          isActive: false,
+        },
+      ],
+      totalPages: 1,
+    })
+
+    const html = renderToStaticMarkup(
+      await UsersPage({ searchParams: Promise.resolve({}) }),
+    )
+
+    // Title and add label
+    expect(html).toContain("Usuarios")
+    expect(html).toContain("Agregar usuario")
+
+    // Table headers from dictionary
+    expect(html).toContain("Nombre")
+    expect(html).toContain("Usuario")
+    expect(html).toContain("Correo electrónico")
+    expect(html).toContain("Rol")
+    expect(html).toContain("Estado")
+    expect(html).toContain("Acciones")
+
+    // Status labels from dictionary (display-only, not canonical)
+    expect(html).toContain("Activo")
+    expect(html).toContain("Inactivo")
+
+    // Role labels from dictionary (display-only, not canonical)
+    expect(html).toContain("Administrador")
+    expect(html).toContain("Personal")
+
+    // User data is never translated
+    expect(html).toContain("Ada Lovelace")
+    expect(html).toContain("ada")
+    expect(html).toContain("ada@example.test")
+    expect(html).toContain("Grace Hopper")
+    expect(html).toContain("grace")
+    expect(html).toContain("grace@example.test")
+
+    // Canonical role values must NOT appear as display text
+    expect(html).not.toContain(">ADMIN<")
+    expect(html).not.toContain(">STAFF<")
+  })
+
+  it("renders the localized user empty state when no users exist", async () => {
+    const { default: UsersPage } = await import(
+      "@/app/(dashboard)/admin/users/page"
+    )
+
+    mocks.getUsers.mockResolvedValue({
+      data: [],
+      totalPages: 0,
+    })
+
+    const html = renderToStaticMarkup(
+      await UsersPage({ searchParams: Promise.resolve({}) }),
+    )
+
+    expect(html).toContain("No se encontraron usuarios.")
+  })
+
+  it("renders the user list in English with English dictionary labels", async () => {
+    const { default: UsersPage } = await import(
+      "@/app/(dashboard)/admin/users/page"
+    )
+
+    mocks.getI18n.mockResolvedValue({ dictionary: en, locale: "en" })
+    mocks.getUsers.mockResolvedValue({
+      data: [
+        {
+          id: "user-1",
+          name: "Ada Lovelace",
+          username: "ada",
+          email: "ada@example.test",
+          role: "MANAGER",
+          isActive: true,
+        },
+      ],
+      totalPages: 1,
+    })
+
+    const html = renderToStaticMarkup(
+      await UsersPage({ searchParams: Promise.resolve({}) }),
+    )
+
+    // English dictionary labels
+    expect(html).toContain("Users")
+    expect(html).toContain("Add User")
+    expect(html).toContain("Name")
+    expect(html).toContain("Username")
+    expect(html).toContain("Email")
+    expect(html).toContain("Role")
+    expect(html).toContain("Status")
+    expect(html).toContain("Actions")
+    expect(html).toContain("Active")
+    expect(html).toContain("Manager")
+
+    // Canonical enum value must NOT appear as display text
+    expect(html).not.toContain(">MANAGER<")
+  })
+
+  it("renders unknown role via fallback when role is not in dictionary", async () => {
+    const { default: UsersPage } = await import(
+      "@/app/(dashboard)/admin/users/page"
+    )
+
+    mocks.getUsers.mockResolvedValue({
+      data: [
+        {
+          id: "user-1",
+          name: "Test User",
+          username: "testuser",
+          email: "test@example.test",
+          role: "UNKNOWN_ROLE",
+          isActive: true,
+        } as unknown as UserData,
+      ],
+      totalPages: 1,
+    })
+
+    const html = renderToStaticMarkup(
+      await UsersPage({ searchParams: Promise.resolve({}) }),
+    )
+
+    // Unknown role should use fallback
+    expect(html).toContain("Rol desconocido")
+  })
+})