Make run button functional

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
@@ -38,7 +37,6 @@
                 autocomplete="off"
                 :label="option.label"
                 :value="option.id"
-                :disabled="!pageMounted"
               />
             </CButtonGroup>
           </CRow>
@@ -52,8 +50,7 @@
             :id="parameter.id"
             v-model="formData[parameter.id]"
             :aria-label="parameter.label"
-            class="form-select" :class="[screenIsLarge ? 'form-select-lg' : '']"
-            :disabled="!pageMounted"
+            class="form-select" :class="[appStore.largeScreen ? 'form-select-lg' : '']"
           >
             <option
               v-for="(option) in parameter.options"
@@ -69,9 +66,9 @@
       <CButton
         id="run-button"
         color="primary"
-        :size="screenIsLarge ? 'lg' : undefined"
+        :size="appStore.largeScreen ? 'lg' : undefined"
         type="submit"
-        :disabled="formSubmitting || !pageMounted"
+        :disabled="formSubmitting"
         @click="submitForm"
       >
         Run
@@ -99,16 +96,18 @@
   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 }),
 );
 
 const appStore = useAppStore();
-const { screenIsLarge } = storeToRefs(appStore);
 const navigateToData = ref("");
 const pageMounted = ref(false);
 
@@ -135,12 +134,15 @@
     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);
   });
@@ -153,7 +155,7 @@
 };
 
 onMounted(() => {
   pageMounted.value = true;
 });
 </script>
 

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);

layouts/default.vue

@@ -25,21 +25,20 @@
 }
 
 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;
   }
 };
 
 onMounted(() => {
   setScreenSize();
   window.addEventListener("resize", setScreenSize);
 });
 onBeforeUnmount(() => {

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
   },

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;
   },
 );

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;
+};

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;
-    },
-  },
 });

tests/e2e/runAnalysis.spec.ts

@@ -10,14 +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 expect(page.getByRole("form")).toHaveAttribute("data-test-form-data", "{\"country\":\"United States\",\"pathogen\":\"influenza-1957\",\"response\":\"elimination\",\"vaccine\":\"low\"}");
+  await page.click('div[aria-label="Global vaccine investment"] label[for="low"]');
 
   await page.click('button:has-text("Run")');
 

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);

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";
 
@@ -105,47 +106,13 @@ 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",
-      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" };

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);
+  });
+});

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);
     });
   });
 });

types/apiResponseTypes.ts

@@ -29,6 +29,7 @@ export interface ParameterOption {
 export enum ParameterType {
   Select = "select",
   GlobeSelect = "globeSelect",
+  Numeric = "numeric",
 }
 export interface Parameter {
   id: string