test: Add $fetchState stubs to resolve jest failures (#346)

rushk014 · xingzhang-suse · commit 211fe8f8d84b · 2025-11-13T13:56:17.000-08:00
diff --git a/pkg/sbomscanner-ui-ext/components/__tests__/ImageDetails.spec.ts b/pkg/sbomscanner-ui-ext/components/__tests__/ImageDetails.spec.ts
@@ -56,11 +56,13 @@ describe('ImageDetails.vue', () => {
     wrapper = shallowMount(ImageDetails, {
       global: {
         mocks: {
-          $t:     mockT,
-          t:      mockT,
-          $store: mockStore,
-          $route: { params: { id: 'test-image-route', cluster: 'test-cluster' } },
+          $fetchState: { pending: false },
+          $t:          mockT,
+          t:           mockT,
+          $store:      mockStore,
+          $route:      { params: { id: 'test-image-route', cluster: 'test-cluster' } },
         },
+        stubs: { RouterLink: { template: '<a><slot /></a>', props: ['to'] } }
       },
       data() {
         return { imageName: 'test-image' };
@@ -88,11 +90,13 @@ describe('ImageDetails.vue', () => {
     const wrapper = shallowMount(ImageDetails, {
       global: {
         mocks: {
-          $t:     mockT,
-          t:      mockT,
-          $store: mockStore,
-          $route: { params: { cluster: 'test-cluster' } },
+          $fetchState: { pending: false },
+          $t:          mockT,
+          t:           mockT,
+          $store:      mockStore,
+          $route:      { params: { cluster: 'test-cluster' } },
         },
+        stubs: { RouterLink: { template: '<a><slot /></a>', props: ['to'] } }
       },
       data() {
         return { imageName: 'test-image' };
@@ -139,11 +143,13 @@ describe('ImageDetails.vue', () => {
     const localWrapper = shallowMount(ImageDetails, {
       global: {
         mocks: {
-          $t:     mockT,
-          t:      mockT,
-          $store: localStore,
-          $route: { params: { id: 'fallback', cluster: 'test-cluster' } },
+          $fetchState: { pending: false },
+          $t:          mockT,
+          t:           mockT,
+          $store:      localStore,
+          $route:      { params: { id: 'fallback', cluster: 'test-cluster' } },
         },
+        stubs: { RouterLink: { template: '<a><slot /></a>', props: ['to'] } }
       },
       data() {
         return { imageName: 'fallback' };
diff --git a/pkg/sbomscanner-ui-ext/components/__tests__/RegistryDetails.spec.ts b/pkg/sbomscanner-ui-ext/components/__tests__/RegistryDetails.spec.ts
@@ -49,7 +49,8 @@ describe('RegistryDetails.vue', () => {
     return mount(RegistryDetails, {
       global: {
         mocks: {
-          $store: storeMock,
+          $store:      storeMock,
+          $fetchState: { pending: false },
           $route: {
             params: {
               cluster: 'local', id: 'my-reg', ns: 'ns1'
diff --git a/pkg/sbomscanner-ui-ext/list/__tests__/sbomscanner.kubewarden.io.vexhub.spec.ts b/pkg/sbomscanner-ui-ext/list/__tests__/sbomscanner.kubewarden.io.vexhub.spec.ts
@@ -45,7 +45,8 @@ describe('VexHubList.vue', () => {
               'cluster/schemaFor': mockSchemaFor,
             }
           },
-          $fetch: mockFetch,
+          $fetch:      mockFetch,
+          $fetchState: { pending: false },
         },
         stubs: { ResourceTable: true }
       }
diff --git a/pkg/sbomscanner-ui-ext/pages/c/_cluster/sbomscanner/__tests__/Dashboard.spec.ts b/pkg/sbomscanner-ui-ext/pages/c/_cluster/sbomscanner/__tests__/Dashboard.spec.ts
@@ -45,8 +45,9 @@ describe('Dashboard.vue full coverage', () => {
     return shallowMount(Dashboard, {
       global: {
         mocks: {
-          $store: storeMock,
-          t:      (key: any) => key,
+          $store:      storeMock,
+          t:           (key: any) => key,
+          $fetchState: { pending: false },
         },
       },
       ...options,
@@ -218,7 +219,8 @@ describe('Dashboard.vue full coverage', () => {
             dispatch: mockDispatch,
             getters:  { 'cluster/all': jest.fn(() => []) },
           },
-          t: (key) => key,
+          t:           (key) => key,
+          $fetchState: { pending: false },
         },
       },
     });
diff --git a/pkg/sbomscanner-ui-ext/pages/c/_cluster/sbomscanner/__tests__/ImageOverview.spec.ts b/pkg/sbomscanner-ui-ext/pages/c/_cluster/sbomscanner/__tests__/ImageOverview.spec.ts
@@ -22,6 +22,7 @@ describe('ImageOverview.vue', () => {
       $t:           t,
       t,
       $store:       store,
+      $fetchState:  { pending: false },
       $rootGetters: {},
     };
 
@@ -68,7 +69,7 @@ describe('ImageOverview.vue', () => {
     const wrapper = mount(ImageOverview as any, {
       global: {
         mocks: {
-          $store: store, $t: t, t
+          $store: store, $t: t, t, $fetchState: { pending: false }
         },
         stubs: {
           SortableTable: SortableTableWithSlots,
@@ -239,7 +240,7 @@ describe('ImageOverview.vue', () => {
     const wrapperErr = mountComponent({
       global: {
         mocks: {
-          $store: storeErr, $t: t, t, $rootGetters: {}
+          $store: storeErr, $t: t, t, $rootGetters: {}, $fetchState: { pending: false }
         }
       }
     });
@@ -264,7 +265,7 @@ describe('ImageOverview.vue', () => {
     const wrapper = mountComponent({
       global: {
         mocks: {
-          $store: store, $t: t, t
+          $store: store, $t: t, t, $fetchState: { pending: false }
         }
       }
     });
@@ -469,7 +470,7 @@ describe('ImageOverview.vue', () => {
     const wrapperErr = mountComponent({
       global: {
         mocks: {
-          $store: storeErr, $t: t, t, $rootGetters: {}
+          $store: storeErr, $t: t, t, $rootGetters: {}, $fetchState: { pending: false }
         }
       }
     });
@@ -527,7 +528,7 @@ describe('ImageOverview.vue', () => {
     const wrapperSuccess = mountComponent({
       global: {
         mocks: {
-          $store: storeSuccess, $t: t, t
+          $store: storeSuccess, $t: t, t, $fetchState: { pending: false }
         }
       }
     });
@@ -552,7 +553,7 @@ describe('ImageOverview.vue', () => {
     const wrapperError = mountComponent({
       global: {
         mocks: {
-          $store: storeError, $t: t, t
+          $store: storeError, $t: t, t, $fetchState: { pending: false }
         }
       }
     });
@@ -577,7 +578,7 @@ describe('ImageOverview.vue', () => {
     const wrapper = mountComponent({
       global: {
         mocks: {
-          $store: storeSuccess, $t: t, t
+          $store: storeSuccess, $t: t, t, $fetchState: { pending: false }
         }
       }
     });
@@ -598,7 +599,7 @@ describe('ImageOverview.vue', () => {
     const wrapperErr = mountComponent({
       global: {
         mocks: {
-          $store: storeError, $t: t, t
+          $store: storeError, $t: t, t, $fetchState: { pending: false }
         }
       }
     });
@@ -626,7 +627,7 @@ describe('ImageOverview.vue', () => {
     const wrapper = mountComponent({
       global: {
         mocks: {
-          $store: storeSuccess, $t: t, t
+          $store: storeSuccess, $t: t, t, $fetchState: { pending: false }
         }
       }
     });
@@ -648,7 +649,7 @@ describe('ImageOverview.vue', () => {
     const wrapperErr = mountComponent({
       global: {
         mocks: {
-          $store: storeError, $t: t, t
+          $store: storeError, $t: t, t, $fetchState: { pending: false }
         }
       }
     });
@@ -694,7 +695,7 @@ describe('ImageOverview.vue', () => {
     const wrapper = mountComponent({
       global: {
         mocks: {
-          $store: store, $t: t, t
+          $store: store, $t: t, t, $fetchState: { pending: false }
         }
       }
     });
@@ -733,7 +734,7 @@ describe('ImageOverview.vue', () => {
     const wrapperSuccess = mountComponent({
       global: {
         mocks: {
-          $store: storeSuccess, $t: t, t
+          $store: storeSuccess, $t: t, t, $fetchState: { pending: false }
         }
       }
     });
@@ -758,7 +759,7 @@ describe('ImageOverview.vue', () => {
     const wrapperError = mountComponent({
       global: {
         mocks: {
-          $store: storeError, $t: t, t
+          $store: storeError, $t: t, t, $fetchState: { pending: false }
         }
       }
     });
@@ -783,7 +784,7 @@ describe('ImageOverview.vue', () => {
     const wrapper = mountComponent({
       global: {
         mocks: {
-          $store: storeSuccess, $t: t, t
+          $store: storeSuccess, $t: t, t, $fetchState: { pending: false }
         }
       }
     });
@@ -804,7 +805,7 @@ describe('ImageOverview.vue', () => {
     const wrapperErr = mountComponent({
       global: {
         mocks: {
-          $store: storeError, $t: t, t
+          $store: storeError, $t: t, t, $fetchState: { pending: false }
         }
       }
     });
@@ -832,7 +833,7 @@ describe('ImageOverview.vue', () => {
     const wrapper = mountComponent({
       global: {
         mocks: {
-          $store: storeSuccess, $t: t, t
+          $store: storeSuccess, $t: t, t, $fetchState: { pending: false }
         }
       }
     });
@@ -854,7 +855,7 @@ describe('ImageOverview.vue', () => {
     const wrapperErr = mountComponent({
       global: {
         mocks: {
-          $store: storeError, $t: t, t
+          $store: storeError, $t: t, t, $fetchState: { pending: false }
         }
       }
     });

Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,8 @@ describe('VexHubList.vue', () => {`
`45`	`45`	`'cluster/schemaFor': mockSchemaFor,`
`46`	`46`	`}`
`47`	`47`	`},`
`48`		`- $fetch: mockFetch,`
	`48`	`+ $fetch: mockFetch,`
	`49`	`+ $fetchState: { pending: false },`
`49`	`50`	`},`
`50`	`51`	`stubs: { ResourceTable: true }`
`51`	`52`	`}`
Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,7 @@ describe('ImageOverview.vue', () => {`
`22`	`22`	`$t: t,`
`23`	`23`	`t,`
`24`	`24`	`$store: store,`
	`25`	`+ $fetchState: { pending: false },`
`25`	`26`	`$rootGetters: {},`
`26`	`27`	`};`
`27`	`28`
`@@ -68,7 +69,7 @@ describe('ImageOverview.vue', () => {`
`68`	`69`	`const wrapper = mount(ImageOverview as any, {`
`69`	`70`	`global: {`
`70`	`71`	`mocks: {`
`71`		`- $store: store, $t: t, t`
	`72`	`+ $store: store, $t: t, t, $fetchState: { pending: false }`
`72`	`73`	`},`
`73`	`74`	`stubs: {`
`74`	`75`	`SortableTable: SortableTableWithSlots,`
`@@ -239,7 +240,7 @@ describe('ImageOverview.vue', () => {`
`239`	`240`	`const wrapperErr = mountComponent({`
`240`	`241`	`global: {`
`241`	`242`	`mocks: {`
`242`		`- $store: storeErr, $t: t, t, $rootGetters: {}`
	`243`	`+ $store: storeErr, $t: t, t, $rootGetters: {}, $fetchState: { pending: false }`
`243`	`244`	`}`
`244`	`245`	`}`
`245`	`246`	`});`
`@@ -264,7 +265,7 @@ describe('ImageOverview.vue', () => {`
`264`	`265`	`const wrapper = mountComponent({`
`265`	`266`	`global: {`
`266`	`267`	`mocks: {`
`267`		`- $store: store, $t: t, t`
	`268`	`+ $store: store, $t: t, t, $fetchState: { pending: false }`
`268`	`269`	`}`
`269`	`270`	`}`
`270`	`271`	`});`
`@@ -469,7 +470,7 @@ describe('ImageOverview.vue', () => {`
`469`	`470`	`const wrapperErr = mountComponent({`
`470`	`471`	`global: {`
`471`	`472`	`mocks: {`
`472`		`- $store: storeErr, $t: t, t, $rootGetters: {}`
	`473`	`+ $store: storeErr, $t: t, t, $rootGetters: {}, $fetchState: { pending: false }`
`473`	`474`	`}`
`474`	`475`	`}`
`475`	`476`	`});`
`@@ -527,7 +528,7 @@ describe('ImageOverview.vue', () => {`
`527`	`528`	`const wrapperSuccess = mountComponent({`
`528`	`529`	`global: {`
`529`	`530`	`mocks: {`
`530`		`- $store: storeSuccess, $t: t, t`
	`531`	`+ $store: storeSuccess, $t: t, t, $fetchState: { pending: false }`
`531`	`532`	`}`
`532`	`533`	`}`
`533`	`534`	`});`
`@@ -552,7 +553,7 @@ describe('ImageOverview.vue', () => {`
`552`	`553`	`const wrapperError = mountComponent({`
`553`	`554`	`global: {`
`554`	`555`	`mocks: {`
`555`		`- $store: storeError, $t: t, t`
	`556`	`+ $store: storeError, $t: t, t, $fetchState: { pending: false }`
`556`	`557`	`}`
`557`	`558`	`}`
`558`	`559`	`});`
`@@ -577,7 +578,7 @@ describe('ImageOverview.vue', () => {`
`577`	`578`	`const wrapper = mountComponent({`
`578`	`579`	`global: {`
`579`	`580`	`mocks: {`
`580`		`- $store: storeSuccess, $t: t, t`
	`581`	`+ $store: storeSuccess, $t: t, t, $fetchState: { pending: false }`
`581`	`582`	`}`
`582`	`583`	`}`
`583`	`584`	`});`
`@@ -598,7 +599,7 @@ describe('ImageOverview.vue', () => {`
`598`	`599`	`const wrapperErr = mountComponent({`
`599`	`600`	`global: {`
`600`	`601`	`mocks: {`
`601`		`- $store: storeError, $t: t, t`
	`602`	`+ $store: storeError, $t: t, t, $fetchState: { pending: false }`
`602`	`603`	`}`
`603`	`604`	`}`
`604`	`605`	`});`
`@@ -626,7 +627,7 @@ describe('ImageOverview.vue', () => {`
`626`	`627`	`const wrapper = mountComponent({`
`627`	`628`	`global: {`
`628`	`629`	`mocks: {`
`629`		`- $store: storeSuccess, $t: t, t`
	`630`	`+ $store: storeSuccess, $t: t, t, $fetchState: { pending: false }`
`630`	`631`	`}`
`631`	`632`	`}`
`632`	`633`	`});`
`@@ -648,7 +649,7 @@ describe('ImageOverview.vue', () => {`
`648`	`649`	`const wrapperErr = mountComponent({`
`649`	`650`	`global: {`
`650`	`651`	`mocks: {`
`651`		`- $store: storeError, $t: t, t`
	`652`	`+ $store: storeError, $t: t, t, $fetchState: { pending: false }`
`652`	`653`	`}`
`653`	`654`	`}`
`654`	`655`	`});`
`@@ -694,7 +695,7 @@ describe('ImageOverview.vue', () => {`
`694`	`695`	`const wrapper = mountComponent({`
`695`	`696`	`global: {`
`696`	`697`	`mocks: {`
`697`		`- $store: store, $t: t, t`
	`698`	`+ $store: store, $t: t, t, $fetchState: { pending: false }`
`698`	`699`	`}`
`699`	`700`	`}`
`700`	`701`	`});`
`@@ -733,7 +734,7 @@ describe('ImageOverview.vue', () => {`
`733`	`734`	`const wrapperSuccess = mountComponent({`
`734`	`735`	`global: {`
`735`	`736`	`mocks: {`
`736`		`- $store: storeSuccess, $t: t, t`
	`737`	`+ $store: storeSuccess, $t: t, t, $fetchState: { pending: false }`
`737`	`738`	`}`
`738`	`739`	`}`
`739`	`740`	`});`
`@@ -758,7 +759,7 @@ describe('ImageOverview.vue', () => {`
`758`	`759`	`const wrapperError = mountComponent({`
`759`	`760`	`global: {`
`760`	`761`	`mocks: {`
`761`		`- $store: storeError, $t: t, t`
	`762`	`+ $store: storeError, $t: t, t, $fetchState: { pending: false }`
`762`	`763`	`}`
`763`	`764`	`}`
`764`	`765`	`});`
`@@ -783,7 +784,7 @@ describe('ImageOverview.vue', () => {`
`783`	`784`	`const wrapper = mountComponent({`
`784`	`785`	`global: {`
`785`	`786`	`mocks: {`
`786`		`- $store: storeSuccess, $t: t, t`
	`787`	`+ $store: storeSuccess, $t: t, t, $fetchState: { pending: false }`
`787`	`788`	`}`
`788`	`789`	`}`
`789`	`790`	`});`
`@@ -804,7 +805,7 @@ describe('ImageOverview.vue', () => {`
`804`	`805`	`const wrapperErr = mountComponent({`
`805`	`806`	`global: {`
`806`	`807`	`mocks: {`
`807`		`- $store: storeError, $t: t, t`
	`808`	`+ $store: storeError, $t: t, t, $fetchState: { pending: false }`
`808`	`809`	`}`
`809`	`810`	`}`
`810`	`811`	`});`
`@@ -832,7 +833,7 @@ describe('ImageOverview.vue', () => {`
`832`	`833`	`const wrapper = mountComponent({`
`833`	`834`	`global: {`
`834`	`835`	`mocks: {`
`835`		`- $store: storeSuccess, $t: t, t`
	`836`	`+ $store: storeSuccess, $t: t, t, $fetchState: { pending: false }`
`836`	`837`	`}`
`837`	`838`	`}`
`838`	`839`	`});`
`@@ -854,7 +855,7 @@ describe('ImageOverview.vue', () => {`
`854`	`855`	`const wrapperErr = mountComponent({`
`855`	`856`	`global: {`
`856`	`857`	`mocks: {`
`857`		`- $store: storeError, $t: t, t`
	`858`	`+ $store: storeError, $t: t, t, $fetchState: { pending: false }`
`858`	`859`	`}`
`859`	`860`	`}`
`860`	`861`	`});`