Clean up testing of vulnerability list

- remove js-reportType class, which was only being used for tests
- update tests to use new `findDataCell` methods where possible

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

@@ -244,7 +244,7 @@ export default {
       </template>
 
       <template #cell(reportType)="{ item }">
-        <span data-testid="vulnerability-reportType" class="text-capitalize js-reportType">{{
+        <span data-testid="vulnerability-report-type" class="text-capitalize">{{
           useConvertReportType(item.reportType)
         }}</span>
       </template>

ee/spec/frontend/vulnerabilities/vulnerability_list_spec.js

@@ -29,12 +29,10 @@ describe('Vulnerability list component', () => {
   };
 
   const findCell = label => wrapper.find(`.js-${label}`);
-  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('[data-testid="vulnerability-checkbox-all"]');
-  const findFirstCheckboxCell = () => wrapper.find('[data-testid="vulnerability-checkbox"]');
-  const findLocation = id => wrapper.find(`[data-testid="location-${id}"]`);
+  const findDataCell = label => wrapper.find(`[data-testid="${label}"]`);
+  const findDataCells = label => wrapper.findAll(`[data-testid="${label}"]`);
 
   afterEach(() => {
     wrapper.destroy();
@@ -75,7 +73,7 @@ describe('Vulnerability list component', () => {
     });
 
     it('should show the selection summary when a checkbox is selected', () => {
-      findFirstCheckboxCell().setChecked(true);
+      findDataCell('vulnerability-checkbox').setChecked(true);
 
       return wrapper.vm.$nextTick().then(() => {
         expect(findSelectionSummary().exists()).toBe(true);
@@ -83,7 +81,7 @@ describe('Vulnerability list component', () => {
     });
 
     it('should sync selected vulnerabilities when the vulnerability list is updated', () => {
-      findFirstCheckboxCell().setChecked(true);
+      findDataCell('vulnerability-checkbox').setChecked(true);
 
       expect(findSelectionSummary().props('selectedVulnerabilities')).toHaveLength(1);
       wrapper.setProps({ vulnerabilities: [] });
@@ -101,8 +99,8 @@ describe('Vulnerability list component', () => {
     });
 
     it('should not show the checkboxes if shouldShowSelection is passed in', () => {
-      expect(findCheckAllCheckboxCell().exists()).toBe(false);
-      expect(findFirstCheckboxCell().exists()).toBe(false);
+      expect(findDataCell('vulnerability-checkbox-all').exists()).toBe(false);
+      expect(findDataCell('vulnerability-checkbox').exists()).toBe(false);
     });
   });
 
@@ -117,22 +115,22 @@ describe('Vulnerability list component', () => {
     });
 
     it('should display the vulnerability locations', () => {
-      expect(findLocation(newVulnerabilities[0].id).text()).toContain(
+      expect(findDataCell(`location-${newVulnerabilities[0].id}`).text()).toContain(
         'Administrator / Security reports',
       );
-      expect(findLocation(newVulnerabilities[0].id).text()).toContain(
+      expect(findDataCell(`location-${newVulnerabilities[0].id}`).text()).toContain(
         'registry.gitlab.com/groulot/container-scanning-test/master:5f21de6956aee99ddb68ae49498662d9872f50ff',
       );
-      expect(findLocation(newVulnerabilities[1].id).text()).toContain(
+      expect(findDataCell(`location-${newVulnerabilities[1].id}`).text()).toContain(
         'Administrator / Vulnerability reports',
       );
-      expect(findLocation(newVulnerabilities[1].id).text()).toContain(
+      expect(findDataCell(`location-${newVulnerabilities[1].id}`).text()).toContain(
         'src/main/java/com/gitlab/security_products/tests/App.java',
       );
     });
 
     it('should not display the vulnerability report type', () => {
-      const scannerCell = findRow().find('[data-testid="vulnerability-reportType"');
+      const scannerCell = findRow().find('[data-testid="vulnerability-report-type"');
       expect(scannerCell.exists()).toBe(false);
     });
 
@@ -152,10 +150,12 @@ describe('Vulnerability list component', () => {
       wrapper = createWrapper({
         props: { vulnerabilities: vulnerabilityWithoutLocation, shouldShowProjectNamespace: true },
       });
-      expect(findLocation(vulnerabilityWithoutLocation[0].id).text()).toContain(
+      expect(findDataCell(`location-${vulnerabilityWithoutLocation[0].id}`).text()).toContain(
         'Administrator / Security reports',
       );
-      expect(findLocation(vulnerabilityWithoutLocation[0].id).findAll('div').length).toBe(2);
+      expect(
+        findDataCell(`location-${vulnerabilityWithoutLocation[0].id}`).findAll('div').length,
+      ).toBe(2);
     });
   });
 
@@ -169,22 +169,22 @@ describe('Vulnerability list component', () => {
     });
 
     it('should not display the vulnerability locations', () => {
-      expect(findLocation(newVulnerabilities[0].id).text()).not.toContain(
+      expect(findDataCell(`location-${newVulnerabilities[0].id}`).text()).not.toContain(
         'Administrator / Security reports',
       );
-      expect(findLocation(newVulnerabilities[0].id).text()).toContain(
+      expect(findDataCell(`location-${newVulnerabilities[0].id}`).text()).toContain(
         'registry.gitlab.com/groulot/container-scanning-test/master:5f21de6956aee99ddb68ae49498662d9872f50ff',
       );
-      expect(findLocation(newVulnerabilities[1].id).text()).not.toContain(
+      expect(findDataCell(`location-${newVulnerabilities[1].id}`).text()).not.toContain(
         'Administrator / Vulnerability reports',
       );
-      expect(findLocation(newVulnerabilities[1].id).text()).toContain(
+      expect(findDataCell(`location-${newVulnerabilities[1].id}`).text()).toContain(
         'src/main/java/com/gitlab/security_products/tests/App.java',
       );
     });
 
     it('should display the vulnerability report type', () => {
-      const cells = findCells('reportType');
+      const cells = findDataCells('vulnerability-report-type');
       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');