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

package/src/component/search-filter.test.tsx

@@ -0,0 +1,612 @@
+import { describe, it, expect } from "vitest";
+import { render, screen, within, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { SearchFilterForm } from "./search-filter";
+import { DataViewerProvider } from "./contexts";
+import { ToolbarProvider } from "./contexts";
+import type {
+  FieldMetadata,
+  TableMetadata,
+  TableMetadataMap,
+} from "../generator/metadata-generator";
+import type { ReactNode } from "react";
+import type { SearchFilters } from "./types";
+
+// Mock fields covering all filterable types
+const mockFields: FieldMetadata[] = [
+  { name: "id", type: "uuid", required: true, description: "ID" },
+  { name: "name", type: "string", required: true, description: "名前" },
+  { name: "email", type: "string", required: false, description: "メール" },
+  { name: "age", type: "number", required: false, description: "年齢" },
+  { name: "isActive", type: "boolean", required: false, description: "有効" },
+  {
+    name: "status",
+    type: "enum",
+    required: false,
+    description: "ステータス",
+    enumValues: ["ACTIVE", "INACTIVE", "PENDING"],
+  },
+  {
+    name: "createdAt",
+    type: "datetime",
+    required: false,
+    description: "作成日時",
+  },
+  { name: "birthDate", type: "date", required: false, description: "生年月日" },
+  // Non-filterable types
+  { name: "tags", type: "array", required: false, description: "タグ" },
+  {
+    name: "metadata",
+    type: "nested",
+    required: false,
+    description: "メタデータ",
+  },
+];
+
+const mockTableMetadata: TableMetadata = {
+  name: "TestTable",
+  pluralForm: "TestTables",
+  readAllowedRoles: [],
+  fields: mockFields,
+  relations: [],
+};
+
+const mockTableMetadataMap: TableMetadataMap = {
+  TestTable: mockTableMetadata,
+};
+
+interface WrapperProps {
+  children: ReactNode;
+  initialFilters?: SearchFilters;
+}
+
+function TestWrapper({ children, initialFilters = [] }: WrapperProps) {
+  return (
+    <DataViewerProvider
+      appUri="https://example.com"
+      tableName={mockTableMetadata.name}
+      metadata={mockTableMetadataMap}
+      initialData={{
+        selectedFields: ["id", "name"],
+        filters: initialFilters,
+      }}
+    >
+      <ToolbarProvider>{children}</ToolbarProvider>
+    </DataViewerProvider>
+  );
+}
+
+describe("SearchFilterForm", () => {
+  describe("基本的な表示", () => {
+    it("検索ボタンが表示される", () => {
+      render(
+        <TestWrapper>
+          <SearchFilterForm />
+        </TestWrapper>,
+      );
+
+      expect(screen.getByRole("button", { name: /検索/ })).toBeInTheDocument();
+    });
+
+    it("フィルターがない場合はバッジが表示されない", () => {
+      render(
+        <TestWrapper>
+          <SearchFilterForm />
+        </TestWrapper>,
+      );
+
+      const button = screen.getByRole("button", { name: /検索/ });
+      expect(within(button).queryByText("1")).not.toBeInTheDocument();
+    });
+
+    it("フィルターがある場合はバッジにフィルター数が表示される", () => {
+      render(
+        <TestWrapper
+          initialFilters={[
+            {
+              field: "name",
+              fieldType: "string",
+              operator: "eq",
+              value: "test",
+            },
+          ]}
+        >
+          <SearchFilterForm />
+        </TestWrapper>,
+      );
+
+      const button = screen.getByRole("button", { name: /検索/ });
+      expect(within(button).getByText("1")).toBeInTheDocument();
+    });
+
+    it("複数フィルターがある場合は正しいフィルター数が表示される", () => {
+      render(
+        <TestWrapper
+          initialFilters={[
+            {
+              field: "name",
+              fieldType: "string",
+              operator: "eq",
+              value: "test",
+            },
+            { field: "age", fieldType: "number", operator: "gt", value: "18" },
+            {
+              field: "isActive",
+              fieldType: "boolean",
+              operator: "eq",
+              value: true,
+            },
+          ]}
+        >
+          <SearchFilterForm />
+        </TestWrapper>,
+      );
+
+      const button = screen.getByRole("button", { name: /検索/ });
+      expect(within(button).getByText("3")).toBeInTheDocument();
+    });
+  });
+
+  describe("ドロップダウンメニュー", () => {
+    it("ボタンクリックでドロップダウンが開く", async () => {
+      const user = userEvent.setup();
+      render(
+        <TestWrapper>
+          <SearchFilterForm />
+        </TestWrapper>,
+      );
+
+      await user.click(screen.getByRole("button", { name: /検索/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("検索フィルター")).toBeInTheDocument();
+      });
+    });
+
+    it("フィルターを追加セクションが表示される", async () => {
+      const user = userEvent.setup();
+      render(
+        <TestWrapper>
+          <SearchFilterForm />
+        </TestWrapper>,
+      );
+
+      await user.click(screen.getByRole("button", { name: /検索/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("フィルターを追加")).toBeInTheDocument();
+        expect(body.getByText("フィールドを選択")).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("フィルターの表示", () => {
+    it("適用中のフィルターが表示される", async () => {
+      const user = userEvent.setup();
+      render(
+        <TestWrapper
+          initialFilters={[
+            {
+              field: "name",
+              fieldType: "string",
+              operator: "eq",
+              value: "test",
+            },
+          ]}
+        >
+          <SearchFilterForm />
+        </TestWrapper>,
+      );
+
+      await user.click(screen.getByRole("button", { name: /検索/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("適用中のフィルター (AND)")).toBeInTheDocument();
+        expect(body.getByText("name = test")).toBeInTheDocument();
+      });
+    });
+
+    it("すべてクリアボタンが表示される", async () => {
+      const user = userEvent.setup();
+      render(
+        <TestWrapper
+          initialFilters={[
+            {
+              field: "name",
+              fieldType: "string",
+              operator: "eq",
+              value: "test",
+            },
+          ]}
+        >
+          <SearchFilterForm />
+        </TestWrapper>,
+      );
+
+      await user.click(screen.getByRole("button", { name: /検索/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("すべてクリア")).toBeInTheDocument();
+      });
+    });
+
+    it("フィルターがない場合はすべてクリアボタンが表示されない", async () => {
+      const user = userEvent.setup();
+      render(
+        <TestWrapper>
+          <SearchFilterForm />
+        </TestWrapper>,
+      );
+
+      await user.click(screen.getByRole("button", { name: /検索/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("検索フィルター")).toBeInTheDocument();
+      });
+
+      const body = within(document.body);
+      expect(body.queryByText("すべてクリア")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("フィルター表示形式", () => {
+    it("eq 演算子は「=」で表示される", async () => {
+      render(
+        <TestWrapper
+          initialFilters={[
+            {
+              field: "name",
+              fieldType: "string",
+              operator: "eq",
+              value: "test",
+            },
+          ]}
+        >
+          <SearchFilterForm />
+        </TestWrapper>,
+      );
+
+      const user = userEvent.setup();
+      await user.click(screen.getByRole("button", { name: /検索/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("name = test")).toBeInTheDocument();
+      });
+    });
+
+    it("gt 演算子は「>」で表示される", async () => {
+      render(
+        <TestWrapper
+          initialFilters={[
+            { field: "age", fieldType: "number", operator: "gt", value: "18" },
+          ]}
+        >
+          <SearchFilterForm />
+        </TestWrapper>,
+      );
+
+      const user = userEvent.setup();
+      await user.click(screen.getByRole("button", { name: /検索/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("age > 18")).toBeInTheDocument();
+      });
+    });
+
+    it("lt 演算子は「<」で表示される", async () => {
+      render(
+        <TestWrapper
+          initialFilters={[
+            { field: "age", fieldType: "number", operator: "lt", value: "65" },
+          ]}
+        >
+          <SearchFilterForm />
+        </TestWrapper>,
+      );
+
+      const user = userEvent.setup();
+      await user.click(screen.getByRole("button", { name: /検索/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("age < 65")).toBeInTheDocument();
+      });
+    });
+
+    it("contains 演算子は「含む」で表示される", async () => {
+      render(
+        <TestWrapper
+          initialFilters={[
+            {
+              field: "name",
+              fieldType: "string",
+              operator: "contains",
+              value: "test",
+            },
+          ]}
+        >
+          <SearchFilterForm />
+        </TestWrapper>,
+      );
+
+      const user = userEvent.setup();
+      await user.click(screen.getByRole("button", { name: /検索/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText('name 含む "test"')).toBeInTheDocument();
+      });
+    });
+
+    it("hasPrefix 演算子は「で始まる」で表示される", async () => {
+      render(
+        <TestWrapper
+          initialFilters={[
+            {
+              field: "name",
+              fieldType: "string",
+              operator: "hasPrefix",
+              value: "pre",
+            },
+          ]}
+        >
+          <SearchFilterForm />
+        </TestWrapper>,
+      );
+
+      const user = userEvent.setup();
+      await user.click(screen.getByRole("button", { name: /検索/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText('name "pre" で始まる')).toBeInTheDocument();
+      });
+    });
+
+    it("hasSuffix 演算子は「で終わる」で表示される", async () => {
+      render(
+        <TestWrapper
+          initialFilters={[
+            {
+              field: "name",
+              fieldType: "string",
+              operator: "hasSuffix",
+              value: "suf",
+            },
+          ]}
+        >
+          <SearchFilterForm />
+        </TestWrapper>,
+      );
+
+      const user = userEvent.setup();
+      await user.click(screen.getByRole("button", { name: /検索/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText('name "suf" で終わる')).toBeInTheDocument();
+      });
+    });
+
+    it("boolean true は「true」で表示される", async () => {
+      render(
+        <TestWrapper
+          initialFilters={[
+            {
+              field: "isActive",
+              fieldType: "boolean",
+              operator: "eq",
+              value: true,
+            },
+          ]}
+        >
+          <SearchFilterForm />
+        </TestWrapper>,
+      );
+
+      const user = userEvent.setup();
+      await user.click(screen.getByRole("button", { name: /検索/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("isActive = true")).toBeInTheDocument();
+      });
+    });
+
+    it("boolean false は「false」で表示される", async () => {
+      render(
+        <TestWrapper
+          initialFilters={[
+            {
+              field: "isActive",
+              fieldType: "boolean",
+              operator: "eq",
+              value: false,
+            },
+          ]}
+        >
+          <SearchFilterForm />
+        </TestWrapper>,
+      );
+
+      const user = userEvent.setup();
+      await user.click(screen.getByRole("button", { name: /検索/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("isActive = false")).toBeInTheDocument();
+      });
+    });
+
+    it("日時フィルターの値が表示される", async () => {
+      render(
+        <TestWrapper
+          initialFilters={[
+            {
+              field: "createdAt",
+              fieldType: "datetime",
+              operator: "gt",
+              value: "2024-01-01T00:00",
+            },
+          ]}
+        >
+          <SearchFilterForm />
+        </TestWrapper>,
+      );
+
+      const user = userEvent.setup();
+      await user.click(screen.getByRole("button", { name: /検索/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(
+          body.getByText("createdAt > 2024-01-01T00:00"),
+        ).toBeInTheDocument();
+      });
+    });
+
+    it("日付フィルターの値が表示される", async () => {
+      render(
+        <TestWrapper
+          initialFilters={[
+            {
+              field: "birthDate",
+              fieldType: "date",
+              operator: "lt",
+              value: "2000-01-01",
+            },
+          ]}
+        >
+          <SearchFilterForm />
+        </TestWrapper>,
+      );
+
+      const user = userEvent.setup();
+      await user.click(screen.getByRole("button", { name: /検索/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("birthDate < 2000-01-01")).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("フィルターの削除", () => {
+    it("すべてクリアボタンで全フィルターを削除できる", async () => {
+      const user = userEvent.setup();
+      render(
+        <TestWrapper
+          initialFilters={[
+            {
+              field: "name",
+              fieldType: "string",
+              operator: "eq",
+              value: "test",
+            },
+            { field: "age", fieldType: "number", operator: "eq", value: "25" },
+          ]}
+        >
+          <SearchFilterForm />
+        </TestWrapper>,
+      );
+
+      await user.click(screen.getByRole("button", { name: /検索/ }));
+
+      const body = within(document.body);
+      await user.click(body.getByText("すべてクリア"));
+
+      // Verify all filters are removed
+      await waitFor(() => {
+        expect(body.queryByText(/name = test/)).not.toBeInTheDocument();
+        expect(body.queryByText(/age = 25/)).not.toBeInTheDocument();
+      });
+    });
+
+    it("個別のフィルターを削除できる", async () => {
+      const user = userEvent.setup();
+      render(
+        <TestWrapper
+          initialFilters={[
+            {
+              field: "name",
+              fieldType: "string",
+              operator: "eq",
+              value: "test",
+            },
+            { field: "age", fieldType: "number", operator: "eq", value: "25" },
+          ]}
+        >
+          <SearchFilterForm />
+        </TestWrapper>,
+      );
+
+      await user.click(screen.getByRole("button", { name: /検索/ }));
+
+      const body = within(document.body);
+
+      // Find the badge containing "name = test" and get the button within it
+      const nameBadge = body
+        .getByText(/name = test/)
+        .closest("span[data-slot='badge']") as HTMLElement;
+      expect(nameBadge).not.toBeNull();
+      const removeButton = within(nameBadge).getByRole("button");
+      await user.click(removeButton);
+
+      // Verify only the age filter remains
+      await waitFor(() => {
+        expect(body.queryByText(/name = test/)).not.toBeInTheDocument();
+        expect(body.getByText(/age = 25/)).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("複数フィルター表示", () => {
+    it("複数のフィルターがすべて表示される", async () => {
+      const user = userEvent.setup();
+      render(
+        <TestWrapper
+          initialFilters={[
+            {
+              field: "name",
+              fieldType: "string",
+              operator: "contains",
+              value: "test",
+            },
+            { field: "age", fieldType: "number", operator: "gt", value: "18" },
+            {
+              field: "isActive",
+              fieldType: "boolean",
+              operator: "eq",
+              value: true,
+            },
+            {
+              field: "status",
+              fieldType: "enum",
+              operator: "eq",
+              value: "ACTIVE",
+            },
+          ]}
+        >
+          <SearchFilterForm />
+        </TestWrapper>,
+      );
+
+      await user.click(screen.getByRole("button", { name: /検索/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText('name 含む "test"')).toBeInTheDocument();
+        expect(body.getByText("age > 18")).toBeInTheDocument();
+        expect(body.getByText("isActive = true")).toBeInTheDocument();
+        expect(body.getByText("status = ACTIVE")).toBeInTheDocument();
+      });
+    });
+  });
+});