add unit test for fetchVipMetadataInformation method

Author: Salipa-Gurung

src/App.vue

@@ -202,19 +202,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()
@@ -248,11 +245,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)
@@ -262,7 +257,7 @@ export default defineComponent({
       this.setViewportCameraParallelScaleFactor()
 
       // getting image metadata from viewport
-      this.getImageMetadataFromViewport(dicomResourceUrl)
+      this.getImageMetadataFromViewport(this.dicomUrl)
     }
   },
   updated() {
@@ -277,6 +272,7 @@ export default defineComponent({
     this.isImageMetadataExtractedFromViewport = false
     this.isDicomImageDataFetched = false
   },
+
   methods: {
     async initCornerstoneCore() {
       try {
@@ -291,11 +287,9 @@ export default defineComponent({
     async fetchVipMetadataInformation(imageId) {
       if (!this.isDicomImageDataFetched) {
         this.dicomImageData = await fetchDicomImageData(imageId)
-        if (!this.isDicomImageDataFetched) {
-          if (this.dicomImageData != null) {
+          if (this.dicomImageData != null){
             this.isDicomImageDataFetched = true
           }
-        }
       }
 
       this.vipInformation.patientName = this.dicomImageData.string(

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'
@@ -20,7 +20,13 @@ vi.mock('@cornerstonejs/core', () => {
       getViewport() {
         return {
           setStack: vi.fn(),
-          render: vi.fn()
+          render: vi.fn(),
+          getCamera: vi.fn().mockImplementation(() => {
+            return { parallelScale: 137.3853139193763 }
+          }),
+          getImageData: vi.fn().mockImplementation(() => {
+            return { dimensions: [] }
+          })
         }
       }
       enableElement() {}
@@ -60,12 +66,48 @@ 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())
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  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).toHaveBeenCalledTimes(1)
+  })
+  it('should fetch overlay metadata when the url is provided', async () => {
+    getWrapper({ props: { url: 'https://test' } })
+    await flushPromises()
+
+    expect(spyAddWadouriPrefix).toHaveBeenCalledTimes(1)
+    expect(spyAddWadouriPrefix).toHaveBeenCalledWith('https://test')
+    expect(spyFetchVipMetadataInformation).toHaveBeenCalledTimes(1)
+    expect(spyFetchMetadataInformation).toHaveBeenCalledTimes(1)
+    expect(spyInitCornerstoneCore).toHaveBeenCalledTimes(1)
+  })
+
   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'