Github #357: Bug: Do not display minute and second on scan interval column in registry list

Author: xingzhang-suse

babel.config.js

@@ -7,12 +7,12 @@ module.exports = {
           {
             root:  ['.'],
             alias: {
-              '@':                                       '.',
-              '~':                                       '.',
-              '@benchmark-compliance':                   './pkg/benchmark-compliance',
-              '@sbombastic':                             './pkg/sbombastic',
-              '@network':                                './pkg/network',
-              '@runtime-process-profile':                './pkg/runtime-process-profile',
+              '@':                        '.',
+              '~':                        '.',
+              '@benchmark-compliance':    './pkg/benchmark-compliance',
+              '@sbombastic':              './pkg/sbombastic',
+              '@network':                 './pkg/network',
+              '@runtime-process-profile': './pkg/runtime-process-profile',
             },
           },
         ],

pkg/sbomscanner/components/__tests__/InstallView.spec.ts

@@ -18,13 +18,11 @@ jest.mock('@sbomscanner/utils/chart', () => ({
 let modules: Vuex.Modules<any, any> = {
   'resource-fetch': {
     namespaced: true,
-    getters: {
-      refreshFlag: () => false,
-    },
+    getters:    { refreshFlag: () => false },
   },
   catalog: {
     namespaced: true,
-    getters: {
+    getters:    {
       charts: () => [],
       repos:  () => []
     },
@@ -78,7 +76,7 @@ describe('InstallView.vue', () => {
 
     dispatch = jest.fn(() => ({ save: jest.fn() }));
 
-    store = createStore({ 
+    store = createStore({
       getters,
       modules
     });
@@ -440,7 +438,7 @@ describe('InstallView.vue', () => {
       currentStore: () => (id: string) => {
         return { id, name: 'mocked-store' };
       },
-      currentCluster:      () => ({ id: 'cluster-1' }),
+      currentCluster:    () => ({ id: 'cluster-1' }),
       'catalog/chart':   () => jest.fn().mockReturnValue({ chartName: 'cnpg-controller' }),
       'management/byId': () => (id: string) => {
         return { id, name: 'mocked-management' };
@@ -461,6 +459,7 @@ describe('InstallView.vue', () => {
         },
       },
     });
+
     await Object.defineProperty(wrapper.vm, 'controllerChart4Cnpg' , {
       get: () => ({
         repoType: 'cluster', repoName: 'repo1', chartName: 'chart1', versions: ['1.0.0']
@@ -489,8 +488,8 @@ describe('InstallView.vue', () => {
       },
       currentCluster:      () => ({ id: 'cluster-1' }),
       'cluster/schemaFor': () => jest.fn().mockReturnValue(mockSchema),
-      'catalog/chart':   () => jest.fn().mockReturnValue({ chartName: 'cnpg-controller' }),
-      'management/byId': () => (id: string) => {
+      'catalog/chart':     () => jest.fn().mockReturnValue({ chartName: 'cnpg-controller' }),
+      'management/byId':   () => (id: string) => {
         return { id, name: 'mocked-management' };
       },
       'i18n/t': () => jest.fn((key) => key),
@@ -509,8 +508,9 @@ describe('InstallView.vue', () => {
         },
       },
     });
+
     require('@sbomscanner/utils/chart').getLatestVersion.mockReturnValue(null);
-    
+
     await wrapper.vm.chartRoute();
     expect(handleGrowl).toHaveBeenCalled();
   });
@@ -613,11 +613,11 @@ describe('InstallView.vue - schema computed tests', () => {
         currentStore: () => (id: string) => {
           return { id, name: 'mocked-store' };
         },
-        'catalog/chart':   () => jest.fn().mockReturnValue({ chartName: 'cnpg-controller' }),
+        'catalog/chart':     () => jest.fn().mockReturnValue({ chartName: 'cnpg-controller' }),
         'cluster/schemaFor': () => jest.fn().mockReturnValue(mockSchema),
         'cluster/canList':   () => jest.fn().mockReturnValue(true),
-        
-        'management/byId':   () => (id: string) => {
+
+        'management/byId': () => (id: string) => {
           return { id, name: 'mocked-management' };
         },
         'i18n/t': () => jest.fn((key) => key),
@@ -648,7 +648,7 @@ describe('InstallView.vue - schema computed tests', () => {
         currentStore: () => (id: string) => {
           return { id, name: 'mocked-store' };
         },
-        'catalog/chart':   () => jest.fn().mockReturnValue({ chartName: 'cnpg-controller' }),
+        'catalog/chart':     () => jest.fn().mockReturnValue({ chartName: 'cnpg-controller' }),
         'cluster/schemaFor': () => jest.fn().mockReturnValue(mockSchema),
         'cluster/canList':   () => jest.fn().mockReturnValue(true),
         'management/byId':   () => (id: string) => {
@@ -807,6 +807,7 @@ describe('InstallView.vue - schema computed tests', () => {
 
     mockStore.dispatch = jest.fn().mockResolvedValue(mockRepo);
     const wrapper = factory(mockStore);
+
     Object.defineProperty(wrapper.vm.$, 'refs', {
       value:        { wizard: { goToStep: jest.fn() } },
       configurable: true,
@@ -1076,9 +1077,7 @@ describe('chartRoute - InstallView router push', () => {
   });
 
   it('hasSbomscannerSchema is false - calls $router.push normally', async() => {
-    const routerMock = { 
-      push: jest.fn()
-    };
+    const routerMock = { push: jest.fn() };
     const wrapper = factory({ routerMock });
 
     await Object.defineProperty(wrapper.vm, 'controllerChart4Sbomscanner' , {

pkg/sbomscanner/components/__tests__/RegistryDetails.spec.ts

@@ -51,7 +51,7 @@ describe('RegistryDetails.vue', () => {
         mocks: {
           $store:      storeMock,
           $fetchState: { pending: false },
-          $route: {
+          $route:      {
             params: {
               cluster: 'local', id: 'my-reg', ns: 'ns1'
             }

pkg/sbomscanner/edit/__tests__/sbomscanner.kubewarden.io.registry.spec.ts

@@ -26,8 +26,6 @@ const LabeledSelectStub = {
   props: ['value', 'options', 'optionKey', 'optionLabel', 'required', 'dataTestid'],
 };
 
-const { REGISTRY_TYPE } = require('@sbomscanner/constants');
-
 const stubs = {
   CruResource:       { name: 'CruResource', template: '<div><slot /></div>' },
   NameNsDescription: true,

pkg/sbomscanner/formatters/ScanInterval.vue

@@ -3,7 +3,7 @@
     <span
       v-if="value"
       class="scan-interval-text"
-    >{{ t('imageScanner.general.every') }}&nbsp;{{ value }}</span>
+    >{{ t('imageScanner.general.every') }}&nbsp;{{ scanInterval }}</span>
     <span
       v-else
       class="scan-interval-text scan-interval-none"
@@ -18,6 +18,33 @@ export default {
       required: true
     }
   },
+  computed: {
+    scanInterval() {
+      const regex = /(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?/;
+      const matches = this.value.match(regex);
+
+      if (!matches) {
+        return this.value;
+      }
+
+      const [, hours, minutes, seconds] = matches;
+      let result = '';
+
+      if (hours && hours !== '0') {
+        result += `${hours}h`;
+      }
+
+      if (minutes && minutes !== '0') {
+        result += `${minutes}m`;
+      }
+
+      if (seconds && seconds !== '0') {
+        result += `${seconds}s`;
+      }
+
+      return result || this.value;
+    }
+  }
 };
 </script>
 

pkg/sbomscanner/formatters/__tests__/ScanHistorySinceCell.spec.ts

@@ -3,19 +3,15 @@ import ScanHistorySinceCell from '../ScanHistorySinceCell.vue';
 // import Date from '@shell/components/formatter/Date';
 
 jest.mock('@shell/components/formatter/Date', () => ({
-  name: 'Date',
-  props: {
-    value: {},
-  },
+  name:  'Date',
+  props: { value: {} },
 }));
 
 describe('ScanHistorySinceCell.vue', () => {
   it('should render the Date component and pass the value prop to it', () => {
     const mockDateString = '2025-10-20T18:00:00Z';
 
-    const wrapper = shallowMount(ScanHistorySinceCell, {
-      props: { value: mockDateString },
-    });
+    const wrapper = shallowMount(ScanHistorySinceCell, { props: { value: mockDateString } });
 
     const dateComponent = wrapper.findComponent(Date);
 

pkg/sbomscanner/formatters/__tests__/ScanInterval.spec.ts

@@ -1,46 +1,68 @@
-import { jest } from '@jest/globals';
 import { shallowMount } from '@vue/test-utils';
 import ScanInterval from '../ScanInterval.vue';
 
-describe('ScanInterval.vue', () => {
-  const mockT = jest.fn((key) => key);
+describe('ScanIntervalCell.vue', () => {
+  const tMock = (key: any) => key; // simple mock translation
 
-  const mountComponent = (value) => {
+  function factory(propsData: any) {
     return shallowMount(ScanInterval, {
-      props:  { value },
-      global: { mocks: { t: mockT } },
+      propsData,
+      mocks: { t: tMock }
     });
-  };
+  }
 
-  beforeEach(() => {
-    mockT.mockClear();
+  test('renders n/a when value is empty string', () => {
+    const wrapper = factory({ value: '' });
+
+    expect(wrapper.find('.scan-interval-none').exists()).toBe(true);
+    expect(wrapper.find('.scan-interval-none').text()).toBe('n/a');
+  });
+
+  test('parses full h/m/s (e.g., "1h30m20s")', () => {
+    const wrapper = factory({ value: '1h30m20s' });
+
+    expect(wrapper.vm.scanInterval).toBe('1h30m20s');
+    expect(wrapper.find('.scan-interval-text').text()).toContain('1h30m20s');
+  });
+
+  test('parses only hours (e.g., "2h")', () => {
+    const wrapper = factory({ value: '2h' });
+
+    expect(wrapper.vm.scanInterval).toBe('2h');
   });
 
-  it('should render the interval when value is provided', () => {
-    const mockValue = '1h 30m';
-    const wrapper = mountComponent(mockValue);
+  test('parses only minutes (e.g., "45m")', () => {
+    const wrapper = factory({ value: '45m' });
+
+    expect(wrapper.vm.scanInterval).toBe('45m');
+  });
 
-    const span = wrapper.find('.scan-interval-text');
+  test('parses only seconds (e.g., "10s")', () => {
+    const wrapper = factory({ value: '10s' });
 
-    expect(span.exists()).toBe(true);
-    expect(span.classes()).not.toContain('text-muted');
+    expect(wrapper.vm.scanInterval).toBe('10s');
+  });
 
-    expect(mockT).toHaveBeenCalledTimes(1);
-    expect(mockT).toHaveBeenCalledWith('imageScanner.general.every');
+  test('filters out zero values (e.g., "0h10m0s")', () => {
+    const wrapper = factory({ value: '0h10m0s' });
 
-    expect(span.text()).toBe(`imageScanner.general.every\u00A0${ mockValue }`);
+    // Should remove hours and seconds
+    expect(wrapper.vm.scanInterval).toBe('10m');
   });
 
-  it('should render "n/a" when value is an empty string', () => {
-    const mockValue = '';
-    const wrapper = mountComponent(mockValue);
+  test('returns raw string when regex does not match', () => {
+    const wrapper = factory({ value: 'invalid' });
+
+    // regex still matches empty groups, but value="invalid" → returns original string
+    expect(wrapper.vm.scanInterval).toBe('invalid');
+  });
 
-    const span = wrapper.find('.scan-interval-text');
+  test('renders translated prefix + parsed value', () => {
+    const wrapper = factory({ value: '1h' });
 
-    expect(span.exists()).toBe(true);
-    expect(span.classes()).toContain('scan-interval-none');
-    expect(span.text()).toBe('n/a');
+    const text = wrapper.find('.scan-interval-text').text();
 
-    expect(mockT).not.toHaveBeenCalled();
+    expect(text).toContain('imageScanner.general.every');
+    expect(text).toContain('1h');
   });
 });