add unit test for fetchVipMetadataInformation method

Author: Salipa-Gurung

src/App.vue

@@ -222,19 +222,16 @@ export default defineComponent({
     }
   },
   // vue js lifecylce functions
-  async created() {
-    // get resource, ensure resource url is not empty!
-    if (this.url != null && this.url != undefined && this.url != '') {
-      this.dicomUrl = await this.addWadouriPrefix(this.url)
-    }
-
-    // get vip metadata
-    await this.fetchVipMetadataInformation(await this.addWadouriPrefix(this.url))
 
-    // prefetch all other metadata (in separate function for performance reasons)
-    await this.fetchMetadataInformation(await this.addWadouriPrefix(this.url))
-  },
   async mounted() {
+    if (this.url) {
+      this.dicomUrl = await this.addWadouriPrefix(this.url)
+      // get vip metadata
+      await this.fetchVipMetadataInformation(this.dicomUrl)
+
+      // prefetch all other metadata (in separate function for performance reasons)
+      await this.fetchMetadataInformation(this.dicomUrl)
+    }
     // check if cornerstone core is initialized
     if (!cornerstone.isCornerstoneInitialized()) {
       await this.initCornerstoneCore()
@@ -268,11 +265,9 @@ export default defineComponent({
     this.viewport = <Types.IStackViewport>this.renderingEngine.getViewport(viewportId)
 
     // add resource to stack, ensure resource url is not empty!
-    if (this.url != null && this.url != undefined && this.url != '') {
-      let dicomResourceUrl = await this.addWadouriPrefix(this.url)
-
+    if (this.dicomUrl) {
       // define a stack containing a single image
-      const dicomStack = [dicomResourceUrl]
+      const dicomStack = [this.dicomUrl]
 
       // set stack on the viewport (currently only one image in the stack, therefore no frame # required)
       await this.viewport.setStack(dicomStack)
@@ -282,7 +277,7 @@ export default defineComponent({
       this.setViewportCameraParallelScaleFactor()
 
       // getting image metadata from viewport
-      this.getImageMetadataFromViewport(dicomResourceUrl)
+      this.getImageMetadataFromViewport(this.dicomUrl)
     }
   },
   updated() {
@@ -297,6 +292,7 @@ export default defineComponent({
     this.isImageMetadataExtractedFromViewport = false
     this.isDicomImageDataFetched = false
   },
+
   methods: {
     async initCornerstoneCore() {
       try {
@@ -312,11 +308,9 @@ export default defineComponent({
 
       if (!this.isDicomImageDataFetched) {
         this.dicomImageData = await fetchDicomImageData(imageId)
-        if (!this.isDicomImageDataFetched) {
           if (this.dicomImageData != null){
             this.isDicomImageDataFetched = true
           }
-        }
       }
 
       this.vipInformation.patientName = this.dicomImageData.string(findDicomTagByValue('patientName'))

tests/unit/App.spec.ts

@@ -1,4 +1,4 @@
-import { shallowMount } from "@vue/test-utils";
+import { shallowMount, flushPromises } from "@vue/test-utils";
 import App from "../../src/App.vue";
 import { vi } from "vitest";
 import { defaultPlugins } from "../../src/helper/defaultPlugins";
@@ -21,6 +21,12 @@ vi.mock("@cornerstonejs/core", () => {
         return {
           setStack: vi.fn(),
           render: vi.fn(),
+          getCamera: vi.fn().mockImplementation(() => {
+            return { parallelScale: 137.3853139193763 };
+          }),
+          getImageData: vi.fn().mockImplementation(() => {
+            return { dimensions: [] };
+          }),
         };
       }
       enableElement() {}
@@ -60,16 +66,45 @@ vi.mock("dicom-parser", () => ({
 }));
 
 describe("App component", () => {
+  const spyFetchVipMetadataInformation = vi
+    .spyOn(App.methods, "fetchVipMetadataInformation")
+    .mockImplementation(vi.fn());
+  const spyFetchMetadataInformation = vi
+    .spyOn(App.methods, "fetchMetadataInformation")
+    .mockImplementation(vi.fn());
+  const spyAddWadouriPrefix = vi
+    .spyOn(App.methods, "addWadouriPrefix")
+    .mockImplementation(vi.fn());
+  const spyInitCornerstoneCore = vi
+    .spyOn(App.methods, "initCornerstoneCore")
+    .mockImplementation(vi.fn());
+
+  it("should not fetch overlay metadata when the url is not provided", async () => {
+    getWrapper();
+    await flushPromises();
+
+    expect(spyAddWadouriPrefix).toHaveBeenCalledTimes(0);
+    expect(spyFetchVipMetadataInformation).toHaveBeenCalledTimes(0);
+    expect(spyFetchMetadataInformation).toHaveBeenCalledTimes(0);
+    expect(spyInitCornerstoneCore).toHaveBeenCalled();
+  });
+  it("should fetch overlay metadata when the url is provided", async () => {
+    getWrapper({ props: { url: "https://test" } });
+    await flushPromises();
+
+    expect(spyAddWadouriPrefix).toHaveBeenCalledTimes(1);
+    expect(spyFetchVipMetadataInformation).toHaveBeenCalledTimes(1);
+    expect(spyFetchMetadataInformation).toHaveBeenCalledTimes(1);
+    expect(spyInitCornerstoneCore).toHaveBeenCalled();
+  });
+
   describe("Methods", () => {
-    vi.spyOn(App.methods, "fetchVipMetadataInformation").mockImplementation(
-      vi.fn()
-    );
-    vi.spyOn(App.methods, "fetchMetadataInformation").mockImplementation(
-      vi.fn()
-    );
     const wrapper = getWrapper();
-
     describe("method: wadouri", () => {
+      beforeAll(() => {
+        spyAddWadouriPrefix.mockRestore();
+      });
+
       it('should add "wadouri" prefix', async () => {
         expect(await wrapper.vm.addWadouriPrefix("https://dummy_url")).toBe(
           "wadouri:https://dummy_url"
@@ -124,7 +159,9 @@ describe("App component", () => {
       ])(
         `should return $expected for $description`,
         ({ date, time, expected }) => {
-          expect(wrapper.vm.formatOverlayDateAndTime(date, time)).toBe(expected);
+          expect(wrapper.vm.formatOverlayDateAndTime(date, time)).toBe(
+            expected
+          );
         }
       );
     });