From 9f0e7164809d7686d3764457c57b05374b448937 Mon Sep 17 00:00:00 2001
From: David Mears <clarinet.david@gmail.com>
Date: Wed, 31 Jul 2024 11:21:43 +0100
Subject: [PATCH] wip, I was mid-way through adapting the code to allow mocking
 for tests

---
 composables/utils/useRApi.ts     | 10 +++++----
 nuxt.config.ts                   | 13 +++++++++++
 tests/components/SideBar.spec.ts | 38 ++++++++++++++++++++++++++++++--
 3 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/composables/utils/useRApi.ts b/composables/utils/useRApi.ts
index ba7a1c2c..dc5de555 100644
--- a/composables/utils/useRApi.ts
+++ b/composables/utils/useRApi.ts
@@ -1,5 +1,3 @@
-const rApiAddress = "http://localhost:8001";
-
 interface RApiError {
   error: string
   detail: string
@@ -14,12 +12,16 @@ export interface RApiResponse {
 // NB 'refresh' cannot yet be used since it would be called in the browser and
 // thus run up against CORS restrictions. CORS also prevents hot module reloading, currently.
 export function useRApi<T extends RApiResponse>(endpoint: string) {
-  const url = rApiAddress + endpoint;
+  const config = useRuntimeConfig(); // Must be called from inside the composable function. https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables
+  const url = `${config.public.rApiBase}${endpoint}`;
 
-  const { data, error, status: fetchStatus, refresh } = useFetch<T>(url);
+  const { data, error, status: fetchStatus, refresh } = useFetch<T>(url, { immediate: false },
+  );
 
   const responseData = computed(() => data.value as T | null);
 
+  // return values 'responseData', 'fetchStatus', and 'error' are ComputedRefs.
+  // 'refresh' is a Promise.
   return {
     responseData, // This is the response data, not the value of the 'data' key in the response data.
     fetchStatus, // This is the status of the fetch request (e.g. pending), not the value of the 'status' part of the response data.
diff --git a/nuxt.config.ts b/nuxt.config.ts
index c54e53d5..b10337de 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -41,4 +41,17 @@ export default defineNuxtConfig({
     },
   },
 
+  runtimeConfig: {
+    public: { // TODO: CHeck comment below is true.
+      rApiBase: "http://localhost:8001", // Automatically overridden if NUXT_PUBLIC_R_API_BASE is set as an environment variable
+    },
+  },
+
+  $test: {
+    runtimeConfig: {
+      public: {
+        rApiBase: "", // https://nuxt.com/docs/getting-started/testing#registerendpoint
+      },
+    },
+  },
 });
diff --git a/tests/components/SideBar.spec.ts b/tests/components/SideBar.spec.ts
index 21dba4ac..320ae28b 100644
--- a/tests/components/SideBar.spec.ts
+++ b/tests/components/SideBar.spec.ts
@@ -1,7 +1,7 @@
 // @vitest-environment nuxt
 
 import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
-import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { mountSuspended, registerEndpoint } from "@nuxt/test-utils/runtime";
 import type { VueWrapper } from "@vue/test-utils";
 
 import SideBar from "@/components/SideBar.vue";
@@ -15,12 +15,22 @@ async function mockCSidebarPageloadBehavior(coreuiSidebar: VueWrapper) {
   coreuiSidebar.vm.$emit("hide");
 }
 
+registerEndpoint("/", () => {
+  return {
+    "daedalus": "99.99.99",
+    "daedalus.api": "99.99.99",
+  };
+});
+
 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, { global: { stubs } });
+    const component = await mountSuspended(SideBar, {
+      props: { visible: false },
+      global: { stubs },
+    });
     expect(addEventListenerSpy).toHaveBeenCalledWith("resize", expect.any(Function));
 
     component.unmount();
@@ -53,6 +63,30 @@ describe("sidebar", () => {
         expect(coreuiSidebar.props("unfoldable")).toBe(false);
       });
 
+      it("includes information about the version numbers", async () => {
+        const component = await mountSuspended(SideBar, {
+          props: { visible: false },
+          global: { stubs },
+        });
+
+        const coreuiSidebar = component.findComponent({ name: "CSidebar" });
+        await mockCSidebarPageloadBehavior(coreuiSidebar);
+
+        await component.setProps({ visible: true });
+
+        const versionElement = component.find(`[title="Loading version data..."]`);
+        expect(versionElement.exists()).toBe(true);
+
+        // Wait for the version data to load
+        await component.vm.$nextTick();
+
+        // Find element with a title attribute containing a version number.
+        const expectedVersionInfo = "Version 99.99.99";
+        const versionElementWithMoreData = component.find(`[title="${expectedVersionInfo}"]`);
+
+        expect(versionElementWithMoreData.exists()).toBe(true);
+      });
+
       afterAll(() => {
         vi.unstubAllGlobals();
       });