Remove outdated test selectors in CiIcon

This change removes some outdated test selectors that start with `js-`
as well as some data-testid's in favor of selecting icons to verify
CI statuses.

app/assets/javascripts/vue_shared/components/ci_icon.vue

@@ -36,6 +36,15 @@ export default {
     status: {
       type: Object,
       required: true,
+      validator(status) {
+        const { group, icon } = status;
+        return (
+          typeof group === 'string' &&
+          group.length &&
+          typeof icon === 'string' &&
+          icon.startsWith('status_')
+        );
+      },
     },
     size: {
       type: Number,
@@ -69,7 +78,7 @@ export default {
   computed: {
     wrapperStyleClasses() {
       const status = this.status.group;
-      return `ci-status-icon ci-status-icon-${status} js-ci-status-icon-${status} gl-rounded-full gl-justify-content-center gl-line-height-0`;
+      return `ci-status-icon ci-status-icon-${status} gl-rounded-full gl-justify-content-center gl-line-height-0`;
     },
     icon() {
       return this.isBorderless ? `${this.status.icon}_borderless` : this.status.icon;
@@ -84,7 +93,6 @@ export default {
       { interactive: isInteractive, active: isActive, borderless: isBorderless },
     ]"
     :style="{ height: `${size}px`, width: `${size}px` }"
-    data-testid="ci-icon-wrapper"
   >
     <gl-icon :name="icon" :size="size" :class="cssClasses" :aria-label="status.icon" />
   </span>

ee/spec/frontend/vue_shared/dashboards/components/project_pipeline_spec.js

-import { mount } from '@vue/test-utils';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import ProjectPipeline from 'ee/vue_shared/dashboards/components/project_pipeline.vue';
 import { mockPipelineData } from 'ee_jest/vue_shared/dashboards/mock_data';
 
@@ -6,7 +6,7 @@ describe('project pipeline component', () => {
   let wrapper;
 
   const mountComponent = (propsData = {}) =>
-    mount(ProjectPipeline, {
+    mountExtended(ProjectPipeline, {
       propsData,
     });
 
@@ -17,7 +17,7 @@ describe('project pipeline component', () => {
         hasPipelineFailed: false,
       });
 
-      expect(wrapper.find('.js-ci-status-icon-success').exists()).toBe(true);
+      expect(wrapper.findByTestId('status_success-icon').exists()).toBe(true);
     });
 
     it('should render failed badge', () => {
@@ -26,7 +26,7 @@ describe('project pipeline component', () => {
         hasPipelineFailed: true,
       });
 
-      expect(wrapper.find('.js-ci-status-icon-failed').exists()).toBe(true);
+      expect(wrapper.findByTestId('status_failed-icon').exists()).toBe(true);
     });
 
     it('should render running badge', () => {
@@ -35,7 +35,7 @@ describe('project pipeline component', () => {
         hasPipelineFailed: false,
       });
 
-      expect(wrapper.find('.js-ci-status-icon-running').exists()).toBe(true);
+      expect(wrapper.findByTestId('status_running-icon').exists()).toBe(true);
     });
   });
 
@@ -48,9 +48,9 @@ describe('project pipeline component', () => {
         hasPipelineFailed: false,
       });
 
-      expect(wrapper.find('.js-upstream-pipeline-status.js-ci-status-icon-success').exists()).toBe(
-        true,
-      );
+      expect(
+        wrapper.find('.js-upstream-pipeline-status [data-testid="status_success-icon"]').exists(),
+      ).toBe(true);
     });
   });
 
@@ -64,7 +64,7 @@ describe('project pipeline component', () => {
       });
 
       expect(
-        wrapper.find('.js-downstream-pipeline-status.js-ci-status-icon-success').exists(),
+        wrapper.find('.js-downstream-pipeline-status [data-testid="status_success-icon"]').exists(),
       ).toBe(true);
     });
 
@@ -76,9 +76,9 @@ describe('project pipeline component', () => {
         hasPipelineFailed: false,
       });
 
-      expect(wrapper.find('.js-downstream-pipeline-status.js-ci-status-icon-failed').exists()).toBe(
-        true,
-      );
+      expect(
+        wrapper.find('.js-downstream-pipeline-status [data-testid="status_failed-icon"]').exists(),
+      ).toBe(true);
     });
 
     it('should render downstream running badge', () => {
@@ -90,7 +90,7 @@ describe('project pipeline component', () => {
       });
 
       expect(
-        wrapper.find('.js-downstream-pipeline-status.js-ci-status-icon-running').exists(),
+        wrapper.find('.js-downstream-pipeline-status [data-testid="status_running-icon"]').exists(),
       ).toBe(true);
     });
 

spec/features/projects/blobs/blob_show_spec.rb

@@ -943,7 +943,7 @@ module example.com/mymodule
       page.within('.commit-actions') do
         expect(page).to have_css('.ci-status-icon')
         expect(page).to have_css('.ci-status-icon-running')
-        expect(page).to have_css('.js-ci-status-icon-running')
+        expect(page).to have_selector('[data-testid="status_running-icon"]')
       end
     end
   end

spec/features/projects/pipelines/pipeline_spec.rb

@@ -165,7 +165,7 @@
 
         it 'shows a running icon and a cancel action for the running build' do
           page.within('#ci-badge-deploy') do
-            expect(page).to have_selector('.js-ci-status-icon-running')
+            expect(page).to have_selector('[data-testid="status_running-icon"]')
             expect(page).to have_selector('.js-icon-cancel')
             expect(page).to have_content('deploy')
           end
@@ -187,7 +187,7 @@
 
         it 'shows a preparing icon and a cancel action' do
           page.within('#ci-badge-prepare') do
-            expect(page).to have_selector('.js-ci-status-icon-preparing')
+            expect(page).to have_selector('[data-testid="status_preparing-icon"]')
             expect(page).to have_selector('.js-icon-cancel')
             expect(page).to have_content('prepare')
           end
@@ -209,7 +209,7 @@
 
         it 'shows the success icon and a retry action for the successful build' do
           page.within('#ci-badge-build') do
-            expect(page).to have_selector('.js-ci-status-icon-success')
+            expect(page).to have_selector('[data-testid="status_success-icon"]')
             expect(page).to have_content('build')
           end
 
@@ -238,7 +238,7 @@
 
         it 'shows the scheduled icon and an unschedule action for the delayed job' do
           page.within('#ci-badge-delayed-job') do
-            expect(page).to have_selector('.js-ci-status-icon-scheduled')
+            expect(page).to have_selector('[data-testid="status_scheduled-icon"]')
             expect(page).to have_content('delayed-job')
           end
 
@@ -263,7 +263,7 @@
 
         it 'shows the failed icon and a retry action for the failed build' do
           page.within('#ci-badge-test') do
-            expect(page).to have_selector('.js-ci-status-icon-failed')
+            expect(page).to have_selector('[data-testid="status_failed-icon"]')
             expect(page).to have_content('test')
           end
 
@@ -297,7 +297,7 @@
 
         it 'shows the skipped icon and a play action for the manual build' do
           page.within('#ci-badge-manual-build') do
-            expect(page).to have_selector('.js-ci-status-icon-manual')
+            expect(page).to have_selector('[data-testid="status_manual-icon"]')
             expect(page).to have_content('manual')
           end
 
@@ -323,7 +323,7 @@
         end
 
         it 'shows the success icon and the generic comit status build' do
-          expect(page).to have_selector('.js-ci-status-icon-success')
+          expect(page).to have_selector('[data-testid="status_success-icon"]')
           expect(page).to have_content('jenkins')
           expect(page).to have_link('jenkins', href: 'http://gitlab.com/status')
         end

spec/frontend/ci/reports/components/summary_row_spec.js

@@ -38,7 +38,7 @@ describe('Summary row', () => {
 
   it('renders provided icon', () => {
     createComponent();
-    expect(findStatusIcon().classes()).toContain('js-ci-status-icon-warning');
+    expect(findStatusIcon().find('[data-testid="status_warning-icon"]').exists()).toBe(true);
   });
 
   it('renders help popover if popoverOptions are provided', () => {

spec/frontend/ide/mock_data.js

@@ -79,6 +79,7 @@ export const jobs = [
     path: 'testing',
     status: {
       icon: 'status_success',
+      group: 'success',
       text: 'passed',
     },
     stage: 'test',

spec/frontend/jobs/components/job/job_container_item_spec.js

@@ -9,8 +9,8 @@ import job from '../../mock_data';
 describe('JobContainerItem', () => {
   let wrapper;
 
-  const findCiIconComponent = () => wrapper.findComponent(CiIcon);
-  const findGlIconComponent = () => wrapper.findComponent(GlIcon);
+  const findCiIcon = () => wrapper.findComponent(CiIcon);
+  const findGlIcon = () => wrapper.findComponent(GlIcon);
 
   function createComponent(jobData = {}, props = { isActive: false, retried: false }) {
     wrapper = shallowMount(JobContainerItem, {
@@ -30,7 +30,7 @@ describe('JobContainerItem', () => {
     });
 
     it('displays a status icon', () => {
-      expect(findCiIconComponent().props('status')).toBe(job.status);
+      expect(findCiIcon().props('status')).toBe(job.status);
     });
 
     it('displays the job name', () => {
@@ -50,9 +50,7 @@ describe('JobContainerItem', () => {
     });
 
     it('displays an arrow sprite icon', () => {
-      const icon = findGlIconComponent();
-
-      expect(icon.props('name')).toBe('arrow-right');
+      expect(findGlIcon().props('name')).toBe('arrow-right');
     });
   });
 
@@ -62,9 +60,7 @@ describe('JobContainerItem', () => {
     });
 
     it('displays a retry icon', () => {
-      const icon = findGlIconComponent();
-
-      expect(icon.props('name')).toBe('retry');
+      expect(findGlIcon().props('name')).toBe('retry');
     });
   });
 

spec/frontend/vue_merge_request_widget/components/states/mr_widget_failed_to_merge_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import MrWidgetFailedToMerge from '~/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue';
 import StateContainer from '~/vue_merge_request_widget/components/state_container.vue';
@@ -8,17 +8,14 @@ describe('MRWidgetFailedToMerge', () => {
   const dummyIntervalId = 1337;
   let wrapper;
 
-  const createComponent = (props = {}, data = {}) => {
-    wrapper = shallowMount(MrWidgetFailedToMerge, {
+  const createComponent = (props = {}, mountFn = shallowMount) => {
+    wrapper = mountFn(MrWidgetFailedToMerge, {
       propsData: {
         mr: {
           mergeError: 'Merge error happened',
         },
         ...props,
       },
-      data() {
-        return data;
-      },
     });
   };
 
@@ -121,7 +118,9 @@ describe('MRWidgetFailedToMerge', () => {
 
   describe('while it is refreshing', () => {
     it('renders Refresing now', async () => {
-      createComponent({}, { isRefreshing: true });
+      createComponent({});
+
+      wrapper.vm.refresh();
 
       await nextTick();
 
@@ -138,8 +137,10 @@ describe('MRWidgetFailedToMerge', () => {
       createComponent();
     });
 
-    it('renders warning icon and disabled merge button', () => {
-      expect(wrapper.find('.js-ci-status-icon-warning')).not.toBeNull();
+    it('renders failed icon', () => {
+      createComponent({}, mount);
+
+      expect(wrapper.find('[data-testid="status-failed-icon"]').exists()).toBe(true);
     });
 
     it('renders given error', () => {

spec/frontend/vue_shared/components/ci_icon_spec.js

@@ -5,14 +5,19 @@ import CiIcon from '~/vue_shared/components/ci_icon.vue';
 describe('CI Icon component', () => {
   let wrapper;
 
-  const findIconWrapper = () => wrapper.find('[data-testid="ci-icon-wrapper"]');
-
-  it('should render a span element with an svg', () => {
+  const createComponent = (props) => {
     wrapper = shallowMount(CiIcon, {
       propsData: {
-        status: {
-          icon: 'status_success',
-        },
+        ...props,
+      },
+    });
+  };
+
+  it('should render a span element with an svg', () => {
+    createComponent({
+      status: {
+        group: 'success',
+        icon: 'status_success',
       },
     });
 
@@ -20,49 +25,43 @@ describe('CI Icon component', () => {
     expect(wrapper.findComponent(GlIcon).exists()).toBe(true);
   });
 
-  describe('active icons', () => {
-    it.each`
-      isActive | cssClass
-      ${true}  | ${'active'}
-      ${false} | ${'active'}
-    `('active should be $isActive', ({ isActive, cssClass }) => {
+  describe.each`
+    isActive
+    ${true}
+    ${false}
+  `('when isActive is $isActive', ({ isActive }) => {
+    it(`"active" class is ${isActive ? 'not ' : ''}added`, () => {
       wrapper = shallowMount(CiIcon, {
         propsData: {
           status: {
+            group: 'success',
             icon: 'status_success',
           },
           isActive,
         },
       });
 
-      if (isActive) {
-        expect(findIconWrapper().classes()).toContain(cssClass);
-      } else {
-        expect(findIconWrapper().classes()).not.toContain(cssClass);
-      }
+      expect(wrapper.classes('active')).toBe(isActive);
     });
   });
 
-  describe('interactive icons', () => {
-    it.each`
-      isInteractive | cssClass
-      ${true}       | ${'interactive'}
-      ${false}      | ${'interactive'}
-    `('interactive should be $isInteractive', ({ isInteractive, cssClass }) => {
+  describe.each`
+    isInteractive
+    ${true}
+    ${false}
+  `('when isInteractive is $isInteractive', ({ isInteractive }) => {
+    it(`"interactive" class is ${isInteractive ? 'not ' : ''}added`, () => {
       wrapper = shallowMount(CiIcon, {
         propsData: {
           status: {
+            group: 'success',
             icon: 'status_success',
           },
           isInteractive,
         },
       });
 
-      if (isInteractive) {
-        expect(findIconWrapper().classes()).toContain(cssClass);
-      } else {
-        expect(findIconWrapper().classes()).not.toContain(cssClass);
-      }
+      expect(wrapper.classes('interactive')).toBe(isInteractive);
     });
   });