From 708ecdda7c41faf0bd243cdb119eb3412b746e9c Mon Sep 17 00:00:00 2001 From: Devin Villarosa Date: Tue, 10 Dec 2024 10:56:18 -0800 Subject: [PATCH] [UI v2] feat: Centralozes createWrapper for tests --- .../hooks/deployments/deployments.test.tsx | 16 +- .../hooks/global-concurrency-limits.test.tsx | 25 +- ui-v2/src/hooks/variables.test.tsx | 26 +- ui-v2/tests/mocks/index.ts | 1 - ui-v2/tests/setup.ts | 2 +- ui-v2/tests/{mocks => utils}/handlers.ts | 0 ui-v2/tests/utils/index.ts | 21 ++ ui-v2/tests/{mocks => utils}/node.ts | 0 ui-v2/tests/variables/variables.test.tsx | 276 ++++++++---------- 9 files changed, 169 insertions(+), 198 deletions(-) delete mode 100644 ui-v2/tests/mocks/index.ts rename ui-v2/tests/{mocks => utils}/handlers.ts (100%) create mode 100644 ui-v2/tests/utils/index.ts rename ui-v2/tests/{mocks => utils}/node.ts (100%) diff --git a/ui-v2/src/hooks/deployments/deployments.test.tsx b/ui-v2/src/hooks/deployments/deployments.test.tsx index e69cebd12f8b..e3da587ece69 100644 --- a/ui-v2/src/hooks/deployments/deployments.test.tsx +++ b/ui-v2/src/hooks/deployments/deployments.test.tsx @@ -1,4 +1,3 @@ -import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { renderHook, waitFor } from "@testing-library/react"; import { http, HttpResponse } from "msw"; import { describe, expect, it } from "vitest"; @@ -9,7 +8,7 @@ import { usePaginateDeployments, } from "./index"; -import { server } from "@tests/mocks"; +import { createWrapper, server } from "@tests/utils"; describe("deployments hooks", () => { const seedDeployments = (): Deployment[] => [ @@ -52,13 +51,6 @@ describe("deployments hooks", () => { ); }; - const createQueryWrapper = ({ queryClient = new QueryClient() }) => { - const QueryWrapper = ({ children }: { children: React.ReactNode }) => ( - {children} - ); - return QueryWrapper; - }; - const paginationFilter = { page: 1, limit: 10, @@ -82,9 +74,7 @@ describe("deployments hooks", () => { // Initialize hook const { result } = renderHook( () => usePaginateDeployments(paginationFilter), - { - wrapper: createQueryWrapper({}), - }, + { wrapper: createWrapper() }, ); // Assert @@ -103,7 +93,7 @@ describe("deployments hooks", () => { // Initialize hook const { result } = renderHook(() => useCountDeployments(countFilter), { - wrapper: createQueryWrapper({}), + wrapper: createWrapper(), }); // Assert diff --git a/ui-v2/src/hooks/global-concurrency-limits.test.tsx b/ui-v2/src/hooks/global-concurrency-limits.test.tsx index cad75265bb6e..8d86ac261d8a 100644 --- a/ui-v2/src/hooks/global-concurrency-limits.test.tsx +++ b/ui-v2/src/hooks/global-concurrency-limits.test.tsx @@ -1,6 +1,6 @@ -import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { QueryClient } from "@tanstack/react-query"; import { act, renderHook, waitFor } from "@testing-library/react"; -import { server } from "@tests/mocks"; +import { createWrapper, server } from "@tests/utils"; import { http, HttpResponse } from "msw"; import { describe, expect, it } from "vitest"; @@ -40,13 +40,6 @@ describe("global concurrency limits hooks", () => { ); }; - const createQueryWrapper = ({ queryClient = new QueryClient() }) => { - const QueryWrapper = ({ children }: { children: React.ReactNode }) => ( - {children} - ); - return QueryWrapper; - }; - const filter = { offset: 0, }; @@ -63,7 +56,7 @@ describe("global concurrency limits hooks", () => { // ------------ Initialize hooks to test const { result } = renderHook( () => useListGlobalConcurrencyLimits(filter), - { wrapper: createQueryWrapper({}) }, + { wrapper: createWrapper() }, ); // ------------ Assert @@ -94,12 +87,12 @@ describe("global concurrency limits hooks", () => { // ------------ Initialize hooks to test const { result: useListGlobalConcurrencyLimitsResult } = renderHook( () => useListGlobalConcurrencyLimits(filter), - { wrapper: createQueryWrapper({ queryClient }) }, + { wrapper: createWrapper({ queryClient }) }, ); const { result: useDeleteGlobalConcurrencyLimitResult } = renderHook( useDeleteGlobalConcurrencyLimit, - { wrapper: createQueryWrapper({ queryClient }) }, + { wrapper: createWrapper({ queryClient }) }, ); // ------------ Invoke mutation @@ -157,11 +150,11 @@ describe("global concurrency limits hooks", () => { // ------------ Initialize hooks to test const { result: useListGlobalConcurrencyLimitsResult } = renderHook( () => useListGlobalConcurrencyLimits(filter), - { wrapper: createQueryWrapper({ queryClient }) }, + { wrapper: createWrapper({ queryClient }) }, ); const { result: useCreateGlobalConcurrencyLimitResult } = renderHook( useCreateGlobalConcurrencyLimit, - { wrapper: createQueryWrapper({ queryClient }) }, + { wrapper: createWrapper({ queryClient }) }, ); // ------------ Invoke mutation @@ -221,12 +214,12 @@ describe("global concurrency limits hooks", () => { // ------------ Initialize hooks to test const { result: useListGlobalConcurrencyLimitsResult } = renderHook( () => useListGlobalConcurrencyLimits(filter), - { wrapper: createQueryWrapper({ queryClient }) }, + { wrapper: createWrapper({ queryClient }) }, ); const { result: useUpdateGlobalConcurrencyLimitResult } = renderHook( useUpdateGlobalConcurrencyLimit, - { wrapper: createQueryWrapper({ queryClient }) }, + { wrapper: createWrapper({ queryClient }) }, ); // ------------ Invoke mutation diff --git a/ui-v2/src/hooks/variables.test.tsx b/ui-v2/src/hooks/variables.test.tsx index 884a36860074..70a03b40d77b 100644 --- a/ui-v2/src/hooks/variables.test.tsx +++ b/ui-v2/src/hooks/variables.test.tsx @@ -1,10 +1,10 @@ -import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { QueryClient } from "@tanstack/react-query"; import { act, renderHook, waitFor } from "@testing-library/react"; import { http, HttpResponse } from "msw"; import { describe, expect, it } from "vitest"; import { components } from "@/api/prefect"; -import { server } from "@tests/mocks"; +import { createWrapper, server } from "@tests/utils"; import { buildCountQuery, @@ -39,14 +39,6 @@ describe("variable hooks", () => { }), ); }; - - const createQueryWrapper = ({ queryClient = new QueryClient() }) => { - const QueryWrapper = ({ children }: { children: React.ReactNode }) => ( - {children} - ); - return QueryWrapper; - }; - const variableFilter = { offset: 0, sort: "CREATED_DESC" as const, @@ -65,7 +57,7 @@ describe("variable hooks", () => { // ------------ Initialize hooks to test const { result } = renderHook(() => useVariables(variableFilter), { - wrapper: createQueryWrapper({ queryClient }), + wrapper: createWrapper({ queryClient }), }); // ------------ Assert @@ -102,11 +94,11 @@ describe("variable hooks", () => { // ------------ Initialize hooks to test const { result: useVariablesResult } = renderHook( () => useVariables(variableFilter), - { wrapper: createQueryWrapper({ queryClient }) }, + { wrapper: createWrapper({ queryClient }) }, ); const { result: useDeleteVariableResult } = renderHook(useDeleteVariable, { - wrapper: createQueryWrapper({ queryClient }), + wrapper: createWrapper({ queryClient }), }); // ------------ Invoke mutation @@ -165,10 +157,10 @@ describe("variable hooks", () => { // ------------ Initialize hooks to test const { result: useVariablesResult } = renderHook( () => useVariables(variableFilter), - { wrapper: createQueryWrapper({ queryClient }) }, + { wrapper: createWrapper({ queryClient }) }, ); const { result: useCreateVariableResult } = renderHook(useCreateVariable, { - wrapper: createQueryWrapper({ queryClient }), + wrapper: createWrapper({ queryClient }), }); // ------------ Invoke mutation @@ -227,10 +219,10 @@ describe("variable hooks", () => { // ------------ Initialize hooks to test const { result: useVariablesResult } = renderHook( () => useVariables(variableFilter), - { wrapper: createQueryWrapper({ queryClient }) }, + { wrapper: createWrapper({ queryClient }) }, ); const { result: useUpdateVariableResult } = renderHook(useUpdateVariable, { - wrapper: createQueryWrapper({ queryClient }), + wrapper: createWrapper({ queryClient }), }); // ------------ Invoke mutation diff --git a/ui-v2/tests/mocks/index.ts b/ui-v2/tests/mocks/index.ts deleted file mode 100644 index a145bd6f8360..000000000000 --- a/ui-v2/tests/mocks/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { server } from "./node"; diff --git a/ui-v2/tests/setup.ts b/ui-v2/tests/setup.ts index 1cb5018a8282..403d53c2878c 100644 --- a/ui-v2/tests/setup.ts +++ b/ui-v2/tests/setup.ts @@ -3,7 +3,7 @@ import * as matchers from "@testing-library/jest-dom/matchers"; import { cleanup } from "@testing-library/react"; import { afterAll, afterEach, beforeAll, expect, vi } from "vitest"; import "@testing-library/jest-dom"; -import { server } from "./mocks"; +import { server } from "./utils"; beforeAll(() => { server.listen({ diff --git a/ui-v2/tests/mocks/handlers.ts b/ui-v2/tests/utils/handlers.ts similarity index 100% rename from ui-v2/tests/mocks/handlers.ts rename to ui-v2/tests/utils/handlers.ts diff --git a/ui-v2/tests/utils/index.ts b/ui-v2/tests/utils/index.ts new file mode 100644 index 000000000000..afa45ae6562d --- /dev/null +++ b/ui-v2/tests/utils/index.ts @@ -0,0 +1,21 @@ +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { createElement } from "react"; +export { server } from "./node"; + +/* Wraps render() components with app-wide providers + * + * @example + * import { createWrapper } from '@tests/utils' + * + * ```tsx + * const result = render(, { + * wrapper: createWrapper(), + * }); + * ``` + */ +export const createWrapper = ({ queryClient = new QueryClient() } = {}) => { + // Written with createElement because our current vite config doesn't support jsx in tests/ + const Wrapper = ({ children }: { children: React.ReactNode }) => + createElement(QueryClientProvider, { client: queryClient }, children); + return Wrapper; +}; diff --git a/ui-v2/tests/mocks/node.ts b/ui-v2/tests/utils/node.ts similarity index 100% rename from ui-v2/tests/mocks/node.ts rename to ui-v2/tests/utils/node.ts diff --git a/ui-v2/tests/variables/variables.test.tsx b/ui-v2/tests/variables/variables.test.tsx index 4d72ba1e2208..43fd7055fa5a 100644 --- a/ui-v2/tests/variables/variables.test.tsx +++ b/ui-v2/tests/variables/variables.test.tsx @@ -2,7 +2,6 @@ import "./mocks"; import { Toaster } from "@/components/ui/toaster"; import { VariablesDataTable } from "@/components/variables/data-table"; import { router } from "@/router"; -import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { RouterProvider } from "@tanstack/react-router"; import { getByLabelText, @@ -12,7 +11,7 @@ import { screen, } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; -import { server } from "@tests/mocks"; +import { createWrapper, server } from "@tests/utils"; import { http, HttpResponse } from "msw"; import { afterEach, @@ -26,13 +25,10 @@ import { const renderVariablesPage = async () => { const user = userEvent.setup(); - const queryClient = new QueryClient(); // Render with router provider - const result = render( - - - , - ); + const result = render(, { + wrapper: createWrapper(), + }); await user.click(screen.getByRole("link", { name: "Variables" })); return result; }; @@ -335,21 +331,19 @@ describe("Variables page", () => { tags: ["tag2"], }, ]; - const queryClient = new QueryClient(); render( - - - , + , + { wrapper: createWrapper() }, ); expect(screen.getByText("2 Variables")).toBeVisible(); // Table headers @@ -381,21 +375,19 @@ describe("Variables page", () => { })); const onPaginationChange = vi.fn(); const user = userEvent.setup(); - const queryClient = new QueryClient(); const { rerender } = render( - - - , + , + { wrapper: createWrapper() }, ); expect(screen.getByText("20 Variables")).toBeVisible(); @@ -412,19 +404,17 @@ describe("Variables page", () => { expect(onPaginationChange).toHaveBeenCalled(); rerender( - - - , + , ); expect(screen.getByText("Page 2 of 2")).toBeVisible(); @@ -452,21 +442,19 @@ describe("Variables page", () => { tags: ["tag1"], }, ]; - const queryClient = new QueryClient(); render( - - - , + , + { wrapper: createWrapper() }, ); await user.click(screen.getByRole("button", { expanded: false })); @@ -486,21 +474,19 @@ describe("Variables page", () => { tags: ["tag1"], }, ]; - const queryClient = new QueryClient(); render( - - - , + , + { wrapper: createWrapper() }, ); await user.click(screen.getByRole("button", { expanded: false })); @@ -520,21 +506,19 @@ describe("Variables page", () => { tags: ["tag1"], }, ]; - const queryClient = new QueryClient(); render( - - - , + , + { wrapper: createWrapper() }, ); await user.click(screen.getByRole("button", { expanded: false })); @@ -554,9 +538,8 @@ describe("Variables page", () => { tags: ["tag1"], }, ]; - const queryClient = new QueryClient(); render( - + <> { onSortingChange={vi.fn()} onVariableEdit={vi.fn()} /> - , + , + { wrapper: createWrapper() }, ); await user.click(screen.getByRole("button", { expanded: false })); @@ -590,21 +574,19 @@ describe("Variables page", () => { }, ]; const onColumnFiltersChange = vi.fn(); - const queryClient = new QueryClient(); render( - - - , + , + { wrapper: createWrapper() }, ); // Clear any initial calls from mounting @@ -635,21 +617,19 @@ describe("Variables page", () => { ]; const onColumnFiltersChange = vi.fn(); - const queryClient = new QueryClient(); render( - - - , + , + { wrapper: createWrapper() }, ); // Clear any initial calls from mounting @@ -680,21 +660,19 @@ describe("Variables page", () => { ]; const onSortingChange = vi.fn(); - const queryClient = new QueryClient(); render( - - - , + , + { wrapper: createWrapper() }, ); const select = screen.getByRole("combobox", { @@ -724,21 +702,19 @@ describe("Variables page", () => { }, ]; const onPaginationChange = vi.fn(); - const queryClient = new QueryClient(); render( - - - , + , + { wrapper: createWrapper() }, ); const select = screen.getByRole("combobox", {