From e2dfd7db196696e4cde82f30b5a1a81a9dc2857c Mon Sep 17 00:00:00 2001
From: Emma <EmmaRussellKilburn@gmail.com>
Date: Thu, 12 Sep 2024 07:46:40 +0100
Subject: [PATCH 1/2] mock navigateTo

---
 components/ParameterForm.vue                |  7 ++----
 tests/unit/components/ParameterForm.spec.ts | 25 +++++++++++----------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/components/ParameterForm.vue b/components/ParameterForm.vue
index c9024e65..6c03ea05 100644
--- a/components/ParameterForm.vue
+++ b/components/ParameterForm.vue
@@ -4,7 +4,6 @@
       v-if="props.metadata && formData"
       class="inputs"
       role="form"
-      :data-test-navigate-to="navigateToData"
       @submit.prevent="submitForm"
     >
       <div
@@ -108,7 +107,6 @@ const formData = ref(
 );
 
 const appStore = useAppStore();
-const navigateToData = ref("");
 const pageMounted = ref(false);
 
 const optionsAreTerse = (parameter: Parameter) => {
@@ -144,9 +142,8 @@ const submitForm = async () => {
 
   if (response) {
     const { runId } = response;
-    navigateToData.value = `/scenarios/${runId}`;
-    await navigateTo(navigateToData.value);
-  };
+    await navigateTo(`/scenarios/${runId}`);
+  }
 };
 
 onMounted(() => {
diff --git a/tests/unit/components/ParameterForm.spec.ts b/tests/unit/components/ParameterForm.spec.ts
index fd302544..0bb44b0e 100644
--- a/tests/unit/components/ParameterForm.spec.ts
+++ b/tests/unit/components/ParameterForm.spec.ts
@@ -1,9 +1,8 @@
-import { describe, expect, it } from "vitest";
-import { mountSuspended, registerEndpoint } from "@nuxt/test-utils/runtime";
+import { mockNuxtImport, mountSuspended, registerEndpoint } from "@nuxt/test-utils/runtime";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import { FetchError } from "ofetch";
 import { readBody } from "h3";
 import { flushPromises } from "@vue/test-utils";
-import { waitFor } from "@testing-library/vue";
 
 import type { Metadata } from "@/types/apiResponseTypes";
 import ParameterForm from "@/components/ParameterForm.vue";
@@ -54,8 +53,17 @@ const selectParameters = [
 ];
 
 const metadata = { modelVersion: "0.0.0", parameters: [...selectParameters, globeParameter] } as Metadata;
+// Need to do this in hoisted - see https://developer.mamezou-tech.com/en/blogs/2024/02/12/nuxt3-unit-testing-mock/
+const { navigateToMock } = vi.hoisted(() => ({
+  navigateToMock: vi.fn(),
+}));
+mockNuxtImport("navigateTo", () => navigateToMock);
 
 describe("parameter form", () => {
+  beforeEach(() => {
+    navigateToMock.mockReset();
+  });
+
   it("renders the correct parameter labels, inputs, options, and default values", async () => {
     const component = await mountSuspended(ParameterForm, {
       props: { metadata, metadataFetchStatus: "success", metadataFetchError: null },
@@ -121,7 +129,7 @@ describe("parameter form", () => {
       },
     });
 
-    const component = await mountSuspended(ParameterForm, {
+    const component = mount(ParameterForm, {
       props: { metadata, metadataFetchStatus: "success", metadataFetchError: null },
       global: { stubs },
     });
@@ -132,14 +140,7 @@ describe("parameter form", () => {
     expect(buttonEl.attributes("disabled")).toBe("");
 
     await flushPromises();
-    // I couldn't find a way to spy on the navigateTo function, so this is a second-best test that we
-    // at least construct the correct path to navigate to.
-    const cForm = component.findComponent({ name: "CForm" });
-    await waitFor(() => {
-      expect(
-        cForm.element.attributes.getNamedItem("data-test-navigate-to")!.value,
-      ).toBe("/scenarios/randomId");
-    });
+    expect(navigateToMock).toBeCalledWith("/scenarios/randomId");
   });
 
   it("displays CAlert with error message when metadataFetchStatus is 'error'", async () => {

From 0cfa6d30ef2c1c38a7dadf69015e05b5cf7bdec1 Mon Sep 17 00:00:00 2001
From: David Mears <60350599+david-mears-2@users.noreply.github.com>
Date: Thu, 12 Sep 2024 10:30:03 +0100
Subject: [PATCH 2/2] Update tests/unit/components/ParameterForm.spec.ts

---
 tests/unit/components/ParameterForm.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/unit/components/ParameterForm.spec.ts b/tests/unit/components/ParameterForm.spec.ts
index 0bb44b0e..f5707da3 100644
--- a/tests/unit/components/ParameterForm.spec.ts
+++ b/tests/unit/components/ParameterForm.spec.ts
@@ -129,7 +129,7 @@ describe("parameter form", () => {
       },
     });
 
-    const component = mount(ParameterForm, {
+    const component = await mountSuspended(ParameterForm, {
       props: { metadata, metadataFetchStatus: "success", metadataFetchError: null },
       global: { stubs },
     });