Refactor stages dropdown spec

Moving the spec over to use
vue test utils and more modern
practices.

app/assets/javascripts/jobs/components/stages_dropdown.vue

@@ -44,13 +44,14 @@ export default {
 </script>
 <template>
   <div class="dropdown">
-    <div class="js-pipeline-info">
+    <div class="js-pipeline-info" data-testid="pipeline-info">
       <ci-icon :status="pipeline.details.status" class="vertical-align-middle" />
 
       <span class="font-weight-bold">{{ s__('Job|Pipeline') }}</span>
       <gl-link
         :href="pipeline.path"
         class="js-pipeline-path link-commit"
+        data-testid="pipeline-path"
         data-qa-selector="pipeline_path"
         >#{{ pipeline.id }}</gl-link
       >
@@ -58,13 +59,17 @@ export default {
         {{ s__('Job|for') }}
 
         <template v-if="isTriggeredByMergeRequest">
-          <gl-link :href="pipeline.merge_request.path" class="link-commit ref-name js-mr-link"
+          <gl-link
+            :href="pipeline.merge_request.path"
+            class="link-commit ref-name"
+            data-testid="mr-link"
             >!{{ pipeline.merge_request.iid }}</gl-link
           >
           {{ s__('Job|with') }}
           <gl-link
             :href="pipeline.merge_request.source_branch_path"
-            class="link-commit ref-name js-source-branch-link"
+            class="link-commit ref-name"
+            data-testid="source-branch-link"
             >{{ pipeline.merge_request.source_branch }}</gl-link
           >
 
@@ -72,7 +77,8 @@ export default {
             {{ s__('Job|into') }}
             <gl-link
               :href="pipeline.merge_request.target_branch_path"
-              class="link-commit ref-name js-target-branch-link"
+              class="link-commit ref-name"
+              data-testid="target-branch-link"
               >{{ pipeline.merge_request.target_branch }}</gl-link
             >
           </template>

spec/frontend/jobs/components/stages_dropdown_spec.js

-import Vue from 'vue';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
 import { trimText } from 'helpers/text_helper';
-import mountComponent from 'helpers/vue_mount_component_helper';
-import component from '~/jobs/components/stages_dropdown.vue';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import StagesDropdown from '~/jobs/components/stages_dropdown.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import {
+  mockPipelineWithoutMR,
+  mockPipelineWithAttachedMR,
+  mockPipelineDetached,
+} from '../mock_data';
 
 describe('Stages Dropdown', () => {
-  const Component = Vue.extend(component);
-  let vm;
-
-  const mockPipelineData = {
-    id: 28029444,
-    details: {
-      status: {
-        details_path: '/gitlab-org/gitlab-foss/pipelines/28029444',
-        group: 'success',
-        has_details: true,
-        icon: 'status_success',
-        label: 'passed',
-        text: 'passed',
-        tooltip: 'passed',
-      },
-    },
-    path: 'pipeline/28029444',
-    flags: {
-      merge_request_pipeline: true,
-      detached_merge_request_pipeline: false,
-    },
-    merge_request: {
-      iid: 1234,
-      path: '/root/detached-merge-request-pipelines/-/merge_requests/1',
-      title: 'Update README.md',
-      source_branch: 'feature-1234',
-      source_branch_path: '/root/detached-merge-request-pipelines/branches/feature-1234',
-      target_branch: 'master',
-      target_branch_path: '/root/detached-merge-request-pipelines/branches/master',
-    },
-    ref: {
-      name: 'test-branch',
-    },
+  let wrapper;
+
+  const findStatus = () => wrapper.findComponent(CiIcon);
+  const findSelectedStageText = () => wrapper.findComponent(GlDropdown).props('text');
+  const findStageItem = (index) => wrapper.findAllComponents(GlDropdownItem).at(index);
+
+  const findPipelineInfoText = () => wrapper.findByTestId('pipeline-info').text();
+  const findPipelinePath = () => wrapper.findByTestId('pipeline-path').attributes('href');
+  const findMRLinkPath = () => wrapper.findByTestId('mr-link').attributes('href');
+  const findSourceBranchLinkPath = () =>
+    wrapper.findByTestId('source-branch-link').attributes('href');
+  const findTargetBranchLinkPath = () =>
+    wrapper.findByTestId('target-branch-link').attributes('href');
+
+  const createComponent = (props) => {
+    wrapper = extendedWrapper(
+      shallowMount(StagesDropdown, {
+        propsData: {
+          ...props,
+        },
+      }),
+    );
   };
 
-  describe('without a merge request pipeline', () => {
-    let pipeline;
+  afterEach(() => {
+    wrapper.destroy();
+  });
 
+  describe('without a merge request pipeline', () => {
     beforeEach(() => {
-      pipeline = JSON.parse(JSON.stringify(mockPipelineData));
-      delete pipeline.merge_request;
-      delete pipeline.flags.merge_request_pipeline;
-      delete pipeline.flags.detached_merge_request_pipeline;
-
-      vm = mountComponent(Component, {
-        pipeline,
+      createComponent({
+        pipeline: mockPipelineWithoutMR,
         stages: [{ name: 'build' }, { name: 'test' }],
         selectedStage: 'deploy',
       });
     });
 
-    afterEach(() => {
-      vm.$destroy();
-    });
-
     it('renders pipeline status', () => {
-      expect(vm.$el.querySelector('.js-ci-status-icon-success')).not.toBeNull();
+      expect(findStatus().exists()).toBe(true);
     });
 
     it('renders pipeline link', () => {
-      expect(vm.$el.querySelector('.js-pipeline-path').getAttribute('href')).toEqual(
-        'pipeline/28029444',
-      );
+      expect(findPipelinePath()).toBe('pipeline/28029444');
     });
 
     it('renders dropdown with stages', () => {
-      expect(vm.$el.querySelector('.dropdown .js-stage-item').textContent).toContain('build');
+      expect(findStageItem(0).text()).toBe('build');
     });
 
     it('rendes selected stage', () => {
-      expect(vm.$el.querySelector('.dropdown .js-selected-stage').textContent).toContain('deploy');
+      expect(findSelectedStageText()).toBe('deploy');
     });
 
     it(`renders the pipeline info text like "Pipeline #123 for source_branch"`, () => {
-      const expected = `Pipeline #${pipeline.id} for ${pipeline.ref.name}`;
-      const actual = trimText(vm.$el.querySelector('.js-pipeline-info').innerText);
+      const expected = `Pipeline #${mockPipelineWithoutMR.id} for ${mockPipelineWithoutMR.ref.name}`;
+      const actual = trimText(findPipelineInfoText());
 
       expect(actual).toBe(expected);
     });
   });
 
   describe('with an "attached" merge request pipeline', () => {
-    let pipeline;
-
     beforeEach(() => {
-      pipeline = JSON.parse(JSON.stringify(mockPipelineData));
-      pipeline.flags.merge_request_pipeline = true;
-      pipeline.flags.detached_merge_request_pipeline = false;
-
-      vm = mountComponent(Component, {
-        pipeline,
+      createComponent({
+        pipeline: mockPipelineWithAttachedMR,
         stages: [],
         selectedStage: 'deploy',
       });
     });
 
     it(`renders the pipeline info text like "Pipeline #123 for !456 with source_branch into target_branch"`, () => {
-      const expected = `Pipeline #${pipeline.id} for !${pipeline.merge_request.iid} with ${pipeline.merge_request.source_branch} into ${pipeline.merge_request.target_branch}`;
-      const actual = trimText(vm.$el.querySelector('.js-pipeline-info').innerText);
+      const expected = `Pipeline #${mockPipelineWithAttachedMR.id} for !${mockPipelineWithAttachedMR.merge_request.iid} with ${mockPipelineWithAttachedMR.merge_request.source_branch} into ${mockPipelineWithAttachedMR.merge_request.target_branch}`;
+      const actual = trimText(findPipelineInfoText());
 
       expect(actual).toBe(expected);
     });
 
     it(`renders the correct merge request link`, () => {
-      const actual = vm.$el.querySelector('.js-mr-link').href;
-
-      expect(actual).toContain(pipeline.merge_request.path);
+      expect(findMRLinkPath()).toBe(mockPipelineWithAttachedMR.merge_request.path);
     });
 
     it(`renders the correct source branch link`, () => {
-      const actual = vm.$el.querySelector('.js-source-branch-link').href;
-
-      expect(actual).toContain(pipeline.merge_request.source_branch_path);
+      expect(findSourceBranchLinkPath()).toBe(
+        mockPipelineWithAttachedMR.merge_request.source_branch_path,
+      );
     });
 
     it(`renders the correct target branch link`, () => {
-      const actual = vm.$el.querySelector('.js-target-branch-link').href;
-
-      expect(actual).toContain(pipeline.merge_request.target_branch_path);
+      expect(findTargetBranchLinkPath()).toBe(
+        mockPipelineWithAttachedMR.merge_request.target_branch_path,
+      );
     });
   });
 
   describe('with a detached merge request pipeline', () => {
-    let pipeline;
-
     beforeEach(() => {
-      pipeline = JSON.parse(JSON.stringify(mockPipelineData));
-      pipeline.flags.merge_request_pipeline = false;
-      pipeline.flags.detached_merge_request_pipeline = true;
-
-      vm = mountComponent(Component, {
-        pipeline,
+      createComponent({
+        pipeline: mockPipelineDetached,
         stages: [],
         selectedStage: 'deploy',
       });
     });
 
     it(`renders the pipeline info like "Pipeline #123 for !456 with source_branch"`, () => {
-      const expected = `Pipeline #${pipeline.id} for !${pipeline.merge_request.iid} with ${pipeline.merge_request.source_branch}`;
-      const actual = trimText(vm.$el.querySelector('.js-pipeline-info').innerText);
+      const expected = `Pipeline #${mockPipelineDetached.id} for !${mockPipelineDetached.merge_request.iid} with ${mockPipelineDetached.merge_request.source_branch}`;
+      const actual = trimText(findPipelineInfoText());
 
       expect(actual).toBe(expected);
     });
 
     it(`renders the correct merge request link`, () => {
-      const actual = vm.$el.querySelector('.js-mr-link').href;
-
-      expect(actual).toContain(pipeline.merge_request.path);
+      expect(findMRLinkPath()).toBe(mockPipelineDetached.merge_request.path);
     });
 
     it(`renders the correct source branch link`, () => {
-      const actual = vm.$el.querySelector('.js-source-branch-link').href;
-
-      expect(actual).toContain(pipeline.merge_request.source_branch_path);
+      expect(findSourceBranchLinkPath()).toBe(
+        mockPipelineDetached.merge_request.source_branch_path,
+      );
     });
   });
 });

spec/frontend/jobs/mock_data.js

@@ -1189,3 +1189,86 @@ export const jobsInStage = {
   path: '/gitlab-org/gitlab-shell/pipelines/27#build',
   dropdown_path: '/gitlab-org/gitlab-shell/pipelines/27/stage.json?stage=build',
 };
+
+export const mockPipelineWithoutMR = {
+  id: 28029444,
+  details: {
+    status: {
+      details_path: '/gitlab-org/gitlab-foss/pipelines/28029444',
+      group: 'success',
+      has_details: true,
+      icon: 'status_success',
+      label: 'passed',
+      text: 'passed',
+      tooltip: 'passed',
+    },
+  },
+  path: 'pipeline/28029444',
+  ref: {
+    name: 'test-branch',
+  },
+};
+
+export const mockPipelineWithAttachedMR = {
+  id: 28029444,
+  details: {
+    status: {
+      details_path: '/gitlab-org/gitlab-foss/pipelines/28029444',
+      group: 'success',
+      has_details: true,
+      icon: 'status_success',
+      label: 'passed',
+      text: 'passed',
+      tooltip: 'passed',
+    },
+  },
+  path: 'pipeline/28029444',
+  flags: {
+    merge_request_pipeline: true,
+    detached_merge_request_pipeline: false,
+  },
+  merge_request: {
+    iid: 1234,
+    path: '/root/detached-merge-request-pipelines/-/merge_requests/1',
+    title: 'Update README.md',
+    source_branch: 'feature-1234',
+    source_branch_path: '/root/detached-merge-request-pipelines/branches/feature-1234',
+    target_branch: 'master',
+    target_branch_path: '/root/detached-merge-request-pipelines/branches/master',
+  },
+  ref: {
+    name: 'test-branch',
+  },
+};
+
+export const mockPipelineDetached = {
+  id: 28029444,
+  details: {
+    status: {
+      details_path: '/gitlab-org/gitlab-foss/pipelines/28029444',
+      group: 'success',
+      has_details: true,
+      icon: 'status_success',
+      label: 'passed',
+      text: 'passed',
+      tooltip: 'passed',
+    },
+  },
+  path: 'pipeline/28029444',
+  flags: {
+    merge_request_pipeline: false,
+    detached_merge_request_pipeline: true,
+  },
+  merge_request: {
+    iid: 1234,
+    path: '/root/detached-merge-request-pipelines/-/merge_requests/1',
+    title: 'Update README.md',
+    source_branch: 'feature-1234',
+    source_branch_path: '/root/detached-merge-request-pipelines/branches/feature-1234',
+    target_branch: 'master',
+    target_branch_path: '/root/detached-merge-request-pipelines/branches/master',
+  },
+  ref: {
+    name: 'test-branch',
+  },
+};