Clean up code

- do not render columns if conditionally turned off
- do not rely on bootstrap implementation to access table cells
- clean up tests with before each

ee/app/assets/javascripts/vulnerabilities/components/vulnerability_list.vue

@@ -75,23 +75,12 @@ export default {
     shouldShowSelectionSummary() {
       return this.shouldShowSelection && Boolean(this.numOfSelectedVulnerabilities);
     },
-    checkboxClass() {
-      return this.shouldShowSelection ? '' : 'gl-display-none';
-    },
     theadClass() {
       return this.shouldShowSelectionSummary ? 'below-selection-summary' : '';
     },
-    reportTypeClass() {
-      return this.shouldShowReportType ? '' : 'gl-display-none';
-    },
     fields() {
       const commonThClass = ['table-th-transparent', 'original-gl-th', 'gl-bg-white!'].join(' ');
-      return [
-        {
-          key: 'checkbox',
-          class: this.checkboxClass,
-          thClass: `gl-w-9 ${commonThClass}`,
-        },
+      const baseFields = [
         {
           key: 'state',
           label: s__('Vulnerability|Status'),
@@ -108,13 +97,23 @@ export default {
           thClass: commonThClass,
           tdClass: 'gl-word-break-all',
         },
-        {
+      ];
+
+      if (this.shouldShowSelection) {
+        baseFields.unshift({
+          key: 'checkbox',
+          thClass: `gl-w-9 ${commonThClass}`,
+        });
+      }
+
+      if (this.shouldShowReportType) {
+        baseFields.push({
           key: 'reportType',
-          class: this.reportTypeClass,
           label: s__('Reports|Scanner'),
           thClass: commonThClass,
-        },
-      ];
+        });
+      }
+      return baseFields;
     },
   },
   watch: {
@@ -194,6 +193,7 @@ export default {
       <template #head(checkbox)>
         <gl-form-checkbox
           class="mr-0 mb-0"
+          data-testid="vulnerability-checkbox-all"
           :checked="hasSelectedAllVulnerabilities"
           @change="toggleAllVulnerabilities"
         />
@@ -202,6 +202,7 @@ export default {
       <template #cell(checkbox)="{ item }">
         <gl-form-checkbox
           class="d-inline-block mr-0 mb-0"
+          data-testid="vulnerability-checkbox"
           :checked="isSelected(item)"
           @change="toggleVulnerability(item)"
         />
@@ -243,7 +244,7 @@ export default {
       </template>
 
       <template #cell(reportType)="{ item }">
-        <span class="text-capitalize js-reportType">{{
+        <span data-testid="vulnerability-reportType" class="text-capitalize js-reportType">{{
           useConvertReportType(item.reportType)
         }}</span>
       </template>

ee/spec/frontend/vue_shared/security_reports/store/utils_spec.js

@@ -46,17 +46,21 @@ describe('security reports utils', () => {
   });
 
   describe('convertReportType', () => {
-    it.each([
-      ['sast', 'SAST'],
-      ['dependency_scanning', 'Dependency Scanning'],
-      ['CONTAINER_SCANNING', 'Container Scanning'],
-      ['CUSTOM_SCANNER', 'Custom scanner'],
-      ['mast', 'Mast'],
-      ['TAST', 'Tast'],
-      [undefined, ''],
-    ])('converts the report type "%s" to the human-readable string "%s"', (input, output) => {
-      expect(convertReportType(input)).toEqual(output);
-    });
+    it.each`
+      reportType               | output
+      ${'sast'}                | ${'SAST'}
+      ${'dependency_scanning'} | ${'Dependency Scanning'}
+      ${'CONTAINER_SCANNING'}  | ${'Container Scanning'}
+      ${'CUSTOM_SCANNER'}      | ${'Custom scanner'}
+      ${'mast'}                | ${'Mast'}
+      ${'TAST'}                | ${'Tast'}
+      ${undefined}             | ${''}
+    `(
+      'converts the report type "$reportType" to the human-readable string "$output"',
+      ({ reportType, output }) => {
+        expect(convertReportType(reportType)).toEqual(output);
+      },
+    );
   });
 
   describe('filterByKey', () => {

ee/spec/frontend/vulnerabilities/vulnerability_list_spec.js

@@ -32,8 +32,8 @@ describe('Vulnerability list component', () => {
   const findCells = label => wrapper.findAll(`.js-${label}`);
   const findRow = (index = 0) => wrapper.findAll('tbody tr').at(index);
   const findSelectionSummary = () => wrapper.find(SelectionSummary);
-  const findCheckAllCheckboxCell = () => wrapper.find('thead tr th');
-  const findFirstCheckboxCell = () => wrapper.find('tbody tr td');
+  const findCheckAllCheckboxCell = () => wrapper.find('[data-testid="vulnerability-checkbox-all"]');
+  const findFirstCheckboxCell = () => wrapper.find('[data-testid="vulnerability-checkbox"]');
   const findLocation = id => wrapper.find(`[data-testid="location-${id}"]`);
 
   afterEach(() => {
@@ -75,9 +75,7 @@ describe('Vulnerability list component', () => {
     });
 
     it('should show the selection summary when a checkbox is selected', () => {
-      findFirstCheckboxCell()
-        .find('input')
-        .setChecked(true);
+      findFirstCheckboxCell().setChecked(true);
 
       return wrapper.vm.$nextTick().then(() => {
         expect(findSelectionSummary().exists()).toBe(true);
@@ -85,9 +83,7 @@ describe('Vulnerability list component', () => {
     });
 
     it('should sync selected vulnerabilities when the vulnerability list is updated', () => {
-      findFirstCheckboxCell()
-        .find('input')
-        .setChecked(true);
+      findFirstCheckboxCell().setChecked(true);
 
       expect(findSelectionSummary().props('selectedVulnerabilities')).toHaveLength(1);
       wrapper.setProps({ vulnerabilities: [] });
@@ -102,24 +98,25 @@ describe('Vulnerability list component', () => {
       wrapper = createWrapper({
         props: { vulnerabilities, shouldShowSelection: false },
       });
-
-      findFirstCheckboxCell()
-        .find('input')
-        .setChecked(true);
     });
 
     it('should not show the checkboxes if shouldShowSelection is passed in', () => {
-      expect(findCheckAllCheckboxCell().classes()).toContain('gl-display-none');
-      expect(findFirstCheckboxCell().classes()).toContain('gl-display-none');
+      expect(findCheckAllCheckboxCell().exists()).toBe(false);
+      expect(findFirstCheckboxCell().exists()).toBe(false);
     });
   });
 
   describe('when displayed on instance or group level dashboard', () => {
-    it('should display the vulnerability locations', () => {
-      const newVulnerabilities = generateVulnerabilities();
+    let newVulnerabilities;
+
+    beforeEach(() => {
+      newVulnerabilities = generateVulnerabilities();
       wrapper = createWrapper({
         props: { vulnerabilities: newVulnerabilities, shouldShowProjectNamespace: true },
       });
+    });
+
+    it('should display the vulnerability locations', () => {
       expect(findLocation(newVulnerabilities[0].id).text()).toContain(
         'Administrator / Security reports',
       );
@@ -134,6 +131,11 @@ describe('Vulnerability list component', () => {
       );
     });
 
+    it('should not display the vulnerability report type', () => {
+      const scannerCell = findRow().find('[data-testid="vulnerability-reportType"');
+      expect(scannerCell.exists()).toBe(false);
+    });
+
     it('should not display the vulnerability locations', () => {
       const vulnerabilityWithoutLocation = [
         {
@@ -155,15 +157,6 @@ describe('Vulnerability list component', () => {
       );
       expect(findLocation(vulnerabilityWithoutLocation[0].id).findAll('div').length).toBe(2);
     });
-
-    it('should not display the vulnerability report type', () => {
-      const newVulnerabilities = generateVulnerabilities();
-      wrapper = createWrapper({
-        props: { vulnerabilities: newVulnerabilities, shouldShowProjectNamespace: true },
-      });
-      const scannerCell = findRow().find('[data-label="Scanner"');
-      expect(scannerCell.classes('gl-display-none')).toBe(true);
-    });
   });
 
   describe('when displayed on a project level dashboard', () => {
@@ -192,10 +185,10 @@ describe('Vulnerability list component', () => {
 
     it('should display the vulnerability report type', () => {
       const cells = findCells('reportType');
-      expect(cells.wrappers[0].text()).toBe('SAST');
-      expect(cells.wrappers[1].text()).toBe('Dependency Scanning');
-      expect(cells.wrappers[2].text()).toBe('Custom scanner without translation');
-      expect(cells.wrappers[3].text()).toBe('');
+      expect(cells.at(0).text()).toBe('SAST');
+      expect(cells.at(1).text()).toBe('Dependency Scanning');
+      expect(cells.at(2).text()).toBe('Custom scanner without translation');
+      expect(cells.at(3).text()).toBe('');
     });
   });