From ae3f62b7b8fc567078d507e73940e51f097b4d06 Mon Sep 17 00:00:00 2001 From: Ryo Okubo Date: Sun, 2 Mar 2025 18:55:55 +0900 Subject: [PATCH 1/3] Add pages tests for alias, catecory --- frontend/src/pages/CategoryEditPage.test.tsx | 103 ++ .../src/pages/ListAliasEntryPage.test.tsx | 117 +++ frontend/src/pages/ListCategoryPage.test.tsx | 80 ++ .../CategoryEditPage.test.tsx.snap | 966 ++++++++++++++++++ .../ListAliasEntryPage.test.tsx.snap | 620 +++++++++++ .../ListCategoryPage.test.tsx.snap | 856 ++++++++++++++++ 6 files changed, 2742 insertions(+) create mode 100644 frontend/src/pages/CategoryEditPage.test.tsx create mode 100644 frontend/src/pages/ListAliasEntryPage.test.tsx create mode 100644 frontend/src/pages/ListCategoryPage.test.tsx create mode 100644 frontend/src/pages/__snapshots__/CategoryEditPage.test.tsx.snap create mode 100644 frontend/src/pages/__snapshots__/ListAliasEntryPage.test.tsx.snap create mode 100644 frontend/src/pages/__snapshots__/ListCategoryPage.test.tsx.snap diff --git a/frontend/src/pages/CategoryEditPage.test.tsx b/frontend/src/pages/CategoryEditPage.test.tsx new file mode 100644 index 000000000..aa715c290 --- /dev/null +++ b/frontend/src/pages/CategoryEditPage.test.tsx @@ -0,0 +1,103 @@ +/** + * @jest-environment jsdom + */ + +import { render, screen, act, waitFor } from "@testing-library/react"; +import { http, HttpResponse } from "msw"; +import { setupServer } from "msw/node"; +import React from "react"; +import { createMemoryRouter, RouterProvider } from "react-router"; + +import { TestWrapperWithoutRoutes } from "TestWrapper"; +import { CategoryEditPage } from "pages/CategoryEditPage"; +import { editCategoryPath } from "routes/Routes"; + +const server = setupServer( + // getCategory + http.get("http://localhost/category/api/v2/1", () => { + return HttpResponse.json({ + id: 1, + name: "category1", + note: "サンプルカテゴリ", + priority: 1, + models: [ + { id: 1, name: "Entity1", is_public: true }, + { id: 2, name: "Entity2", is_public: true }, + ], + }); + }), + // getEntities + http.get("http://localhost/entity/api/v2/", () => { + return HttpResponse.json({ + count: 3, + next: null, + previous: null, + results: [ + { + id: 1, + name: "Entity1", + note: "", + isToplevel: false, + hasOngoingChanges: false, + attrs: [], + webhooks: [], + }, + { + id: 2, + name: "Entity2", + note: "", + isToplevel: false, + hasOngoingChanges: false, + attrs: [], + webhooks: [], + }, + { + id: 3, + name: "Entity3", + note: "", + isToplevel: false, + hasOngoingChanges: false, + attrs: [], + webhooks: [], + }, + ], + }); + }) +); + +beforeAll(() => server.listen()); +afterEach(() => server.resetHandlers()); +afterAll(() => server.close()); + +test("should match snapshot", async () => { + Object.defineProperty(window, "django_context", { + value: { + user: { + is_superuser: false, + }, + }, + writable: false, + }); + + const router = createMemoryRouter( + [ + { + path: editCategoryPath(":categoryId"), + element: , + }, + ], + { + initialEntries: [editCategoryPath(1)], + } + ); + const result = await act(async () => { + return render(, { + wrapper: TestWrapperWithoutRoutes, + }); + }); + await waitFor(() => { + expect(screen.queryByTestId("loading")).not.toBeInTheDocument(); + }); + + expect(result).toMatchSnapshot(); +}); diff --git a/frontend/src/pages/ListAliasEntryPage.test.tsx b/frontend/src/pages/ListAliasEntryPage.test.tsx new file mode 100644 index 000000000..8a231418d --- /dev/null +++ b/frontend/src/pages/ListAliasEntryPage.test.tsx @@ -0,0 +1,117 @@ +/** + * @jest-environment jsdom + */ + +import { render, screen, act, waitFor } from "@testing-library/react"; +import { http, HttpResponse } from "msw"; +import { setupServer } from "msw/node"; +import React from "react"; +import { createMemoryRouter, RouterProvider } from "react-router"; + +import { TestWrapperWithoutRoutes } from "TestWrapper"; +import { ListAliasEntryPage } from "pages/ListAliasEntryPage"; +import { listAliasPath } from "routes/Routes"; + +// モックロケーションを設定 +const mockLocation = { + pathname: "/ui/entities/1/alias", + search: "", + hash: "", + state: null, +}; + +// useLocationのモック +jest.mock("react-use", () => ({ + ...jest.requireActual("react-use"), + useLocation: () => mockLocation, +})); + +const server = setupServer( + // GET /entity/api/v2/:entityId/ + http.get("http://localhost/entity/api/v2/1/", () => { + return HttpResponse.json({ + id: 1, + name: "Entity1", + note: "テストエンティティ", + isToplevel: true, + hasOngoingChanges: false, + attrs: [], + webhooks: [], + }); + }), + + // GET /entry/api/v2/:entityId/ + http.get("http://localhost/entry/api/v2/1/", () => { + return HttpResponse.json({ + count: 2, + next: null, + previous: null, + results: [ + { + id: 1, + name: "Entry1", + schema: 1, + attrs: [], + aliases: [ + { id: 101, name: "Alias1-1" }, + { id: 102, name: "Alias1-2" }, + ], + }, + { + id: 2, + name: "Entry2", + schema: 1, + attrs: [], + aliases: [{ id: 201, name: "Alias2-1" }], + }, + ], + }); + }), + + // GET /entity/api/v2/:entityId/entries/ の未処理リクエストに対するモック + http.get("http://localhost/entity/api/v2/1/entries/", () => { + return HttpResponse.json({ + count: 0, + next: null, + previous: null, + results: [], + }); + }) +); + +beforeAll(() => server.listen({ onUnhandledRequest: "warn" })); +afterEach(() => server.resetHandlers()); +afterAll(() => server.close()); + +test("should match snapshot", async () => { + Object.defineProperty(window, "django_context", { + value: { + user: { + is_superuser: false, + }, + }, + writable: false, + }); + + const router = createMemoryRouter( + [ + { + path: listAliasPath(":entityId"), + element: , + }, + ], + { + initialEntries: [listAliasPath(1)], + } + ); + const result = await act(async () => { + return render(, { + wrapper: TestWrapperWithoutRoutes, + }); + }); + await waitFor(() => { + expect(screen.queryByTestId("loading")).not.toBeInTheDocument(); + }); + + expect(result).toMatchSnapshot(); +}); diff --git a/frontend/src/pages/ListCategoryPage.test.tsx b/frontend/src/pages/ListCategoryPage.test.tsx new file mode 100644 index 000000000..6e5a9e84f --- /dev/null +++ b/frontend/src/pages/ListCategoryPage.test.tsx @@ -0,0 +1,80 @@ +/** + * @jest-environment jsdom + */ + +import { render, screen, act, waitFor } from "@testing-library/react"; +import { http, HttpResponse } from "msw"; +import { setupServer } from "msw/node"; +import React from "react"; +import { createMemoryRouter, RouterProvider } from "react-router"; + +import { TestWrapperWithoutRoutes } from "TestWrapper"; +import { ListCategoryPage } from "pages/ListCategoryPage"; +import { listCategoryPath } from "routes/Routes"; + +const server = setupServer( + // GET /category/api/v2/ + http.get("http://localhost/category/api/v2/", () => { + return HttpResponse.json({ + count: 2, + next: null, + previous: null, + results: [ + { + id: 1, + name: "category1", + note: "サンプルカテゴリ1", + priority: 1, + models: [ + { id: 1, name: "Entity1", is_public: true }, + { id: 2, name: "Entity2", is_public: true }, + ], + }, + { + id: 2, + name: "category2", + note: "サンプルカテゴリ2", + priority: 2, + models: [{ id: 3, name: "Entity3", is_public: true }], + }, + ], + }); + }) +); + +beforeAll(() => server.listen()); +afterEach(() => server.resetHandlers()); +afterAll(() => server.close()); + +test("should match snapshot", async () => { + Object.defineProperty(window, "django_context", { + value: { + user: { + is_superuser: false, + }, + }, + writable: false, + }); + + const router = createMemoryRouter( + [ + { + path: listCategoryPath(), + element: , + }, + ], + { + initialEntries: [listCategoryPath()], + } + ); + const result = await act(async () => { + return render(, { + wrapper: TestWrapperWithoutRoutes, + }); + }); + await waitFor(() => { + expect(screen.queryByTestId("loading")).not.toBeInTheDocument(); + }); + + expect(result).toMatchSnapshot(); +}); diff --git a/frontend/src/pages/__snapshots__/CategoryEditPage.test.tsx.snap b/frontend/src/pages/__snapshots__/CategoryEditPage.test.tsx.snap new file mode 100644 index 000000000..ff21350cf --- /dev/null +++ b/frontend/src/pages/__snapshots__/CategoryEditPage.test.tsx.snap @@ -0,0 +1,966 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should match snapshot 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+
+
+
+
+ +
+
+
+
+
+
+
+ category1 +
+
+ カテゴリ編集 +
+
+
+ + +
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + +
+ 項目 + + 内容 +
+ カテゴリ名 + +
+
+ + +
+
+
+ 備考 + +
+
+ + +