From de6522d91a1d5ead4c75532969c8e7898e175d54 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 | 22 ++++++++++++++++ ui-v2/tests/{mocks => utils}/node.ts | 0 ui-v2/tests/variables/variables.test.tsx | 2 +- 9 files changed, 45 insertions(+), 49 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..f02d10f4895a --- /dev/null +++ b/ui-v2/tests/utils/index.ts @@ -0,0 +1,22 @@ +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' +import { createElement } from "react"; + * + * ```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..123e48f0688e 100644 --- a/ui-v2/tests/variables/variables.test.tsx +++ b/ui-v2/tests/variables/variables.test.tsx @@ -12,7 +12,7 @@ import { screen, } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; -import { server } from "@tests/mocks"; +import { server } from "@tests/utils"; import { http, HttpResponse } from "msw"; import { afterEach,