Add initial unit test for registries overview page

Author: xingzhang-suse

pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ImageOverview.vue

@@ -28,7 +28,6 @@
           class="btn role-primary"
           aria-label="Download full report"
           type="button"
-          :disabled="disabled"
           @click="openAddEditRuleModal()">
           <i class="icon icon-download"></i>
           {{ t('imageScanner.images.downloadReport') }}

pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/RegistriesConfiguration.vue

@@ -14,7 +14,6 @@
             class="btn role-secondary"
             aria-label="Refresh data"
             type="button"
-            :disabled="disabled"
             @click="refresh()">
             <em class="icon-refresh-ss"></em>{{ t('imageScanner.registries.button.refresh') }}
           </button>
@@ -25,7 +24,6 @@
             class="btn role-primary"
             aria-label="Add new"
             type="button"
-            :disabled="disabled"
             @click="openAddEditRegistry()">
             {{ t('imageScanner.registries.button.addNew') }}
           </button>

pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/VexManagement.vue

@@ -13,7 +13,6 @@
             class="btn role-primary"
             :aria-label="t('imageScanner.vexManagement.button.create')"
             type="button"
-            :disabled="disabled"
             @click="createVexHub()">
             {{ t('imageScanner.vexManagement.button.create') }}
           </button>

pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/__tests__/RegistriesConfiguration.spec.ts

@@ -0,0 +1,107 @@
+import { shallowMount, flushPromises } from '@vue/test-utils';
+import registries from '../RegistriesConfiguration.vue';
+
+describe('registries.vue', () => {
+  let storeMock: any;
+  let routerMock: any;
+
+  beforeEach(() => {
+    // mock Vuex store
+    storeMock = {
+      dispatch: jest.fn(),
+      getters: {
+        'cluster/all': jest.fn().mockReturnValue([]),
+        'cluster/canList': jest.fn().mockReturnValue(true),
+        'cluster/schemaFor': jest.fn().mockReturnValue({}),
+        'prefs/get': jest.fn().mockImplementation((key) => {
+          if (key === 'DATE_FORMAT') return 'YYYY-MM-DD';
+          if (key === 'TIME_FORMAT') return 'HH:mm:ss';
+        }),
+      },
+    };
+
+    // mock Vue Router
+    routerMock = {
+      push: jest.fn(),
+    };
+  });
+
+  function factory() {
+    return shallowMount(registries, {
+      global: {
+        mocks: {
+          $store: storeMock,
+          $router: routerMock,
+          $route: { params: { cluster: 'c-abc' } },
+          t: (msg: string) => msg, // mock i18n
+        },
+        stubs: {
+          SortableTable: { template: '<div><slot/></div>' },
+          RecentUpdatedRegistries: true,
+          StatusDistribution: true,
+          ScanButton: true,
+        },
+      },
+    });
+  }
+
+  it('renders the title correctly', () => {
+    const wrapper = factory();
+    expect(wrapper.find('.title').text()).toBe('imageScanner.registries.title');
+  });
+
+  it('calls loadData when refresh is clicked', async () => {
+    const wrapper = factory();
+    const refreshSpy = jest.spyOn(wrapper.vm, 'loadData').mockResolvedValue();
+
+    await wrapper.find('button[aria-label="Refresh data"]').trigger('click');
+    expect(refreshSpy).toHaveBeenCalledWith(true);
+  });
+
+  it('navigates to create registry when Create is clicked', async () => {
+    const wrapper = factory();
+    await wrapper.find('button[aria-label="Add new"]').trigger('click');
+
+    expect(routerMock.push).toHaveBeenCalledWith({
+      name: 'imageScanner-c-cluster-resource-create',
+      params: {
+        resource: 'sbombastic.rancher.io.registry',
+        cluster: 'c-abc',
+        product: 'imageScanner',
+      },
+    });
+  });
+
+  it('updates rows after loadData', async () => {
+    const wrapper = factory();
+
+    storeMock.getters['cluster/all']
+      .mockReturnValueOnce([{ metadata: { name: 'reg1', namespace: 'ns1' }, spec: {} }]) // registries
+      .mockReturnValueOnce([]); // scanJobs
+
+    await wrapper.vm.loadData(true);
+    await flushPromises();
+
+    // Ensure rows is typed as any[] for test purposes
+    const rows = wrapper.vm.rows as any[];
+    expect(rows).toHaveLength(1);
+    expect(rows[0].metadata.name).toBe('reg1');
+  });
+
+  it('filterByStatus updates input value and triggers events', async () => {
+    document.body.innerHTML = `
+      <input type="search" placeholder="Filter" aria-label="Filter table results" />
+    `;
+
+    const wrapper = factory();
+    const el = document.querySelector('input[type="search"]');
+
+    const inputSpy = jest.fn();
+    el?.addEventListener('input', inputSpy);
+
+    wrapper.vm.filterByStatus('active');
+
+    expect((el as HTMLInputElement)?.value).toBe('active');
+    expect(inputSpy).toHaveBeenCalled();
+  });
+});