[UI v2] feat: Centralizes createWrapper for tests (#16323)

PrefectHQ · Dec 10, 2024 · 6aaf035 · 6aaf035
1 parent e569cc5
commit 6aaf035
Show file tree

Hide file tree

Showing 9 changed files with 169 additions and 198 deletions.
diff --git 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 }) => (
-			<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-		);
-		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
@@ -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 }) => (
-			<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-		);
-		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
@@ -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 }) => (
-			<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-		);
-		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
diff --git 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 → ui-v2/tests/utils/handlers.ts b/ui-v2/tests/mocks/handlers.ts → ui-v2/tests/utils/handlers.ts
diff --git a/ui-v2/tests/utils/index.ts 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(<MyComponentToTest />, {
+ *		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 → ui-v2/tests/utils/node.ts b/ui-v2/tests/mocks/node.ts → ui-v2/tests/utils/node.ts