add mock for useNavigation

theopensystemslab · Jan 6, 2025 · dda9de1 · dda9de1
1 parent fb6edfd
commit dda9de1
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/editor.planx.uk/src/@planx/components/Send/Public.test.tsx b/editor.planx.uk/src/@planx/components/Send/Public.test.tsx
@@ -1,11 +1,12 @@
 import { SendIntegration } from "@opensystemslab/planx-core/types";
-import { waitFor } from "@testing-library/react";
+import { screen, waitFor } from "@testing-library/react";
 import axios from "axios";
 import { FullStore, useStore } from "pages/FlowEditor/lib/store";
 import React from "react";
 import { act } from "react-dom/test-utils";
+import * as ReactNavi from "react-navi";
 import { setup } from "testUtils";
-import { it,vi } from "vitest";
+import { it, vi } from "vitest";
 import { axe } from "vitest-axe";
 
 import hasuraEventsResponseMock from "./mocks/hasuraEventsResponseMock";
@@ -16,6 +17,10 @@ const { getState, setState } = useStore;
 
 let initialState: FullStore;
 
+vi.spyOn(ReactNavi, "useNavigation").mockImplementation(
+  () => ({ navigate: vi.fn() }) as any,
+);
+
 /**
  * Adds a small tick to allow MUI to render (e.g. card transitions)
  */

diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/NavigateToPublishedButton.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/NavigateToPublishedButton.tsx
@@ -2,9 +2,9 @@ import Link from "@mui/material/Link";
 import Typography from "@mui/material/Typography";
 import React from "react";
 import { useNavigation } from "react-navi";
+
 const NavigateToPublishedButton: React.FC = () => {
   const { navigate } = useNavigation();
-
   const handleClick = () => {
     navigate("published");
   };

diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/OrNavigationButton.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/OrNavigationButton.tsx
@@ -23,6 +23,8 @@ const BUTTON_COMPONENTS = {
   "navigate-to-published": NavigateToPublishedButton,
 } as const;
 
+const TEST_ENVIRONMENTS = new Set(["preview", "draft"]);
+
 const OrNavigationButton = ({
   handleSubmit,
 }: {
@@ -35,7 +37,6 @@ const OrNavigationButton = ({
   ]);
 
   const endOfUrl = window.location.pathname.split("/").slice(-1)[0];
-  const TEST_ENVIRONMENTS = new Set(["preview", "draft"]);
 
   const isTestEnvironment: boolean = TEST_ENVIRONMENTS.has(endOfUrl);
 
@@ -67,7 +68,7 @@ const OrNavigationButton = ({
     ButtonComponent && (
       <InnerContainer>
         <Typography variant="body1">or</Typography>
-        {<ButtonComponent />}
+        <ButtonComponent />
       </InnerContainer>
     )
   );