Add latest changes from gitlab-org/gitlab@13-9-stable-eev13.9.0-rc42

23 files changed, 677 insertions, 474 deletions

diff --git a/spec/frontend/projects/commit/components/branches_dropdown_spec.js b/spec/frontend/projects/commit/components/branches_dropdown_spec.js
index 9fa7d658405..7686c28c7fc 100644
--- a/spec/frontend/projects/commit/components/branches_dropdown_spec.js
+++ b/spec/frontend/projects/commit/components/branches_dropdown_spec.js
@@ -1,8 +1,8 @@
+import { GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
-import { shallowMount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import { GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
 import BranchesDropdown from '~/projects/commit/components/branches_dropdown.vue';
 
 Vue.use(Vuex);
diff --git a/spec/frontend/projects/commit/components/form_modal_spec.js b/spec/frontend/projects/commit/components/form_modal_spec.js
index 1c37b82fed3..1569f5b4bbe 100644
--- a/spec/frontend/projects/commit/components/form_modal_spec.js
+++ b/spec/frontend/projects/commit/components/form_modal_spec.js
@@ -1,12 +1,13 @@
-import MockAdapter from 'axios-mock-adapter';
-import { shallowMount, mount, createWrapper } from '@vue/test-utils';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { GlModal, GlForm, GlFormCheckbox, GlSprintf } from '@gitlab/ui';
 import { within } from '@testing-library/dom';
+import { shallowMount, mount, createWrapper } from '@vue/test-utils';
+import MockAdapter from 'axios-mock-adapter';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import axios from '~/lib/utils/axios_utils';
-import eventHub from '~/projects/commit/event_hub';
-import CommitFormModal from '~/projects/commit/components/form_modal.vue';
+import { BV_SHOW_MODAL } from '~/lib/utils/constants';
 import BranchesDropdown from '~/projects/commit/components/branches_dropdown.vue';
+import CommitFormModal from '~/projects/commit/components/form_modal.vue';
+import eventHub from '~/projects/commit/event_hub';
 import createStore from '~/projects/commit/store';
 import mockData from '../mock_data';
 
@@ -64,7 +65,7 @@ describe('CommitFormModal', () => {
 
       wrapper.vm.show();
 
-      expect(rootEmit).toHaveBeenCalledWith('bv::show::modal', mockData.modalPropsData.modalId);
+      expect(rootEmit).toHaveBeenCalledWith(BV_SHOW_MODAL, mockData.modalPropsData.modalId);
     });
 
     it('Clears the modal state once modal is hidden', () => {
diff --git a/spec/frontend/projects/commit/components/form_trigger_spec.js b/spec/frontend/projects/commit/components/form_trigger_spec.js
index ca51419d6a5..4503493c0a6 100644
--- a/spec/frontend/projects/commit/components/form_trigger_spec.js
+++ b/spec/frontend/projects/commit/components/form_trigger_spec.js
@@ -1,5 +1,5 @@
-import { shallowMount } from '@vue/test-utils';
 import { GlLink } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
 import FormTrigger from '~/projects/commit/components/form_trigger.vue';
 import eventHub from '~/projects/commit/event_hub';
 
diff --git a/spec/frontend/projects/commit/store/actions_spec.js b/spec/frontend/projects/commit/store/actions_spec.js
index ec528d4ee88..458372229cf 100644
--- a/spec/frontend/projects/commit/store/actions_spec.js
+++ b/spec/frontend/projects/commit/store/actions_spec.js
@@ -1,12 +1,12 @@
 import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
-import axios from '~/lib/utils/axios_utils';
 import createFlash from '~/flash';
-import getInitialState from '~/projects/commit/store/state';
+import axios from '~/lib/utils/axios_utils';
+import { PROJECT_BRANCHES_ERROR } from '~/projects/commit/constants';
 import * as actions from '~/projects/commit/store/actions';
 import * as types from '~/projects/commit/store/mutation_types';
+import getInitialState from '~/projects/commit/store/state';
 import mockData from '../mock_data';
-import { PROJECT_BRANCHES_ERROR } from '~/projects/commit/constants';
 
 jest.mock('~/flash.js');
 
diff --git a/spec/frontend/projects/commit/store/mutations_spec.js b/spec/frontend/projects/commit/store/mutations_spec.js
index 59ab3d9a74a..2ea50e71772 100644
--- a/spec/frontend/projects/commit/store/mutations_spec.js
+++ b/spec/frontend/projects/commit/store/mutations_spec.js
@@ -1,5 +1,5 @@
-import mutations from '~/projects/commit/store/mutations';
 import * as types from '~/projects/commit/store/mutation_types';
+import mutations from '~/projects/commit/store/mutations';
 
 describe('Commit form modal mutations', () => {
   let stateCopy;
diff --git a/spec/frontend/projects/commit_box/info/load_branches_spec.js b/spec/frontend/projects/commit_box/info/load_branches_spec.js
index ebd4ee45dab..8100200cbdd 100644
--- a/spec/frontend/projects/commit_box/info/load_branches_spec.js
+++ b/spec/frontend/projects/commit_box/info/load_branches_spec.js
@@ -1,6 +1,6 @@
 import axios from 'axios';
-import waitForPromises from 'helpers/wait_for_promises';
 import MockAdapter from 'axios-mock-adapter';
+import waitForPromises from 'helpers/wait_for_promises';
 import { loadBranches } from '~/projects/commit_box/info/load_branches';
 
 const mockCommitPath = '/commit/abcd/branches';
diff --git a/spec/frontend/projects/commits/components/author_select_spec.js b/spec/frontend/projects/commits/components/author_select_spec.js
index 63920ddfd72..9a8f7ff7582 100644
--- a/spec/frontend/projects/commits/components/author_select_spec.js
+++ b/spec/frontend/projects/commits/components/author_select_spec.js
@@ -1,6 +1,6 @@
+import { GlDropdown, GlDropdownSectionHeader, GlSearchBoxByType, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
-import { GlDropdown, GlDropdownSectionHeader, GlSearchBoxByType, GlDropdownItem } from '@gitlab/ui';
 import * as urlUtility from '~/lib/utils/url_utility';
 import AuthorSelect from '~/projects/commits/components/author_select.vue';
 import { createStore } from '~/projects/commits/store';
diff --git a/spec/frontend/projects/commits/store/actions_spec.js b/spec/frontend/projects/commits/store/actions_spec.js
index a842aaa2a76..e2c993b8395 100644
--- a/spec/frontend/projects/commits/store/actions_spec.js
+++ b/spec/frontend/projects/commits/store/actions_spec.js
@@ -1,10 +1,10 @@
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
-import * as types from '~/projects/commits/store/mutation_types';
+import { deprecatedCreateFlash as createFlash } from '~/flash';
 import actions from '~/projects/commits/store/actions';
+import * as types from '~/projects/commits/store/mutation_types';
 import createState from '~/projects/commits/store/state';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
 
 jest.mock('~/flash');
 
diff --git a/spec/frontend/projects/compare/components/app_spec.js b/spec/frontend/projects/compare/components/app_spec.js
new file mode 100644
index 00000000000..d28a30e93b1
--- /dev/null
+++ b/spec/frontend/projects/compare/components/app_spec.js
@@ -0,0 +1,116 @@
+import { GlButton } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import CompareApp from '~/projects/compare/components/app.vue';
+import RevisionDropdown from '~/projects/compare/components/revision_dropdown.vue';
+
+jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
+
+const projectCompareIndexPath = 'some/path';
+const refsProjectPath = 'some/refs/path';
+const paramsFrom = 'master';
+const paramsTo = 'master';
+
+describe('CompareApp component', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(CompareApp, {
+      propsData: {
+        projectCompareIndexPath,
+        refsProjectPath,
+        paramsFrom,
+        paramsTo,
+        projectMergeRequestPath: '',
+        createMrPath: '',
+        ...props,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('renders component with prop', () => {
+    expect(wrapper.props()).toEqual(
+      expect.objectContaining({
+        projectCompareIndexPath,
+        refsProjectPath,
+        paramsFrom,
+        paramsTo,
+      }),
+    );
+  });
+
+  it('contains the correct form attributes', () => {
+    expect(wrapper.attributes('action')).toBe(projectCompareIndexPath);
+    expect(wrapper.attributes('method')).toBe('POST');
+  });
+
+  it('has input with csrf token', () => {
+    expect(wrapper.find('input[name="authenticity_token"]').attributes('value')).toBe(
+      'mock-csrf-token',
+    );
+  });
+
+  it('has ellipsis', () => {
+    expect(wrapper.find('[data-testid="ellipsis"]').exists()).toBe(true);
+  });
+
+  it('render Source and Target BranchDropdown components', () => {
+    const branchDropdowns = wrapper.findAll(RevisionDropdown);
+
+    expect(branchDropdowns.length).toBe(2);
+    expect(branchDropdowns.at(0).props('revisionText')).toBe('Source');
+    expect(branchDropdowns.at(1).props('revisionText')).toBe('Target');
+  });
+
+  describe('compare button', () => {
+    const findCompareButton = () => wrapper.find(GlButton);
+
+    it('renders button', () => {
+      expect(findCompareButton().exists()).toBe(true);
+    });
+
+    it('submits form', () => {
+      findCompareButton().vm.$emit('click');
+      expect(wrapper.find('form').element.submit).toHaveBeenCalled();
+    });
+
+    it('has compare text', () => {
+      expect(findCompareButton().text()).toBe('Compare');
+    });
+  });
+
+  describe('merge request buttons', () => {
+    const findProjectMrButton = () => wrapper.find('[data-testid="projectMrButton"]');
+    const findCreateMrButton = () => wrapper.find('[data-testid="createMrButton"]');
+
+    it('does not have merge request buttons', () => {
+      createComponent();
+      expect(findProjectMrButton().exists()).toBe(false);
+      expect(findCreateMrButton().exists()).toBe(false);
+    });
+
+    it('has "View open merge request" button', () => {
+      createComponent({
+        projectMergeRequestPath: 'some/project/merge/request/path',
+      });
+      expect(findProjectMrButton().exists()).toBe(true);
+      expect(findCreateMrButton().exists()).toBe(false);
+    });
+
+    it('has "Create merge request" button', () => {
+      createComponent({
+        createMrPath: 'some/create/create/mr/path',
+      });
+      expect(findProjectMrButton().exists()).toBe(false);
+      expect(findCreateMrButton().exists()).toBe(true);
+    });
+  });
+});
diff --git a/spec/frontend/projects/compare/components/revision_dropdown_spec.js b/spec/frontend/projects/compare/components/revision_dropdown_spec.js
new file mode 100644
index 00000000000..f3ff5e26d2b
--- /dev/null
+++ b/spec/frontend/projects/compare/components/revision_dropdown_spec.js
@@ -0,0 +1,92 @@
+import { GlDropdown } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import AxiosMockAdapter from 'axios-mock-adapter';
+import createFlash from '~/flash';
+import axios from '~/lib/utils/axios_utils';
+import RevisionDropdown from '~/projects/compare/components/revision_dropdown.vue';
+
+const defaultProps = {
+  refsProjectPath: 'some/refs/path',
+  revisionText: 'Target',
+  paramsName: 'from',
+  paramsBranch: 'master',
+};
+
+jest.mock('~/flash');
+
+describe('RevisionDropdown component', () => {
+  let wrapper;
+  let axiosMock;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(RevisionDropdown, {
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    axiosMock = new AxiosMockAdapter(axios);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    axiosMock.restore();
+  });
+
+  const findGlDropdown = () => wrapper.find(GlDropdown);
+
+  it('sets hidden input', () => {
+    createComponent();
+    expect(wrapper.find('input[type="hidden"]').attributes('value')).toBe(
+      defaultProps.paramsBranch,
+    );
+  });
+
+  it('update the branches on success', async () => {
+    const Branches = ['branch-1', 'branch-2'];
+    const Tags = ['tag-1', 'tag-2', 'tag-3'];
+
+    axiosMock.onGet(defaultProps.refsProjectPath).replyOnce(200, {
+      Branches,
+      Tags,
+    });
+
+    createComponent();
+
+    await axios.waitForAll();
+
+    expect(wrapper.vm.branches).toEqual(Branches);
+    expect(wrapper.vm.tags).toEqual(Tags);
+  });
+
+  it('shows flash message on error', async () => {
+    axiosMock.onGet('some/invalid/path').replyOnce(404);
+
+    createComponent();
+
+    await wrapper.vm.fetchBranchesAndTags();
+    expect(createFlash).toHaveBeenCalled();
+  });
+
+  describe('GlDropdown component', () => {
+    it('renders props', () => {
+      createComponent();
+      expect(wrapper.props()).toEqual(expect.objectContaining(defaultProps));
+    });
+
+    it('display default text', () => {
+      createComponent({
+        paramsBranch: null,
+      });
+      expect(findGlDropdown().props('text')).toBe('Select branch/tag');
+    });
+
+    it('display params branch text', () => {
+      createComponent();
+      expect(findGlDropdown().props('text')).toBe(defaultProps.paramsBranch);
+    });
+  });
+});
diff --git a/spec/frontend/projects/components/__snapshots__/project_delete_button_spec.js.snap b/spec/frontend/projects/components/__snapshots__/project_delete_button_spec.js.snap
index 0b9f095a700..f0d72124379 100644
--- a/spec/frontend/projects/components/__snapshots__/project_delete_button_spec.js.snap
+++ b/spec/frontend/projects/components/__snapshots__/project_delete_button_spec.js.snap
@@ -53,12 +53,12 @@ exports[`Project remove modal initialized matches the snapshot 1`] = `
         variant="danger"
       >
         <gl-sprintf-stub
-          message="Once a project is permanently deleted it %{strongStart}cannot be recovered%{strongEnd}. Permanently deleting this project will %{strongStart}immediately delete%{strongEnd} its repositories and %{strongStart}all related resources%{strongEnd} including issues, merge requests etc."
+          message="Once a project is permanently deleted, it %{strongStart}cannot be recovered%{strongEnd}. Permanently deleting this project will %{strongStart}immediately delete%{strongEnd} its repositories and %{strongStart}all related resources%{strongEnd}, including issues, merge requests etc."
         />
       </gl-alert-stub>
        
       <p>
-        This action cannot be undone. You will lose this project's repository and all content: issues, merge requests, etc.
+        This action cannot be undone. You will lose this project's repository and all related resources, including issues, merge requests, etc.
       </p>
        
       <p
diff --git a/spec/frontend/projects/components/shared/delete_button_spec.js b/spec/frontend/projects/components/shared/delete_button_spec.js
index cf7e41a2df2..3e491584670 100644
--- a/spec/frontend/projects/components/shared/delete_button_spec.js
+++ b/spec/frontend/projects/components/shared/delete_button_spec.js
@@ -1,5 +1,5 @@
-import { shallowMount } from '@vue/test-utils';
 import { GlModal } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
 import { stubComponent } from 'helpers/stub_component';
 import SharedDeleteButton from '~/projects/components/shared/delete_button.vue';
 
diff --git a/spec/frontend/projects/experiment_new_project_creation/components/app_spec.js b/spec/frontend/projects/experiment_new_project_creation/components/app_spec.js
index 9a5f200f5a9..b4ae50341d4 100644
--- a/spec/frontend/projects/experiment_new_project_creation/components/app_spec.js
+++ b/spec/frontend/projects/experiment_new_project_creation/components/app_spec.js
@@ -1,8 +1,8 @@
-import { shallowMount } from '@vue/test-utils';
 import { GlBreadcrumb } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
 import App from '~/projects/experiment_new_project_creation/components/app.vue';
-import WelcomePage from '~/projects/experiment_new_project_creation/components/welcome.vue';
 import LegacyContainer from '~/projects/experiment_new_project_creation/components/legacy_container.vue';
+import WelcomePage from '~/projects/experiment_new_project_creation/components/welcome.vue';
 
 describe('Experimental new project creation app', () => {
   let wrapper;
diff --git a/spec/frontend/projects/members/utils_spec.js b/spec/frontend/projects/members/utils_spec.js
new file mode 100644
index 00000000000..813e8455e85
--- /dev/null
+++ b/spec/frontend/projects/members/utils_spec.js
@@ -0,0 +1,14 @@
+import { projectMemberRequestFormatter } from '~/projects/members/utils';
+
+describe('project member utils', () => {
+  describe('projectMemberRequestFormatter', () => {
+    it('returns expected format', () => {
+      expect(
+        projectMemberRequestFormatter({
+          accessLevel: 50,
+          expires_at: '2020-10-16',
+        }),
+      ).toEqual({ project_member: { access_level: 50, expires_at: '2020-10-16' } });
+    });
+  });
+});
diff --git a/spec/frontend/projects/pipelines/charts/components/app_spec.js b/spec/frontend/projects/pipelines/charts/components/app_spec.js
index 44329944097..e8aace14db4 100644
--- a/spec/frontend/projects/pipelines/charts/components/app_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/app_spec.js
@@ -1,32 +1,19 @@
-import { merge } from 'lodash';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import VueApollo from 'vue-apollo';
 import { GlTabs, GlTab } from '@gitlab/ui';
-import createMockApollo from 'helpers/mock_apollo_helper';
+import { shallowMount } from '@vue/test-utils';
+import { merge } from 'lodash';
+import setWindowLocation from 'helpers/set_window_location_helper';
+import { TEST_HOST } from 'helpers/test_constants';
+import { mergeUrlParams, updateHistory, getParameterValues } from '~/lib/utils/url_utility';
 import Component from '~/projects/pipelines/charts/components/app.vue';
 import PipelineCharts from '~/projects/pipelines/charts/components/pipeline_charts.vue';
-import getPipelineCountByStatus from '~/projects/pipelines/charts/graphql/queries/get_pipeline_count_by_status.query.graphql';
-import getProjectPipelineStatistics from '~/projects/pipelines/charts/graphql/queries/get_project_pipeline_statistics.query.graphql';
-import { mockPipelineCount, mockPipelineStatistics } from '../mock_data';
 
-const projectPath = 'gitlab-org/gitlab';
-const localVue = createLocalVue();
-localVue.use(VueApollo);
+jest.mock('~/lib/utils/url_utility');
 
 const DeploymentFrequencyChartsStub = { name: 'DeploymentFrequencyCharts', render: () => {} };
 
 describe('ProjectsPipelinesChartsApp', () => {
   let wrapper;
 
-  function createMockApolloProvider() {
-    const requestHandlers = [
-      [getPipelineCountByStatus, jest.fn().mockResolvedValue(mockPipelineCount)],
-      [getProjectPipelineStatistics, jest.fn().mockResolvedValue(mockPipelineStatistics)],
-    ];
-
-    return createMockApollo(requestHandlers);
-  }
-
   function createComponent(mountOptions = {}) {
     wrapper = shallowMount(
       Component,
@@ -34,11 +21,8 @@ describe('ProjectsPipelinesChartsApp', () => {
         {},
         {
           provide: {
-            projectPath,
             shouldRenderDeploymentFrequencyCharts: false,
           },
-          localVue,
-          apolloProvider: createMockApolloProvider(),
           stubs: {
             DeploymentFrequencyCharts: DeploymentFrequencyChartsStub,
           },
@@ -57,52 +41,15 @@ describe('ProjectsPipelinesChartsApp', () => {
     wrapper = null;
   });
 
-  describe('pipelines charts', () => {
-    it('displays the pipeline charts', () => {
-      const chart = wrapper.find(PipelineCharts);
-      const analytics = mockPipelineStatistics.data.project.pipelineAnalytics;
-
-      const {
-        totalPipelines: total,
-        successfulPipelines: success,
-        failedPipelines: failed,
-      } = mockPipelineCount.data.project;
-
-      expect(chart.exists()).toBe(true);
-      expect(chart.props()).toMatchObject({
-        counts: {
-          failed: failed.count,
-          success: success.count,
-          total: total.count,
-          successRatio: (success.count / (success.count + failed.count)) * 100,
-        },
-        lastWeek: {
-          labels: analytics.weekPipelinesLabels,
-          totals: analytics.weekPipelinesTotals,
-          success: analytics.weekPipelinesSuccessful,
-        },
-        lastMonth: {
-          labels: analytics.monthPipelinesLabels,
-          totals: analytics.monthPipelinesTotals,
-          success: analytics.monthPipelinesSuccessful,
-        },
-        lastYear: {
-          labels: analytics.yearPipelinesLabels,
-          totals: analytics.yearPipelinesTotals,
-          success: analytics.yearPipelinesSuccessful,
-        },
-        timesChart: {
-          labels: analytics.pipelineTimesLabels,
-          values: analytics.pipelineTimesValues,
-        },
-      });
-    });
-  });
-
-  const findDeploymentFrequencyCharts = () => wrapper.find(DeploymentFrequencyChartsStub);
   const findGlTabs = () => wrapper.find(GlTabs);
   const findAllGlTab = () => wrapper.findAll(GlTab);
   const findGlTabAt = (i) => findAllGlTab().at(i);
+  const findDeploymentFrequencyCharts = () => wrapper.find(DeploymentFrequencyChartsStub);
+  const findPipelineCharts = () => wrapper.find(PipelineCharts);
+
+  it('renders the pipeline charts', () => {
+    expect(findPipelineCharts().exists()).toBe(true);
+  });
 
   describe('when shouldRenderDeploymentFrequencyCharts is true', () => {
     beforeEach(() => {
@@ -115,6 +62,97 @@ describe('ProjectsPipelinesChartsApp', () => {
       expect(findGlTabAt(1).attributes('title')).toBe('Deployments');
       expect(findDeploymentFrequencyCharts().exists()).toBe(true);
     });
+
+    it('sets the tab and url when a tab is clicked', async () => {
+      let chartsPath;
+      setWindowLocation(`${TEST_HOST}/gitlab-org/gitlab-test/-/pipelines/charts`);
+
+      mergeUrlParams.mockImplementation(({ chart }, path) => {
+        expect(chart).toBe('deployments');
+        expect(path).toBe(window.location.pathname);
+        chartsPath = `${path}?chart=${chart}`;
+        return chartsPath;
+      });
+
+      updateHistory.mockImplementation(({ url }) => {
+        expect(url).toBe(chartsPath);
+      });
+      const tabs = findGlTabs();
+
+      expect(tabs.attributes('value')).toBe('0');
+
+      tabs.vm.$emit('input', 1);
+
+      await wrapper.vm.$nextTick();
+
+      expect(tabs.attributes('value')).toBe('1');
+    });
+
+    it('should not try to push history if the tab does not change', async () => {
+      setWindowLocation(`${TEST_HOST}/gitlab-org/gitlab-test/-/pipelines/charts`);
+
+      mergeUrlParams.mockImplementation(({ chart }, path) => `${path}?chart=${chart}`);
+
+      const tabs = findGlTabs();
+
+      expect(tabs.attributes('value')).toBe('0');
+
+      tabs.vm.$emit('input', 0);
+
+      await wrapper.vm.$nextTick();
+
+      expect(updateHistory).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('when provided with a query param', () => {
+    it.each`
+      chart            | tab
+      ${'deployments'} | ${'1'}
+      ${'pipelines'}   | ${'0'}
+      ${'fake'}        | ${'0'}
+      ${''}            | ${'0'}
+    `('shows the correct tab for URL parameter "$chart"', ({ chart, tab }) => {
+      setWindowLocation(`${TEST_HOST}/gitlab-org/gitlab-test/-/pipelines/charts?chart=${chart}`);
+      getParameterValues.mockImplementation((name) => {
+        expect(name).toBe('chart');
+        return chart ? [chart] : [];
+      });
+      createComponent({ provide: { shouldRenderDeploymentFrequencyCharts: true } });
+      expect(findGlTabs().attributes('value')).toBe(tab);
+    });
+
+    it('should set the tab when the back button is clicked', async () => {
+      let popstateHandler;
+
+      window.addEventListener = jest.fn();
+
+      window.addEventListener.mockImplementation((event, handler) => {
+        if (event === 'popstate') {
+          popstateHandler = handler;
+        }
+      });
+
+      getParameterValues.mockImplementation((name) => {
+        expect(name).toBe('chart');
+        return [];
+      });
+
+      createComponent({ provide: { shouldRenderDeploymentFrequencyCharts: true } });
+
+      expect(findGlTabs().attributes('value')).toBe('0');
+
+      getParameterValues.mockImplementationOnce((name) => {
+        expect(name).toBe('chart');
+        return ['deployments'];
+      });
+
+      popstateHandler();
+
+      await wrapper.vm.$nextTick();
+
+      expect(findGlTabs().attributes('value')).toBe('1');
+    });
   });
 
   describe('when shouldRenderDeploymentFrequencyCharts is false', () => {
diff --git a/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js b/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js
new file mode 100644
index 00000000000..037530ddd48
--- /dev/null
+++ b/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js
@@ -0,0 +1,94 @@
+import { GlSegmentedControl } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import CiCdAnalyticsAreaChart from '~/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue';
+import CiCdAnalyticsCharts from '~/projects/pipelines/charts/components/ci_cd_analytics_charts.vue';
+import { transformedAreaChartData, chartOptions } from '../mock_data';
+
+const DEFAULT_PROPS = {
+  chartOptions,
+  charts: [
+    {
+      range: 'test range 1',
+      title: 'title 1',
+      data: transformedAreaChartData,
+    },
+    {
+      range: 'test range 2',
+      title: 'title 2',
+      data: transformedAreaChartData,
+    },
+    {
+      range: 'test range 3',
+      title: 'title 3',
+      data: transformedAreaChartData,
+    },
+  ],
+};
+
+describe('~/projects/pipelines/charts/components/ci_cd_analytics_charts.vue', () => {
+  let wrapper;
+
+  const createWrapper = (props = {}) =>
+    shallowMount(CiCdAnalyticsCharts, {
+      propsData: {
+        ...DEFAULT_PROPS,
+        ...props,
+      },
+    });
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+      wrapper = null;
+    }
+  });
+
+  describe('segmented control', () => {
+    let segmentedControl;
+
+    beforeEach(() => {
+      wrapper = createWrapper();
+      segmentedControl = wrapper.find(GlSegmentedControl);
+    });
+
+    it('should default to the first chart', () => {
+      expect(segmentedControl.props('checked')).toBe(0);
+    });
+
+    it('should use the title and index as values', () => {
+      const options = segmentedControl.props('options');
+      expect(options).toHaveLength(3);
+      expect(options).toEqual([
+        {
+          text: 'title 1',
+          value: 0,
+        },
+        {
+          text: 'title 2',
+          value: 1,
+        },
+        {
+          text: 'title 3',
+          value: 2,
+        },
+      ]);
+    });
+
+    it('should select a different chart on change', async () => {
+      segmentedControl.vm.$emit('input', 1);
+
+      const chart = wrapper.find(CiCdAnalyticsAreaChart);
+
+      await nextTick();
+
+      expect(chart.props('chartData')).toEqual(transformedAreaChartData);
+      expect(chart.text()).toBe('Date range: test range 2');
+    });
+  });
+
+  it('should not display charts if there are no charts', () => {
+    wrapper = createWrapper({ charts: [] });
+    expect(wrapper.find(CiCdAnalyticsAreaChart).exists()).toBe(false);
+  });
+});
diff --git a/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js
index 598055d5828..c5cfe783569 100644
--- a/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js
@@ -1,35 +1,37 @@
-import { shallowMount } from '@vue/test-utils';
 import { GlColumnChart } from '@gitlab/ui/dist/charts';
-import StatisticsList from '~/projects/pipelines/charts/components/statistics_list.vue';
-import CiCdAnalyticsAreaChart from '~/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import CiCdAnalyticsCharts from '~/projects/pipelines/charts/components/ci_cd_analytics_charts.vue';
 import PipelineCharts from '~/projects/pipelines/charts/components/pipeline_charts.vue';
-import {
-  counts,
-  timesChartData as timesChart,
-  areaChartData as lastWeek,
-  areaChartData as lastMonth,
-  lastYearChartData as lastYear,
-} from '../mock_data';
+import StatisticsList from '~/projects/pipelines/charts/components/statistics_list.vue';
+import getPipelineCountByStatus from '~/projects/pipelines/charts/graphql/queries/get_pipeline_count_by_status.query.graphql';
+import getProjectPipelineStatistics from '~/projects/pipelines/charts/graphql/queries/get_project_pipeline_statistics.query.graphql';
+import { mockPipelineCount, mockPipelineStatistics } from '../mock_data';
+
+const projectPath = 'gitlab-org/gitlab';
+const localVue = createLocalVue();
+localVue.use(VueApollo);
 
-describe('ProjectsPipelinesChartsApp', () => {
+describe('~/projects/pipelines/charts/components/pipeline_charts.vue', () => {
   let wrapper;
 
+  function createMockApolloProvider() {
+    const requestHandlers = [
+      [getPipelineCountByStatus, jest.fn().mockResolvedValue(mockPipelineCount)],
+      [getProjectPipelineStatistics, jest.fn().mockResolvedValue(mockPipelineStatistics)],
+    ];
+
+    return createMockApollo(requestHandlers);
+  }
+
   beforeEach(() => {
     wrapper = shallowMount(PipelineCharts, {
-      propsData: {
-        counts,
-        timesChart,
-        lastWeek,
-        lastMonth,
-        lastYear,
-      },
       provide: {
-        projectPath: 'test/project',
-        shouldRenderDeploymentFrequencyCharts: true,
-      },
-      stubs: {
-        DeploymentFrequencyCharts: true,
+        projectPath,
       },
+      localVue,
+      apolloProvider: createMockApolloProvider(),
     });
   });
 
@@ -43,7 +45,12 @@ describe('ProjectsPipelinesChartsApp', () => {
       const list = wrapper.find(StatisticsList);
 
       expect(list.exists()).toBe(true);
-      expect(list.props('counts')).toBe(counts);
+      expect(list.props('counts')).toEqual({
+        total: 34,
+        success: 23,
+        failed: 1,
+        successRatio: (23 / (23 + 1)) * 100,
+      });
     });
 
     it('displays the commit duration chart', () => {
@@ -58,20 +65,17 @@ describe('ProjectsPipelinesChartsApp', () => {
   });
 
   describe('pipelines charts', () => {
-    it('displays 3 area charts', () => {
-      expect(wrapper.findAll(CiCdAnalyticsAreaChart)).toHaveLength(3);
+    it('displays the charts components', () => {
+      expect(wrapper.find(CiCdAnalyticsCharts).exists()).toBe(true);
     });
 
     describe('displays individual correctly', () => {
       it('renders with the correct data', () => {
-        const charts = wrapper.findAll(CiCdAnalyticsAreaChart);
-        for (let i = 0; i < charts.length; i += 1) {
-          const chart = charts.at(i);
-
-          expect(chart.exists()).toBeTruthy();
-          expect(chart.props('chartData')).toBe(wrapper.vm.areaCharts[i].data);
-          expect(chart.text()).toBe(wrapper.vm.areaCharts[i].title);
-        }
+        const charts = wrapper.find(CiCdAnalyticsCharts);
+        expect(charts.props()).toEqual({
+          charts: wrapper.vm.areaCharts,
+          chartOptions: wrapper.vm.$options.areaChartOptions,
+        });
       });
     });
   });
diff --git a/spec/frontend/projects/pipelines/charts/mock_data.js b/spec/frontend/projects/pipelines/charts/mock_data.js
index 3bc09f0b0a0..2e2c594102c 100644
--- a/spec/frontend/projects/pipelines/charts/mock_data.js
+++ b/spec/frontend/projects/pipelines/charts/mock_data.js
@@ -57,6 +57,16 @@ export const mockPipelineCount = {
   },
 };
 
+export const chartOptions = {
+  xAxis: {
+    name: 'X axis title',
+    type: 'category',
+  },
+  yAxis: {
+    name: 'Y axis title',
+  },
+};
+
 export const mockPipelineStatistics = {
   data: {
     project: {
diff --git a/spec/frontend/projects/settings/access_dropdown_spec.js b/spec/frontend/projects/settings/access_dropdown_spec.js
index 8a57930ac83..236968a3736 100644
--- a/spec/frontend/projects/settings/access_dropdown_spec.js
+++ b/spec/frontend/projects/settings/access_dropdown_spec.js
@@ -14,7 +14,6 @@ describe('AccessDropdown', () => {
     `);
     const $dropdown = $('#dummy-dropdown');
     $dropdown.data('defaultLabel', defaultLabel);
-    gon.features = { deployKeysOnProtectedBranches: true };
     const options = {
       $dropdown,
       accessLevelsData: {
diff --git a/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js b/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js
index 1fac3d07b16..2d6efe7ae83 100644
--- a/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js
+++ b/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js
@@ -2,8 +2,8 @@ import { GlAlert, GlToggle, GlTooltip } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MockAxiosAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
-import SharedRunnersToggleComponent from '~/projects/settings/components/shared_runners_toggle.vue';
 import axios from '~/lib/utils/axios_utils';
+import SharedRunnersToggleComponent from '~/projects/settings/components/shared_runners_toggle.vue';
 
 const TEST_UPDATE_PATH = '/test/update_shared_runners';
 
diff --git a/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js b/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js
index c83b1852147..f9fbb1b3016 100644
--- a/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js
+++ b/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js
@@ -1,20 +1,36 @@
-import { mount } from '@vue/test-utils';
+import { GlAlert } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
-import ServiceDeskRoot from '~/projects/settings_service_desk/components/service_desk_root.vue';
-import ServiceDeskSetting from '~/projects/settings_service_desk/components/service_desk_setting.vue';
 import axios from '~/lib/utils/axios_utils';
 import httpStatusCodes from '~/lib/utils/http_status';
+import ServiceDeskRoot from '~/projects/settings_service_desk/components/service_desk_root.vue';
+import ServiceDeskSetting from '~/projects/settings_service_desk/components/service_desk_setting.vue';
 
 describe('ServiceDeskRoot', () => {
-  const endpoint = '/gitlab-org/gitlab-test/service_desk';
-  const initialIncomingEmail = 'servicedeskaddress@example.com';
   let axiosMock;
   let wrapper;
   let spy;
 
+  const provideData = {
+    customEmail: 'custom.email@example.com',
+    customEmailEnabled: true,
+    endpoint: '/gitlab-org/gitlab-test/service_desk',
+    initialIncomingEmail: 'servicedeskaddress@example.com',
+    initialIsEnabled: true,
+    outgoingName: 'GitLab Support Bot',
+    projectKey: 'key',
+    selectedTemplate: 'Bug',
+    templates: ['Bug', 'Documentation'],
+  };
+
+  const getAlertText = () => wrapper.find(GlAlert).text();
+
+  const createComponent = () => shallowMount(ServiceDeskRoot, { provide: provideData });
+
   beforeEach(() => {
     axiosMock = new AxiosMockAdapter(axios);
+    spy = jest.spyOn(axios, 'put');
   });
 
   afterEach(() => {
@@ -25,156 +41,122 @@ describe('ServiceDeskRoot', () => {
     }
   });
 
-  it('sends a request to toggle service desk off when the toggle is clicked from the on state', () => {
-    axiosMock.onPut(endpoint).replyOnce(httpStatusCodes.OK);
+  describe('ServiceDeskSetting component', () => {
+    it('is rendered', () => {
+      wrapper = createComponent();
+
+      expect(wrapper.find(ServiceDeskSetting).props()).toEqual({
+        customEmail: provideData.customEmail,
+        customEmailEnabled: provideData.customEmailEnabled,
+        incomingEmail: provideData.initialIncomingEmail,
+        initialOutgoingName: provideData.outgoingName,
+        initialProjectKey: provideData.projectKey,
+        initialSelectedTemplate: provideData.selectedTemplate,
+        isEnabled: provideData.initialIsEnabled,
+        isTemplateSaving: false,
+        templates: provideData.templates,
+      });
+    });
+
+    describe('toggle event', () => {
+      describe('when toggling service desk on', () => {
+        beforeEach(async () => {
+          wrapper = createComponent();
 
-    spy = jest.spyOn(axios, 'put');
+          wrapper.find(ServiceDeskSetting).vm.$emit('toggle', true);
 
-    wrapper = mount(ServiceDeskRoot, {
-      propsData: {
-        initialIsEnabled: true,
-        initialIncomingEmail,
-        endpoint,
-      },
-    });
+          await waitForPromises();
+        });
+
+        it('sends a request to turn service desk on', () => {
+          axiosMock.onPut(provideData.endpoint).replyOnce(httpStatusCodes.OK);
 
-    wrapper.find('button.gl-toggle').trigger('click');
+          expect(spy).toHaveBeenCalledWith(provideData.endpoint, { service_desk_enabled: true });
+        });
 
-    return wrapper.vm
-      .$nextTick()
-      .then(waitForPromises)
-      .then(() => {
-        expect(spy).toHaveBeenCalledWith(endpoint, { service_desk_enabled: false });
+        it('shows a message when there is an error', () => {
+          axiosMock.onPut(provideData.endpoint).networkError();
+
+          expect(getAlertText()).toContain('An error occurred while enabling Service Desk.');
+        });
       });
-  });
 
-  it('sends a request to toggle service desk on when the toggle is clicked from the off state', () => {
-    axiosMock.onPut(endpoint).replyOnce(httpStatusCodes.OK);
+      describe('when toggling service desk off', () => {
+        beforeEach(async () => {
+          wrapper = createComponent();
 
-    spy = jest.spyOn(axios, 'put');
+          wrapper.find(ServiceDeskSetting).vm.$emit('toggle', false);
 
-    wrapper = mount(ServiceDeskRoot, {
-      propsData: {
-        initialIsEnabled: false,
-        initialIncomingEmail: '',
-        endpoint,
-      },
-    });
+          await waitForPromises();
+        });
 
-    wrapper.find('button.gl-toggle').trigger('click');
+        it('sends a request to turn service desk off', () => {
+          axiosMock.onPut(provideData.endpoint).replyOnce(httpStatusCodes.OK);
 
-    return wrapper.vm.$nextTick(() => {
-      expect(spy).toHaveBeenCalledWith(endpoint, { service_desk_enabled: true });
-    });
-  });
+          expect(spy).toHaveBeenCalledWith(provideData.endpoint, { service_desk_enabled: false });
+        });
 
-  it('shows an error message when there is an issue toggling service desk on', () => {
-    axiosMock.onPut(endpoint).networkError();
+        it('shows a message when there is an error', () => {
+          axiosMock.onPut(provideData.endpoint).networkError();
 
-    wrapper = mount(ServiceDeskRoot, {
-      propsData: {
-        initialIsEnabled: false,
-        initialIncomingEmail: '',
-        endpoint,
-      },
+          expect(getAlertText()).toContain('An error occurred while disabling Service Desk.');
+        });
+      });
     });
 
-    wrapper.find('button.gl-toggle').trigger('click');
+    describe('save event', () => {
+      describe('successful request', () => {
+        beforeEach(async () => {
+          axiosMock.onPut(provideData.endpoint).replyOnce(httpStatusCodes.OK);
 
-    return wrapper.vm
-      .$nextTick()
-      .then(waitForPromises)
-      .then(() => {
-        expect(wrapper.html()).toContain('An error occurred while enabling Service Desk.');
-      });
-  });
+          wrapper = createComponent();
 
-  it('sends a request to update template when the "Save template" button is clicked', () => {
-    axiosMock.onPut(endpoint).replyOnce(httpStatusCodes.OK);
+          const payload = {
+            selectedTemplate: 'Bug',
+            outgoingName: 'GitLab Support Bot',
+            projectKey: 'key',
+          };
 
-    spy = jest.spyOn(axios, 'put');
+          wrapper.find(ServiceDeskSetting).vm.$emit('save', payload);
 
-    wrapper = mount(ServiceDeskRoot, {
-      propsData: {
-        initialIsEnabled: true,
-        endpoint,
-        initialIncomingEmail,
-        selectedTemplate: 'Bug',
-        outgoingName: 'GitLab Support Bot',
-        templates: ['Bug', 'Documentation'],
-        projectKey: 'key',
-      },
-    });
+          await waitForPromises();
+        });
 
-    wrapper.find('button.btn-success').trigger('click');
+        it('sends a request to update template', async () => {
+          expect(spy).toHaveBeenCalledWith(provideData.endpoint, {
+            issue_template_key: 'Bug',
+            outgoing_name: 'GitLab Support Bot',
+            project_key: 'key',
+            service_desk_enabled: true,
+          });
+        });
 
-    return wrapper.vm.$nextTick(() => {
-      expect(spy).toHaveBeenCalledWith(endpoint, {
-        issue_template_key: 'Bug',
-        outgoing_name: 'GitLab Support Bot',
-        project_key: 'key',
-        service_desk_enabled: true,
+        it('shows success message', () => {
+          expect(getAlertText()).toContain('Changes saved.');
+        });
       });
-    });
-  });
 
-  it('saves the template when the "Save template" button is clicked', () => {
-    axiosMock.onPut(endpoint).replyOnce(httpStatusCodes.OK);
-
-    wrapper = mount(ServiceDeskRoot, {
-      propsData: {
-        initialIsEnabled: true,
-        endpoint,
-        initialIncomingEmail,
-        selectedTemplate: 'Bug',
-        templates: ['Bug', 'Documentation'],
-      },
-    });
+      describe('unsuccessful request', () => {
+        beforeEach(async () => {
+          axiosMock.onPut(provideData.endpoint).networkError();
 
-    wrapper.find('button.btn-success').trigger('click');
+          wrapper = createComponent();
 
-    return wrapper.vm
-      .$nextTick()
-      .then(waitForPromises)
-      .then(() => {
-        expect(wrapper.html()).toContain('Changes saved.');
-      });
-  });
+          const payload = {
+            selectedTemplate: 'Bug',
+            outgoingName: 'GitLab Support Bot',
+            projectKey: 'key',
+          };
 
-  it('shows an error message when there is an issue saving the template', () => {
-    axiosMock.onPut(endpoint).networkError();
-
-    wrapper = mount(ServiceDeskRoot, {
-      propsData: {
-        initialIsEnabled: true,
-        endpoint,
-        initialIncomingEmail,
-        selectedTemplate: 'Bug',
-        templates: ['Bug', 'Documentation'],
-      },
-    });
+          wrapper.find(ServiceDeskSetting).vm.$emit('save', payload);
 
-    wrapper.find('button.btn-success').trigger('click');
+          await waitForPromises();
+        });
 
-    return wrapper.vm
-      .$nextTick()
-      .then(waitForPromises)
-      .then(() => {
-        expect(wrapper.html()).toContain('An error occured while saving changes:');
+        it('shows an error message', () => {
+          expect(getAlertText()).toContain('An error occured while saving changes:');
+        });
       });
-  });
-
-  it('passes customEmail through updatedCustomEmail correctly', () => {
-    const customEmail = 'foo';
-
-    wrapper = mount(ServiceDeskRoot, {
-      propsData: {
-        initialIsEnabled: true,
-        endpoint,
-        customEmail,
-      },
     });
-
-    expect(wrapper.find(ServiceDeskSetting).props('customEmail')).toEqual(customEmail);
   });
 });
diff --git a/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js b/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js
index ddd9a7b2fad..f6744f4971e 100644
--- a/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js
+++ b/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js
@@ -1,63 +1,68 @@
+import { GlButton, GlFormSelect, GlLoadingIcon, GlToggle } from '@gitlab/ui';
 import { shallowMount, mount } from '@vue/test-utils';
-import { GlLoadingIcon } from '@gitlab/ui';
-import eventHub from '~/projects/settings_service_desk/event_hub';
+import { nextTick } from 'vue';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import ServiceDeskSetting from '~/projects/settings_service_desk/components/service_desk_setting.vue';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
 describe('ServiceDeskSetting', () => {
   let wrapper;
 
+  const findButton = () => wrapper.find(GlButton);
+  const findClipboardButton = () => wrapper.find(ClipboardButton);
+  const findIncomingEmail = () => wrapper.findByTestId('incoming-email');
+  const findIncomingEmailLabel = () => wrapper.findByTestId('incoming-email-describer');
+  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
+  const findTemplateDropdown = () => wrapper.find(GlFormSelect);
+  const findToggle = () => wrapper.find(GlToggle);
+
+  const createComponent = ({ props = {}, mountFunction = shallowMount } = {}) =>
+    extendedWrapper(
+      mountFunction(ServiceDeskSetting, {
+        propsData: {
+          isEnabled: true,
+          ...props,
+        },
+      }),
+    );
+
   afterEach(() => {
     if (wrapper) {
       wrapper.destroy();
     }
   });
 
-  const findTemplateDropdown = () => wrapper.find('#service-desk-template-select');
-  const findIncomingEmail = () => wrapper.find('[data-testid="incoming-email"]');
-
   describe('when isEnabled=true', () => {
     describe('only isEnabled', () => {
       describe('as project admin', () => {
         beforeEach(() => {
-          wrapper = shallowMount(ServiceDeskSetting, {
-            propsData: {
-              isEnabled: true,
-            },
-          });
+          wrapper = createComponent();
         });
 
         it('should see activation checkbox', () => {
-          expect(wrapper.find('#service-desk-checkbox').exists()).toBe(true);
+          expect(findToggle().exists()).toBe(true);
         });
 
         it('should see main panel with the email info', () => {
-          expect(wrapper.find('#incoming-email-describer').exists()).toBe(true);
+          expect(findIncomingEmailLabel().exists()).toBe(true);
         });
 
         it('should see loading spinner and not the incoming email', () => {
-          expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+          expect(findLoadingIcon().exists()).toBe(true);
           expect(findIncomingEmail().exists()).toBe(false);
         });
       });
     });
 
     describe('service desk toggle', () => {
-      it('emits an event to turn on Service Desk when clicked', () => {
-        const eventSpy = jest.fn();
-        eventHub.$on('serviceDeskEnabledCheckboxToggled', eventSpy);
-
-        wrapper = mount(ServiceDeskSetting, {
-          propsData: {
-            isEnabled: false,
-          },
-        });
+      it('emits an event to turn on Service Desk when clicked', async () => {
+        wrapper = createComponent();
 
-        wrapper.find('#service-desk-checkbox').trigger('click');
+        findToggle().vm.$emit('change', true);
 
-        expect(eventSpy).toHaveBeenCalledWith(true);
+        await nextTick();
 
-        eventHub.$off('serviceDeskEnabledCheckboxToggled', eventSpy);
-        eventSpy.mockRestore();
+        expect(wrapper.emitted('toggle')[0]).toEqual([true]);
       });
     });
 
@@ -65,23 +70,23 @@ describe('ServiceDeskSetting', () => {
       const incomingEmail = 'foo@bar.com';
 
       beforeEach(() => {
-        wrapper = mount(ServiceDeskSetting, {
-          propsData: {
-            isEnabled: true,
-            incomingEmail,
-          },
+        wrapper = createComponent({
+          props: { incomingEmail },
         });
       });
 
       it('should see email and not the loading spinner', () => {
         expect(findIncomingEmail().element.value).toEqual(incomingEmail);
-        expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+        expect(findLoadingIcon().exists()).toBe(false);
       });
 
       it('renders a copy to clipboard button', () => {
-        expect(wrapper.find('.qa-clipboard-button').exists()).toBe(true);
-        expect(wrapper.find('.qa-clipboard-button').element.dataset.clipboardText).toBe(
-          incomingEmail,
+        expect(findClipboardButton().exists()).toBe(true);
+        expect(findClipboardButton().props()).toEqual(
+          expect.objectContaining({
+            title: 'Copy',
+            text: incomingEmail,
+          }),
         );
       });
     });
@@ -92,12 +97,8 @@ describe('ServiceDeskSetting', () => {
         const customEmail = 'custom@bar.com';
 
         beforeEach(() => {
-          wrapper = mount(ServiceDeskSetting, {
-            propsData: {
-              isEnabled: true,
-              incomingEmail,
-              customEmail,
-            },
+          wrapper = createComponent({
+            props: { incomingEmail, customEmail },
           });
         });
 
@@ -110,12 +111,8 @@ describe('ServiceDeskSetting', () => {
         const email = 'foo@bar.com';
 
         beforeEach(() => {
-          wrapper = mount(ServiceDeskSetting, {
-            propsData: {
-              isEnabled: true,
-              incomingEmail: email,
-              customEmail: email,
-            },
+          wrapper = createComponent({
+            props: { incomingEmail: email, customEmail: email },
           });
         });
 
@@ -127,21 +124,13 @@ describe('ServiceDeskSetting', () => {
 
     describe('templates dropdown', () => {
       it('renders a dropdown to choose a template', () => {
-        wrapper = shallowMount(ServiceDeskSetting, {
-          propsData: {
-            isEnabled: true,
-          },
-        });
+        wrapper = createComponent();
 
-        expect(wrapper.find('#service-desk-template-select').exists()).toBe(true);
+        expect(findTemplateDropdown().exists()).toBe(true);
       });
 
       it('renders a dropdown with a default value of ""', () => {
-        wrapper = mount(ServiceDeskSetting, {
-          propsData: {
-            isEnabled: true,
-          },
-        });
+        wrapper = createComponent({ mountFunction: mount });
 
         expect(findTemplateDropdown().element.value).toEqual('');
       });
@@ -149,23 +138,18 @@ describe('ServiceDeskSetting', () => {
       it('renders a dropdown with a value of "Bug" when it is the initial value', () => {
         const templates = ['Bug', 'Documentation', 'Security release'];
 
-        wrapper = mount(ServiceDeskSetting, {
-          propsData: {
-            isEnabled: true,
-            initialSelectedTemplate: 'Bug',
-            templates,
-          },
+        wrapper = createComponent({
+          props: { initialSelectedTemplate: 'Bug', templates },
+          mountFunction: mount,
         });
 
         expect(findTemplateDropdown().element.value).toEqual('Bug');
       });
 
       it('renders a dropdown with no options when the project has no templates', () => {
-        wrapper = mount(ServiceDeskSetting, {
-          propsData: {
-            isEnabled: true,
-            templates: [],
-          },
+        wrapper = createComponent({
+          props: { templates: [] },
+          mountFunction: mount,
         });
 
         // The dropdown by default has one empty option
@@ -174,11 +158,10 @@ describe('ServiceDeskSetting', () => {
 
       it('renders a dropdown with options when the project has templates', () => {
         const templates = ['Bug', 'Documentation', 'Security release'];
-        wrapper = mount(ServiceDeskSetting, {
-          propsData: {
-            isEnabled: true,
-            templates,
-          },
+
+        wrapper = createComponent({
+          props: { templates },
+          mountFunction: mount,
         });
 
         // An empty-named template is prepended so the user can select no template
@@ -199,78 +182,59 @@ describe('ServiceDeskSetting', () => {
 
   describe('save button', () => {
     it('renders a save button to save a template', () => {
-      wrapper = mount(ServiceDeskSetting, {
-        propsData: {
-          isEnabled: true,
-        },
-      });
+      wrapper = createComponent();
 
-      expect(wrapper.find('button.btn-success').text()).toContain('Save changes');
+      expect(findButton().text()).toContain('Save changes');
     });
 
-    it('emits a save event with the chosen template when the save button is clicked', () => {
-      const eventSpy = jest.fn();
-      eventHub.$on('serviceDeskTemplateSave', eventSpy);
-
-      wrapper = mount(ServiceDeskSetting, {
-        propsData: {
-          isEnabled: true,
+    it('emits a save event with the chosen template when the save button is clicked', async () => {
+      wrapper = createComponent({
+        props: {
           initialSelectedTemplate: 'Bug',
           initialOutgoingName: 'GitLab Support Bot',
           initialProjectKey: 'key',
         },
       });
 
-      wrapper.find('button.btn-success').trigger('click');
+      findButton().vm.$emit('click');
+
+      await nextTick();
 
-      expect(eventSpy).toHaveBeenCalledWith({
+      const payload = {
         selectedTemplate: 'Bug',
         outgoingName: 'GitLab Support Bot',
         projectKey: 'key',
-      });
+      };
 
-      eventHub.$off('serviceDeskTemplateSave', eventSpy);
-      eventSpy.mockRestore();
+      expect(wrapper.emitted('save')[0]).toEqual([payload]);
     });
   });
 
   describe('when isEnabled=false', () => {
     beforeEach(() => {
-      wrapper = shallowMount(ServiceDeskSetting, {
-        propsData: {
-          isEnabled: false,
-        },
+      wrapper = createComponent({
+        props: { isEnabled: false },
       });
     });
 
     it('does not render email panel', () => {
-      expect(wrapper.find('#incoming-email-describer').exists()).toBe(false);
+      expect(findIncomingEmailLabel().exists()).toBe(false);
     });
 
     it('does not render template dropdown', () => {
-      expect(wrapper.find('#service-desk-template-select').exists()).toBe(false);
+      expect(findTemplateDropdown().exists()).toBe(false);
     });
 
     it('does not render template save button', () => {
-      expect(wrapper.find('button.btn-success').exists()).toBe(false);
+      expect(findButton().exists()).toBe(false);
     });
 
-    it('emits an event to turn on Service Desk when the toggle is clicked', () => {
-      const eventSpy = jest.fn();
-      eventHub.$on('serviceDeskEnabledCheckboxToggled', eventSpy);
-
-      wrapper = mount(ServiceDeskSetting, {
-        propsData: {
-          isEnabled: true,
-        },
-      });
-
-      wrapper.find('#service-desk-checkbox').trigger('click');
+    it('emits an event to turn on Service Desk when the toggle is clicked', async () => {
+      findToggle().vm.$emit('change', false);
 
-      expect(eventSpy).toHaveBeenCalledWith(false);
+      await nextTick();
 
-      eventHub.$off('serviceDeskEnabledCheckboxToggled', eventSpy);
-      eventSpy.mockRestore();
+      expect(wrapper.emitted('toggle')[0]).toEqual([false]);
     });
   });
 });
diff --git a/spec/frontend/projects/settings_service_desk/services/service_desk_service_spec.js b/spec/frontend/projects/settings_service_desk/services/service_desk_service_spec.js
deleted file mode 100644
index d5340df03fe..00000000000
--- a/spec/frontend/projects/settings_service_desk/services/service_desk_service_spec.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import AxiosMockAdapter from 'axios-mock-adapter';
-import ServiceDeskService from '~/projects/settings_service_desk/services/service_desk_service';
-import axios from '~/lib/utils/axios_utils';
-import httpStatusCodes from '~/lib/utils/http_status';
-
-describe('ServiceDeskService', () => {
-  const endpoint = `/gitlab-org/gitlab-test/service_desk`;
-  const dummyResponse = { message: 'Dummy response' };
-  const errorMessage = 'Network Error';
-  let axiosMock;
-  let service;
-
-  beforeEach(() => {
-    axiosMock = new AxiosMockAdapter(axios);
-    service = new ServiceDeskService(endpoint);
-  });
-
-  afterEach(() => {
-    axiosMock.restore();
-  });
-
-  describe('toggleServiceDesk', () => {
-    it('makes a request to set service desk', () => {
-      axiosMock.onPut(endpoint).replyOnce(httpStatusCodes.OK, dummyResponse);
-
-      return service.toggleServiceDesk(true).then((response) => {
-        expect(response.data).toEqual(dummyResponse);
-      });
-    });
-
-    it('fails on error response', () => {
-      axiosMock.onPut(endpoint).networkError();
-
-      return service.toggleServiceDesk(true).catch((error) => {
-        expect(error.message).toBe(errorMessage);
-      });
-    });
-
-    it('makes a request with the expected body', () => {
-      axiosMock.onPut(endpoint).replyOnce(httpStatusCodes.OK, dummyResponse);
-
-      const spy = jest.spyOn(axios, 'put');
-
-      service.toggleServiceDesk(true);
-
-      expect(spy).toHaveBeenCalledWith(endpoint, {
-        service_desk_enabled: true,
-      });
-
-      spy.mockRestore();
-    });
-  });
-
-  describe('updateTemplate', () => {
-    it('makes a request to update template', () => {
-      axiosMock.onPut(endpoint).replyOnce(httpStatusCodes.OK, dummyResponse);
-
-      return service
-        .updateTemplate(
-          {
-            selectedTemplate: 'Bug',
-            outgoingName: 'GitLab Support Bot',
-          },
-          true,
-        )
-        .then((response) => {
-          expect(response.data).toEqual(dummyResponse);
-        });
-    });
-
-    it('fails on error response', () => {
-      axiosMock.onPut(endpoint).networkError();
-
-      return service
-        .updateTemplate(
-          {
-            selectedTemplate: 'Bug',
-            outgoingName: 'GitLab Support Bot',
-          },
-          true,
-        )
-        .catch((error) => {
-          expect(error.message).toBe(errorMessage);
-        });
-    });
-
-    it('makes a request with the expected body', () => {
-      axiosMock.onPut(endpoint).replyOnce(httpStatusCodes.OK, dummyResponse);
-
-      const spy = jest.spyOn(axios, 'put');
-
-      service.updateTemplate(
-        {
-          selectedTemplate: 'Bug',
-          outgoingName: 'GitLab Support Bot',
-          projectKey: 'key',
-        },
-        true,
-      );
-
-      expect(spy).toHaveBeenCalledWith(endpoint, {
-        issue_template_key: 'Bug',
-        outgoing_name: 'GitLab Support Bot',
-        project_key: 'key',
-        service_desk_enabled: true,
-      });
-
-      spy.mockRestore();
-    });
-  });
-});