@aiquants/auth-react-router 0.4.1 → 0.6.0

package/src/admin/views.spec.tsx

@@ -0,0 +1,307 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react"
+import { createRoutesStub } from "react-router"
+import { describe, expect, it, vi } from "vitest"
+import type { UserAdminLabels } from "./labels"
+import { defaultUserAdminLabels, resolveUserAdminLabels } from "./labels"
+import { createInMemoryUserAdminStore } from "./server"
+import { UserAdminShell } from "./ui"
+import { AllowlistView, AuthUserAdminAppView, GroupMembersView, GroupsView, UsersView } from "./views"
+
+/** 1 回のフォーム送信内容(intent + 各フィールド)。 */
+type Submission = Record<string, string>
+
+/**
+ * Mounts a view under a route stub and records every form submission it makes.
+ * ビューをルートスタブ配下にマウントし、送信された全フォーム内容を記録する処理。
+ *
+ * 記録配列を返すことで「クリックしたら何が送信されたか」をテストで検証できる
+ * (送信内容を観測しないとハンドラを壊しても気づけないため)。
+ */
+function mount(path: string, Component: React.ComponentType<Record<string, unknown>>, loader: () => unknown, props = {}): Submission[] {
+    const submissions: Submission[] = []
+    const action = async ({ request }: { request: Request }) => {
+        const fd = await request.formData()
+        const entry: Submission = {}
+        for (const [k, v] of fd.entries()) entry[k] = String(v)
+        submissions.push(entry)
+        return { ok: true }
+    }
+    const Stub = createRoutesStub([{ path: "/users/*", Component: () => <Component {...props} />, loader, action }])
+    render(<Stub initialEntries={[path]} />)
+    return submissions
+}
+
+describe("UserAdminShell & UI Components", () => {
+    it("renders default header when renderHeader is omitted and supports tab counts", async () => {
+        const customLabels = resolveUserAdminLabels({ title: "カスタム管理", heading: "カスタム注釈", tabs: { users: "ユーザー", groups: "グループ", groupMembers: "所属", allowlist: "許可" } })
+        mount(
+            "/users",
+            () => (
+                <UserAdminShell
+                    title="カスタム管理"
+                    annotation={<span>カスタム注釈</span>}
+                    activeTab="users"
+                    onTabChange={() => {}}
+                    tabs={[
+                        { id: "users", label: "ユーザー", count: 5 },
+                        { id: "groups", label: "グループ" },
+                    ]}>
+                    <div>コンテンツ</div>
+                </UserAdminShell>
+            ),
+            () => ({ segment: "users", labels: customLabels }),
+        )
+
+        expect(await screen.findByText("カスタム管理")).toBeDefined()
+        expect(screen.getByText("カスタム注釈")).toBeDefined()
+    })
+})
+
+describe("AuthUserAdminAppView & Views Coverage Suite", () => {
+    it("renders AuthUserAdminAppView with custom renderHeader prop and custom labels", async () => {
+        const store = createInMemoryUserAdminStore()
+        const customLabels: UserAdminLabels = {
+            title: "ユーザー & 組織管理",
+            annotation: "各種設定",
+            tabs: { users: "ユーザー", groups: "グループ", groupMembers: "所属", allowlist: "許可リスト" },
+            usersView: { title: "U", addUser: "追加", editUser: "編集", searchPlaceholder: "検索...", displayName: "名前", email: "メール", status: "状態", active: "有効", inactive: "無効", actions: "操作" },
+            groupsView: { title: "G", addGroup: "グループ追加", editGroup: "グループ編集", groupKey: "キー", name: "名前", description: "説明", membersCount: "名", actions: "操作" },
+            groupMembersView: { title: "GM", selectGroup: "選択", currentMembers: "メンバー", member: "名", nonMember: "非", actionAdd: "追加", actionRemove: "除外" },
+            allowlistView: { title: "AL", addEntry: "パターン追加", pattern: "パターン", type: "種別", description: "説明", actions: "操作" },
+        }
+
+        const data = {
+            segment: "users",
+            users: await store.listUsers(),
+            groups: await store.listGroups(),
+            groupMembers: await store.listGroupMembers(),
+            allowlist: await store.listAllowlist(),
+            labels: customLabels,
+        }
+
+        mount("/users", AuthUserAdminAppView, () => data, {
+            renderHeader: ({ title }: { title: string }) => <h1 data-testid="custom-header-heading">{title} (Custom)</h1>,
+        })
+
+        expect(await screen.findByTestId("custom-header-heading")).toBeDefined()
+        expect(screen.getByTestId("user-admin-shell")).toBeDefined()
+    })
+
+    it("handles user create and edit modals, search filtering, and active toggle in UsersView", async () => {
+        const store = createInMemoryUserAdminStore({
+            users: [
+                { id: 1, email: "alpha@example.com", displayName: "Alpha User", isActive: true },
+                { id: 2, email: "beta@example.com", displayName: "Beta User", isActive: false },
+            ],
+        })
+        const data = {
+            segment: "users",
+            users: await store.listUsers(),
+            groups: [],
+            groupMembers: [],
+            allowlist: [],
+        }
+
+        mount("/users", UsersView, () => data)
+
+        expect(await screen.findByTestId("users-view-section")).toBeDefined()
+
+        // Test search filter
+        const searchInput = screen.getByTestId("users-search-input")
+        fireEvent.change(searchInput, { target: { value: "Alpha" } })
+        expect(screen.getByTestId("user-row-1")).toBeDefined()
+        expect(screen.queryByTestId("user-row-2")).toBeNull()
+
+        // Clear search filter
+        fireEvent.change(searchInput, { target: { value: "" } })
+        expect(screen.getByTestId("user-row-2")).toBeDefined()
+
+        // Open create modal & test cancel
+        const addBtn = screen.getByTestId("users-add-button")
+        fireEvent.click(addBtn)
+        expect(screen.getByTestId("user-create-modal")).toBeDefined()
+
+        // Empty submit guard
+        const createForm = screen.getByTestId("user-create-modal").querySelector("form")
+        if (createForm) fireEvent.submit(createForm)
+
+        const cancelCreateBtn = screen.getByText("キャンセル")
+        fireEvent.click(cancelCreateBtn)
+        expect(screen.queryByTestId("user-create-modal")).toBeNull()
+
+        // Re-open create modal & submit
+        fireEvent.click(addBtn)
+        const createName = screen.getByTestId("create-user-display-name")
+        const createEmail = screen.getByTestId("create-user-email")
+        fireEvent.change(createName, { target: { value: "New User" } })
+        fireEvent.change(createEmail, { target: { value: "new@example.com" } })
+
+        const submitCreate = screen.getByTestId("submit-create-user")
+        fireEvent.click(submitCreate)
+
+        // Open edit modal & test cancel
+        const editBtn = screen.getByTestId("edit-user-btn-1")
+        fireEvent.click(editBtn)
+        expect(screen.getByTestId("user-edit-modal")).toBeDefined()
+
+        const cancelEditBtn = screen.getByTestId("user-edit-modal").querySelector('button[type="button"]')
+        if (cancelEditBtn) fireEvent.click(cancelEditBtn)
+        expect(screen.queryByTestId("user-edit-modal")).toBeNull()
+
+        // Re-open edit modal, test empty submit guard, fill & submit
+        fireEvent.click(editBtn)
+        const editNameInput = screen.getByTestId("edit-user-display-name")
+        fireEvent.change(editNameInput, { target: { value: "" } })
+        fireEvent.click(screen.getByTestId("submit-edit-user"))
+
+        fireEvent.change(editNameInput, { target: { value: "Alpha Updated" } })
+        fireEvent.click(screen.getByTestId("submit-edit-user"))
+
+        // Toggle active status
+        const toggleBtn = screen.getByTestId("toggle-user-btn-1")
+        fireEvent.click(toggleBtn)
+    })
+
+    it("handles group create, edit modals, and delete confirmations in GroupsView", async () => {
+        const store = createInMemoryUserAdminStore({
+            groups: [{ id: 1, groupKey: "dev-team", name: "開発チーム", description: "開発用", isActive: true }],
+        })
+        const data = {
+            segment: "groups",
+            users: [],
+            groups: await store.listGroups(),
+            groupMembers: [],
+            allowlist: [],
+        }
+
+        const submissions = mount("/users/groups", GroupsView, () => data)
+
+        expect(await screen.findByTestId("groups-view-section")).toBeDefined()
+
+        // Create group modal open & test cancel
+        const addBtn = screen.getByTestId("groups-add-button")
+        fireEvent.click(addBtn)
+        expect(screen.getByTestId("group-create-modal")).toBeDefined()
+
+        // Empty submit guard
+        const groupForm = screen.getByTestId("group-create-modal").querySelector("form")
+        if (groupForm) fireEvent.submit(groupForm)
+
+        const cancelGroupCreateBtn = screen.getByTestId("group-create-modal").querySelector('button[type="button"]')
+        if (cancelGroupCreateBtn) fireEvent.click(cancelGroupCreateBtn)
+        expect(screen.queryByTestId("group-create-modal")).toBeNull()
+
+        // Re-open create group, fill & submit
+        fireEvent.click(addBtn)
+        fireEvent.change(screen.getByTestId("create-group-key"), { target: { value: "design" } })
+        fireEvent.change(screen.getByTestId("create-group-name"), { target: { value: "デザインチーム" } })
+        fireEvent.change(screen.getByTestId("create-group-description"), { target: { value: "UI/UX" } })
+
+        const newGroupForm = screen.getByTestId("group-create-modal").querySelector("form")
+        if (newGroupForm) fireEvent.submit(newGroupForm)
+
+        // Edit group modal open & test cancel
+        fireEvent.click(screen.getByTestId("edit-group-btn-1"))
+        expect(screen.getByTestId("group-edit-modal")).toBeDefined()
+
+        const cancelGroupEditBtn = screen.getByTestId("group-edit-modal").querySelector('button[type="button"]')
+        if (cancelGroupEditBtn) fireEvent.click(cancelGroupEditBtn)
+        expect(screen.queryByTestId("group-edit-modal")).toBeNull()
+
+        // Re-open edit group, fill & submit (including empty name submit guard)
+        fireEvent.click(screen.getByTestId("edit-group-btn-1"))
+        const editGroupName = screen.getByTestId("edit-group-name")
+        fireEvent.change(editGroupName, { target: { value: "" } })
+        fireEvent.click(screen.getByTestId("submit-edit-group"))
+
+        fireEvent.change(editGroupName, { target: { value: "開発・インフラチーム" } })
+        fireEvent.change(screen.getByTestId("edit-group-description"), { target: { value: "Dev & Ops" } })
+        fireEvent.click(screen.getByTestId("submit-edit-group"))
+
+        // 削除確認ダイアログ: キャンセル → 送信されない / OK → 送信される。
+        // 「キャンセル後の非送信」を単独で待つと非同期送信が届く前に真になってしまうため、
+        // キャンセル→OK と続けて操作し、最終的な deleteGroup 送信が **1 回だけ** であることで
+        // ガードの有無を判定する (ガードを外すと 2 回になり落ちる)。
+        const confirmSpy = vi.spyOn(window, "confirm")
+        confirmSpy.mockReturnValueOnce(false)
+        fireEvent.click(screen.getByTestId("delete-group-btn-1"))
+        confirmSpy.mockReturnValueOnce(true)
+        fireEvent.click(screen.getByTestId("delete-group-btn-1"))
+
+        await waitFor(() => expect(submissions.filter((s) => s.intent === "deleteGroup")).toHaveLength(1))
+        expect(submissions.find((s) => s.intent === "deleteGroup")).toEqual(expect.objectContaining({ intent: "deleteGroup", groupId: "1" }))
+        confirmSpy.mockRestore()
+    })
+
+    it("handles GroupMembersView toggle buttons and empty group list edge case", async () => {
+        const store = createInMemoryUserAdminStore({
+            users: [{ id: 1, email: "u1@example.com", displayName: "User One", isActive: true }],
+            groups: [{ id: 10, groupKey: "team-a", name: "Team A", isActive: true }],
+            groupMembers: [{ id: 100, groupId: 10, userId: 1 }],
+        })
+        const data = {
+            segment: "group_members",
+            users: await store.listUsers(),
+            groups: await store.listGroups(),
+            groupMembers: await store.listGroupMembers(),
+            allowlist: [],
+        }
+
+        const submissions = mount("/users/group_members", GroupMembersView, () => data)
+
+        expect(await screen.findByTestId("group-members-view-section")).toBeDefined()
+
+        // Select group
+        fireEvent.click(screen.getByTestId("select-group-btn-10"))
+
+        // Toggle member removal → 既存メンバーなので removeGroupMember が送信されること
+        fireEvent.click(screen.getByTestId("toggle-member-btn-1"))
+        await waitFor(() => expect(submissions.at(-1)).toEqual(expect.objectContaining({ intent: "removeGroupMember", groupId: "10", userId: "1" })))
+    })
+
+    it("renders empty group state message in GroupMembersView when no groups exist", async () => {
+        const data = {
+            segment: "group_members",
+            users: [],
+            groups: [],
+            groupMembers: [],
+            allowlist: [],
+        }
+
+        mount("/users/group_members", GroupMembersView, () => data)
+
+        expect(await screen.findByTestId("group-members-view-section")).toBeDefined()
+        expect(screen.getByText(defaultUserAdminLabels.groupMembersView.selectPrompt)).toBeDefined()
+    })
+
+    it("handles AllowlistView form inputs, submit guards, and entry deletion", async () => {
+        const store = createInMemoryUserAdminStore({
+            allowlist: [{ id: 1, pattern: "@company.com", type: "domain", description: "Company Domain" }],
+        })
+        const data = {
+            segment: "allowlist",
+            users: [],
+            groups: [],
+            groupMembers: [],
+            allowlist: await store.listAllowlist(),
+        }
+
+        mount("/users/allowlist", AllowlistView, () => data)
+
+        expect(await screen.findByTestId("allowlist-view-section")).toBeDefined()
+
+        // Empty submit guard
+        const allowlistForm = screen.getByTestId("allowlist-view-section").querySelector("form")
+        if (allowlistForm) fireEvent.submit(allowlistForm)
+
+        // Add entry form fill
+        fireEvent.change(screen.getByTestId("allowlist-pattern-input"), { target: { value: "special@domain.com" } })
+        fireEvent.change(screen.getByTestId("allowlist-type-select"), { target: { value: "email" } })
+        fireEvent.change(screen.getByTestId("allowlist-desc-input"), { target: { value: "特別ユーザー" } })
+
+        fireEvent.click(screen.getByTestId("submit-allowlist-add"))
+
+        // Delete allowlist entry
+        fireEvent.click(screen.getByTestId("remove-allowlist-btn-1"))
+    })
+})