@izumisy-tailor/tailor-data-viewer 0.1.19 → 0.1.21

package/src/component/single-record-tab-content.test.tsx

@@ -0,0 +1,350 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { SingleRecordTabContent } from "./single-record-tab-content";
+import type {
+  TableMetadata,
+  TableMetadataMap,
+} from "../generator/metadata-generator";
+import type { SingleRecordDataFetcher } from "./hooks/use-single-record-data";
+
+// Mock table metadata for "task" table
+const mockTaskTable: TableMetadata = {
+  name: "task",
+  pluralForm: "tasks",
+  description: "タスク",
+  readAllowedRoles: ["admin"],
+  fields: [
+    { name: "id", type: "uuid", required: true },
+    { name: "title", type: "string", required: true, description: "タイトル" },
+    { name: "description", type: "string", required: false },
+    { name: "status", type: "enum", required: true },
+    { name: "userId", type: "uuid", required: true },
+    { name: "createdAt", type: "datetime", required: true },
+  ],
+  relations: [
+    {
+      fieldName: "comments",
+      targetTable: "comment",
+      relationType: "oneToMany",
+      foreignKeyField: "taskId",
+    },
+    {
+      fieldName: "user",
+      targetTable: "user",
+      relationType: "manyToOne",
+      foreignKeyField: "userId",
+    },
+  ],
+};
+
+// Mock table metadata for "comment" table
+const mockCommentTable: TableMetadata = {
+  name: "comment",
+  pluralForm: "comments",
+  description: "コメント",
+  readAllowedRoles: ["admin"],
+  fields: [
+    { name: "id", type: "uuid", required: true },
+    { name: "content", type: "string", required: true },
+    { name: "taskId", type: "uuid", required: true },
+    { name: "createdAt", type: "datetime", required: true },
+  ],
+};
+
+// Mock table metadata for "user" table
+const mockUserTable: TableMetadata = {
+  name: "user",
+  pluralForm: "users",
+  description: "ユーザー",
+  readAllowedRoles: ["admin"],
+  fields: [
+    { name: "id", type: "uuid", required: true },
+    { name: "name", type: "string", required: true },
+    { name: "email", type: "string", required: true },
+  ],
+};
+
+const mockTableMetadataMap: TableMetadataMap = {
+  task: mockTaskTable,
+  comment: mockCommentTable,
+  user: mockUserTable,
+};
+
+// Mock record data
+const mockRecord = {
+  id: "task-123-456-789",
+  title: "Test Task",
+  description: "This is a test task",
+  status: "active",
+  userId: "user-123-456-789",
+  createdAt: "2024-01-01T00:00:00Z",
+};
+
+// Mock comment data
+const mockComments = [
+  {
+    id: "comment-1",
+    content: "First comment",
+    createdAt: "2024-01-02T00:00:00Z",
+  },
+  {
+    id: "comment-2",
+    content: "Second comment",
+    createdAt: "2024-01-03T00:00:00Z",
+  },
+];
+
+// Mock user data
+const mockUser = {
+  id: "user-123-456-789",
+  name: "Test User",
+  email: "test@example.com",
+};
+
+describe("SingleRecordTabContent", () => {
+  let mockFetcher: SingleRecordDataFetcher;
+
+  beforeEach(() => {
+    mockFetcher = {
+      fetchSingleRecord: vi.fn().mockResolvedValue(mockRecord),
+      fetchOneToManyRelation: vi.fn().mockResolvedValue({
+        data: mockComments,
+        hasNextPage: false,
+        endCursor: null,
+      }),
+      fetchManyToOneRelation: vi.fn().mockResolvedValue(mockUser),
+    };
+  });
+
+  describe("基本的な表示", () => {
+    it("ローディング状態が表示される", () => {
+      // Never resolve to keep loading state
+      mockFetcher.fetchSingleRecord = vi
+        .fn()
+        .mockImplementation(() => new Promise(() => {}));
+
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      expect(screen.getByText("読み込み中...")).toBeInTheDocument();
+    });
+
+    it("レコードデータが正しく表示される", async () => {
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText("Test Task")).toBeInTheDocument();
+      });
+
+      expect(screen.getByText("This is a test task")).toBeInTheDocument();
+      expect(screen.getByText("active")).toBeInTheDocument();
+    });
+
+    it("fetchSingleRecordが正しいパラメータで呼ばれる", async () => {
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(mockFetcher.fetchSingleRecord).toHaveBeenCalledWith(
+          "task",
+          expect.arrayContaining([
+            "id",
+            "title",
+            "description",
+            "status",
+            "userId",
+            "createdAt",
+          ]),
+          "task-123-456-789",
+        );
+      });
+    });
+  });
+
+  describe("エラーハンドリング", () => {
+    it("エラーメッセージが表示される", async () => {
+      mockFetcher.fetchSingleRecord = vi
+        .fn()
+        .mockRejectedValue(new Error("Network error"));
+
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(
+          screen.getByText("データの取得に失敗しました: Network error"),
+        ).toBeInTheDocument();
+      });
+    });
+
+    it("レコードが見つからない場合、メッセージが表示される", async () => {
+      mockFetcher.fetchSingleRecord = vi.fn().mockResolvedValue(null);
+
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="nonexistent-id"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(
+          screen.getByText("レコードが見つかりません"),
+        ).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("リレーションデータの取得", () => {
+    it("oneToMany関係のデータがフェッチされる", async () => {
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(mockFetcher.fetchOneToManyRelation).toHaveBeenCalledWith(
+          "comment",
+          "comments",
+          "taskId",
+          expect.arrayContaining(["id", "content"]),
+          "task-123-456-789",
+          10,
+          null,
+        );
+      });
+    });
+
+    it("manyToOne関係のデータがフェッチされる", async () => {
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(mockFetcher.fetchManyToOneRelation).toHaveBeenCalledWith(
+          "user",
+          expect.arrayContaining(["id", "name", "email"]),
+          "user-123-456-789",
+        );
+      });
+    });
+
+    it("関連データが正しく表示される", async () => {
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText("First comment")).toBeInTheDocument();
+        expect(screen.getByText("Second comment")).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("更新ボタン", () => {
+    it("更新ボタンをクリックするとデータが再取得される", async () => {
+      const user = userEvent.setup();
+
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText("Test Task")).toBeInTheDocument();
+      });
+
+      // Clear call counts
+      vi.clearAllMocks();
+
+      // Click refresh button
+      await user.click(screen.getByRole("button", { name: /更新/ }));
+
+      await waitFor(() => {
+        expect(mockFetcher.fetchSingleRecord).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe("無限ループ防止", () => {
+    it("fetchRelationDataが無限に呼ばれない", async () => {
+      render(
+        <SingleRecordTabContent
+          tableMetadata={mockTaskTable}
+          tableMetadataMap={mockTableMetadataMap}
+          appUri="https://test.example.com"
+          recordId="task-123-456-789"
+          fetcher={mockFetcher}
+        />,
+      );
+
+      // Wait for initial render
+      await waitFor(() => {
+        expect(screen.getByText("Test Task")).toBeInTheDocument();
+      });
+
+      // Wait a bit to ensure no additional calls are made
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      // Should only be called once for the initial fetch
+      expect(mockFetcher.fetchSingleRecord).toHaveBeenCalledTimes(1);
+      expect(mockFetcher.fetchOneToManyRelation).toHaveBeenCalledTimes(1);
+      expect(mockFetcher.fetchManyToOneRelation).toHaveBeenCalledTimes(1);
+    });
+  });
+});