Improvements to driver cleanup

- Better synchronization: The driver now waits for Vue's reactivity system at critical points
- Race condition prevention: Proper cleanup prevents multiple apps from interfering with each other
- Robust error handling: Tests clean up properly even when they fail
- Vue-aware timing: The driver now respects Vue's async nature and component lifecycle

Author: johnsimons

src/Frontend/test/driver.ts

@@ -1,7 +1,7 @@
 import { DefaultBodyType, StrictRequest, type PathParams } from "msw";
 
 type GoTo = (path: string) => Promise<void>;
-type DisposeApp = () => void;
+type DisposeApp = () => Promise<void>;
 
 export type Method = "get" | "post" | "patch" | "put" | "delete" | "options";
 

src/Frontend/test/drivers/vitest/driver.ts

@@ -4,34 +4,74 @@ import { mount } from "@/mount";
 import makeRouter from "../../../src/router";
 import { mockEndpoint, mockEndpointDynamic } from "../../utils";
 import { mockServer } from "../../mock-server";
-import { App } from "vue";
+import { App, nextTick } from "vue";
+
+// Utility function to wait for Vue's reactivity system to settle
+async function waitForVue() {
+  // Wait for Vue's nextTick to ensure reactive updates are complete
+  await nextTick();
+  // Additional wait for any pending async operations
+  await new Promise((resolve) => setTimeout(resolve, 0));
+}
 
 function makeDriver() {
-  let app: App<Element>;
+  let app: App<Element> | null = null;
   const driver = <Driver>{
     async goTo(path) {
       const router = makeRouter();
+
+      // First, clean up any existing app to prevent race conditions
+      if (app) {
+        try {
+          app.unmount();
+          await waitForVue();
+        } catch {
+          // Ignore unmount errors
+        }
+      }
+
       try {
         await router.push(path);
       } catch (error) {
         // Ignore redirection error.
         if (error instanceof Error && error.message.includes("Redirected when going from")) {
-          return;
+          // Still need to continue with mounting even after redirect
+        } else {
+          throw error;
         }
-
-        throw error;
       }
 
+      // Clean and prepare DOM
       document.body.innerHTML = '<div id="app"></div><div id="modalDisplay"></div>';
+
+      // Mount the Vue app
       app = mount({ router });
+
+      // Wait for Vue to fully initialize and mount
+      await waitForVue();
+
+      // Wait for router to be ready and any initial navigation to complete
+      await router.isReady();
+
+      // Additional wait for component mounting and initial renders
+      await waitForVue();
     },
     mockEndpoint,
     mockEndpointDynamic: mockEndpointDynamic,
     setUp(factory) {
       return factory({ driver: this });
     },
-    disposeApp() {
-      app.unmount();
+    async disposeApp() {
+      if (app) {
+        try {
+          app.unmount();
+          await waitForVue();
+        } catch (error) {
+          // Ignore unmount errors
+          console.warn("Error during app disposal:", error);
+        }
+        app = null;
+      }
     },
   };
   return driver;
@@ -44,11 +84,17 @@ const test = itVitest.extend<{ driver: Driver }>({
     mockServer.resetHandlers();
 
     const driver = makeDriver();
-    //run the test
-    await use(driver);
 
-    //unmount the app after the test runs
-    driver.disposeApp();
+    try {
+      //run the test
+      await use(driver);
+    } finally {
+      //unmount the app after the test runs (even if test fails)
+      await driver.disposeApp();
+
+      // Additional cleanup: wait for any pending Vue operations
+      await waitForVue();
+    }
   },
 });