From 7d9c378608d9bdf2387d3bf96692afc7ae75a806 Mon Sep 17 00:00:00 2001
From: David Mears <clarinet.david@gmail.com>
Date: Tue, 3 Sep 2024 11:58:08 +0100
Subject: [PATCH 01/20] WIP 2: things related to post-form-submit, ie api and
 store

---
 components/ParameterForm.vue      | 35 ++++++++++++++++++++++++++++---
 server/api/scenarios.post.ts      | 24 +++++++++++++++++++++
 stores/scenario.ts                |  6 ++++++
 types/daedalusApiResponseTypes.ts |  9 +++++++-
 4 files changed, 70 insertions(+), 4 deletions(-)
 create mode 100644 server/api/scenarios.post.ts
 create mode 100644 stores/scenario.ts

diff --git a/components/ParameterForm.vue b/components/ParameterForm.vue
index 902936c3..b95f1df8 100644
--- a/components/ParameterForm.vue
+++ b/components/ParameterForm.vue
@@ -67,11 +67,16 @@
         color="primary"
         :size="largeScreen ? 'lg' : undefined"
         type="submit"
+        :disabled="formSubmitting"
       >
         Run
         <CIcon
           icon="cilArrowRight"
         />
+        <CSpinner
+          v-if="formSubmitting"
+          size="sm"
+        />
       </CButton>
     </CForm>
     <CAlert v-else-if="props.metadataFetchStatus === 'error'" color="warning">
@@ -84,8 +89,8 @@
 <script lang="ts" setup>
 import type { FetchError } from "ofetch";
 import { CIcon } from "@coreui/icons-vue";
-import type { Metadata, Parameter } from "@/types/daedalusApiResponseTypes";
 import { ParameterType } from "@/types/daedalusApiResponseTypes";
+import type { MetaData, NewScenarioData, Parameter, ParameterOption } from "@/types/daedalusApiResponseTypes";
 import type { AsyncDataRequestStatus } from "#app";
 
 const props = defineProps<{
@@ -118,8 +123,32 @@ const renderAsRadios = (parameter: Parameter) => {
   return parameter.parameterType === ParameterType.Select && optionsAreTerse(parameter);
 };
 
-const submitForm = () => {
-  // Not implemented yet
+const formSubmitting = ref(false);
+
+const submitForm = async () => {
+  formSubmitting.value = true;
+  // 1. Send the formData to the run scenario endpoint and receive the run id
+  // ({ data: newScenarioData, status: newScenarioFetchStatus, error: newScenarioFetchError } = $fetch("/api/scenario", method: "POST") as {
+  //   data: Ref<NewScenarioData>
+  //   status: Ref<AsyncDataRequestStatus>
+  //   error: Ref<FetchError | null>
+  // });
+  const { runId } = await $fetch("/api/scenario", {
+    method: "POST",
+    body: { parameters: formData.value },
+  }).catch((error: FetchError) => {
+    console.error(error);
+  });
+
+  // 2. Store the formData in the Pinia store against the run id
+  console.log(newScenarioData);
+  console.log(formData.value);
+  
+
+  // 3. Navigate to /scenarios/:runId
+  if (runId) {
+    await navigateTo(`/scenarios/${runId}`);
+  }
 };
 
 const largeScreen = ref(true);
diff --git a/server/api/scenarios.post.ts b/server/api/scenarios.post.ts
new file mode 100644
index 00000000..1606cc08
--- /dev/null
+++ b/server/api/scenarios.post.ts
@@ -0,0 +1,24 @@
+import { defineRApiEventHandler } from "~/server/utils/defineRApiEventHandler";
+import { NewScenarioResponse } from "@/types/daedalusApiResponseTypes";
+
+export default defineRApiEventHandler(
+  async (event): Promise<NewScenarioResponse> => {
+    // Delegate to getMetaData so that the logic can be unit-tested.
+    const newScenarioResponse = await runScenario(event);
+
+    return newScenarioResponse;
+  },
+  // Send a request to the R API for a job run.
+  // Do the equivalent of:
+  // curl -H "Content-Type: application/json" -d '{"modelVersion": "0.0.1", "parameters": {}}' http://localhost:8001/scenario/run
+
+
+
+  // Then we redirect the user to the result page for the scenario record, at /scenarios/[id].
+});
+
+
+
+
+
+
diff --git a/stores/scenario.ts b/stores/scenario.ts
new file mode 100644
index 00000000..ccc3afea
--- /dev/null
+++ b/stores/scenario.ts
@@ -0,0 +1,6 @@
+import { defineStore } from "pinia";
+
+export const useScenarioStore = defineStore("scenario", {
+  state: () => ({
+
+  });
diff --git a/types/daedalusApiResponseTypes.ts b/types/daedalusApiResponseTypes.ts
index 33656655..fc9b6e25 100644
--- a/types/daedalusApiResponseTypes.ts
+++ b/types/daedalusApiResponseTypes.ts
@@ -43,4 +43,11 @@ export interface Metadata {
   parameters: Array<Parameter>
 }
 
-export interface MetadataResponse extends ApiResponse<Metadata> { }
+export interface MetaDataResponse extends ApiResponse<MetaData> { }
+
+// Scenario
+export interface NewScenarioData {
+  runId: string
+}
+
+export interface NewScenarioResponse extends ApiResponse<NewScenarioData> { }

From 02be36f69258c61a23cc3413f2617c554855109e Mon Sep 17 00:00:00 2001
From: David Mears <clarinet.david@gmail.com>
Date: Tue, 3 Sep 2024 18:41:14 +0100
Subject: [PATCH 02/20] WIP. We dont have unit tests on the wip api endpoint +
 handler

---
 components/ParameterForm.vue                  | 24 ++++++----
 components/SideBar.vue                        |  2 +-
 pages/scenarios/[id].vue                      | 24 ++++++++++
 pages/scenarios/new.vue                       |  2 +-
 server/api/metadata.get.ts                    |  2 +-
 server/api/scenarios.post.ts                  | 24 +++-------
 server/api/versions.get.ts                    |  2 +-
 server/handlers/metadata.ts                   |  2 +-
 server/handlers/scenarios.ts                  | 31 ++++++++++++
 server/handlers/versions.ts                   |  2 +-
 server/utils/defineRApiEventHandler.ts        |  2 +-
 server/utils/helpers.ts                       |  2 +-
 stores/scenario.ts                            | 22 +++++++--
 tests/unit/stores/scenario.spec.ts            | 47 +++++++++++++++++++
 types/apiRequestTypes.ts                      |  1 +
 ...piResponseTypes.ts => apiResponseTypes.ts} |  2 +-
 types/storeTypes.ts                           |  8 ++++
 17 files changed, 160 insertions(+), 39 deletions(-)
 create mode 100644 pages/scenarios/[id].vue
 create mode 100644 server/handlers/scenarios.ts
 create mode 100644 tests/unit/stores/scenario.spec.ts
 create mode 100644 types/apiRequestTypes.ts
 rename types/{daedalusApiResponseTypes.ts => apiResponseTypes.ts} (94%)
 create mode 100644 types/storeTypes.ts

diff --git a/components/ParameterForm.vue b/components/ParameterForm.vue
index b95f1df8..63700a8a 100644
--- a/components/ParameterForm.vue
+++ b/components/ParameterForm.vue
@@ -89,8 +89,8 @@
 <script lang="ts" setup>
 import type { FetchError } from "ofetch";
 import { CIcon } from "@coreui/icons-vue";
-import { ParameterType } from "@/types/daedalusApiResponseTypes";
-import type { MetaData, NewScenarioData, Parameter, ParameterOption } from "@/types/daedalusApiResponseTypes";
+import { ParameterType } from "@/types/apiResponseTypes";
+import type { Metadata, NewScenarioData, Parameter } from "@/types/apiResponseTypes";
 import type { AsyncDataRequestStatus } from "#app";
 
 const props = defineProps<{
@@ -126,6 +126,10 @@ const renderAsRadios = (parameter: Parameter) => {
 const formSubmitting = ref(false);
 
 const submitForm = async () => {
+  if (!formData.value) {
+    return;
+  };
+
   formSubmitting.value = true;
   // 1. Send the formData to the run scenario endpoint and receive the run id
   // ({ data: newScenarioData, status: newScenarioFetchStatus, error: newScenarioFetchError } = $fetch("/api/scenario", method: "POST") as {
@@ -133,22 +137,22 @@ const submitForm = async () => {
   //   status: Ref<AsyncDataRequestStatus>
   //   error: Ref<FetchError | null>
   // });
-  const { runId } = await $fetch("/api/scenario", {
+  const response = await $fetch<NewScenarioData>("/api/scenarios", {
     method: "POST",
     body: { parameters: formData.value },
   }).catch((error: FetchError) => {
     console.error(error);
   });
 
-  // 2. Store the formData in the Pinia store against the run id
-  console.log(newScenarioData);
-  console.log(formData.value);
-  
+  if (response) {
+    const { runId } = response;
+
+    // 2. Store the formData in the Pinia store against the run id
+    store.setScenario(runId, { parameters: formData.value });
 
-  // 3. Navigate to /scenarios/:runId
-  if (runId) {
+    // 3. Navigate to /scenarios/:runId
     await navigateTo(`/scenarios/${runId}`);
-  }
+  };
 };
 
 const largeScreen = ref(true);
diff --git a/components/SideBar.vue b/components/SideBar.vue
index 68e4917a..e7768808 100644
--- a/components/SideBar.vue
+++ b/components/SideBar.vue
@@ -57,7 +57,7 @@
 
 <script lang="ts" setup>
 import { CIcon } from "@coreui/icons-vue";
-import type { VersionData } from "@/types/daedalusApiResponseTypes";
+import type { VersionData } from "@/types/apiResponseTypes";
 
 const { data: versionData } = useFetch("/api/versions") as { data: Ref<VersionData> };
 
diff --git a/pages/scenarios/[id].vue b/pages/scenarios/[id].vue
new file mode 100644
index 00000000..7e4acfe1
--- /dev/null
+++ b/pages/scenarios/[id].vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <p>
+      Query parameter: {{ route.params.id }}
+    </p>
+    <p>
+      All ids in the store: {{ allScenarios }}
+    </p>
+    <h3>
+      A decision point. To remember a usersession's info, do we persist pinia store state between page loads using localstorage? Or do we store that in the database already, against a local session id?
+    </h3>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const route = useRoute();
+
+const scenarioStore = useScenarioStore();
+const { allScenarios } = storeToRefs(scenarioStore);
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/pages/scenarios/new.vue b/pages/scenarios/new.vue
index 249b9af2..c9f2b665 100644
--- a/pages/scenarios/new.vue
+++ b/pages/scenarios/new.vue
@@ -16,7 +16,7 @@
 <script lang="ts" setup>
 import type { FetchError } from "ofetch";
 import type { AsyncDataRequestStatus } from "#app";
-import { type Metadata, ParameterType } from "@/types/daedalusApiResponseTypes";
+import { type Metadata, ParameterType } from "@/types/apiResponseTypes";
 
 const { data: metadata, status: metadataFetchStatus, error: metadataFetchError } = useFetch("/api/metadata") as {
   data: Ref<Metadata>
diff --git a/server/api/metadata.get.ts b/server/api/metadata.get.ts
index a046af46..43f93580 100644
--- a/server/api/metadata.get.ts
+++ b/server/api/metadata.get.ts
@@ -1,6 +1,6 @@
 import { getMetadata } from "@/server/handlers/metadata";
 import { defineRApiEventHandler } from "~/server/utils/defineRApiEventHandler";
-import type { MetadataResponse } from "@/types/daedalusApiResponseTypes";
+import type { MetadataResponse } from "@/types/apiResponseTypes";
 
 export default defineRApiEventHandler(
   async (event): Promise<MetadataResponse> => {
diff --git a/server/api/scenarios.post.ts b/server/api/scenarios.post.ts
index 1606cc08..439fda73 100644
--- a/server/api/scenarios.post.ts
+++ b/server/api/scenarios.post.ts
@@ -1,24 +1,14 @@
+import { runScenario } from "@/server/handlers/scenarios";
 import { defineRApiEventHandler } from "~/server/utils/defineRApiEventHandler";
-import { NewScenarioResponse } from "@/types/daedalusApiResponseTypes";
+import type { NewScenarioResponse } from "@/types/apiResponseTypes";
 
 export default defineRApiEventHandler(
   async (event): Promise<NewScenarioResponse> => {
-    // Delegate to getMetaData so that the logic can be unit-tested.
-    const newScenarioResponse = await runScenario(event);
+    const { parameters } = await readBody(event);
+
+    // Delegate to runScenario so that the logic can be unit-tested.
+    const newScenarioResponse = await runScenario(event, parameters);
 
     return newScenarioResponse;
   },
-  // Send a request to the R API for a job run.
-  // Do the equivalent of:
-  // curl -H "Content-Type: application/json" -d '{"modelVersion": "0.0.1", "parameters": {}}' http://localhost:8001/scenario/run
-
-
-
-  // Then we redirect the user to the result page for the scenario record, at /scenarios/[id].
-});
-
-
-
-
-
-
+);
diff --git a/server/api/versions.get.ts b/server/api/versions.get.ts
index bcb2bcc5..d619f983 100644
--- a/server/api/versions.get.ts
+++ b/server/api/versions.get.ts
@@ -1,6 +1,6 @@
 import { getVersionData } from "@/server/handlers/versions";
 import { defineRApiEventHandler } from "@/server/utils/defineRApiEventHandler";
-import type { VersionDataResponse } from "@/types/daedalusApiResponseTypes";
+import type { VersionDataResponse } from "@/types/apiResponseTypes";
 
 export default defineRApiEventHandler(
   async (event): Promise<VersionDataResponse> => {
diff --git a/server/handlers/metadata.ts b/server/handlers/metadata.ts
index 4844141a..a15ac234 100644
--- a/server/handlers/metadata.ts
+++ b/server/handlers/metadata.ts
@@ -1,6 +1,6 @@
 import type { EventHandlerRequest, H3Event } from "h3";
 import { fetchRApi } from "@/server/utils/rApi";
-import type { Metadata, MetadataResponse } from "@/types/daedalusApiResponseTypes";
+import type { Metadata, MetadataResponse } from "@/types/apiResponseTypes";
 
 const rApiMetadataEndpoint = "/metadata";
 
diff --git a/server/handlers/scenarios.ts b/server/handlers/scenarios.ts
new file mode 100644
index 00000000..26fe0fd1
--- /dev/null
+++ b/server/handlers/scenarios.ts
@@ -0,0 +1,31 @@
+// Send a request to the R API for a job run.
+// Do the equivalent of:
+// curl -H "Content-Type: application/json" -d '{"modelVersion": "0.0.1", "parameters": {}}' http://localhost:8001/scenario/run
+
+import type { EventHandlerRequest, H3Event } from "h3";
+import { fetchRApi } from "@/server/utils/rApi";
+import type { NewScenarioData, NewScenarioResponse } from "@/types/apiResponseTypes";
+import type { ParameterDict } from "@/types/apiRequestTypes";
+
+const rApiNewScenarioEndpoint = "/scenario/run";
+
+export const runScenario = async (event?: H3Event<EventHandlerRequest>, parameters: ParameterDict): Promise<NewScenarioResponse> => {
+  const response = await fetchRApi<NewScenarioData>( // Since we aren't transforming the R API's response, we can re-use the type interface for the web app's response (NewScenarioData) as the interface for the R API's response.
+    rApiNewScenarioEndpoint,
+    {
+      method: "POST",
+      body: {
+        modelVersion: "0.0.1", // TODO: Make this not hard-coded.
+        parameters,
+      },
+    },
+    event,
+  );
+
+  return {
+    statusText: response.statusText,
+    statusCode: response.statusCode,
+    errors: response?.errors || null,
+    data: response?.data as NewScenarioData,
+  } as NewScenarioResponse;
+};
diff --git a/server/handlers/versions.ts b/server/handlers/versions.ts
index 10e63f42..50cd8ad1 100644
--- a/server/handlers/versions.ts
+++ b/server/handlers/versions.ts
@@ -1,7 +1,7 @@
 import type { EventHandlerRequest, H3Event } from "h3";
 import { fetchRApi } from "@/server/utils/rApi";
 import packageJson from "@/package.json";
-import type { VersionData, VersionDataResponse } from "@/types/daedalusApiResponseTypes";
+import type { VersionData, VersionDataResponse } from "@/types/apiResponseTypes";
 
 const rApiVersionEndpoint = "/";
 
diff --git a/server/utils/defineRApiEventHandler.ts b/server/utils/defineRApiEventHandler.ts
index 23e97611..40e72059 100644
--- a/server/utils/defineRApiEventHandler.ts
+++ b/server/utils/defineRApiEventHandler.ts
@@ -1,5 +1,5 @@
 import type { EventHandler, H3Event } from "h3";
-import type { ApiResponse } from "@/types/daedalusApiResponseTypes";
+import type { ApiResponse } from "@/types/apiResponseTypes";
 
 // A wrapper for Nuxt's defineEventHandler that handles errors from the R API.
 export const defineRApiEventHandler = (
diff --git a/server/utils/helpers.ts b/server/utils/helpers.ts
index 9a4a68f0..9be3634c 100644
--- a/server/utils/helpers.ts
+++ b/server/utils/helpers.ts
@@ -1,4 +1,4 @@
-import type { ApiError } from "@/types/daedalusApiResponseTypes";
+import type { ApiError } from "@/types/apiResponseTypes";
 
 // Convert list of error objects to string
 export const errorMessage = (errors: Array<ApiError> | null) => {
diff --git a/stores/scenario.ts b/stores/scenario.ts
index ccc3afea..de0a90d1 100644
--- a/stores/scenario.ts
+++ b/stores/scenario.ts
@@ -1,6 +1,22 @@
 import { defineStore } from "pinia";
+import type { Scenario, ScenariosState } from "@/types/storeTypes";
 
 export const useScenarioStore = defineStore("scenario", {
-  state: () => ({
-
-  });
+  state: (): ScenariosState => ({
+    scenarios: {},
+  }),
+  getters: {
+    getScenarioById: (state: ScenariosState) => { // https://pinia.vuejs.org/core-concepts/getters.html#Passing-arguments-to-getters
+      return (runId: string) => state.scenarios[runId];
+    },
+    allScenarios: (state: ScenariosState) => { // Untested
+      return Object.values(state.scenarios);
+    },
+  },
+  actions: {
+    setScenario(runId: string, scenario: Scenario) {
+      const state = this as ScenariosState;
+      state.scenarios[runId] = scenario;
+    },
+  },
+});
diff --git a/tests/unit/stores/scenario.spec.ts b/tests/unit/stores/scenario.spec.ts
new file mode 100644
index 00000000..f4a2397c
--- /dev/null
+++ b/tests/unit/stores/scenario.spec.ts
@@ -0,0 +1,47 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { createPinia, setActivePinia } from "pinia";
+import { useScenarioStore } from "@/stores/scenario";
+
+describe("scenario store", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  describe("actions", () => {
+    it("initialises correctly", async () => {
+      const store = useScenarioStore();
+      expect(store.scenarios).toStrictEqual({});
+    });
+
+    it("can store, retrieve, and update a scenario", async () => {
+      const store = useScenarioStore();
+      const { getScenarioById } = storeToRefs(store);
+
+      store.setScenario("123", {
+        parameters: {
+          disease: "chickenpox",
+          hospitalWorkersPerCapita: 0.002,
+        },
+      });
+      expect(getScenarioById.value("123")).toStrictEqual({
+        parameters: {
+          disease: "chickenpox",
+          hospitalWorkersPerCapita: 0.002,
+        },
+      });
+
+      store.setScenario("123", {
+        parameters: {
+          disease: "malaria",
+          hospitalWorkersPerCapita: 0.002,
+        },
+      });
+      expect(getScenarioById.value("123")).toStrictEqual({
+        parameters: {
+          disease: "malaria",
+          hospitalWorkersPerCapita: 0.002,
+        },
+      });
+    });
+  });
+});
diff --git a/types/apiRequestTypes.ts b/types/apiRequestTypes.ts
new file mode 100644
index 00000000..c18f12fe
--- /dev/null
+++ b/types/apiRequestTypes.ts
@@ -0,0 +1 @@
+export type ParameterDict = Record<string, string | number>;
diff --git a/types/daedalusApiResponseTypes.ts b/types/apiResponseTypes.ts
similarity index 94%
rename from types/daedalusApiResponseTypes.ts
rename to types/apiResponseTypes.ts
index fc9b6e25..6ea2f153 100644
--- a/types/daedalusApiResponseTypes.ts
+++ b/types/apiResponseTypes.ts
@@ -43,7 +43,7 @@ export interface Metadata {
   parameters: Array<Parameter>
 }
 
-export interface MetaDataResponse extends ApiResponse<MetaData> { }
+export interface MetadataResponse extends ApiResponse<Metadata> { }
 
 // Scenario
 export interface NewScenarioData {
diff --git a/types/storeTypes.ts b/types/storeTypes.ts
new file mode 100644
index 00000000..ff0afed2
--- /dev/null
+++ b/types/storeTypes.ts
@@ -0,0 +1,8 @@
+export interface Scenario {
+  parameters: Record<string, string | number>
+};
+
+// A dict of runIds to scenario details.
+export interface ScenariosState {
+  scenarios: Record<string, Scenario>
+}

From d1d4f9c84aecac7041e8f21f3aeb44c21fe15100 Mon Sep 17 00:00:00 2001
From: David Mears <clarinet.david@gmail.com>
Date: Wed, 4 Sep 2024 11:22:15 +0100
Subject: [PATCH 03/20] Remove store-related code

---
 components/ParameterForm.vue       | 11 -------
 pages/scenarios/[id].vue           |  9 ------
 server/api/scenarios.post.ts       |  2 +-
 server/handlers/scenarios.ts       |  7 ++---
 stores/scenario.ts                 | 22 --------------
 tests/unit/stores/scenario.spec.ts | 47 ------------------------------
 types/storeTypes.ts                |  8 -----
 7 files changed, 3 insertions(+), 103 deletions(-)
 delete mode 100644 stores/scenario.ts
 delete mode 100644 tests/unit/stores/scenario.spec.ts
 delete mode 100644 types/storeTypes.ts

diff --git a/components/ParameterForm.vue b/components/ParameterForm.vue
index 63700a8a..94c6112f 100644
--- a/components/ParameterForm.vue
+++ b/components/ParameterForm.vue
@@ -131,12 +131,6 @@ const submitForm = async () => {
   };
 
   formSubmitting.value = true;
-  // 1. Send the formData to the run scenario endpoint and receive the run id
-  // ({ data: newScenarioData, status: newScenarioFetchStatus, error: newScenarioFetchError } = $fetch("/api/scenario", method: "POST") as {
-  //   data: Ref<NewScenarioData>
-  //   status: Ref<AsyncDataRequestStatus>
-  //   error: Ref<FetchError | null>
-  // });
   const response = await $fetch<NewScenarioData>("/api/scenarios", {
     method: "POST",
     body: { parameters: formData.value },
@@ -146,11 +140,6 @@ const submitForm = async () => {
 
   if (response) {
     const { runId } = response;
-
-    // 2. Store the formData in the Pinia store against the run id
-    store.setScenario(runId, { parameters: formData.value });
-
-    // 3. Navigate to /scenarios/:runId
     await navigateTo(`/scenarios/${runId}`);
   };
 };
diff --git a/pages/scenarios/[id].vue b/pages/scenarios/[id].vue
index 7e4acfe1..a067c06f 100644
--- a/pages/scenarios/[id].vue
+++ b/pages/scenarios/[id].vue
@@ -3,20 +3,11 @@
     <p>
       Query parameter: {{ route.params.id }}
     </p>
-    <p>
-      All ids in the store: {{ allScenarios }}
-    </p>
-    <h3>
-      A decision point. To remember a usersession's info, do we persist pinia store state between page loads using localstorage? Or do we store that in the database already, against a local session id?
-    </h3>
   </div>
 </template>
 
 <script lang="ts" setup>
 const route = useRoute();
-
-const scenarioStore = useScenarioStore();
-const { allScenarios } = storeToRefs(scenarioStore);
 </script>
 
 <style lang="scss" scoped>
diff --git a/server/api/scenarios.post.ts b/server/api/scenarios.post.ts
index 439fda73..61e7df87 100644
--- a/server/api/scenarios.post.ts
+++ b/server/api/scenarios.post.ts
@@ -7,7 +7,7 @@ export default defineRApiEventHandler(
     const { parameters } = await readBody(event);
 
     // Delegate to runScenario so that the logic can be unit-tested.
-    const newScenarioResponse = await runScenario(event, parameters);
+    const newScenarioResponse = await runScenario(parameters, event);
 
     return newScenarioResponse;
   },
diff --git a/server/handlers/scenarios.ts b/server/handlers/scenarios.ts
index 26fe0fd1..33865956 100644
--- a/server/handlers/scenarios.ts
+++ b/server/handlers/scenarios.ts
@@ -1,7 +1,3 @@
-// Send a request to the R API for a job run.
-// Do the equivalent of:
-// curl -H "Content-Type: application/json" -d '{"modelVersion": "0.0.1", "parameters": {}}' http://localhost:8001/scenario/run
-
 import type { EventHandlerRequest, H3Event } from "h3";
 import { fetchRApi } from "@/server/utils/rApi";
 import type { NewScenarioData, NewScenarioResponse } from "@/types/apiResponseTypes";
@@ -9,7 +5,8 @@ import type { ParameterDict } from "@/types/apiRequestTypes";
 
 const rApiNewScenarioEndpoint = "/scenario/run";
 
-export const runScenario = async (event?: H3Event<EventHandlerRequest>, parameters: ParameterDict): Promise<NewScenarioResponse> => {
+// Send a request to the R API for a job run.
+export const runScenario = async (parameters: ParameterDict, event?: H3Event<EventHandlerRequest>): Promise<NewScenarioResponse> => {
   const response = await fetchRApi<NewScenarioData>( // Since we aren't transforming the R API's response, we can re-use the type interface for the web app's response (NewScenarioData) as the interface for the R API's response.
     rApiNewScenarioEndpoint,
     {
diff --git a/stores/scenario.ts b/stores/scenario.ts
deleted file mode 100644
index de0a90d1..00000000
--- a/stores/scenario.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { defineStore } from "pinia";
-import type { Scenario, ScenariosState } from "@/types/storeTypes";
-
-export const useScenarioStore = defineStore("scenario", {
-  state: (): ScenariosState => ({
-    scenarios: {},
-  }),
-  getters: {
-    getScenarioById: (state: ScenariosState) => { // https://pinia.vuejs.org/core-concepts/getters.html#Passing-arguments-to-getters
-      return (runId: string) => state.scenarios[runId];
-    },
-    allScenarios: (state: ScenariosState) => { // Untested
-      return Object.values(state.scenarios);
-    },
-  },
-  actions: {
-    setScenario(runId: string, scenario: Scenario) {
-      const state = this as ScenariosState;
-      state.scenarios[runId] = scenario;
-    },
-  },
-});
diff --git a/tests/unit/stores/scenario.spec.ts b/tests/unit/stores/scenario.spec.ts
deleted file mode 100644
index f4a2397c..00000000
--- a/tests/unit/stores/scenario.spec.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { beforeEach, describe, expect, it } from "vitest";
-import { createPinia, setActivePinia } from "pinia";
-import { useScenarioStore } from "@/stores/scenario";
-
-describe("scenario store", () => {
-  beforeEach(() => {
-    setActivePinia(createPinia());
-  });
-
-  describe("actions", () => {
-    it("initialises correctly", async () => {
-      const store = useScenarioStore();
-      expect(store.scenarios).toStrictEqual({});
-    });
-
-    it("can store, retrieve, and update a scenario", async () => {
-      const store = useScenarioStore();
-      const { getScenarioById } = storeToRefs(store);
-
-      store.setScenario("123", {
-        parameters: {
-          disease: "chickenpox",
-          hospitalWorkersPerCapita: 0.002,
-        },
-      });
-      expect(getScenarioById.value("123")).toStrictEqual({
-        parameters: {
-          disease: "chickenpox",
-          hospitalWorkersPerCapita: 0.002,
-        },
-      });
-
-      store.setScenario("123", {
-        parameters: {
-          disease: "malaria",
-          hospitalWorkersPerCapita: 0.002,
-        },
-      });
-      expect(getScenarioById.value("123")).toStrictEqual({
-        parameters: {
-          disease: "malaria",
-          hospitalWorkersPerCapita: 0.002,
-        },
-      });
-    });
-  });
-});
diff --git a/types/storeTypes.ts b/types/storeTypes.ts
deleted file mode 100644
index ff0afed2..00000000
--- a/types/storeTypes.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface Scenario {
-  parameters: Record<string, string | number>
-};
-
-// A dict of runIds to scenario details.
-export interface ScenariosState {
-  scenarios: Record<string, Scenario>
-}

From 7b146baec26d8388b3a0848212af54c71c0ecfe6 Mon Sep 17 00:00:00 2001
From: David Mears <clarinet.david@gmail.com>
Date: Wed, 4 Sep 2024 14:55:28 +0100
Subject: [PATCH 04/20] test playwright ci

---
 components/ParameterForm.vue  |  1 +
 tests/e2e/runAnalysis.spec.ts | 22 ++++++++++++++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/components/ParameterForm.vue b/components/ParameterForm.vue
index 94c6112f..17632526 100644
--- a/components/ParameterForm.vue
+++ b/components/ParameterForm.vue
@@ -36,6 +36,7 @@
                 autocomplete="off"
                 :label="option.label"
                 :value="option.id"
+                @change.prevent="console.log('change')"
               />
             </CButtonGroup>
           </CRow>
diff --git a/tests/e2e/runAnalysis.spec.ts b/tests/e2e/runAnalysis.spec.ts
index 3cbfa7d3..789c37ce 100644
--- a/tests/e2e/runAnalysis.spec.ts
+++ b/tests/e2e/runAnalysis.spec.ts
@@ -6,16 +6,34 @@ test.beforeAll(async () => {
 });
 
 test("Can request a scenario analysis run", async ({ page, baseURL }) => {
-  await page.goto(`${baseURL}/`); // Should redirect to new scenario page
+  await page.goto(`${baseURL}/`);
+  await page.waitForURL(`${baseURL}/scenarios/new`);
   await expect(page.getByText("Simulate a new scenario")).toBeVisible();
 
   await page.selectOption('select[id="pathogen"]', { label: "Influenza 1957" });
   await page.selectOption('select[id="response"]', { label: "Elimination" });
   await page.selectOption('select[id="country"]', { label: "United States" });
-  await page.click('div[aria-label="Advance vaccine investment"] label[for="medium"]');
+  await page.click('div[aria-label="Advance vaccine investment"] label[for="low"]');
+
+  // Get the form element
+  // const form = await page.waitForSelector("form");
+  // const formData = await form.getAttribute("data-test");
+  // const parsedFormData = JSON.parse(formData!);
+  // await waitFor(() => expect(parsedFormData).toEqual({
+  //   pathogen: "influenza-1957",
+  //   response: "elimination",
+  //   country: "United States",
+  //   vaccine: "low",
+  // }));
+
+  await page.waitForTimeout(2000); // waits for 2 seconds
 
   await page.click('button:has-text("Run")');
 
+  const dummyRunIdHash = "007e5f5453d64850";
+  await page.waitForURL(`${baseURL}/scenarios/${dummyRunIdHash}`);
+  await expect(page.url()).toBe(`${baseURL}/scenarios/${dummyRunIdHash}`);
+
   // TODO: Continue writing test
   // await expect(page.getByText("Simulate a new scenario")).not.toBeVisible();
 });

From 52b12eb451f40c75af3dfbe02e30863d24ccdc81 Mon Sep 17 00:00:00 2001
From: David Mears <clarinet.david@gmail.com>
Date: Wed, 4 Sep 2024 18:40:30 +0100
Subject: [PATCH 05/20] Switch to using query params instead of body

This was necessitated because the nuxt test utils don't seem to have
a way to pass through a body.
---
 components/ParameterForm.vue   |   5 +-
 mocks/mockoon.json             |  83 +++++++++++-
 package-lock.json              | 241 ++++++++++++++++++++++++++++++---
 package.json                   |   2 +-
 pages/scenarios/[id].vue       |   2 +-
 server/api/scenarios.post.ts   |   7 +-
 tests/integration/rApi.spec.ts |  43 +++++-
 7 files changed, 348 insertions(+), 35 deletions(-)

diff --git a/components/ParameterForm.vue b/components/ParameterForm.vue
index 17632526..18ae4feb 100644
--- a/components/ParameterForm.vue
+++ b/components/ParameterForm.vue
@@ -36,7 +36,6 @@
                 autocomplete="off"
                 :label="option.label"
                 :value="option.id"
-                @change.prevent="console.log('change')"
               />
             </CButtonGroup>
           </CRow>
@@ -134,7 +133,9 @@ const submitForm = async () => {
   formSubmitting.value = true;
   const response = await $fetch<NewScenarioData>("/api/scenarios", {
     method: "POST",
-    body: { parameters: formData.value },
+    query: { // Using query instead of body because I couldn't work out how to send a body in the integration test.
+      parameters: formData.value,
+    },
   }).catch((error: FetchError) => {
     console.error(error);
   });
diff --git a/mocks/mockoon.json b/mocks/mockoon.json
index 1a0d50ec..d8fc7015 100644
--- a/mocks/mockoon.json
+++ b/mocks/mockoon.json
@@ -17,7 +17,7 @@
       "responses": [
         {
           "uuid": "eb55d0af-aa59-4d0f-8cea-58ba9c68fa55",
-          "body": "{\"status\":\"success\",\"errors\":null,\"data\":{\"daedalus\":\"1.2.3.4.5.6.7.8\",\"daedalus.api\":\"8.7.6.5.4.3.2.1\"}}",
+          "body": "{\n  \"status\": \"success\",\n  \"errors\": null,\n  \"data\": {\n    \"daedalus\": \"1.2.3.4.5.6.7.8\",\n    \"daedalus.api\": \"8.7.6.5.4.3.2.1\"\n  }\n}",
           "latency": 0,
           "statusCode": 200,
           "label": "",
@@ -36,7 +36,7 @@
         },
         {
           "uuid": "128811da-2c89-4b2c-bd7a-fd9a18811f9d",
-          "body": "{\"status\":\"failure\",\"errors\":[{\"error\":\"NOT_FOUND\",\"detail\":\"Resource not found\"}],\"data\":null}",
+          "body": "{\n  \"status\": \"failure\",\n  \"errors\": [\n    {\n      \"error\": \"NOT_FOUND\",\n      \"detail\": \"Resource not found\"\n    }\n  ],\n  \"data\": null\n}",
           "latency": 0,
           "statusCode": 404,
           "label": "",
@@ -55,7 +55,7 @@
         },
         {
           "uuid": "2c4e88c2-0025-45ee-b298-9ed1fcd24f33",
-          "body": "{\"thisResponse\": \"shouldNeverBeReceivedSinceIConfiguredTheDelayToBeGreaterThanTheTimeoutWeWaitForTheResponseFor\"}",
+          "body": "{\n  \"thisResponse\": \"shouldNeverBeReceivedSinceIConfiguredTheDelayToBeGreaterThanTheTimeoutWeWaitForTheResponseFor\"\n}",
           "latency": 99999999,
           "statusCode": 200,
           "label": "",
@@ -84,7 +84,7 @@
       "responses": [
         {
           "uuid": "8e504c9c-2c6a-4bdb-989a-428fb3b978d8",
-          "body": "{\"serverUp\": true}",
+          "body": "{\n  \"serverUp\": true\n}",
           "latency": 0,
           "statusCode": 200,
           "label": "",
@@ -132,7 +132,7 @@
         },
         {
           "uuid": "c9d2d8a5-6b48-4131-aa3d-1585260f06b7",
-          "body": "{\"status\":\"failure\",\"errors\":[{\"error\":\"NOT_FOUND\",\"detail\":\"Resource not found\"}],\"data\":null}",
+          "body": "{\n  \"status\": \"failure\",\n  \"errors\": [\n    {\n      \"error\": \"NOT_FOUND\",\n      \"detail\": \"Resource not found\"\n    }\n  ],\n  \"data\": null\n}",
           "latency": 0,
           "statusCode": 404,
           "label": "",
@@ -151,7 +151,74 @@
         },
         {
           "uuid": "05728268-63d9-42d9-bba1-c1fc244bdbef",
-          "body": "{\"thisResponse\": \"shouldNeverBeReceivedSinceIConfiguredTheDelayToBeGreaterThanTheTimeoutWeWaitForTheResponseFor\"}",
+          "body": "{\n  \"thisResponse\": \"shouldNeverBeReceivedSinceIConfiguredTheDelayToBeGreaterThanTheTimeoutWeWaitForTheResponseFor\"\n}",
+          "latency": 99999999,
+          "statusCode": 200,
+          "label": "",
+          "headers": [],
+          "bodyType": "INLINE",
+          "filePath": "",
+          "databucketID": "",
+          "sendFileAsBody": false,
+          "rules": [],
+          "rulesOperator": "OR",
+          "disableTemplating": false,
+          "fallbackTo404": false,
+          "default": false,
+          "crudKey": "id",
+          "callbacks": []
+        }
+      ],
+      "responseMode": "SEQUENTIAL"
+    },
+    {
+      "uuid": "873f4dae-407e-4a88-b777-0888ff8b471a",
+      "type": "http",
+      "documentation": "",
+      "method": "post",
+      "endpoint": "scenario/run",
+      "responses": [
+        {
+          "uuid": "d2ac5ea7-a405-494b-9dac-363a1315dd85",
+          "body": "{\n  \"status\": \"success\",\n  \"errors\": null,\n  \"data\": {\n    \"runId\": \"007e5f5453d64850\"\n  }\n}",
+          "latency": 0,
+          "statusCode": 200,
+          "label": "",
+          "headers": [],
+          "bodyType": "INLINE",
+          "filePath": "",
+          "databucketID": "",
+          "sendFileAsBody": false,
+          "rules": [],
+          "rulesOperator": "OR",
+          "disableTemplating": false,
+          "fallbackTo404": false,
+          "default": true,
+          "crudKey": "id",
+          "callbacks": []
+        },
+        {
+          "uuid": "c8a3fc89-f2d5-4451-873d-734fdc5c35ac",
+          "body": "{\n  \"status\": \"failure\",\n  \"errors\": [\n    {\n      \"error\": \"NOT_FOUND\",\n      \"detail\": \"Resource not found\"\n    }\n  ],\n  \"data\": null\n}",
+          "latency": 0,
+          "statusCode": 404,
+          "label": "",
+          "headers": [],
+          "bodyType": "INLINE",
+          "filePath": "",
+          "databucketID": "",
+          "sendFileAsBody": false,
+          "rules": [],
+          "rulesOperator": "OR",
+          "disableTemplating": false,
+          "fallbackTo404": false,
+          "default": false,
+          "crudKey": "id",
+          "callbacks": []
+        },
+        {
+          "uuid": "2d2bfb3d-c3c4-4ef2-9f57-a912e9806a47",
+          "body": "{\n  \"thisResponse\": \"shouldNeverBeReceivedSinceIConfiguredTheDelayToBeGreaterThanTheTimeoutWeWaitForTheResponseFor\"\n}",
           "latency": 99999999,
           "statusCode": 200,
           "label": "",
@@ -184,6 +251,10 @@
     {
       "type": "route",
       "uuid": "367cdafb-4f59-402d-9643-d03ab0a3043d"
+    },
+    {
+      "type": "route",
+      "uuid": "873f4dae-407e-4a88-b777-0888ff8b471a"
     }
   ],
   "proxyMode": false,
diff --git a/package-lock.json b/package-lock.json
index bd93f351..8de0a956 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -49,6 +49,7 @@
         "node": ">=20"
       },
       "optionalDependencies": {
+        "@rollup/rollup-linux-x64-gnu": "4.21.1",
         "bufferutil": "^4.0.8",
         "utf-8-validate": "^6.0.4"
       }
@@ -1015,7 +1016,6 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
-      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -2246,6 +2246,22 @@
         "url": "https://mockoon.com/sponsor-us/"
       }
     },
+    "node_modules/@mockoon/commons-server/node_modules/qs": {
+      "version": "6.12.3",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.3.tgz",
+      "integrity": "sha512-AWJm14H1vVaO/iNZ4/hO+HyaTehuy9nRqVdkTqlJt0HWvBiBIEXFmb4C0DGeYo3Xes9rrEW+TxHsaigCbN5ICQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.0.6"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/@netlify/functions": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/@netlify/functions/-/functions-2.8.1.tgz",
@@ -3803,6 +3819,146 @@
         "@parcel/watcher-win32-x64": "2.4.1"
       }
     },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.4.1.tgz",
+      "integrity": "sha512-LOi/WTbbh3aTn2RYddrO8pnapixAziFl6SMxHM69r3tvdSm94JtCenaKgk1GRg5FJ5wpMCpHeW+7yqPlvZv7kg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.4.1.tgz",
+      "integrity": "sha512-ln41eihm5YXIY043vBrrHfn94SIBlqOWmoROhsMVTSXGh0QahKGy77tfEywQ7v3NywyxBBkGIfrWRHm0hsKtzA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.4.1.tgz",
+      "integrity": "sha512-yrw81BRLjjtHyDu7J61oPuSoeYWR3lDElcPGJyOvIXmor6DEo7/G2u1o7I38cwlcoBHQFULqF6nesIX3tsEXMg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.4.1.tgz",
+      "integrity": "sha512-TJa3Pex/gX3CWIx/Co8k+ykNdDCLx+TuZj3f3h7eOjgpdKM+Mnix37RYsYU4LHhiYJz3DK5nFCCra81p6g050w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.4.1.tgz",
+      "integrity": "sha512-4rVYDlsMEYfa537BRXxJ5UF4ddNwnr2/1O4MHM5PjI9cvV2qymvhwZSFgXqbS8YoTk5i/JR0L0JDs69BUn45YA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.4.1.tgz",
+      "integrity": "sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.4.1.tgz",
+      "integrity": "sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/@parcel/watcher-linux-x64-glibc": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.4.1.tgz",
@@ -3869,6 +4025,66 @@
       "inBundle": true,
       "license": "MIT"
     },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.4.1.tgz",
+      "integrity": "sha512-Uq2BPp5GWhrq/lcuItCHoqxjULU1QYEcyjSO5jqqOK8RNFDBQnenMMx4gAl3v8GiWa59E9+uDM7yZ6LxwUIfRg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.4.1.tgz",
+      "integrity": "sha512-maNRit5QQV2kgHFSYwftmPBxiuK5u4DXjbXx7q6eKjq5dsLXZ4FJiVvlcw35QXzk0KrUecJmuVFbj4uV9oYrcw==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.4.1.tgz",
+      "integrity": "sha512-+DvS92F9ezicfswqrvIRM2njcYJbd5mb9CUgtrHCHmvn7pPPa+nMDRu1o1bYYz/l5IB2NVGNJWiH7h1E58IF2A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/@parcel/watcher/node_modules/detect-libc": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
@@ -4405,7 +4621,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -14207,9 +14422,9 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "license": "MIT",
       "dependencies": {
         "braces": "^3.0.3",
@@ -16768,22 +16983,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/qs": {
-      "version": "6.12.3",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.3.tgz",
-      "integrity": "sha512-AWJm14H1vVaO/iNZ4/hO+HyaTehuy9nRqVdkTqlJt0HWvBiBIEXFmb4C0DGeYo3Xes9rrEW+TxHsaigCbN5ICQ==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "side-channel": "^1.0.6"
-      },
-      "engines": {
-        "node": ">=0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/querystringify": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
diff --git a/package.json b/package.json
index 528dd3eb..dde2dfd1 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "lint:fix": "eslint . --fix",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
-    "test:integration": "vitest ./tests/integration/",
+    "test:integration": "vitest ./tests/integration/ --reporter=basic --disable-console-intercept",
     "test:unit": "vitest ./tests/unit/",
     "test:unit:coverage": "vitest ./tests/unit --coverage",
     "test:ssr": "vitest ./tests/ssr/*.spec.ts",
diff --git a/pages/scenarios/[id].vue b/pages/scenarios/[id].vue
index a067c06f..71fba56a 100644
--- a/pages/scenarios/[id].vue
+++ b/pages/scenarios/[id].vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <p>
-      Query parameter: {{ route.params.id }}
+      Id from route: {{ route.params.id }}
     </p>
   </div>
 </template>
diff --git a/server/api/scenarios.post.ts b/server/api/scenarios.post.ts
index 61e7df87..4734314c 100644
--- a/server/api/scenarios.post.ts
+++ b/server/api/scenarios.post.ts
@@ -1,13 +1,16 @@
 import { runScenario } from "@/server/handlers/scenarios";
 import { defineRApiEventHandler } from "~/server/utils/defineRApiEventHandler";
 import type { NewScenarioResponse } from "@/types/apiResponseTypes";
+import type { ParameterDict } from "@/types/apiRequestTypes";
 
 export default defineRApiEventHandler(
   async (event): Promise<NewScenarioResponse> => {
-    const { parameters } = await readBody(event);
+    const query = getQuery(event);
+
+    const modelParameters = JSON.parse(query.parameters as string) as ParameterDict;
 
     // Delegate to runScenario so that the logic can be unit-tested.
-    const newScenarioResponse = await runScenario(parameters, event);
+    const newScenarioResponse = await runScenario(modelParameters, event);
 
     return newScenarioResponse;
   },
diff --git a/tests/integration/rApi.spec.ts b/tests/integration/rApi.spec.ts
index c8091b0f..739f089a 100644
--- a/tests/integration/rApi.spec.ts
+++ b/tests/integration/rApi.spec.ts
@@ -110,8 +110,6 @@ describe("endpoints which consume the R API", { sequential: true }, async () =>
     });
 
     it("returns a response with informative errors when the mock server doesn't respond in time", async () => {
-      // https://mockoon.com/tutorials/getting-started/#step-5-add-a-delay-to-the-response
-
       const response = await nuxtTestUtilsFetch("/api/metadata");
 
       expect(response.ok).toBe(false);
@@ -122,4 +120,45 @@ describe("endpoints which consume the R API", { sequential: true }, async () =>
       expect(json.message).toBe("Unknown error: No response from the API");
     });
   });
+
+  describe("post api/scenarios", async () => {
+    const queryString = `parameters={"country":"Thailand","pathogen":"sars-cov-1","response":"no_closure","vaccine":"none"}`;
+
+    it("returns a successful response when the mock server responds successfully", async () => {
+      const response = await nuxtTestUtilsFetch(`/api/scenarios?${queryString}`, { method: "POST" });
+
+      console.error(response);
+      console.error("hekki?");
+
+      expect(response.ok).toBe(true);
+      expect(response.status).toBe(200);
+      expect(response.statusText).toBe("OK");
+
+      const json = await response.json();
+      expect(json.runId).toBe("007e5f5453d64850");
+    });
+
+    it("returns a response with informative errors when the mock server responds with an error", async () => {
+      const response = await nuxtTestUtilsFetch(`/api/scenarios?${queryString}`, { method: "POST" });
+
+      expect(response.ok).toBe(false);
+      expect(response.status).toBe(404);
+      expect(response.statusText).toBe("Not Found");
+      const json = await response.json();
+      expect(json.data[0].error).toBe("NOT_FOUND");
+      expect(json.data[0].detail).toBe("Resource not found");
+      expect(json.message).toBe("NOT_FOUND: Resource not found"); // A concatenation of the error details from the R API.
+    });
+
+    it("returns a response with informative errors when the mock server doesn't respond in time", async () => {
+      const response = await nuxtTestUtilsFetch(`/api/scenarios?${queryString}`, { method: "POST" });
+
+      expect(response.ok).toBe(false);
+      expect(response.status).toBe(500);
+      expect(response.statusText).toBe("error");
+
+      const json = await response.json();
+      expect(json.message).toBe("Unknown error: No response from the API");
+    });
+  });
 });

From bcb53f2e6021fe62c927b14926191c27ad50b00a Mon Sep 17 00:00:00 2001
From: David Mears <clarinet.david@gmail.com>
Date: Thu, 5 Sep 2024 23:01:41 +0100
Subject: [PATCH 06/20] Tests

---
 components/ParameterForm.vue                 |  18 +--
 mocks/mockoon.json                           | 143 ++++++++++++++++++-
 package.json                                 |   2 +-
 tests/integration/rApi.spec.ts               |  14 +-
 tests/unit/components/ParameterForm.spec.ts  |  46 +++++-
 tests/unit/server/handlers/metadata.spec.ts  |   8 +-
 tests/unit/server/handlers/scenarios.spec.ts |  62 ++++++++
 vitest.config.ts                             |   1 +
 8 files changed, 263 insertions(+), 31 deletions(-)
 create mode 100644 tests/unit/server/handlers/scenarios.spec.ts

diff --git a/components/ParameterForm.vue b/components/ParameterForm.vue
index 18ae4feb..f97d0937 100644
--- a/components/ParameterForm.vue
+++ b/components/ParameterForm.vue
@@ -3,7 +3,8 @@
     <CForm
       v-if="props.metadata && formData"
       class="inputs"
-      :data-test="JSON.stringify(formData)"
+      :data-test-form-data="JSON.stringify(formData)"
+      :data-test-navigate-to="navigateToData"
       @submit.prevent="submitForm"
     >
       <div
@@ -68,15 +69,11 @@
         :size="largeScreen ? 'lg' : undefined"
         type="submit"
         :disabled="formSubmitting"
+        @click="submitForm"
       >
         Run
-        <CIcon
-          icon="cilArrowRight"
-        />
-        <CSpinner
-          v-if="formSubmitting"
-          size="sm"
-        />
+        <CSpinner v-if="formSubmitting" size="sm" class="ms-1" />
+        <CIcon v-else icon="cilArrowRight" />
       </CButton>
     </CForm>
     <CAlert v-else-if="props.metadataFetchStatus === 'error'" color="warning">
@@ -107,6 +104,8 @@ const formData = ref(
   }, {} as { [key: string]: string | number }),
 );
 
+const navigateToData = ref("");
+
 const optionsAreTerse = (parameter: Parameter) => {
   const eachOptionIsASingleWord = parameter.options.every((option) => {
     return !option.label.includes(" ");
@@ -142,7 +141,8 @@ const submitForm = async () => {
 
   if (response) {
     const { runId } = response;
-    await navigateTo(`/scenarios/${runId}`);
+    navigateToData.value = `/scenarios/${runId}`;
+    await navigateTo(navigateToData.value);
   };
 };
 
diff --git a/mocks/mockoon.json b/mocks/mockoon.json
index d8fc7015..e11d96fd 100644
--- a/mocks/mockoon.json
+++ b/mocks/mockoon.json
@@ -189,8 +189,51 @@
           "filePath": "",
           "databucketID": "",
           "sendFileAsBody": false,
-          "rules": [],
-          "rulesOperator": "OR",
+          "rules": [
+            {
+              "target": "body",
+              "modifier": "$.parameters.mockoonResponse",
+              "value": "successful",
+              "invert": false,
+              "operator": "equals"
+            },
+            {
+              "target": "body",
+              "modifier": "$.modelVersion",
+              "value": "0.0.1",
+              "invert": false,
+              "operator": "equals"
+            },
+            {
+              "target": "body",
+              "modifier": "$.parameters.country",
+              "value": "Thailand",
+              "invert": false,
+              "operator": "equals"
+            },
+            {
+              "target": "body",
+              "modifier": "$.parameters.pathogen",
+              "value": "sars-cov-1",
+              "invert": false,
+              "operator": "equals"
+            },
+            {
+              "target": "body",
+              "modifier": "$.parameters.response",
+              "value": "no_closure",
+              "invert": false,
+              "operator": "equals"
+            },
+            {
+              "target": "body",
+              "modifier": "$.parameters.vaccine",
+              "value": "none",
+              "invert": false,
+              "operator": "equals"
+            }
+          ],
+          "rulesOperator": "AND",
           "disableTemplating": false,
           "fallbackTo404": false,
           "default": true,
@@ -208,8 +251,51 @@
           "filePath": "",
           "databucketID": "",
           "sendFileAsBody": false,
-          "rules": [],
-          "rulesOperator": "OR",
+          "rules": [
+            {
+              "target": "body",
+              "modifier": "$.parameters.mockoonResponse",
+              "value": "notFound",
+              "invert": false,
+              "operator": "equals"
+            },
+            {
+              "target": "body",
+              "modifier": "$.modelVersion",
+              "value": "0.0.1",
+              "invert": false,
+              "operator": "equals"
+            },
+            {
+              "target": "body",
+              "modifier": "$.parameters.country",
+              "value": "Thailand",
+              "invert": false,
+              "operator": "equals"
+            },
+            {
+              "target": "body",
+              "modifier": "$.parameters.pathogen",
+              "value": "sars-cov-1",
+              "invert": false,
+              "operator": "equals"
+            },
+            {
+              "target": "body",
+              "modifier": "$.parameters.response",
+              "value": "no_closure",
+              "invert": false,
+              "operator": "equals"
+            },
+            {
+              "target": "body",
+              "modifier": "$.parameters.vaccine",
+              "value": "none",
+              "invert": false,
+              "operator": "equals"
+            }
+          ],
+          "rulesOperator": "AND",
           "disableTemplating": false,
           "fallbackTo404": false,
           "default": false,
@@ -227,8 +313,51 @@
           "filePath": "",
           "databucketID": "",
           "sendFileAsBody": false,
-          "rules": [],
-          "rulesOperator": "OR",
+          "rules": [
+            {
+              "target": "body",
+              "modifier": "$.parameters.mockoonResponse",
+              "value": "delayed",
+              "invert": false,
+              "operator": "equals"
+            },
+            {
+              "target": "body",
+              "modifier": "$.modelVersion",
+              "value": "0.0.1",
+              "invert": false,
+              "operator": "equals"
+            },
+            {
+              "target": "body",
+              "modifier": "$.parameters.country",
+              "value": "Thailand",
+              "invert": false,
+              "operator": "equals"
+            },
+            {
+              "target": "body",
+              "modifier": "$.parameters.pathogen",
+              "value": "sars-cov-1",
+              "invert": false,
+              "operator": "equals"
+            },
+            {
+              "target": "body",
+              "modifier": "$.parameters.response",
+              "value": "no_closure",
+              "invert": false,
+              "operator": "equals"
+            },
+            {
+              "target": "body",
+              "modifier": "$.parameters.vaccine",
+              "value": "none",
+              "invert": false,
+              "operator": "equals"
+            }
+          ],
+          "rulesOperator": "AND",
           "disableTemplating": false,
           "fallbackTo404": false,
           "default": false,
@@ -236,7 +365,7 @@
           "callbacks": []
         }
       ],
-      "responseMode": "SEQUENTIAL"
+      "responseMode": null
     }
   ],
   "rootChildren": [
diff --git a/package.json b/package.json
index dde2dfd1..d04538c3 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
     "test:integration": "vitest ./tests/integration/ --reporter=basic --disable-console-intercept",
-    "test:unit": "vitest ./tests/unit/",
+    "test:unit": "vitest ./tests/unit/ --reporter=basic --disable-console-intercept",
     "test:unit:coverage": "vitest ./tests/unit --coverage",
     "test:ssr": "vitest ./tests/ssr/*.spec.ts",
     "test:e2e": "playwright test"
diff --git a/tests/integration/rApi.spec.ts b/tests/integration/rApi.spec.ts
index 739f089a..9230aa81 100644
--- a/tests/integration/rApi.spec.ts
+++ b/tests/integration/rApi.spec.ts
@@ -121,14 +121,14 @@ describe("endpoints which consume the R API", { sequential: true }, async () =>
     });
   });
 
+  // In these tests, Mockoon is configured to check the request body for all the expected parameters (and respond with the
+  // appropriate status code etc.), as a way to test that the parameters (and model version) are being passed through all the way
+  // to the R API.
   describe("post api/scenarios", async () => {
-    const queryString = `parameters={"country":"Thailand","pathogen":"sars-cov-1","response":"no_closure","vaccine":"none"}`;
-
     it("returns a successful response when the mock server responds successfully", async () => {
-      const response = await nuxtTestUtilsFetch(`/api/scenarios?${queryString}`, { method: "POST" });
+      const queryString = `parameters={"mockoonResponse":"successful","country":"Thailand","pathogen":"sars-cov-1","response":"no_closure","vaccine":"none"}`;
 
-      console.error(response);
-      console.error("hekki?");
+      const response = await nuxtTestUtilsFetch(`/api/scenarios?${queryString}`, { method: "POST" });
 
       expect(response.ok).toBe(true);
       expect(response.status).toBe(200);
@@ -139,6 +139,8 @@ describe("endpoints which consume the R API", { sequential: true }, async () =>
     });
 
     it("returns a response with informative errors when the mock server responds with an error", async () => {
+      const queryString = `parameters={"mockoonResponse":"notFound","country":"Thailand","pathogen":"sars-cov-1","response":"no_closure","vaccine":"none"}`;
+
       const response = await nuxtTestUtilsFetch(`/api/scenarios?${queryString}`, { method: "POST" });
 
       expect(response.ok).toBe(false);
@@ -151,6 +153,8 @@ describe("endpoints which consume the R API", { sequential: true }, async () =>
     });
 
     it("returns a response with informative errors when the mock server doesn't respond in time", async () => {
+      const queryString = `parameters={"mockoonResponse":"delayed","country":"Thailand","pathogen":"sars-cov-1","response":"no_closure","vaccine":"none"}`;
+
       const response = await nuxtTestUtilsFetch(`/api/scenarios?${queryString}`, { method: "POST" });
 
       expect(response.ok).toBe(false);
diff --git a/tests/unit/components/ParameterForm.spec.ts b/tests/unit/components/ParameterForm.spec.ts
index e00166e8..4b2b4dc1 100644
--- a/tests/unit/components/ParameterForm.spec.ts
+++ b/tests/unit/components/ParameterForm.spec.ts
@@ -1,7 +1,9 @@
 import { describe, expect, it, vi } from "vitest";
-import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { mountSuspended, registerEndpoint } from "@nuxt/test-utils/runtime";
+import { getQuery } from "h3";
 import { FetchError } from "ofetch";
-
+import { flushPromises } from "@vue/test-utils";
+import type { Metadata } from "@/types/apiResponseTypes";
 import ParameterForm from "@/components/ParameterForm.vue";
 
 const stubs = {
@@ -49,7 +51,7 @@ const selectParameters = [
   },
 ];
 
-const metadata = { modelVersion: "0.0.0", parameters: [...selectParameters, globeParameter] };
+const metadata = { modelVersion: "0.0.0", parameters: [...selectParameters, globeParameter] } as Metadata;
 
 describe("parameter form", () => {
   it("adds a resize event listener on mount and removes it on unmount", async () => {
@@ -127,7 +129,7 @@ describe("parameter form", () => {
     });
 
     const cForm = component.findComponent({ name: "CForm" });
-    let formData = JSON.parse(cForm.element.attributes.getNamedItem("data-test")!.value);
+    let formData = JSON.parse(cForm.element.attributes.getNamedItem("data-test-form-data")!.value);
     expect(formData.region).toBe("HVN");
     expect(formData.long_list).toBe("1");
     expect(formData.short_list).toBe("no");
@@ -147,12 +149,46 @@ describe("parameter form", () => {
     await countrySelect.findAll("option").at(0)!.setSelected();
     await component.findComponent({ name: "CButtonGroup" }).find("input[value='yes']").setChecked();
 
-    formData = JSON.parse(cForm.element.attributes.getNamedItem("data-test")!.value);
+    formData = JSON.parse(cForm.element.attributes.getNamedItem("data-test-form-data")!.value);
     expect(formData.region).toBe("CLD");
     expect(formData.long_list).toBe("3");
     expect(formData.short_list).toBe("yes");
   });
 
+  it("sends a POST request to /api/scenarios with the form data when submitted", async () => {
+    registerEndpoint("/api/scenarios", {
+      method: "POST",
+      handler: (event) => {
+        const query = getQuery(event) as Record<string, string>;
+        const modelParams = JSON.parse(query.parameters);
+
+        if (modelParams.long_list === "1" && modelParams.region === "HVN" && modelParams.short_list === "no") {
+          return { runId: "randomId" };
+        } else {
+          return { error: "Test failed due to wrong parameters" };
+        }
+      },
+    });
+
+    const component = await mountSuspended(ParameterForm, {
+      props: { metadata, metadataFetchStatus: "success", metadataFetchError: null },
+      global: { stubs },
+    });
+
+    const buttonEl = component.find("button[type='submit']");
+    expect(buttonEl.attributes("disabled")).not.toBe("");
+    await buttonEl.trigger("click");
+    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" });
+    expect(
+      cForm.element.attributes.getNamedItem("data-test-navigate-to")!.value,
+    ).toBe("/scenarios/randomId");
+  });
+
   it("displays CAlert with error message when metadataFetchStatus is 'error'", async () => {
     const error = new FetchError("There was a bee-related issue.");
 
diff --git a/tests/unit/server/handlers/metadata.spec.ts b/tests/unit/server/handlers/metadata.spec.ts
index 2741460b..60688472 100644
--- a/tests/unit/server/handlers/metadata.spec.ts
+++ b/tests/unit/server/handlers/metadata.spec.ts
@@ -2,7 +2,7 @@ import { describe, expect, it, vi } from "vitest";
 import { registerEndpoint } from "@nuxt/test-utils/runtime";
 import { getMetadata } from "@/server/handlers/metadata";
 
-const mockedVersionResponse = vi.fn();
+const mockedMetadataResponse = vi.fn();
 const exampleMetadata = {
   modelVersion: "0.1.0",
   parameters: [
@@ -31,12 +31,12 @@ const exampleMetadata = {
   ],
 };
 
-registerEndpoint("/metadata", mockedVersionResponse);
+registerEndpoint("/metadata", mockedMetadataResponse);
 
 describe("get metadata", () => {
   describe("when the R API response is successful", () => {
     it("should return the expected metadata", async () => {
-      mockedVersionResponse.mockImplementation(() => {
+      mockedMetadataResponse.mockImplementation(() => {
         return {
           status: "success",
           errors: null,
@@ -55,7 +55,7 @@ describe("get metadata", () => {
 
   describe("when the R API response is unsuccessful", () => {
     it("passes on the status code and message", async () => {
-      mockedVersionResponse.mockImplementation(() => {
+      mockedMetadataResponse.mockImplementation(() => {
         throw createError({
           statusCode: 418,
           statusMessage: "I'm a teapot",
diff --git a/tests/unit/server/handlers/scenarios.spec.ts b/tests/unit/server/handlers/scenarios.spec.ts
new file mode 100644
index 00000000..76130792
--- /dev/null
+++ b/tests/unit/server/handlers/scenarios.spec.ts
@@ -0,0 +1,62 @@
+import { readBody } from "h3";
+import { describe, expect, it, vi } from "vitest";
+import { registerEndpoint } from "@nuxt/test-utils/runtime";
+import { runScenario } from "@/server/handlers/scenarios";
+
+const mockedRunScenarioResponse = vi.fn();
+
+registerEndpoint("/scenario/run", {
+  method: "POST",
+  handler: mockedRunScenarioResponse,
+});
+
+describe("requesting a scenario analysis to be run by the R API", () => {
+  describe("when the R API response is successful", () => {
+    it("should forward the parameters to the R API, and return the run id", async () => {
+      mockedRunScenarioResponse.mockImplementation(async (event) => {
+        const body = await readBody(event);
+
+        if (body.parameters.disease === "mpox" && body.modelVersion === "0.0.1") {
+          return {
+            status: "success",
+            errors: null,
+            data: {
+              runId: "abcd1234",
+            },
+          };
+        }
+
+        throw new Error("The test failed to pass the correct parameters to the R API.");
+      });
+
+      const response = await runScenario({ disease: "mpox" });
+
+      expect(response.data).toEqual({
+        runId: "abcd1234",
+      });
+      expect(response.errors).toBeNull();
+      expect(response.statusCode).toBe(200);
+      expect(response.statusText).toBe("");
+    });
+  });
+
+  describe("when the R API response is unsuccessful", () => {
+    it("passes on the status code and message", async () => {
+      mockedRunScenarioResponse.mockImplementation(() => {
+        throw createError({
+          statusCode: 418,
+          statusMessage: "I'm a teapot",
+        });
+      });
+
+      const response = await runScenario({ disease: "mpox" });
+
+      // NB Couldn't find a way to expose error details in the response using registerEndpoint,
+      // but the error details are passed on in the real implementation and this is tested in
+      // the integration tests.
+      expect(response.data).toBeNull();
+      expect(response.statusCode).toBe(418);
+      expect(response.statusText).toBe("I'm a teapot");
+    });
+  });
+});
diff --git a/vitest.config.ts b/vitest.config.ts
index 76f57970..9318f467 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -16,5 +16,6 @@ export default defineVitestConfig({
     coverage: {
       exclude: ["**/*.config.ts", ...coverageConfigDefaults.exclude],
     },
+    restoreMocks: true,
   },
 });

From 7434c9df58b1eeda278120b8873d6579daf55f26 Mon Sep 17 00:00:00 2001
From: David Mears <clarinet.david@gmail.com>
Date: Fri, 6 Sep 2024 00:35:54 +0100
Subject: [PATCH 07/20] Refactor: Use pinia store for largeScreen refs

---
 components/ParameterForm.vue                | 25 +++-----------
 components/SideBar.vue                      | 18 ++++------
 layouts/default.vue                         | 22 ++++++++++++
 package-lock.json                           | 17 ++++++++++
 package.json                                |  1 +
 stores/appStore.ts                          | 21 ++++++++++++
 tests/unit/components/ParameterForm.spec.ts | 19 +----------
 tests/unit/components/SideBar.spec.ts       | 37 +++++----------------
 tests/unit/components/defaultLayout.spec.ts | 14 ++++++++
 tests/unit/mocks/mockPinia.ts               | 14 ++++++++
 tests/unit/stores/appStore.spec.ts          | 26 +++++++++++++++
 types/storeTypes.ts                         |  5 +++
 12 files changed, 140 insertions(+), 79 deletions(-)
 create mode 100644 stores/appStore.ts
 create mode 100644 tests/unit/mocks/mockPinia.ts
 create mode 100644 tests/unit/stores/appStore.spec.ts
 create mode 100644 types/storeTypes.ts

diff --git a/components/ParameterForm.vue b/components/ParameterForm.vue
index f97d0937..7fd0437d 100644
--- a/components/ParameterForm.vue
+++ b/components/ParameterForm.vue
@@ -23,7 +23,7 @@
             <CButtonGroup
               role="group"
               :aria-label="parameter.label"
-              :size="largeScreen ? 'lg' : undefined"
+              :size="screenIsLarge ? 'lg' : undefined"
             >
               <!-- This component's "v-model" prop type signature dictates we can't pass it a number. -->
               <CFormCheck
@@ -50,7 +50,7 @@
             :id="parameter.id"
             v-model="formData[parameter.id]"
             :aria-label="parameter.label"
-            class="form-select" :class="[largeScreen ? 'form-select-lg' : '']"
+            class="form-select" :class="[screenIsLarge ? 'form-select-lg' : '']"
           >
             <option
               v-for="(option) in parameter.options"
@@ -66,7 +66,7 @@
       <CButton
         id="run-button"
         color="primary"
-        :size="largeScreen ? 'lg' : undefined"
+        :size="screenIsLarge ? 'lg' : undefined"
         type="submit"
         :disabled="formSubmitting"
         @click="submitForm"
@@ -146,23 +146,8 @@ const submitForm = async () => {
   };
 };
 
-const largeScreen = ref(true);
-const breakpoint = 992; // CoreUI's "lg" breakpoint
-const setFieldSizes = () => {
-  if (window.innerWidth < breakpoint) {
-    largeScreen.value = false;
-  } else {
-    largeScreen.value = true;
-  }
-};
-
-onMounted(() => {
-  setFieldSizes();
-  window.addEventListener("resize", setFieldSizes);
-});
-onBeforeUnmount(() => {
-  window.removeEventListener("resize", setFieldSizes);
-});
+const appStore = useAppStore();
+const { screenIsLarge } = storeToRefs(appStore);
 </script>
 
 <style lang="scss">
diff --git a/components/SideBar.vue b/components/SideBar.vue
index e7768808..1e3b1435 100644
--- a/components/SideBar.vue
+++ b/components/SideBar.vue
@@ -1,8 +1,8 @@
 <template>
   <CSidebar
     :visible="visible"
-    :unfoldable="largeScreen"
-    :overlaid="largeScreen"
+    :unfoldable="screenIsLarge"
+    :overlaid="screenIsLarge"
     class="sidebar-fixed border-end"
     @hide="handleHide"
   >
@@ -70,18 +70,12 @@ const versionTooltipContent = computed(() => {
 });
 
 const visible = defineModel("visible", { type: Boolean, required: true });
-const largeScreen = ref(true);
 
-const breakpoint = 992; // CoreUI's "lg" breakpoint
+const appStore = useAppStore();
+const { screenIsLarge } = storeToRefs(appStore);
+
 const resetSidebarPerScreenSize = () => {
-  // Set the default values for the sidebar based on the screen size.
-  if (window.innerWidth < breakpoint) {
-    visible.value = false;
-    largeScreen.value = false;
-  } else {
-    visible.value = true;
-    largeScreen.value = true;
-  }
+  visible.value = screenIsLarge.value;
 };
 
 const hideHasNeverBeenEmitted = ref(true);
diff --git a/layouts/default.vue b/layouts/default.vue
index 7479a6a8..5633bd1e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -23,6 +23,28 @@ const sidebarVisible = ref(false);
 function handleToggleSidebarVisibility() {
   sidebarVisible.value = !sidebarVisible.value;
 }
+
+const appStore = useAppStore(useNuxtApp().$pinia);
+appStore.initializeAppState();
+
+const setScreenSize = () => {
+  // As this function uses window, it can only be run client-side, so we have to pass the $pinia instance
+  // to the useAppStore function: https://pinia.vuejs.org/ssr/nuxt.html#Awaiting-for-actions-in-pages
+  const breakpoint = 992; // CoreUI's "lg" breakpoint
+  if (window.innerWidth < breakpoint) {
+    appStore.setScreenSize(false);
+  } else {
+    appStore.setScreenSize(true);
+  }
+};
+
+onMounted(() => {
+  setScreenSize();
+  window.addEventListener("resize", setScreenSize);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", setScreenSize);
+});
 </script>
 
 <style lang="scss">
diff --git a/package-lock.json b/package-lock.json
index 8de0a956..dc9ff454 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
       "devDependencies": {
         "@antfu/eslint-config": "2.21.0",
         "@mockoon/cli": "^8.4.0",
+        "@pinia/testing": "^0.1.5",
         "@playwright/test": "^1.46.1",
         "@testing-library/vue": "^8.1.0",
         "@types/lodash.throttle": "^4.1.9",
@@ -4110,6 +4111,22 @@
         "url": "https://github.com/sponsors/posva"
       }
     },
+    "node_modules/@pinia/testing": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@pinia/testing/-/testing-0.1.5.tgz",
+      "integrity": "sha512-AcGzuotkzhRoF00htuxLfIPBBHVE6HjjB3YC5Y3os8vRgKu6ipknK5GBQq9+pduwYQhZ+BcCZDC9TyLAUlUpoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "pinia": ">=2.2.1"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
diff --git a/package.json b/package.json
index d04538c3..c9629e80 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "2.21.0",
     "@mockoon/cli": "^8.4.0",
+    "@pinia/testing": "^0.1.5",
     "@playwright/test": "^1.46.1",
     "@testing-library/vue": "^8.1.0",
     "@types/lodash.throttle": "^4.1.9",
diff --git a/stores/appStore.ts b/stores/appStore.ts
new file mode 100644
index 00000000..f469a9d6
--- /dev/null
+++ b/stores/appStore.ts
@@ -0,0 +1,21 @@
+import { defineStore } from "pinia";
+import type { AppState } from "@/types/storeTypes";
+
+export const useAppStore = defineStore("app", {
+  state: (): AppState => ({
+    largeScreen: true,
+  }),
+  getters: {
+    screenIsLarge: (state: AppState): boolean => {
+      return state.largeScreen;
+    },
+  },
+  actions: {
+    initializeAppState(): void {
+      this.largeScreen = true;
+    },
+    setScreenSize(bool: boolean): void {
+      this.largeScreen = bool;
+    },
+  },
+});
diff --git a/tests/unit/components/ParameterForm.spec.ts b/tests/unit/components/ParameterForm.spec.ts
index 4b2b4dc1..5faca83d 100644
--- a/tests/unit/components/ParameterForm.spec.ts
+++ b/tests/unit/components/ParameterForm.spec.ts
@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it } from "vitest";
 import { mountSuspended, registerEndpoint } from "@nuxt/test-utils/runtime";
 import { getQuery } from "h3";
 import { FetchError } from "ofetch";
@@ -54,23 +54,6 @@ const selectParameters = [
 const metadata = { modelVersion: "0.0.0", parameters: [...selectParameters, globeParameter] } as Metadata;
 
 describe("parameter form", () => {
-  it("adds a resize event listener on mount and removes it on unmount", async () => {
-    const addEventListenerSpy = vi.spyOn(window, "addEventListener");
-    const removeEventListenerSpy = vi.spyOn(window, "removeEventListener");
-
-    const component = await mountSuspended(ParameterForm, {
-      props: { metadata: undefined, metadataFetchStatus: "pending", metadataFetchError: null },
-      global: { stubs },
-    });
-    expect(addEventListenerSpy).toHaveBeenCalledWith("resize", expect.any(Function));
-
-    component.unmount();
-    expect(removeEventListenerSpy).toHaveBeenCalledWith("resize", expect.any(Function));
-
-    addEventListenerSpy.mockRestore();
-    removeEventListenerSpy.mockRestore();
-  });
-
   it("renders the correct parameter labels, inputs, options, and default values", async () => {
     const component = await mountSuspended(ParameterForm, {
       props: { metadata, metadataFetchStatus: "success", metadataFetchError: null },
diff --git a/tests/unit/components/SideBar.spec.ts b/tests/unit/components/SideBar.spec.ts
index 0d8bfb12..bf49db7d 100644
--- a/tests/unit/components/SideBar.spec.ts
+++ b/tests/unit/components/SideBar.spec.ts
@@ -1,8 +1,8 @@
-import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
+import { afterAll, describe, expect, it, vi } from "vitest";
 import { mountSuspended, registerEndpoint } from "@nuxt/test-utils/runtime";
 import { waitFor } from "@testing-library/vue";
 import type { VueWrapper } from "@vue/test-utils";
-
+import { mockPinia } from "@/tests/unit/mocks/mockPinia";
 import SideBar from "@/components/SideBar.vue";
 
 const stubs = {
@@ -23,33 +23,14 @@ describe("sidebar", () => {
     };
   });
 
-  it("adds a resize event listener on mount and removes it on unmount", async () => {
-    const addEventListenerSpy = vi.spyOn(window, "addEventListener");
-    const removeEventListenerSpy = vi.spyOn(window, "removeEventListener");
-
-    const component = await mountSuspended(SideBar, {
-      props: { visible: false },
-      global: { stubs },
-    });
-    expect(addEventListenerSpy).toHaveBeenCalledWith("resize", expect.any(Function));
-
-    component.unmount();
-    expect(removeEventListenerSpy).toHaveBeenCalledWith("resize", expect.any(Function));
-
-    addEventListenerSpy.mockRestore();
-    removeEventListenerSpy.mockRestore();
-  });
-
   describe('when the "visible" prop is initialized as false', () => {
     describe("on smaller devices", () => {
-      beforeAll(() => {
-        vi.stubGlobal("innerWidth", 500);
-      });
+      const plugins = [mockPinia({ largeScreen: false })];
 
       it('starts as hidden, and can be opened by setting "visible" prop', async () => {
         const component = await mountSuspended(SideBar, {
           props: { visible: false },
-          global: { stubs },
+          global: { stubs, plugins },
         });
         const coreuiSidebar = component.findComponent({ name: "CSidebar" });
         await mockCSidebarPageloadBehavior(coreuiSidebar);
@@ -66,7 +47,7 @@ describe("sidebar", () => {
       it("includes information about the version numbers", async () => {
         const component = await mountSuspended(SideBar, {
           props: { visible: false },
-          global: { stubs },
+          global: { stubs, plugins },
         });
 
         const coreuiSidebar = component.findComponent({ name: "CSidebar" });
@@ -88,14 +69,12 @@ describe("sidebar", () => {
     });
 
     describe("on larger devices", () => {
-      beforeAll(() => {
-        vi.stubGlobal("innerWidth", 1500);
-      });
+      const plugins = [mockPinia({ largeScreen: true })];
 
       it("starts as shown", async () => {
         const component = await mountSuspended(SideBar, {
           props: { visible: false },
-          global: { stubs },
+          global: { stubs, plugins },
         });
         const coreuiSidebar = component.findComponent({ name: "CSidebar" });
         await mockCSidebarPageloadBehavior(coreuiSidebar);
@@ -107,7 +86,7 @@ describe("sidebar", () => {
       it("renders the text and href for nav items", async () => {
         const component = await mountSuspended(SideBar, {
           props: { visible: false },
-          global: { stubs },
+          global: { stubs, plugins },
         });
         const coreuiSidebar = component.findComponent({ name: "CSidebar" });
         await mockCSidebarPageloadBehavior(coreuiSidebar);
diff --git a/tests/unit/components/defaultLayout.spec.ts b/tests/unit/components/defaultLayout.spec.ts
index 5174067b..3ac9bc21 100644
--- a/tests/unit/components/defaultLayout.spec.ts
+++ b/tests/unit/components/defaultLayout.spec.ts
@@ -24,6 +24,20 @@ describe("default layout", () => {
       expect(sidebar.props("visible")).toBe(true);
     });
 
+    it("adds a resize event listener on mount and removes it on unmount", async () => {
+      const addEventListenerSpy = vi.spyOn(window, "addEventListener");
+      const removeEventListenerSpy = vi.spyOn(window, "removeEventListener");
+
+      const component = await mountSuspended(DefaultLayout, { global: { stubs } });
+      expect(addEventListenerSpy).toHaveBeenCalledWith("resize", expect.any(Function));
+
+      component.unmount();
+      expect(removeEventListenerSpy).toHaveBeenCalledWith("resize", expect.any(Function));
+
+      addEventListenerSpy.mockRestore();
+      removeEventListenerSpy.mockRestore();
+    });
+
     afterAll(() => {
       vi.unstubAllGlobals();
     });
diff --git a/tests/unit/mocks/mockPinia.ts b/tests/unit/mocks/mockPinia.ts
new file mode 100644
index 00000000..46c00b9a
--- /dev/null
+++ b/tests/unit/mocks/mockPinia.ts
@@ -0,0 +1,14 @@
+import { vi } from "vitest";
+import { createTestingPinia } from "@pinia/testing";
+import type { AppState } from "@/types/storeTypes";
+
+export const mockPinia = (appState: Partial<AppState> = {}) => {
+  const initialState = {
+    app: {
+      largeScreen: true,
+      ...appState,
+    },
+  };
+
+  return createTestingPinia({ initialState, createSpy: vi.fn });
+};
diff --git a/tests/unit/stores/appStore.spec.ts b/tests/unit/stores/appStore.spec.ts
new file mode 100644
index 00000000..5f9a6ed3
--- /dev/null
+++ b/tests/unit/stores/appStore.spec.ts
@@ -0,0 +1,26 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { createPinia, setActivePinia } from "pinia";
+import { useAppStore } from "@/stores/appStore";
+
+describe("app store", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  describe("actions", () => {
+    it("initialises correctly", async () => {
+      const store = useAppStore();
+      expect(store.largeScreen).toBe(true);
+      store.initializeAppState();
+      expect(store.largeScreen).toBe(true);
+    });
+
+    it("can update and retrieve the screen size", async () => {
+      const store = useAppStore();
+      const { screenIsLarge } = storeToRefs(store);
+
+      store.setScreenSize(false);
+      expect(screenIsLarge.value).toBe(false);
+    });
+  });
+});
diff --git a/types/storeTypes.ts b/types/storeTypes.ts
new file mode 100644
index 00000000..ed038cc8
--- /dev/null
+++ b/types/storeTypes.ts
@@ -0,0 +1,5 @@
+export interface AppState {
+  // version: VersionData | undefined
+  // metadata: Metadata | undefined
+  largeScreen: boolean
+};

From 782a8db60559bb33ecbaba5a4f59a924a79f6d75 Mon Sep 17 00:00:00 2001
From: David Mears <clarinet.david@gmail.com>
Date: Fri, 6 Sep 2024 01:03:21 +0100
Subject: [PATCH 08/20] Update e2e test

---
 components/SideBar.vue        |  2 +-
 tests/e2e/runAnalysis.spec.ts | 23 +++++++++++------------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/components/SideBar.vue b/components/SideBar.vue
index 1e3b1435..f4a7b91d 100644
--- a/components/SideBar.vue
+++ b/components/SideBar.vue
@@ -6,7 +6,7 @@
     class="sidebar-fixed border-end"
     @hide="handleHide"
   >
-    <CSidebarNav role="navigation">
+    <CSidebarNav role="navigation" data-testid="sidebar">
       <CNavItem>
         <NuxtLink prefetch-on="interaction" to="/scenarios/new" class="nav-link">
           <CIcon icon="cilPlus" size="lg" class="nav-icon" /> New scenario
diff --git a/tests/e2e/runAnalysis.spec.ts b/tests/e2e/runAnalysis.spec.ts
index 789c37ce..a8e3fa45 100644
--- a/tests/e2e/runAnalysis.spec.ts
+++ b/tests/e2e/runAnalysis.spec.ts
@@ -8,6 +8,8 @@ test.beforeAll(async () => {
 test("Can request a scenario analysis run", async ({ page, baseURL }) => {
   await page.goto(`${baseURL}/`);
   await page.waitForURL(`${baseURL}/scenarios/new`);
+
+  await expect(page.getByTestId("sidebar")).toBeInViewport(); // Litmus test for the page having fully loaded
   await expect(page.getByText("Simulate a new scenario")).toBeVisible();
 
   await page.selectOption('select[id="pathogen"]', { label: "Influenza 1957" });
@@ -15,18 +17,15 @@ test("Can request a scenario analysis run", async ({ page, baseURL }) => {
   await page.selectOption('select[id="country"]', { label: "United States" });
   await page.click('div[aria-label="Advance vaccine investment"] label[for="low"]');
 
-  // Get the form element
-  // const form = await page.waitForSelector("form");
-  // const formData = await form.getAttribute("data-test");
-  // const parsedFormData = JSON.parse(formData!);
-  // await waitFor(() => expect(parsedFormData).toEqual({
-  //   pathogen: "influenza-1957",
-  //   response: "elimination",
-  //   country: "United States",
-  //   vaccine: "low",
-  // }));
-
-  await page.waitForTimeout(2000); // waits for 2 seconds
+  const form = await page.waitForSelector("form");
+  const formData = await form.getAttribute("data-test-form-data");
+  const parsedFormData = JSON.parse(formData!);
+  await expect(parsedFormData).toEqual({
+    pathogen: "influenza-1957",
+    response: "elimination",
+    country: "United States",
+    vaccine: "low",
+  });
 
   await page.click('button:has-text("Run")');
 

From f45d8e96831411864d0b2bf8ec028eaff19613c9 Mon Sep 17 00:00:00 2001
From: David Mears <clarinet.david@gmail.com>
Date: Fri, 6 Sep 2024 01:04:43 +0100
Subject: [PATCH 09/20] remove comment

---
 types/storeTypes.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/types/storeTypes.ts b/types/storeTypes.ts
index ed038cc8..0794a58c 100644
--- a/types/storeTypes.ts
+++ b/types/storeTypes.ts
@@ -1,5 +1,3 @@
 export interface AppState {
-  // version: VersionData | undefined
-  // metadata: Metadata | undefined
   largeScreen: boolean
 };

From 12b75811f68a7ef068ce7d3c470b5dc7d8f2d8c2 Mon Sep 17 00:00:00 2001
From: David Mears <clarinet.david@gmail.com>
Date: Fri, 6 Sep 2024 11:29:28 +0100
Subject: [PATCH 10/20] Try to improve playwright test

---
 components/ParameterForm.vue  | 12 ++++++++++--
 playwright.config.ts          |  1 +
 tests/e2e/runAnalysis.spec.ts | 12 ++----------
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/components/ParameterForm.vue b/components/ParameterForm.vue
index 7fd0437d..84afdb1a 100644
--- a/components/ParameterForm.vue
+++ b/components/ParameterForm.vue
@@ -1,8 +1,9 @@
 <template>
-  <div>
+  <div v-show="pageMounted">
     <CForm
       v-if="props.metadata && formData"
       class="inputs"
+      role="form"
       :data-test-form-data="JSON.stringify(formData)"
       :data-test-navigate-to="navigateToData"
       @submit.prevent="submitForm"
@@ -37,6 +38,7 @@
                 autocomplete="off"
                 :label="option.label"
                 :value="option.id"
+                :disabled="!pageMounted"
               />
             </CButtonGroup>
           </CRow>
@@ -51,6 +53,7 @@
             v-model="formData[parameter.id]"
             :aria-label="parameter.label"
             class="form-select" :class="[screenIsLarge ? 'form-select-lg' : '']"
+            :disabled="!pageMounted"
           >
             <option
               v-for="(option) in parameter.options"
@@ -68,7 +71,7 @@
         color="primary"
         :size="screenIsLarge ? 'lg' : undefined"
         type="submit"
-        :disabled="formSubmitting"
+        :disabled="formSubmitting || !pageMounted"
         @click="submitForm"
       >
         Run
@@ -105,6 +108,7 @@ const formData = ref(
 );
 
 const navigateToData = ref("");
+const pageMounted = ref(false);
 
 const optionsAreTerse = (parameter: Parameter) => {
   const eachOptionIsASingleWord = parameter.options.every((option) => {
@@ -146,6 +150,10 @@ const submitForm = async () => {
   };
 };
 
+onMounted(() => {
+  pageMounted.value = true;
+});
+
 const appStore = useAppStore();
 const { screenIsLarge } = storeToRefs(appStore);
 </script>
diff --git a/playwright.config.ts b/playwright.config.ts
index d831a16e..01beb9f5 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -14,6 +14,7 @@ dotenv.config();
  */
 export default defineConfig({
   testDir: "./tests/e2e",
+  timeout: 120000,
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
diff --git a/tests/e2e/runAnalysis.spec.ts b/tests/e2e/runAnalysis.spec.ts
index a8e3fa45..c2bd5e0e 100644
--- a/tests/e2e/runAnalysis.spec.ts
+++ b/tests/e2e/runAnalysis.spec.ts
@@ -9,23 +9,15 @@ test("Can request a scenario analysis run", async ({ page, baseURL }) => {
   await page.goto(`${baseURL}/`);
   await page.waitForURL(`${baseURL}/scenarios/new`);
 
-  await expect(page.getByTestId("sidebar")).toBeInViewport(); // Litmus test for the page having fully loaded
   await expect(page.getByText("Simulate a new scenario")).toBeVisible();
+  await expect(page.getByRole("form")).toBeVisible({ timeout: 30000 });
 
   await page.selectOption('select[id="pathogen"]', { label: "Influenza 1957" });
   await page.selectOption('select[id="response"]', { label: "Elimination" });
   await page.selectOption('select[id="country"]', { label: "United States" });
   await page.click('div[aria-label="Advance vaccine investment"] label[for="low"]');
 
-  const form = await page.waitForSelector("form");
-  const formData = await form.getAttribute("data-test-form-data");
-  const parsedFormData = JSON.parse(formData!);
-  await expect(parsedFormData).toEqual({
-    pathogen: "influenza-1957",
-    response: "elimination",
-    country: "United States",
-    vaccine: "low",
-  });
+  await expect(page.getByRole("form")).toHaveAttribute("data-test-form-data", "{\"country\":\"United States\",\"pathogen\":\"influenza-1957\",\"response\":\"elimination\",\"vaccine\":\"low\"}");
 
   await page.click('button:has-text("Run")');
 

From 8c0c4f56fcabb6216d2935c6cae0a3090e13baaa Mon Sep 17 00:00:00 2001
From: David Mears <clarinet.david@gmail.com>
Date: Tue, 10 Sep 2024 11:26:41 +0100
Subject: [PATCH 11/20] Address PR comments

---
 components/ParameterForm.vue       | 5 ++---
 server/api/API design decisions.md | 3 +++
 server/api/metadata.get.ts         | 1 -
 server/api/scenarios.post.ts       | 1 -
 server/api/versions.get.ts         | 1 -
 server/handlers/scenarios.ts       | 1 -
 stores/appStore.ts                 | 4 ++--
 7 files changed, 7 insertions(+), 9 deletions(-)
 create mode 100644 server/api/API design decisions.md

diff --git a/components/ParameterForm.vue b/components/ParameterForm.vue
index 84afdb1a..02e6b051 100644
--- a/components/ParameterForm.vue
+++ b/components/ParameterForm.vue
@@ -107,6 +107,8 @@ const formData = ref(
   }, {} as { [key: string]: string | number }),
 );
 
+const appStore = useAppStore();
+const { screenIsLarge } = storeToRefs(appStore);
 const navigateToData = ref("");
 const pageMounted = ref(false);
 
@@ -153,9 +155,6 @@ const submitForm = async () => {
 onMounted(() => {
   pageMounted.value = true;
 });
-
-const appStore = useAppStore();
-const { screenIsLarge } = storeToRefs(appStore);
 </script>
 
 <style lang="scss">
diff --git a/server/api/API design decisions.md b/server/api/API design decisions.md
new file mode 100644
index 00000000..96a05654
--- /dev/null
+++ b/server/api/API design decisions.md	
@@ -0,0 +1,3 @@
+# Web app API design decisions
+
+Each endpoint delegates most of its functionality to a 'handler' in order that the effects can be unit tested. This is because seemingly there is no way in Nuxt to directly invoke a endpoint for a unit test, so one has to run up a whole server (a la the integration tests) and it would be difficult to do zoomed in unit tests on small pieces of code unless we provide them as separate utility functions.
diff --git a/server/api/metadata.get.ts b/server/api/metadata.get.ts
index 43f93580..cf7a852a 100644
--- a/server/api/metadata.get.ts
+++ b/server/api/metadata.get.ts
@@ -4,7 +4,6 @@ import type { MetadataResponse } from "@/types/apiResponseTypes";
 
 export default defineRApiEventHandler(
   async (event): Promise<MetadataResponse> => {
-    // Delegate to getMetadata so that the logic can be unit-tested.
     const metadataResponse = await getMetadata(event);
 
     return metadataResponse;
diff --git a/server/api/scenarios.post.ts b/server/api/scenarios.post.ts
index 4734314c..439889b0 100644
--- a/server/api/scenarios.post.ts
+++ b/server/api/scenarios.post.ts
@@ -9,7 +9,6 @@ export default defineRApiEventHandler(
 
     const modelParameters = JSON.parse(query.parameters as string) as ParameterDict;
 
-    // Delegate to runScenario so that the logic can be unit-tested.
     const newScenarioResponse = await runScenario(modelParameters, event);
 
     return newScenarioResponse;
diff --git a/server/api/versions.get.ts b/server/api/versions.get.ts
index d619f983..65e1a87e 100644
--- a/server/api/versions.get.ts
+++ b/server/api/versions.get.ts
@@ -4,7 +4,6 @@ import type { VersionDataResponse } from "@/types/apiResponseTypes";
 
 export default defineRApiEventHandler(
   async (event): Promise<VersionDataResponse> => {
-    // Delegate to getVersionData so that the logic can be unit-tested.
     const versionDataResponse = await getVersionData(event);
 
     return versionDataResponse;
diff --git a/server/handlers/scenarios.ts b/server/handlers/scenarios.ts
index 33865956..9a308765 100644
--- a/server/handlers/scenarios.ts
+++ b/server/handlers/scenarios.ts
@@ -5,7 +5,6 @@ import type { ParameterDict } from "@/types/apiRequestTypes";
 
 const rApiNewScenarioEndpoint = "/scenario/run";
 
-// Send a request to the R API for a job run.
 export const runScenario = async (parameters: ParameterDict, event?: H3Event<EventHandlerRequest>): Promise<NewScenarioResponse> => {
   const response = await fetchRApi<NewScenarioData>( // Since we aren't transforming the R API's response, we can re-use the type interface for the web app's response (NewScenarioData) as the interface for the R API's response.
     rApiNewScenarioEndpoint,
diff --git a/stores/appStore.ts b/stores/appStore.ts
index f469a9d6..255c3d3e 100644
--- a/stores/appStore.ts
+++ b/stores/appStore.ts
@@ -14,8 +14,8 @@ export const useAppStore = defineStore("app", {
     initializeAppState(): void {
       this.largeScreen = true;
     },
-    setScreenSize(bool: boolean): void {
-      this.largeScreen = bool;
+    setScreenSize(large: boolean): void {
+      this.largeScreen = large;
     },
   },
 });

From 0906bca1ee8e187d5731772a8035df998c6e1c4a Mon Sep 17 00:00:00 2001
From: David Mears <clarinet.david@gmail.com>
Date: Tue, 10 Sep 2024 18:09:38 +0100
Subject: [PATCH 12/20] Use body instead of query for req's to run scenario

---
 components/ParameterForm.vue                |  9 ++++--
 server/api/scenarios.post.ts                | 12 +++-----
 server/utils/helpers.ts                     | 16 ++++++++++
 tests/integration/rApi.spec.ts              | 33 +++++++++++++++------
 tests/unit/components/ParameterForm.spec.ts | 10 +++----
 tests/unit/server/utils/helpers.spec.ts     | 28 +++++++++++++++++
 6 files changed, 83 insertions(+), 25 deletions(-)
 create mode 100644 tests/unit/server/utils/helpers.spec.ts

diff --git a/components/ParameterForm.vue b/components/ParameterForm.vue
index 02e6b051..048f8ad6 100644
--- a/components/ParameterForm.vue
+++ b/components/ParameterForm.vue
@@ -135,12 +135,15 @@ const submitForm = async () => {
     return;
   };
 
+  const formDataObject = new FormData();
+  Object.entries(formData.value).forEach(([key, value]) => {
+    formDataObject.append(key, value.toString());
+  });
+
   formSubmitting.value = true;
   const response = await $fetch<NewScenarioData>("/api/scenarios", {
     method: "POST",
-    query: { // Using query instead of body because I couldn't work out how to send a body in the integration test.
-      parameters: formData.value,
-    },
+    body: formDataObject,
   }).catch((error: FetchError) => {
     console.error(error);
   });
diff --git a/server/api/scenarios.post.ts b/server/api/scenarios.post.ts
index 439889b0..a491e804 100644
--- a/server/api/scenarios.post.ts
+++ b/server/api/scenarios.post.ts
@@ -1,16 +1,12 @@
 import { runScenario } from "@/server/handlers/scenarios";
-import { defineRApiEventHandler } from "~/server/utils/defineRApiEventHandler";
+import { defineRApiEventHandler } from "@/server/utils/defineRApiEventHandler";
+import { formDataToObject } from "@/server/utils/helpers";
 import type { NewScenarioResponse } from "@/types/apiResponseTypes";
-import type { ParameterDict } from "@/types/apiRequestTypes";
 
 export default defineRApiEventHandler(
   async (event): Promise<NewScenarioResponse> => {
-    const query = getQuery(event);
-
-    const modelParameters = JSON.parse(query.parameters as string) as ParameterDict;
-
-    const newScenarioResponse = await runScenario(modelParameters, event);
-
+    const formDataBody = await readFormData(event);
+    const newScenarioResponse = await runScenario(formDataToObject(formDataBody), event);
     return newScenarioResponse;
   },
 );
diff --git a/server/utils/helpers.ts b/server/utils/helpers.ts
index 9be3634c..f3b1d811 100644
--- a/server/utils/helpers.ts
+++ b/server/utils/helpers.ts
@@ -6,3 +6,19 @@ export const errorMessage = (errors: Array<ApiError> | null) => {
     return [apiError.error, apiError.detail].join(": ");
   }).join(", ");
 };
+
+// Convert FormData to Object. It is designed to be able to cope with multiselects and checkboxes. https://stackoverflow.com/a/46774073
+export const formDataToObject = (formData: FormData) => {
+  const object: { [key: string]: any } = {};
+  formData.forEach((value, key) => {
+    if (!Reflect.has(object, key)) {
+      object[key] = value;
+      return;
+    }
+    if (!Array.isArray(object[key])) {
+      object[key] = [object[key]];
+    }
+    object[key].push(value);
+  });
+  return object;
+};
diff --git a/tests/integration/rApi.spec.ts b/tests/integration/rApi.spec.ts
index 9230aa81..de0cb48e 100644
--- a/tests/integration/rApi.spec.ts
+++ b/tests/integration/rApi.spec.ts
@@ -123,12 +123,17 @@ describe("endpoints which consume the R API", { sequential: true }, async () =>
 
   // In these tests, Mockoon is configured to check the request body for all the expected parameters (and respond with the
   // appropriate status code etc.), as a way to test that the parameters (and model version) are being passed through all the way
-  // to the R API.
+  // to the R API. This is called a 'rule' in Mockoon, and rules can't be used simultaneously with the 'sequential' setting, so we
+  // instead use the mockoonResponse parameter to tell Mockoon which type of response to send.
   describe("post api/scenarios", async () => {
     it("returns a successful response when the mock server responds successfully", async () => {
-      const queryString = `parameters={"mockoonResponse":"successful","country":"Thailand","pathogen":"sars-cov-1","response":"no_closure","vaccine":"none"}`;
-
-      const response = await nuxtTestUtilsFetch(`/api/scenarios?${queryString}`, { method: "POST" });
+      const formData = new FormData();
+      formData.append("mockoonResponse", "successful");
+      formData.append("country", "Thailand");
+      formData.append("pathogen", "sars-cov-1");
+      formData.append("response", "no_closure");
+      formData.append("vaccine", "none");
+      const response = await nuxtTestUtilsFetch(`/api/scenarios`, { method: "POST", body: formData });
 
       expect(response.ok).toBe(true);
       expect(response.status).toBe(200);
@@ -139,9 +144,14 @@ describe("endpoints which consume the R API", { sequential: true }, async () =>
     });
 
     it("returns a response with informative errors when the mock server responds with an error", async () => {
-      const queryString = `parameters={"mockoonResponse":"notFound","country":"Thailand","pathogen":"sars-cov-1","response":"no_closure","vaccine":"none"}`;
+      const formData = new FormData();
+      formData.append("mockoonResponse", "notFound");
+      formData.append("country", "Thailand");
+      formData.append("pathogen", "sars-cov-1");
+      formData.append("response", "no_closure");
+      formData.append("vaccine", "none");
 
-      const response = await nuxtTestUtilsFetch(`/api/scenarios?${queryString}`, { method: "POST" });
+      const response = await nuxtTestUtilsFetch(`/api/scenarios`, { method: "POST", body: formData });
 
       expect(response.ok).toBe(false);
       expect(response.status).toBe(404);
@@ -153,9 +163,14 @@ describe("endpoints which consume the R API", { sequential: true }, async () =>
     });
 
     it("returns a response with informative errors when the mock server doesn't respond in time", async () => {
-      const queryString = `parameters={"mockoonResponse":"delayed","country":"Thailand","pathogen":"sars-cov-1","response":"no_closure","vaccine":"none"}`;
-
-      const response = await nuxtTestUtilsFetch(`/api/scenarios?${queryString}`, { method: "POST" });
+      const formData = new FormData();
+      formData.append("mockoonResponse", "delayed");
+      formData.append("country", "Thailand");
+      formData.append("pathogen", "sars-cov-1");
+      formData.append("response", "no_closure");
+      formData.append("vaccine", "none");
+
+      const response = await nuxtTestUtilsFetch(`/api/scenarios`, { method: "POST", body: formData });
 
       expect(response.ok).toBe(false);
       expect(response.status).toBe(500);
diff --git a/tests/unit/components/ParameterForm.spec.ts b/tests/unit/components/ParameterForm.spec.ts
index 5faca83d..a9e4048c 100644
--- a/tests/unit/components/ParameterForm.spec.ts
+++ b/tests/unit/components/ParameterForm.spec.ts
@@ -1,8 +1,9 @@
 import { describe, expect, it } from "vitest";
 import { mountSuspended, registerEndpoint } from "@nuxt/test-utils/runtime";
-import { getQuery } from "h3";
 import { FetchError } from "ofetch";
 import { flushPromises } from "@vue/test-utils";
+
+import { formDataToObject } from "@/server/utils/helpers";
 import type { Metadata } from "@/types/apiResponseTypes";
 import ParameterForm from "@/components/ParameterForm.vue";
 
@@ -141,11 +142,10 @@ describe("parameter form", () => {
   it("sends a POST request to /api/scenarios with the form data when submitted", async () => {
     registerEndpoint("/api/scenarios", {
       method: "POST",
-      handler: (event) => {
-        const query = getQuery(event) as Record<string, string>;
-        const modelParams = JSON.parse(query.parameters);
+      async handler(event) {
+        const parameters = formDataToObject(event.node.req.body) as Record<string, string>;
 
-        if (modelParams.long_list === "1" && modelParams.region === "HVN" && modelParams.short_list === "no") {
+        if (parameters.long_list === "1" && parameters.region === "HVN" && parameters.short_list === "no") {
           return { runId: "randomId" };
         } else {
           return { error: "Test failed due to wrong parameters" };
diff --git a/tests/unit/server/utils/helpers.spec.ts b/tests/unit/server/utils/helpers.spec.ts
new file mode 100644
index 00000000..418c3264
--- /dev/null
+++ b/tests/unit/server/utils/helpers.spec.ts
@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+
+import { formDataToObject } from "@/server/utils/helpers";
+
+describe("formDataToObject", () => {
+  it("should convert FormData to an object with correct values, handling single and multiple values for the same key correctly", () => {
+    const formData = new FormData();
+    formData.append("name", "John Doe");
+    formData.append("age", "30");
+    formData.append("hobby", "reading");
+    formData.append("hobby", "coding");
+
+    const expectedObject = {
+      name: "John Doe",
+      age: "30",
+      hobby: ["reading", "coding"],
+    };
+
+    expect(formDataToObject(formData)).toEqual(expectedObject);
+  });
+
+  it("should return an empty object for empty FormData", () => {
+    const formData = new FormData();
+    const expectedObject = {};
+
+    expect(formDataToObject(formData)).toEqual(expectedObject);
+  });
+});

From 0966d2beb580621cf3e0c7d6f6edfc2ee05648e6 Mon Sep 17 00:00:00 2001
From: David Mears <clarinet.david@gmail.com>
Date: Tue, 10 Sep 2024 18:48:13 +0100
Subject: [PATCH 13/20] Temporary change to allow web app to be compatible with
 latest r api

---
 components/ParameterForm.vue | 9 +++++----
 types/apiResponseTypes.ts    | 1 +
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/ParameterForm.vue b/components/ParameterForm.vue
index 048f8ad6..49b7df98 100644
--- a/components/ParameterForm.vue
+++ b/components/ParameterForm.vue
@@ -38,7 +38,6 @@
                 autocomplete="off"
                 :label="option.label"
                 :value="option.id"
-                :disabled="!pageMounted"
               />
             </CButtonGroup>
           </CRow>
@@ -53,7 +52,6 @@
             v-model="formData[parameter.id]"
             :aria-label="parameter.label"
             class="form-select" :class="[screenIsLarge ? 'form-select-lg' : '']"
-            :disabled="!pageMounted"
           >
             <option
               v-for="(option) in parameter.options"
@@ -71,7 +69,7 @@
         color="primary"
         :size="screenIsLarge ? 'lg' : undefined"
         type="submit"
-        :disabled="formSubmitting || !pageMounted"
+        :disabled="formSubmitting"
         @click="submitForm"
       >
         Run
@@ -99,9 +97,12 @@ const props = defineProps<{
   metadataFetchError: FetchError | null
 }>();
 
+// This is only a temporary piece of code, used until we implement numeric inputs.
+const allParametersOfImplementedTypes = computed(() => props.metadata?.parameters.filter(({ parameterType }) => parameterType !== ParameterType.Numeric));
+
 const formData = ref(
   // Create a new object with keys set to the id values of the metadata.parameters array of objects, and all values set to default values.
-  props.metadata?.parameters.reduce((acc, { id, defaultOption, options }) => {
+  allParametersOfImplementedTypes.value?.reduce((acc, { id, defaultOption, options }) => {
     acc[id] = defaultOption || options[0].id;
     return acc;
   }, {} as { [key: string]: string | number }),
diff --git a/types/apiResponseTypes.ts b/types/apiResponseTypes.ts
index 6ea2f153..c6b595ab 100644
--- a/types/apiResponseTypes.ts
+++ b/types/apiResponseTypes.ts
@@ -29,6 +29,7 @@ export interface ParameterOption {
 export enum ParameterType {
   Select = "select",
   GlobeSelect = "globeSelect",
+  Numeric = "numeric",
 }
 export interface Parameter {
   id: string

From 143063c5b4399dfb8df22556febe1654f15e7d93 Mon Sep 17 00:00:00 2001
From: David Mears <clarinet.david@gmail.com>
Date: Tue, 10 Sep 2024 18:59:52 +0100
Subject: [PATCH 14/20] Update e2e test to match latest R API build

---
 playwright.config.ts          | 2 +-
 tests/e2e/runAnalysis.spec.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/playwright.config.ts b/playwright.config.ts
index 01beb9f5..19ab42c7 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -78,7 +78,7 @@ export default defineConfig({
   webServer: {
     command: "npm run build && cd .output && node ./server/index.mjs",
     url: "http://127.0.0.1:3000",
-    timeout: 120 * 1000,
+    timeout: 30 * 1000,
     reuseExistingServer: true,
     stdout: "pipe", // Debugging
   },
diff --git a/tests/e2e/runAnalysis.spec.ts b/tests/e2e/runAnalysis.spec.ts
index c2bd5e0e..55fd70f0 100644
--- a/tests/e2e/runAnalysis.spec.ts
+++ b/tests/e2e/runAnalysis.spec.ts
@@ -10,12 +10,12 @@ test("Can request a scenario analysis run", async ({ page, baseURL }) => {
   await page.waitForURL(`${baseURL}/scenarios/new`);
 
   await expect(page.getByText("Simulate a new scenario")).toBeVisible();
-  await expect(page.getByRole("form")).toBeVisible({ timeout: 30000 });
+  await expect(page.getByRole("form")).toBeVisible();
 
   await page.selectOption('select[id="pathogen"]', { label: "Influenza 1957" });
   await page.selectOption('select[id="response"]', { label: "Elimination" });
   await page.selectOption('select[id="country"]', { label: "United States" });
-  await page.click('div[aria-label="Advance vaccine investment"] label[for="low"]');
+  await page.click('div[aria-label="Global vaccine investment"] label[for="low"]');
 
   await expect(page.getByRole("form")).toHaveAttribute("data-test-form-data", "{\"country\":\"United States\",\"pathogen\":\"influenza-1957\",\"response\":\"elimination\",\"vaccine\":\"low\"}");
 

From fbb2a052f35826231751a3140dd30ef79f53a225 Mon Sep 17 00:00:00 2001
From: David Mears <clarinet.david@gmail.com>
Date: Tue, 10 Sep 2024 23:12:36 +0100
Subject: [PATCH 15/20] Address PR comments

---
 components/ParameterForm.vue                |  8 ++---
 components/SideBar.vue                      |  9 +++---
 layouts/default.vue                         |  5 ++--
 stores/appStore.ts                          | 13 --------
 tests/e2e/runAnalysis.spec.ts               |  2 --
 tests/unit/components/ParameterForm.spec.ts | 33 ---------------------
 tests/unit/stores/appStore.spec.ts          | 10 -------
 7 files changed, 9 insertions(+), 71 deletions(-)

diff --git a/components/ParameterForm.vue b/components/ParameterForm.vue
index 49b7df98..18fec7e7 100644
--- a/components/ParameterForm.vue
+++ b/components/ParameterForm.vue
@@ -4,7 +4,6 @@
       v-if="props.metadata && formData"
       class="inputs"
       role="form"
-      :data-test-form-data="JSON.stringify(formData)"
       :data-test-navigate-to="navigateToData"
       @submit.prevent="submitForm"
     >
@@ -24,7 +23,7 @@
             <CButtonGroup
               role="group"
               :aria-label="parameter.label"
-              :size="screenIsLarge ? 'lg' : undefined"
+              :size="appStore.largeScreen ? 'lg' : undefined"
             >
               <!-- This component's "v-model" prop type signature dictates we can't pass it a number. -->
               <CFormCheck
@@ -51,7 +50,7 @@
             :id="parameter.id"
             v-model="formData[parameter.id]"
             :aria-label="parameter.label"
-            class="form-select" :class="[screenIsLarge ? 'form-select-lg' : '']"
+            class="form-select" :class="[appStore.largeScreen ? 'form-select-lg' : '']"
           >
             <option
               v-for="(option) in parameter.options"
@@ -67,7 +66,7 @@
       <CButton
         id="run-button"
         color="primary"
-        :size="screenIsLarge ? 'lg' : undefined"
+        :size="appStore.largeScreen ? 'lg' : undefined"
         type="submit"
         :disabled="formSubmitting"
         @click="submitForm"
@@ -109,7 +108,6 @@ const formData = ref(
 );
 
 const appStore = useAppStore();
-const { screenIsLarge } = storeToRefs(appStore);
 const navigateToData = ref("");
 const pageMounted = ref(false);
 
diff --git a/components/SideBar.vue b/components/SideBar.vue
index f4a7b91d..90ecd512 100644
--- a/components/SideBar.vue
+++ b/components/SideBar.vue
@@ -1,12 +1,12 @@
 <template>
   <CSidebar
     :visible="visible"
-    :unfoldable="screenIsLarge"
-    :overlaid="screenIsLarge"
+    :unfoldable="appStore.largeScreen"
+    :overlaid="appStore.largeScreen"
     class="sidebar-fixed border-end"
     @hide="handleHide"
   >
-    <CSidebarNav role="navigation" data-testid="sidebar">
+    <CSidebarNav role="navigation">
       <CNavItem>
         <NuxtLink prefetch-on="interaction" to="/scenarios/new" class="nav-link">
           <CIcon icon="cilPlus" size="lg" class="nav-icon" /> New scenario
@@ -72,10 +72,9 @@ const versionTooltipContent = computed(() => {
 const visible = defineModel("visible", { type: Boolean, required: true });
 
 const appStore = useAppStore();
-const { screenIsLarge } = storeToRefs(appStore);
 
 const resetSidebarPerScreenSize = () => {
-  visible.value = screenIsLarge.value;
+  visible.value = appStore.largeScreen;
 };
 
 const hideHasNeverBeenEmitted = ref(true);
diff --git a/layouts/default.vue b/layouts/default.vue
index 5633bd1e..b8322d41 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -25,16 +25,15 @@ function handleToggleSidebarVisibility() {
 }
 
 const appStore = useAppStore(useNuxtApp().$pinia);
-appStore.initializeAppState();
 
 const setScreenSize = () => {
   // As this function uses window, it can only be run client-side, so we have to pass the $pinia instance
   // to the useAppStore function: https://pinia.vuejs.org/ssr/nuxt.html#Awaiting-for-actions-in-pages
   const breakpoint = 992; // CoreUI's "lg" breakpoint
   if (window.innerWidth < breakpoint) {
-    appStore.setScreenSize(false);
+    appStore.largeScreen = false;
   } else {
-    appStore.setScreenSize(true);
+    appStore.largeScreen = true;
   }
 };
 
diff --git a/stores/appStore.ts b/stores/appStore.ts
index 255c3d3e..d53f31f4 100644
--- a/stores/appStore.ts
+++ b/stores/appStore.ts
@@ -5,17 +5,4 @@ export const useAppStore = defineStore("app", {
   state: (): AppState => ({
     largeScreen: true,
   }),
-  getters: {
-    screenIsLarge: (state: AppState): boolean => {
-      return state.largeScreen;
-    },
-  },
-  actions: {
-    initializeAppState(): void {
-      this.largeScreen = true;
-    },
-    setScreenSize(large: boolean): void {
-      this.largeScreen = large;
-    },
-  },
 });
diff --git a/tests/e2e/runAnalysis.spec.ts b/tests/e2e/runAnalysis.spec.ts
index 55fd70f0..d9a77e38 100644
--- a/tests/e2e/runAnalysis.spec.ts
+++ b/tests/e2e/runAnalysis.spec.ts
@@ -17,8 +17,6 @@ test("Can request a scenario analysis run", async ({ page, baseURL }) => {
   await page.selectOption('select[id="country"]', { label: "United States" });
   await page.click('div[aria-label="Global vaccine investment"] label[for="low"]');
 
-  await expect(page.getByRole("form")).toHaveAttribute("data-test-form-data", "{\"country\":\"United States\",\"pathogen\":\"influenza-1957\",\"response\":\"elimination\",\"vaccine\":\"low\"}");
-
   await page.click('button:has-text("Run")');
 
   const dummyRunIdHash = "007e5f5453d64850";
diff --git a/tests/unit/components/ParameterForm.spec.ts b/tests/unit/components/ParameterForm.spec.ts
index a9e4048c..c23cd264 100644
--- a/tests/unit/components/ParameterForm.spec.ts
+++ b/tests/unit/components/ParameterForm.spec.ts
@@ -106,39 +106,6 @@ describe("parameter form", () => {
     ]);
   });
 
-  it("initialises formData with defaults and updates formData when a parameter is changed", async () => {
-    const component = await mountSuspended(ParameterForm, {
-      props: { metadata, metadataFetchStatus: "success", metadataFetchError: null },
-      global: { stubs },
-    });
-
-    const cForm = component.findComponent({ name: "CForm" });
-    let formData = JSON.parse(cForm.element.attributes.getNamedItem("data-test-form-data")!.value);
-    expect(formData.region).toBe("HVN");
-    expect(formData.long_list).toBe("1");
-    expect(formData.short_list).toBe("no");
-
-    const selectElements = component.findAll("select");
-    const longListDropDown = selectElements[0];
-    const countrySelect = selectElements[1];
-
-    // Verify that the select elements are the ones we think they are
-    selectElements.forEach((selectElement, index) => {
-      const correctLabel = ["Drop Down", "Region"][index];
-      const paramId = selectElement.element.attributes.getNamedItem("id")!.value;
-      expect(component.find(`label[for=${paramId}]`).element.textContent).toBe(correctLabel);
-    });
-
-    await longListDropDown.findAll("option").at(2)!.setSelected();
-    await countrySelect.findAll("option").at(0)!.setSelected();
-    await component.findComponent({ name: "CButtonGroup" }).find("input[value='yes']").setChecked();
-
-    formData = JSON.parse(cForm.element.attributes.getNamedItem("data-test-form-data")!.value);
-    expect(formData.region).toBe("CLD");
-    expect(formData.long_list).toBe("3");
-    expect(formData.short_list).toBe("yes");
-  });
-
   it("sends a POST request to /api/scenarios with the form data when submitted", async () => {
     registerEndpoint("/api/scenarios", {
       method: "POST",
diff --git a/tests/unit/stores/appStore.spec.ts b/tests/unit/stores/appStore.spec.ts
index 5f9a6ed3..f6716b2e 100644
--- a/tests/unit/stores/appStore.spec.ts
+++ b/tests/unit/stores/appStore.spec.ts
@@ -11,16 +11,6 @@ describe("app store", () => {
     it("initialises correctly", async () => {
       const store = useAppStore();
       expect(store.largeScreen).toBe(true);
-      store.initializeAppState();
-      expect(store.largeScreen).toBe(true);
-    });
-
-    it("can update and retrieve the screen size", async () => {
-      const store = useAppStore();
-      const { screenIsLarge } = storeToRefs(store);
-
-      store.setScreenSize(false);
-      expect(screenIsLarge.value).toBe(false);
     });
   });
 });

From 2a039209336a6b6a793eac8489f53beab8fea5bc Mon Sep 17 00:00:00 2001
From: David Mears <clarinet.david@gmail.com>
Date: Thu, 12 Sep 2024 11:54:46 +0100
Subject: [PATCH 16/20] Use JSON data for request bodies instead of FormData

---
 components/ParameterForm.vue                | 11 ++-----
 server/api/scenarios.post.ts                |  6 ++--
 tests/integration/rApi.spec.ts              | 36 ++++++++-------------
 tests/unit/components/ParameterForm.spec.ts | 13 +++++---
 4 files changed, 28 insertions(+), 38 deletions(-)

diff --git a/components/ParameterForm.vue b/components/ParameterForm.vue
index 18fec7e7..c9024e65 100644
--- a/components/ParameterForm.vue
+++ b/components/ParameterForm.vue
@@ -68,11 +68,11 @@
         color="primary"
         :size="appStore.largeScreen ? 'lg' : undefined"
         type="submit"
-        :disabled="formSubmitting"
+        :disabled="formSubmitting || props.metadataFetchStatus === 'error'"
         @click="submitForm"
       >
         Run
-        <CSpinner v-if="formSubmitting" size="sm" class="ms-1" />
+        <CSpinner v-if="formSubmitting && props.metadataFetchStatus !== 'error'" size="sm" class="ms-1" />
         <CIcon v-else icon="cilArrowRight" />
       </CButton>
     </CForm>
@@ -134,15 +134,10 @@ const submitForm = async () => {
     return;
   };
 
-  const formDataObject = new FormData();
-  Object.entries(formData.value).forEach(([key, value]) => {
-    formDataObject.append(key, value.toString());
-  });
-
   formSubmitting.value = true;
   const response = await $fetch<NewScenarioData>("/api/scenarios", {
     method: "POST",
-    body: formDataObject,
+    body: { parameters: formData.value },
   }).catch((error: FetchError) => {
     console.error(error);
   });
diff --git a/server/api/scenarios.post.ts b/server/api/scenarios.post.ts
index a491e804..9a443917 100644
--- a/server/api/scenarios.post.ts
+++ b/server/api/scenarios.post.ts
@@ -1,12 +1,12 @@
 import { runScenario } from "@/server/handlers/scenarios";
 import { defineRApiEventHandler } from "@/server/utils/defineRApiEventHandler";
-import { formDataToObject } from "@/server/utils/helpers";
 import type { NewScenarioResponse } from "@/types/apiResponseTypes";
 
 export default defineRApiEventHandler(
   async (event): Promise<NewScenarioResponse> => {
-    const formDataBody = await readFormData(event);
-    const newScenarioResponse = await runScenario(formDataToObject(formDataBody), event);
+    const body = await readBody(event);
+    const parameters = typeof body === "object" ? body.parameters : JSON.parse(body).parameters; // Comes through as a string in the integration tests.
+    const newScenarioResponse = await runScenario(parameters, event);
     return newScenarioResponse;
   },
 );
diff --git a/tests/integration/rApi.spec.ts b/tests/integration/rApi.spec.ts
index de0cb48e..b7bf1564 100644
--- a/tests/integration/rApi.spec.ts
+++ b/tests/integration/rApi.spec.ts
@@ -127,13 +127,11 @@ describe("endpoints which consume the R API", { sequential: true }, async () =>
   // instead use the mockoonResponse parameter to tell Mockoon which type of response to send.
   describe("post api/scenarios", async () => {
     it("returns a successful response when the mock server responds successfully", async () => {
-      const formData = new FormData();
-      formData.append("mockoonResponse", "successful");
-      formData.append("country", "Thailand");
-      formData.append("pathogen", "sars-cov-1");
-      formData.append("response", "no_closure");
-      formData.append("vaccine", "none");
-      const response = await nuxtTestUtilsFetch(`/api/scenarios`, { method: "POST", body: formData });
+      const body = JSON.stringify(
+        { parameters: { mockoonResponse: "successful", country: "Thailand", pathogen: "sars-cov-1", response: "no_closure", vaccine: "none" } },
+      );
+
+      const response = await nuxtTestUtilsFetch(`/api/scenarios`, { method: "POST", body });
 
       expect(response.ok).toBe(true);
       expect(response.status).toBe(200);
@@ -144,14 +142,11 @@ describe("endpoints which consume the R API", { sequential: true }, async () =>
     });
 
     it("returns a response with informative errors when the mock server responds with an error", async () => {
-      const formData = new FormData();
-      formData.append("mockoonResponse", "notFound");
-      formData.append("country", "Thailand");
-      formData.append("pathogen", "sars-cov-1");
-      formData.append("response", "no_closure");
-      formData.append("vaccine", "none");
+      const body = JSON.stringify(
+        { parameters: { mockoonResponse: "notFound", country: "Thailand", pathogen: "sars-cov-1", response: "no_closure", vaccine: "none" } },
+      );
 
-      const response = await nuxtTestUtilsFetch(`/api/scenarios`, { method: "POST", body: formData });
+      const response = await nuxtTestUtilsFetch(`/api/scenarios`, { method: "POST", body });
 
       expect(response.ok).toBe(false);
       expect(response.status).toBe(404);
@@ -163,14 +158,11 @@ describe("endpoints which consume the R API", { sequential: true }, async () =>
     });
 
     it("returns a response with informative errors when the mock server doesn't respond in time", async () => {
-      const formData = new FormData();
-      formData.append("mockoonResponse", "delayed");
-      formData.append("country", "Thailand");
-      formData.append("pathogen", "sars-cov-1");
-      formData.append("response", "no_closure");
-      formData.append("vaccine", "none");
-
-      const response = await nuxtTestUtilsFetch(`/api/scenarios`, { method: "POST", body: formData });
+      const body = JSON.stringify(
+        { parameters: { mockoonResponse: "delayed", country: "Thailand", pathogen: "sars-cov-1", response: "no_closure", vaccine: "none" } },
+      );
+
+      const response = await nuxtTestUtilsFetch(`/api/scenarios`, { method: "POST", body });
 
       expect(response.ok).toBe(false);
       expect(response.status).toBe(500);
diff --git a/tests/unit/components/ParameterForm.spec.ts b/tests/unit/components/ParameterForm.spec.ts
index c23cd264..fd302544 100644
--- a/tests/unit/components/ParameterForm.spec.ts
+++ b/tests/unit/components/ParameterForm.spec.ts
@@ -1,9 +1,10 @@
 import { describe, expect, it } from "vitest";
 import { mountSuspended, registerEndpoint } from "@nuxt/test-utils/runtime";
 import { FetchError } from "ofetch";
+import { readBody } from "h3";
 import { flushPromises } from "@vue/test-utils";
+import { waitFor } from "@testing-library/vue";
 
-import { formDataToObject } from "@/server/utils/helpers";
 import type { Metadata } from "@/types/apiResponseTypes";
 import ParameterForm from "@/components/ParameterForm.vue";
 
@@ -110,7 +111,7 @@ describe("parameter form", () => {
     registerEndpoint("/api/scenarios", {
       method: "POST",
       async handler(event) {
-        const parameters = formDataToObject(event.node.req.body) as Record<string, string>;
+        const { parameters } = await readBody(event);
 
         if (parameters.long_list === "1" && parameters.region === "HVN" && parameters.short_list === "no") {
           return { runId: "randomId" };
@@ -134,9 +135,11 @@ describe("parameter form", () => {
     // 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" });
-    expect(
-      cForm.element.attributes.getNamedItem("data-test-navigate-to")!.value,
-    ).toBe("/scenarios/randomId");
+    await waitFor(() => {
+      expect(
+        cForm.element.attributes.getNamedItem("data-test-navigate-to")!.value,
+      ).toBe("/scenarios/randomId");
+    });
   });
 
   it("displays CAlert with error message when metadataFetchStatus is 'error'", async () => {

From 67ba34d18e300b38a36cce9c048a9bb29ac4439b Mon Sep 17 00:00:00 2001
From: Mantra <mantrakusumgar@outlook.com>
Date: Thu, 12 Sep 2024 16:42:42 +0100
Subject: [PATCH 17/20] fix integration tests

---
 server/api/scenarios.post.ts   |  2 +-
 tests/integration/rApi.spec.ts | 13 +++++++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/server/api/scenarios.post.ts b/server/api/scenarios.post.ts
index 9a443917..e7297dfa 100644
--- a/server/api/scenarios.post.ts
+++ b/server/api/scenarios.post.ts
@@ -5,7 +5,7 @@ import type { NewScenarioResponse } from "@/types/apiResponseTypes";
 export default defineRApiEventHandler(
   async (event): Promise<NewScenarioResponse> => {
     const body = await readBody(event);
-    const parameters = typeof body === "object" ? body.parameters : JSON.parse(body).parameters; // Comes through as a string in the integration tests.
+    const parameters = body.parameters;
     const newScenarioResponse = await runScenario(parameters, event);
     return newScenarioResponse;
   },
diff --git a/tests/integration/rApi.spec.ts b/tests/integration/rApi.spec.ts
index b7bf1564..902bcc75 100644
--- a/tests/integration/rApi.spec.ts
+++ b/tests/integration/rApi.spec.ts
@@ -127,11 +127,13 @@ describe("endpoints which consume the R API", { sequential: true }, async () =>
   // instead use the mockoonResponse parameter to tell Mockoon which type of response to send.
   describe("post api/scenarios", async () => {
     it("returns a successful response when the mock server responds successfully", async () => {
+      const headers = new Headers();
+      headers.append("content-type", "application/json");
       const body = JSON.stringify(
         { parameters: { mockoonResponse: "successful", country: "Thailand", pathogen: "sars-cov-1", response: "no_closure", vaccine: "none" } },
       );
 
-      const response = await nuxtTestUtilsFetch(`/api/scenarios`, { method: "POST", body });
+      const response = await nuxtTestUtilsFetch(`/api/scenarios`, { method: "POST", body, headers });
 
       expect(response.ok).toBe(true);
       expect(response.status).toBe(200);
@@ -142,11 +144,12 @@ describe("endpoints which consume the R API", { sequential: true }, async () =>
     });
 
     it("returns a response with informative errors when the mock server responds with an error", async () => {
+      const headers = new Headers();
+      headers.append("content-type", "application/json");
       const body = JSON.stringify(
         { parameters: { mockoonResponse: "notFound", country: "Thailand", pathogen: "sars-cov-1", response: "no_closure", vaccine: "none" } },
       );
-
-      const response = await nuxtTestUtilsFetch(`/api/scenarios`, { method: "POST", body });
+      const response = await nuxtTestUtilsFetch(`/api/scenarios`, { method: "POST", body, headers });
 
       expect(response.ok).toBe(false);
       expect(response.status).toBe(404);
@@ -158,11 +161,13 @@ describe("endpoints which consume the R API", { sequential: true }, async () =>
     });
 
     it("returns a response with informative errors when the mock server doesn't respond in time", async () => {
+      const headers = new Headers();
+      headers.append("content-type", "application/json");
       const body = JSON.stringify(
         { parameters: { mockoonResponse: "delayed", country: "Thailand", pathogen: "sars-cov-1", response: "no_closure", vaccine: "none" } },
       );
 
-      const response = await nuxtTestUtilsFetch(`/api/scenarios`, { method: "POST", body });
+      const response = await nuxtTestUtilsFetch(`/api/scenarios`, { method: "POST", body, headers });
 
       expect(response.ok).toBe(false);
       expect(response.status).toBe(500);

From fbc712e0051958146226864bdba1e72e2ca6db86 Mon Sep 17 00:00:00 2001
From: Emma <EmmaRussellKilburn@gmail.com>
Date: Fri, 13 Sep 2024 12:22:34 +0100
Subject: [PATCH 18/20] test changes

---
 components/ParameterForm.vue                |  7 ++---
 tests/unit/components/ParameterForm.spec.ts | 29 ++++++++++++---------
 2 files changed, 18 insertions(+), 18 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..6fa7b49d 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 { flushPromises, mount } from "@vue/test-utils";
 
 import type { Metadata } from "@/types/apiResponseTypes";
 import ParameterForm from "@/components/ParameterForm.vue";
@@ -55,7 +54,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 { mockNavigateTo } = vi.hoisted(() => ({
+  mockNavigateTo: vi.fn(),
+}));
+mockNuxtImport("navigateTo", () => mockNavigateTo);
+
 describe("parameter form", () => {
+  beforeEach(() => {
+    // mockNavigateTo.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 +130,7 @@ describe("parameter form", () => {
       },
     });
 
-    const component = await mountSuspended(ParameterForm, {
+    const component = mount(ParameterForm, {
       props: { metadata, metadataFetchStatus: "success", metadataFetchError: null },
       global: { stubs },
     });
@@ -132,14 +141,8 @@ 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(mockNavigateTo).toHaveBeenCalledTimes(1);
+    // expect(mockNavigateTo).toBeCalledWith("/scenarios/randomId");
   });
 
   it("displays CAlert with error message when metadataFetchStatus is 'error'", async () => {

From 93ca1202b72bf2200dcfa9edf7540e93ce54aca4 Mon Sep 17 00:00:00 2001
From: Emma <EmmaRussellKilburn@gmail.com>
Date: Fri, 13 Sep 2024 13:43:18 +0100
Subject: [PATCH 19/20] parse body in test

---
 tests/unit/components/ParameterForm.spec.ts | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/tests/unit/components/ParameterForm.spec.ts b/tests/unit/components/ParameterForm.spec.ts
index 6fa7b49d..96b0523f 100644
--- a/tests/unit/components/ParameterForm.spec.ts
+++ b/tests/unit/components/ParameterForm.spec.ts
@@ -1,8 +1,7 @@
 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, mount } from "@vue/test-utils";
+import { flushPromises } from "@vue/test-utils";
 
 import type { Metadata } from "@/types/apiResponseTypes";
 import ParameterForm from "@/components/ParameterForm.vue";
@@ -62,7 +61,7 @@ mockNuxtImport("navigateTo", () => mockNavigateTo);
 
 describe("parameter form", () => {
   beforeEach(() => {
-    // mockNavigateTo.mockReset();
+    mockNavigateTo.mockReset();
   });
 
   it("renders the correct parameter labels, inputs, options, and default values", async () => {
@@ -120,7 +119,8 @@ describe("parameter form", () => {
     registerEndpoint("/api/scenarios", {
       method: "POST",
       async handler(event) {
-        const { parameters } = await readBody(event);
+        const body = JSON.parse(event.node.req.body);
+        const parameters = body.parameters;
 
         if (parameters.long_list === "1" && parameters.region === "HVN" && parameters.short_list === "no") {
           return { runId: "randomId" };
@@ -130,7 +130,7 @@ describe("parameter form", () => {
       },
     });
 
-    const component = mount(ParameterForm, {
+    const component = await mountSuspended(ParameterForm, {
       props: { metadata, metadataFetchStatus: "success", metadataFetchError: null },
       global: { stubs },
     });
@@ -141,8 +141,7 @@ describe("parameter form", () => {
     expect(buttonEl.attributes("disabled")).toBe("");
 
     await flushPromises();
-    expect(mockNavigateTo).toHaveBeenCalledTimes(1);
-    // expect(mockNavigateTo).toBeCalledWith("/scenarios/randomId");
+    expect(mockNavigateTo).toBeCalledWith("/scenarios/randomId");
   });
 
   it("displays CAlert with error message when metadataFetchStatus is 'error'", async () => {

From 3e4358353a84d3cbc6ab55bebb337b57a455a40d Mon Sep 17 00:00:00 2001
From: David Mears <clarinet.david@gmail.com>
Date: Fri, 13 Sep 2024 16:34:02 +0100
Subject: [PATCH 20/20] Update e2e test to use real test run ids

---
 tests/e2e/runAnalysis.spec.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/tests/e2e/runAnalysis.spec.ts b/tests/e2e/runAnalysis.spec.ts
index 8662579d..c7dd6cd4 100644
--- a/tests/e2e/runAnalysis.spec.ts
+++ b/tests/e2e/runAnalysis.spec.ts
@@ -19,9 +19,8 @@ test("Can request a scenario analysis run", async ({ page, baseURL }) => {
 
   await page.click('button:has-text("Run")');
 
-  const dummyRunIdHash = "007e5f5453d64850";
-  await page.waitForURL(`${baseURL}/scenarios/${dummyRunIdHash}`);
-  await expect(page.url()).toBe(`${baseURL}/scenarios/${dummyRunIdHash}`);
+  await page.waitForURL(new RegExp(`${baseURL}/scenarios/[a-f0-9]{32}`));
+  expect(page.url()).toMatch(new RegExp(`${baseURL}/scenarios/[a-f0-9]{32}`));
 
   // TODO: Continue writing test
   // await expect(page.getByText("Simulate a new scenario")).not.toBeVisible();