🧪 test(providers): use seperate test providers

dashpresshq · May 18, 2024 · 63098a6 · 63098a6
1 parent 91b0b9a
commit 63098a6
Show file tree

Hide file tree

Showing 87 changed files with 630 additions and 592 deletions.
diff --git a/src/__tests__/_/Provider.tsx b/src/__tests__/_/Provider.tsx
@@ -0,0 +1,43 @@
+import { ReactNode } from "react";
+import { Toaster } from "react-hot-toast";
+import { ThemeContextProvider } from "frontend/design-system/theme/Context";
+import { LinguiProvider } from "translations/utils";
+import { Messages } from "@lingui/core";
+import { ConfirmAlert } from "frontend/design-system/components/ConfirmAlert";
+import {
+  QueryCache,
+  QueryClient,
+  QueryClientProvider,
+} from "@tanstack/react-query";
+
+export const queryCache = new QueryCache();
+
+const queryClient = new QueryClient({
+  queryCache,
+});
+
+function QueryProvider({ children }: { children: ReactNode }) {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}
+
+export function TestProviders({
+  children,
+  translation,
+}: {
+  children: ReactNode;
+  translation?: Messages;
+}) {
+  return (
+    <ThemeContextProvider>
+      <LinguiProvider translation={translation}>
+        <QueryProvider>
+          <Toaster />
+          <ConfirmAlert />
+          {children}
+        </QueryProvider>
+      </LinguiProvider>
+    </ThemeContextProvider>
+  );
+}
diff --git a/src/__tests__/account/logout.spec.tsx b/src/__tests__/account/logout.spec.tsx
@@ -1,10 +1,10 @@
 import { render, screen, waitFor } from "@testing-library/react";
-import { ApplicationRoot } from "frontend/components/ApplicationRoot";
 import userEvent from "@testing-library/user-event";
 import AccountPassword from "pages/account/password";
 
 import { setupApiHandlers } from "__tests__/_/setupApihandlers";
 import { USE_ROUTER_PARAMS } from "__tests__/_/constants";
+import { TestProviders } from "__tests__/_/Provider";
 
 Object.defineProperty(window, "location", {
   value: {
@@ -23,9 +23,9 @@ useRouter.mockImplementation(USE_ROUTER_PARAMS({}));
 describe("pages/account/logout", () => {
   it("should log user out", async () => {
     render(
-      <ApplicationRoot>
+      <TestProviders>
         <AccountPassword />
-      </ApplicationRoot>
+      </TestProviders>
     );
 
     await userEvent.click(

diff --git a/src/__tests__/account/password.spec.tsx b/src/__tests__/account/password.spec.tsx
@@ -1,8 +1,7 @@
 import { render, screen } from "@testing-library/react";
-import { ApplicationRoot } from "frontend/components/ApplicationRoot";
 import userEvent from "@testing-library/user-event";
 import AccountPassword from "pages/account/password";
-
+import { TestProviders } from "__tests__/_/Provider";
 import { setupApiHandlers } from "__tests__/_/setupApihandlers";
 import { closeAllToasts } from "__tests__/_/utils/closeAllToasts";
 import { USE_ROUTER_PARAMS } from "__tests__/_/constants";
@@ -27,9 +26,9 @@ describe("pages/account/password", () => {
 
   it("should update password", async () => {
     render(
-      <ApplicationRoot>
+      <TestProviders>
         <AccountPassword />
-      </ApplicationRoot>
+      </TestProviders>
     );
     await userEvent.type(
       await screen.findByLabelText("Old Password"),
@@ -56,9 +55,9 @@ describe("pages/account/password", () => {
     process.env.NEXT_PUBLIC_IS_DEMO = "true";
 
     render(
-      <ApplicationRoot>
+      <TestProviders>
         <AccountPassword />
-      </ApplicationRoot>
+      </TestProviders>
     );
 
     await userEvent.type(

diff --git a/src/__tests__/account/preferences.spec.tsx b/src/__tests__/account/preferences.spec.tsx
@@ -1,10 +1,10 @@
 import { render, screen, waitFor } from "@testing-library/react";
-import { ApplicationRoot } from "frontend/components/ApplicationRoot";
 import userEvent from "@testing-library/user-event";
 import UserPreferences from "pages/account/preferences";
 
 import { setupApiHandlers } from "__tests__/_/setupApihandlers";
 import { USE_ROUTER_PARAMS } from "__tests__/_/constants";
+import { TestProviders } from "__tests__/_/Provider";
 
 setupApiHandlers();
 
@@ -16,9 +16,9 @@ describe("pages/account/preferences", () => {
 
   it("should display user preferences", async () => {
     render(
-      <ApplicationRoot>
+      <TestProviders>
         <UserPreferences />
-      </ApplicationRoot>
+      </TestProviders>
     );
     await waitFor(() => {
       expect(screen.getByRole("option", { selected: true })).toHaveTextContent(
@@ -29,9 +29,9 @@ describe("pages/account/preferences", () => {
 
   it("should update user preference", async () => {
     render(
-      <ApplicationRoot>
+      <TestProviders>
         <UserPreferences />
-      </ApplicationRoot>
+      </TestProviders>
     );
     await userEvent.click(screen.getByRole("option", { name: "Light" }));
 
@@ -46,9 +46,9 @@ describe("pages/account/preferences", () => {
 
   it("should display updated preference", async () => {
     render(
-      <ApplicationRoot>
+      <TestProviders>
         <UserPreferences />
-      </ApplicationRoot>
+      </TestProviders>
     );
     await waitFor(() => {
       expect(screen.getByRole("option", { selected: true })).toHaveTextContent(

diff --git a/src/__tests__/account/profile.spec.tsx b/src/__tests__/account/profile.spec.tsx
@@ -1,10 +1,10 @@
 import { render, screen, waitFor } from "@testing-library/react";
-import { ApplicationRoot } from "frontend/components/ApplicationRoot";
 import userEvent from "@testing-library/user-event";
 import AccountProfile from "pages/account/profile";
 
 import { setupApiHandlers } from "__tests__/_/setupApihandlers";
 import { USE_ROUTER_PARAMS } from "__tests__/_/constants";
+import { TestProviders } from "__tests__/_/Provider";
 
 setupApiHandlers();
 
@@ -15,9 +15,9 @@ useRouter.mockImplementation(USE_ROUTER_PARAMS({}));
 describe("pages/account/profile", () => {
   it("should display profile details", async () => {
     render(
-      <ApplicationRoot>
+      <TestProviders>
         <AccountProfile />
-      </ApplicationRoot>
+      </TestProviders>
     );
     await waitFor(() => {
       expect(screen.getByLabelText("Name")).toHaveValue("Root User");
@@ -26,9 +26,9 @@ describe("pages/account/profile", () => {
 
   it("should update profile successfully", async () => {
     render(
-      <ApplicationRoot>
+      <TestProviders>
         <AccountProfile />
-      </ApplicationRoot>
+      </TestProviders>
     );
 
     await userEvent.clear(screen.getByLabelText("Name"));
@@ -46,9 +46,9 @@ describe("pages/account/profile", () => {
 
   it("should display updated profile details", async () => {
     render(
-      <ApplicationRoot>
+      <TestProviders>
         <AccountProfile />
-      </ApplicationRoot>
+      </TestProviders>
     );
     await waitFor(() => {
       expect(screen.getByLabelText("Name")).toHaveValue("Updated Name");

diff --git a/src/__tests__/admin/[entity]/[id]/index.spec.tsx b/src/__tests__/admin/[entity]/[id]/index.spec.tsx
@@ -1,9 +1,9 @@
 import { render, screen } from "@testing-library/react";
-import { ApplicationRoot } from "frontend/components/ApplicationRoot";
 import EntityDetails from "pages/admin/[entity]/[id]/index";
 
 import { setupApiHandlers } from "__tests__/_/setupApihandlers";
 import { USE_ROUTER_PARAMS } from "__tests__/_/constants";
+import { TestProviders } from "__tests__/_/Provider";
 
 setupApiHandlers();
 
@@ -23,9 +23,9 @@ describe("pages/admin/[entity]/[id]/index", () => {
 
   it("should show details", async () => {
     render(
-      <ApplicationRoot>
+      <TestProviders>
         <EntityDetails />
-      </ApplicationRoot>
+      </TestProviders>
     );
 
     expect(await screen.findByLabelText("Details Section")).toHaveTextContent(

diff --git a/src/__tests__/admin/[entity]/[id]/update.spec.tsx b/src/__tests__/admin/[entity]/[id]/update.spec.tsx
@@ -1,9 +1,9 @@
 import { render, screen, waitFor } from "@testing-library/react";
-import { ApplicationRoot } from "frontend/components/ApplicationRoot";
 import EntityUpdate from "pages/admin/[entity]/[id]/update";
 
 import { setupApiHandlers } from "__tests__/_/setupApihandlers";
 import { USE_ROUTER_PARAMS } from "__tests__/_/constants";
+import { TestProviders } from "__tests__/_/Provider";
 
 setupApiHandlers();
 
@@ -22,9 +22,9 @@ describe("pages/admin/[entity]/update", () => {
 
   it("should update data", async () => {
     render(
-      <ApplicationRoot>
+      <TestProviders>
         <EntityUpdate />
-      </ApplicationRoot>
+      </TestProviders>
     );
     await waitFor(() => {
       expect(screen.getByText("Edit Singular entity-1")).toBeInTheDocument();

diff --git a/src/__tests__/admin/[entity]/config/actions.spec.tsx b/src/__tests__/admin/[entity]/config/actions.spec.tsx
@@ -1,12 +1,12 @@
 import { render, screen, within } from "@testing-library/react";
-import { ApplicationRoot } from "frontend/components/ApplicationRoot";
 import userEvent from "@testing-library/user-event";
 import EntityFormActionsSettings from "pages/admin/[entity]/config/actions";
 
 import { setupApiHandlers } from "__tests__/_/setupApihandlers";
 import { getTableRows } from "__tests__/_/utils/getTableRows";
 import { closeAllToasts } from "__tests__/_/utils/closeAllToasts";
 import { USE_ROUTER_PARAMS } from "__tests__/_/constants";
+import { TestProviders } from "__tests__/_/Provider";
 
 setupApiHandlers();
 
@@ -25,9 +25,9 @@ describe("pages/admin/[entity]/config/actions", () => {
 
   it("should list entity form actions", async () => {
     render(
-      <ApplicationRoot>
+      <TestProviders>
         <EntityFormActionsSettings />x
-      </ApplicationRoot>
+      </TestProviders>
     );
 
     expect(await screen.findByRole("table")).toBeInTheDocument();
@@ -45,9 +45,9 @@ describe("pages/admin/[entity]/config/actions", () => {
 
   it("should create new form action successfully", async () => {
     render(
-      <ApplicationRoot>
+      <TestProviders>
         <EntityFormActionsSettings />
-      </ApplicationRoot>
+      </TestProviders>
     );
 
     await userEvent.click(
@@ -113,9 +113,9 @@ describe("pages/admin/[entity]/config/actions", () => {
 
   it("should show the correct form values", async () => {
     render(
-      <ApplicationRoot>
+      <TestProviders>
         <EntityFormActionsSettings />
-      </ApplicationRoot>
+      </TestProviders>
     );
 
     expect(await screen.findByRole("table")).toBeInTheDocument();
@@ -153,9 +153,9 @@ describe("pages/admin/[entity]/config/actions", () => {
 
   it("should update the actions form", async () => {
     render(
-      <ApplicationRoot>
+      <TestProviders>
         <EntityFormActionsSettings />
-      </ApplicationRoot>
+      </TestProviders>
     );
 
     expect(await screen.findByRole("table")).toBeInTheDocument();
@@ -212,9 +212,9 @@ describe("pages/admin/[entity]/config/actions", () => {
 
   it("should show the correct form values", async () => {
     render(
-      <ApplicationRoot>
+      <TestProviders>
         <EntityFormActionsSettings />
-      </ApplicationRoot>
+      </TestProviders>
     );
 
     expect(await screen.findByRole("table")).toBeInTheDocument();
@@ -251,9 +251,9 @@ describe("pages/admin/[entity]/config/actions", () => {
 
   it("should delete form action successfully", async () => {
     render(
-      <ApplicationRoot>
+      <TestProviders>
         <EntityFormActionsSettings />
-      </ApplicationRoot>
+      </TestProviders>
     );
 
     expect(await screen.findByRole("table")).toBeInTheDocument();