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,221 @@
+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"
+
+const mocks = vi.hoisted(() => ({
+  createUserAction: vi.fn(),
+  updateUserAction: vi.fn(),
+  resetUserPasswordAction: vi.fn(),
+  getUserProfileById: vi.fn(),
+  getI18n: vi.fn(),
+  push: vi.fn(),
+  toastError: vi.fn(),
+  toastSuccess: vi.fn(),
+}))
+
+vi.mock("@/i18n/server", () => ({
+  getI18n: mocks.getI18n,
+}))
+
+vi.mock("@/actions/user.actions", () => ({
+  createUserAction: mocks.createUserAction,
+  updateUserAction: mocks.updateUserAction,
+  resetUserPasswordAction: mocks.resetUserPasswordAction,
+}))
+
+vi.mock("@/services/user.service", () => ({
+  getUserProfileById: mocks.getUserProfileById,
+}))
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({
+    push: mocks.push,
+  }),
+  notFound: () => {
+    throw new Error("NOT_FOUND")
+  },
+}))
+
+vi.mock("sonner", () => ({
+  toast: {
+    error: mocks.toastError,
+    success: mocks.toastSuccess,
+  },
+}))
+
+describe("new user form localization", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mocks.getI18n.mockResolvedValue({ dictionary: es, locale: "es" })
+  })
+
+  it("passes server-resolved schema and role copy into the new user form boundary", async () => {
+    const { default: NewUserPage } = await import(
+      "@/app/(dashboard)/admin/users/new/page"
+    )
+
+    renderToStaticMarkup(await NewUserPage())
+
+    // The page must pass formCopy, schemaCopy, and roleLabels to the form
+    // We verify this by checking the form renders localized content
+  })
+
+  it("renders new user page with localized title and form labels in Spanish", async () => {
+    const { default: NewUserPage } = await import(
+      "@/app/(dashboard)/admin/users/new/page"
+    )
+
+    const html = renderToStaticMarkup(await NewUserPage())
+
+    // Title
+    expect(html).toContain("Nuevo usuario")
+
+    // Form labels from dictionary
+    expect(html).toContain("Nombre")
+    expect(html).toContain("Usuario")
+    expect(html).toContain("Correo electrónico")
+    expect(html).toContain("Contraseña")
+    expect(html).toContain("Rol")
+
+    // Placeholders from dictionary
+    expect(html).toContain("Nombre completo")
+    expect(html).toContain("Mínimo 8 caracteres")
+
+    // Role labels (display) with canonical values
+    expect(html).toContain("Administrador")
+    expect(html).toContain("Gerente")
+    expect(html).toContain("Personal")
+    expect(html).toContain("Visor")
+
+    // Submit button text
+    expect(html).toContain("Crear usuario")
+  })
+
+  it("renders new user page with English form labels in English locale", async () => {
+    mocks.getI18n.mockResolvedValue({ dictionary: en, locale: "en" })
+
+    const { default: NewUserPage } = await import(
+      "@/app/(dashboard)/admin/users/new/page"
+    )
+
+    const html = renderToStaticMarkup(await NewUserPage())
+
+    expect(html).toContain("New User")
+    expect(html).toContain("Full name")
+    expect(html).toContain("Username")
+    expect(html).toContain("Password")
+    expect(html).toContain("Minimum 8 characters")
+    expect(html).toContain("Create User")
+    expect(html).toContain("Admin")
+    expect(html).toContain("Manager")
+    expect(html).toContain("Staff")
+    expect(html).toContain("Viewer")
+  })
+
+  it("keeps canonical role values in option value attributes, not localized labels", async () => {
+    const { default: NewUserPage } = await import(
+      "@/app/(dashboard)/admin/users/new/page"
+    )
+
+    const html = renderToStaticMarkup(await NewUserPage())
+
+    // Canonical values must be in value attributes
+    expect(html).toContain('value="ADMIN"')
+    expect(html).toContain('value="MANAGER"')
+    expect(html).toContain('value="STAFF"')
+    expect(html).toContain('value="VIEWER"')
+  })
+})
+
+describe("edit user form localization", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mocks.getI18n.mockResolvedValue({ dictionary: es, locale: "es" })
+    mocks.getUserProfileById.mockResolvedValue({
+      id: "user-1",
+      name: "Ada Lovelace",
+      username: "ada",
+      email: "ada@example.test",
+      role: "ADMIN",
+      isActive: true,
+    })
+  })
+
+  it("renders edit user page with localized title, form labels, and reset-password section in Spanish", async () => {
+    const { default: EditUserPage } = await import(
+      "@/app/(dashboard)/admin/users/[userId]/edit/page"
+    )
+
+    const html = renderToStaticMarkup(
+      await EditUserPage({
+        params: Promise.resolve({ userId: "user-1" }),
+      }),
+    )
+
+    // Title
+    expect(html).toContain("Editar usuario")
+
+    // Form labels
+    expect(html).toContain("Nombre")
+    expect(html).toContain("Nueva contraseña")
+
+    // Role labels with canonical values
+    expect(html).toContain("Administrador")
+    expect(html).toContain('value="ADMIN"')
+
+    // Active user checkbox label
+    expect(html).toContain("Usuario activo")
+
+    // Submit button
+    expect(html).toContain("Actualizar usuario")
+
+    // Reset password section
+    expect(html).toContain("Restablecer contraseña")
+    expect(html).toContain("Nueva contraseña")
+    expect(html).toContain("Mínimo 8 caracteres")
+  })
+
+  it("renders edit user page with English labels in English locale", async () => {
+    mocks.getI18n.mockResolvedValue({ dictionary: en, locale: "en" })
+
+    const { default: EditUserPage } = await import(
+      "@/app/(dashboard)/admin/users/[userId]/edit/page"
+    )
+
+    const html = renderToStaticMarkup(
+      await EditUserPage({
+        params: Promise.resolve({ userId: "user-1" }),
+      }),
+    )
+
+    expect(html).toContain("Edit User")
+    expect(html).toContain("Active user")
+    expect(html).toContain("Update User")
+    expect(html).toContain("Reset password")
+    expect(html).toContain("New password")
+    expect(html).toContain("Reset Password")
+  })
+
+  it("renders edit user form with role option values as canonical enums regardless of locale", async () => {
+    const { default: EditUserPage } = await import(
+      "@/app/(dashboard)/admin/users/[userId]/edit/page"
+    )
+
+    const html = renderToStaticMarkup(
+      await EditUserPage({
+        params: Promise.resolve({ userId: "user-1" }),
+      }),
+    )
+
+    // Canonical role values
+    expect(html).toContain('value="ADMIN"')
+    expect(html).toContain('value="MANAGER"')
+    expect(html).toContain('value="STAFF"')
+    expect(html).toContain('value="VIEWER"')
+
+    // Spanish labels for roles
+    expect(html).toContain("Administrador")
+  })
+})