Add latest changes from gitlab-org/gitlab@master

29 files changed, 503 insertions, 46 deletions

diff --git a/spec/frontend/issuable_suggestions/components/app_spec.js b/spec/frontend/issuable_suggestions/components/app_spec.js
index 7a2d2df78c4..20930be8667 100644
--- a/spec/frontend/issuable_suggestions/components/app_spec.js
+++ b/spec/frontend/issuable_suggestions/components/app_spec.js
@@ -11,7 +11,6 @@ describe('Issuable suggestions app component', () => {
         search,
         projectPath: 'project',
       },
-      attachToDocument: true,
     });
   }
 
diff --git a/spec/frontend/issuable_suggestions/components/item_spec.js b/spec/frontend/issuable_suggestions/components/item_spec.js
index 4c89bb5fa81..6c3c30fcbb0 100644
--- a/spec/frontend/issuable_suggestions/components/item_spec.js
+++ b/spec/frontend/issuable_suggestions/components/item_spec.js
@@ -16,7 +16,6 @@ describe('Issuable suggestions suggestion component', () => {
           ...suggestion,
         },
       },
-      attachToDocument: true,
     });
   }
 
diff --git a/spec/frontend/issuables_list/components/issuable_spec.js b/spec/frontend/issuables_list/components/issuable_spec.js
index b721fe61ace..81f6b60ae25 100644
--- a/spec/frontend/issuables_list/components/issuable_spec.js
+++ b/spec/frontend/issuables_list/components/issuable_spec.js
@@ -44,7 +44,6 @@ describe('Issuable component', () => {
         baseUrl: TEST_BASE_URL,
         ...props,
       },
-      attachToDocument: true,
     });
   };
 
diff --git a/spec/frontend/issuables_list/components/issuables_list_app_spec.js b/spec/frontend/issuables_list/components/issuables_list_app_spec.js
index 3a01dc3a364..eafc4d83d87 100644
--- a/spec/frontend/issuables_list/components/issuables_list_app_spec.js
+++ b/spec/frontend/issuables_list/components/issuables_list_app_spec.js
@@ -45,7 +45,6 @@ describe('Issuables list component', () => {
         emptySvgPath: TEST_EMPTY_SVG_PATH,
         ...props,
       },
-      attachToDocument: true,
     });
   };
 
diff --git a/spec/frontend/monitoring/components/dashboard_spec.js b/spec/frontend/monitoring/components/dashboard_spec.js
index efae8b941ee..030b68bcd5a 100644
--- a/spec/frontend/monitoring/components/dashboard_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_spec.js
@@ -6,6 +6,8 @@ import axios from '~/lib/utils/axios_utils';
 import statusCodes from '~/lib/utils/http_status';
 import { metricStates } from '~/monitoring/constants';
 import Dashboard from '~/monitoring/components/dashboard.vue';
+
+import DashboardsDropdown from '~/monitoring/components/dashboards_dropdown.vue';
 import DateTimePicker from '~/monitoring/components/date_time_picker/date_time_picker.vue';
 import GroupEmptyState from '~/monitoring/components/group_empty_state.vue';
 import { createStore } from '~/monitoring/stores';
@@ -465,7 +467,7 @@ describe('Dashboard', () => {
       wrapper.vm
         .$nextTick()
         .then(() => {
-          const dashboardDropdown = wrapper.find('.js-dashboards-dropdown');
+          const dashboardDropdown = wrapper.find(DashboardsDropdown);
 
           expect(dashboardDropdown.exists()).toBe(true);
           done();
diff --git a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js
new file mode 100644
index 00000000000..6af5ab4ba75
--- /dev/null
+++ b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js
@@ -0,0 +1,249 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlDropdownItem, GlModal, GlLoadingIcon, GlAlert } from '@gitlab/ui';
+import waitForPromises from 'helpers/wait_for_promises';
+
+import DashboardsDropdown from '~/monitoring/components/dashboards_dropdown.vue';
+import DuplicateDashboardForm from '~/monitoring/components/duplicate_dashboard_form.vue';
+
+import { dashboardGitResponse } from '../mock_data';
+
+const defaultBranch = 'master';
+
+function createComponent(props, opts = {}) {
+  const storeOpts = {
+    methods: {
+      duplicateSystemDashboard: jest.fn(),
+    },
+    computed: {
+      allDashboards: () => dashboardGitResponse,
+    },
+  };
+
+  return shallowMount(DashboardsDropdown, {
+    propsData: {
+      ...props,
+      defaultBranch,
+    },
+    sync: false,
+    ...storeOpts,
+    ...opts,
+  });
+}
+
+describe('DashboardsDropdown', () => {
+  let wrapper;
+
+  const findItems = () => wrapper.findAll(GlDropdownItem);
+  const findItemAt = i => wrapper.findAll(GlDropdownItem).at(i);
+
+  describe('when it receives dashboards data', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+    it('displays an item for each dashboard', () => {
+      expect(wrapper.findAll(GlDropdownItem).length).toEqual(dashboardGitResponse.length);
+    });
+
+    it('displays items with the dashboard display name', () => {
+      expect(findItemAt(0).text()).toBe(dashboardGitResponse[0].display_name);
+      expect(findItemAt(1).text()).toBe(dashboardGitResponse[1].display_name);
+      expect(findItemAt(2).text()).toBe(dashboardGitResponse[2].display_name);
+    });
+  });
+
+  describe('when a system dashboard is selected', () => {
+    let duplicateDashboardAction;
+    let modalDirective;
+
+    beforeEach(() => {
+      modalDirective = jest.fn();
+      duplicateDashboardAction = jest.fn().mockResolvedValue();
+
+      wrapper = createComponent(
+        {
+          selectedDashboard: dashboardGitResponse[0],
+        },
+        {
+          directives: {
+            GlModal: modalDirective,
+          },
+          methods: {
+            // Mock vuex actions
+            duplicateSystemDashboard: duplicateDashboardAction,
+          },
+        },
+      );
+
+      wrapper.vm.$refs.duplicateDashboardModal.hide = jest.fn();
+    });
+
+    it('displays an item for each dashboard plus a "duplicate dashboard" item', () => {
+      const item = wrapper.findAll({ ref: 'duplicateDashboardItem' });
+
+      expect(findItems().length).toEqual(dashboardGitResponse.length + 1);
+      expect(item.length).toBe(1);
+    });
+
+    describe('modal form', () => {
+      let okEvent;
+
+      const findModal = () => wrapper.find(GlModal);
+      const findAlert = () => wrapper.find(GlAlert);
+
+      beforeEach(() => {
+        okEvent = {
+          preventDefault: jest.fn(),
+        };
+      });
+
+      it('exists and contains a form to duplicate a dashboard', () => {
+        expect(findModal().exists()).toBe(true);
+        expect(findModal().contains(DuplicateDashboardForm)).toBe(true);
+      });
+
+      it('saves a new dashboard', done => {
+        findModal().vm.$emit('ok', okEvent);
+
+        waitForPromises()
+          .then(() => {
+            expect(okEvent.preventDefault).toHaveBeenCalled();
+
+            expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+            expect(wrapper.vm.$refs.duplicateDashboardModal.hide).toHaveBeenCalled();
+            expect(wrapper.emitted().selectDashboard).toBeTruthy();
+            expect(findAlert().exists()).toBe(false);
+            done();
+          })
+          .catch(done.fail);
+      });
+
+      describe('when a new dashboard is saved succesfully', () => {
+        const newDashboard = {
+          can_edit: true,
+          default: false,
+          display_name: 'A new dashboard',
+          system_dashboard: false,
+        };
+
+        const submitForm = formVals => {
+          duplicateDashboardAction.mockResolvedValueOnce(newDashboard);
+          findModal()
+            .find(DuplicateDashboardForm)
+            .vm.$emit('change', {
+              dashboard: 'common_metrics.yml',
+              commitMessage: 'A commit message',
+              ...formVals,
+            });
+          findModal().vm.$emit('ok', okEvent);
+        };
+
+        it('to the default branch, redirects to the new dashboard', done => {
+          submitForm({
+            branch: defaultBranch,
+          });
+
+          waitForPromises()
+            .then(() => {
+              expect(wrapper.emitted().selectDashboard[0][0]).toEqual(newDashboard);
+              done();
+            })
+            .catch(done.fail);
+        });
+
+        it('to a new branch refreshes in the current dashboard', done => {
+          submitForm({
+            branch: 'another-branch',
+          });
+
+          waitForPromises()
+            .then(() => {
+              expect(wrapper.emitted().selectDashboard[0][0]).toEqual(dashboardGitResponse[0]);
+              done();
+            })
+            .catch(done.fail);
+        });
+      });
+
+      it('handles error when a new dashboard is not saved', done => {
+        const errMsg = 'An error occurred';
+
+        duplicateDashboardAction.mockRejectedValueOnce(errMsg);
+        findModal().vm.$emit('ok', okEvent);
+
+        waitForPromises()
+          .then(() => {
+            expect(okEvent.preventDefault).toHaveBeenCalled();
+
+            expect(findAlert().exists()).toBe(true);
+            expect(findAlert().text()).toBe(errMsg);
+
+            expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+            expect(wrapper.vm.$refs.duplicateDashboardModal.hide).not.toHaveBeenCalled();
+
+            done();
+          })
+          .catch(done.fail);
+      });
+
+      it('id is correct, as the value of modal directive binding matches modal id', () => {
+        expect(modalDirective).toHaveBeenCalledTimes(1);
+
+        // Binding's second argument contains the modal id
+        expect(modalDirective.mock.calls[0][1]).toEqual(
+          expect.objectContaining({
+            value: findModal().props('modalId'),
+          }),
+        );
+      });
+
+      it('updates the form on changes', () => {
+        const formVals = {
+          dashboard: 'common_metrics.yml',
+          commitMessage: 'A commit message',
+        };
+
+        findModal()
+          .find(DuplicateDashboardForm)
+          .vm.$emit('change', formVals);
+
+        // Binding's second argument contains the modal id
+        expect(wrapper.vm.form).toEqual(formVals);
+      });
+    });
+  });
+
+  describe('when a custom dashboard is selected', () => {
+    const findModal = () => wrapper.find(GlModal);
+
+    beforeEach(() => {
+      wrapper = createComponent({
+        selectedDashboard: dashboardGitResponse[1],
+      });
+    });
+
+    it('displays an item for each dashboard', () => {
+      const item = wrapper.findAll({ ref: 'duplicateDashboardItem' });
+
+      expect(findItems().length).toEqual(dashboardGitResponse.length);
+      expect(item.length).toBe(0);
+    });
+
+    it('modal form does not exist and contains a form to duplicate a dashboard', () => {
+      expect(findModal().exists()).toBe(false);
+    });
+  });
+
+  describe('when a dashboard gets selected by the user', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+      findItemAt(1).vm.$emit('click');
+    });
+
+    it('emits a "selectDashboard" event', () => {
+      expect(wrapper.emitted().selectDashboard).toBeTruthy();
+    });
+    it('emits a "selectDashboard" event with dashboard information', () => {
+      expect(wrapper.emitted().selectDashboard[0]).toEqual([dashboardGitResponse[1]]);
+    });
+  });
+});
diff --git a/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js b/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js
new file mode 100644
index 00000000000..75a488b5c7b
--- /dev/null
+++ b/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js
@@ -0,0 +1,153 @@
+import { mount } from '@vue/test-utils';
+import DuplicateDashboardForm from '~/monitoring/components/duplicate_dashboard_form.vue';
+
+import { dashboardGitResponse } from '../mock_data';
+
+describe('DuplicateDashboardForm', () => {
+  let wrapper;
+
+  const defaultBranch = 'master';
+
+  const findByRef = ref => wrapper.find({ ref });
+  const setValue = (ref, val) => {
+    findByRef(ref).setValue(val);
+  };
+  const setChecked = value => {
+    const input = wrapper.find(`.form-check-input[value="${value}"]`);
+    input.element.checked = true;
+    input.trigger('click');
+    input.trigger('change');
+  };
+
+  beforeEach(() => {
+    // Use `mount` to render native input elements
+    wrapper = mount(DuplicateDashboardForm, {
+      propsData: {
+        dashboard: dashboardGitResponse[0],
+        defaultBranch,
+      },
+      sync: false,
+    });
+  });
+
+  it('renders correctly', () => {
+    expect(wrapper.exists()).toEqual(true);
+  });
+
+  it('renders form elements', () => {
+    expect(findByRef('fileName').exists()).toEqual(true);
+    expect(findByRef('branchName').exists()).toEqual(true);
+    expect(findByRef('branchOption').exists()).toEqual(true);
+    expect(findByRef('commitMessage').exists()).toEqual(true);
+  });
+
+  describe('validates the file name', () => {
+    const findInvalidFeedback = () => findByRef('fileNameFormGroup').find('.invalid-feedback');
+
+    it('when is empty', done => {
+      setValue('fileName', '');
+      wrapper.vm.$nextTick(() => {
+        expect(findByRef('fileNameFormGroup').is('.is-valid')).toBe(true);
+        expect(findInvalidFeedback().exists()).toBe(false);
+        done();
+      });
+    });
+
+    it('when is valid', done => {
+      setValue('fileName', 'my_dashboard.yml');
+      wrapper.vm.$nextTick(() => {
+        expect(findByRef('fileNameFormGroup').is('.is-valid')).toBe(true);
+        expect(findInvalidFeedback().exists()).toBe(false);
+        done();
+      });
+    });
+
+    it('when is not valid', done => {
+      setValue('fileName', 'my_dashboard.exe');
+      wrapper.vm.$nextTick(() => {
+        expect(findByRef('fileNameFormGroup').is('.is-invalid')).toBe(true);
+        expect(findInvalidFeedback().text()).toBeTruthy();
+        done();
+      });
+    });
+  });
+
+  describe('emits `change` event', () => {
+    const lastChange = () =>
+      wrapper.vm.$nextTick().then(() => {
+        wrapper.find('form').trigger('change');
+
+        // Resolves to the last emitted change
+        const changes = wrapper.emitted().change;
+        return changes[changes.length - 1][0];
+      });
+
+    it('with the inital form values', () => {
+      expect(wrapper.emitted().change).toHaveLength(1);
+      expect(lastChange()).resolves.toEqual({
+        branch: '',
+        commitMessage: expect.any(String),
+        dashboard: dashboardGitResponse[0].path,
+        fileName: 'common_metrics.yml',
+      });
+    });
+
+    it('containing an inputted file name', () => {
+      setValue('fileName', 'my_dashboard.yml');
+
+      expect(lastChange()).resolves.toMatchObject({
+        fileName: 'my_dashboard.yml',
+      });
+    });
+
+    it('containing a default commit message when no message is set', () => {
+      setValue('commitMessage', '');
+
+      expect(lastChange()).resolves.toMatchObject({
+        commitMessage: expect.stringContaining('Create custom dashboard'),
+      });
+    });
+
+    it('containing an inputted commit message', () => {
+      setValue('commitMessage', 'My commit message');
+
+      expect(lastChange()).resolves.toMatchObject({
+        commitMessage: expect.stringContaining('My commit message'),
+      });
+    });
+
+    it('containing an inputted branch name', () => {
+      setValue('branchName', 'a-new-branch');
+
+      expect(lastChange()).resolves.toMatchObject({
+        branch: 'a-new-branch',
+      });
+    });
+
+    it('when a `default` branch option is set, branch input is invisible and ignored', done => {
+      setChecked(wrapper.vm.$options.radioVals.DEFAULT);
+      setValue('branchName', 'a-new-branch');
+
+      expect(lastChange()).resolves.toMatchObject({
+        branch: defaultBranch,
+      });
+      wrapper.vm.$nextTick(() => {
+        expect(findByRef('branchName').isVisible()).toBe(false);
+        done();
+      });
+    });
+
+    it('when `new` branch option is chosen, focuses on the branch name input', done => {
+      setChecked(wrapper.vm.$options.radioVals.NEW);
+
+      wrapper.vm
+        .$nextTick()
+        .then(() => {
+          wrapper.find('form').trigger('change');
+          expect(findByRef('branchName').is(':focus')).toBe(true);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+});
diff --git a/spec/frontend/monitoring/init_utils.js b/spec/frontend/monitoring/init_utils.js
index 10db8b902b5..5f229cb6ee5 100644
--- a/spec/frontend/monitoring/init_utils.js
+++ b/spec/frontend/monitoring/init_utils.js
@@ -15,6 +15,7 @@ export const propsData = {
   clustersPath: '/path/to/clusters',
   tagsPath: '/path/to/tags',
   projectPath: '/path/to/project',
+  defaultBranch: 'master',
   metricsEndpoint: mockApiEndpoint,
   deploymentsEndpoint: null,
   emptyGettingStartedSvgPath: '/path/to/getting-started.svg',
diff --git a/spec/frontend/monitoring/mock_data.js b/spec/frontend/monitoring/mock_data.js
index 77c92d0eca6..8ed0e232775 100644
--- a/spec/frontend/monitoring/mock_data.js
+++ b/spec/frontend/monitoring/mock_data.js
@@ -522,6 +522,7 @@ export const dashboardGitResponse = [
     default: true,
     display_name: 'Default',
     can_edit: false,
+    system_dashboard: true,
     project_blob_path: null,
     path: 'config/prometheus/common_metrics.yml',
   },
@@ -529,6 +530,7 @@ export const dashboardGitResponse = [
     default: false,
     display_name: 'Custom Dashboard 1',
     can_edit: true,
+    system_dashboard: false,
     project_blob_path: `${mockProjectDir}/blob/master/dashboards/.gitlab/dashboards/dashboard_1.yml`,
     path: '.gitlab/dashboards/dashboard_1.yml',
   },
@@ -536,6 +538,7 @@ export const dashboardGitResponse = [
     default: false,
     display_name: 'Custom Dashboard 2',
     can_edit: true,
+    system_dashboard: false,
     project_blob_path: `${mockProjectDir}/blob/master/dashboards/.gitlab/dashboards/dashboard_2.yml`,
     path: '.gitlab/dashboards/dashboard_2.yml',
   },
diff --git a/spec/frontend/monitoring/store/actions_spec.js b/spec/frontend/monitoring/store/actions_spec.js
index c1ad59ac95b..975bdd3a27a 100644
--- a/spec/frontend/monitoring/store/actions_spec.js
+++ b/spec/frontend/monitoring/store/actions_spec.js
@@ -18,6 +18,7 @@ import {
   fetchPrometheusMetric,
   setEndpoints,
   setGettingStartedEmptyState,
+  duplicateSystemDashboard,
 } from '~/monitoring/stores/actions';
 import storeState from '~/monitoring/stores/state';
 import {
@@ -544,4 +545,85 @@ describe('Monitoring store actions', () => {
       });
     });
   });
+
+  describe('duplicateSystemDashboard', () => {
+    let state;
+
+    beforeEach(() => {
+      state = storeState();
+      state.dashboardsEndpoint = '/dashboards.json';
+    });
+
+    it('Succesful POST request resolves', done => {
+      mock.onPost(state.dashboardsEndpoint).reply(statusCodes.CREATED, {
+        dashboard: dashboardGitResponse[1],
+      });
+
+      testAction(duplicateSystemDashboard, {}, state, [], [])
+        .then(() => {
+          expect(mock.history.post).toHaveLength(1);
+          done();
+        })
+        .catch(done.fail);
+    });
+
+    it('Succesful POST request resolves to a dashboard', done => {
+      const mockCreatedDashboard = dashboardGitResponse[1];
+
+      const params = {
+        dashboard: 'my-dashboard',
+        fileName: 'file-name.yml',
+        branch: 'my-new-branch',
+        commitMessage: 'A new commit message',
+      };
+
+      const expectedPayload = JSON.stringify({
+        dashboard: 'my-dashboard',
+        file_name: 'file-name.yml',
+        branch: 'my-new-branch',
+        commit_message: 'A new commit message',
+      });
+
+      mock.onPost(state.dashboardsEndpoint).reply(statusCodes.CREATED, {
+        dashboard: mockCreatedDashboard,
+      });
+
+      testAction(duplicateSystemDashboard, params, state, [], [])
+        .then(result => {
+          expect(mock.history.post).toHaveLength(1);
+          expect(mock.history.post[0].data).toEqual(expectedPayload);
+          expect(result).toEqual(mockCreatedDashboard);
+
+          done();
+        })
+        .catch(done.fail);
+    });
+
+    it('Failed POST request throws an error', done => {
+      mock.onPost(state.dashboardsEndpoint).reply(statusCodes.BAD_REQUEST);
+
+      testAction(duplicateSystemDashboard, {}, state, [], []).catch(err => {
+        expect(mock.history.post).toHaveLength(1);
+        expect(err).toEqual(expect.any(String));
+
+        done();
+      });
+    });
+
+    it('Failed POST request throws an error with a description', done => {
+      const backendErrorMsg = 'This file already exists!';
+
+      mock.onPost(state.dashboardsEndpoint).reply(statusCodes.BAD_REQUEST, {
+        error: backendErrorMsg,
+      });
+
+      testAction(duplicateSystemDashboard, {}, state, [], []).catch(err => {
+        expect(mock.history.post).toHaveLength(1);
+        expect(err).toEqual(expect.any(String));
+        expect(err).toEqual(expect.stringContaining(backendErrorMsg));
+
+        done();
+      });
+    });
+  });
 });
diff --git a/spec/frontend/vue_mr_widget/deployment/deployment_spec.js b/spec/frontend/vue_mr_widget/deployment/deployment_spec.js
index 78e086e473d..2902c8280dd 100644
--- a/spec/frontend/vue_mr_widget/deployment/deployment_spec.js
+++ b/spec/frontend/vue_mr_widget/deployment/deployment_spec.js
@@ -134,7 +134,7 @@ describe('Deployment component', () => {
             if (status === SUCCESS) {
               expect(wrapper.find(DeploymentViewButton).text()).toContain('View app');
             } else {
-              expect(wrapper.find(DeploymentViewButton).text()).toContain('View previous app');
+              expect(wrapper.find(DeploymentViewButton).text()).toContain('View latest app');
             }
           });
         }
diff --git a/spec/frontend/vue_mr_widget/deployment/deployment_view_button_spec.js b/spec/frontend/vue_mr_widget/deployment/deployment_view_button_spec.js
index b48c97341b2..5e0f38459b0 100644
--- a/spec/frontend/vue_mr_widget/deployment/deployment_view_button_spec.js
+++ b/spec/frontend/vue_mr_widget/deployment/deployment_view_button_spec.js
@@ -3,6 +3,11 @@ import DeploymentViewButton from '~/vue_merge_request_widget/components/deployme
 import ReviewAppLink from '~/vue_merge_request_widget/components/review_app_link.vue';
 import deploymentMockData from './deployment_mock_data';
 
+const appButtonText = {
+  text: 'View app',
+  tooltip: 'View the latest successful deployment to this environment',
+};
+
 describe('Deployment View App button', () => {
   let wrapper;
 
@@ -16,7 +21,7 @@ describe('Deployment View App button', () => {
     factory({
       propsData: {
         deployment: deploymentMockData,
-        isCurrent: true,
+        appButtonText,
       },
     });
   });
@@ -26,25 +31,8 @@ describe('Deployment View App button', () => {
   });
 
   describe('text', () => {
-    describe('when app is current', () => {
-      it('shows View app', () => {
-        expect(wrapper.find(ReviewAppLink).text()).toContain('View app');
-      });
-    });
-
-    describe('when app is not current', () => {
-      beforeEach(() => {
-        factory({
-          propsData: {
-            deployment: deploymentMockData,
-            isCurrent: false,
-          },
-        });
-      });
-
-      it('shows View Previous app', () => {
-        expect(wrapper.find(ReviewAppLink).text()).toContain('View previous app');
-      });
+    it('renders text as passed', () => {
+      expect(wrapper.find(ReviewAppLink).text()).toContain(appButtonText.text);
     });
   });
 
@@ -53,7 +41,7 @@ describe('Deployment View App button', () => {
       factory({
         propsData: {
           deployment: { ...deploymentMockData, changes: null },
-          isCurrent: false,
+          appButtonText,
         },
       });
     });
@@ -68,7 +56,7 @@ describe('Deployment View App button', () => {
       factory({
         propsData: {
           deployment: { ...deploymentMockData, changes: [deploymentMockData.changes[0]] },
-          isCurrent: false,
+          appButtonText,
         },
       });
     });
@@ -91,7 +79,7 @@ describe('Deployment View App button', () => {
       factory({
         propsData: {
           deployment: deploymentMockData,
-          isCurrent: false,
+          appButtonText,
         },
       });
     });
diff --git a/spec/frontend/vue_shared/components/changed_file_icon_spec.js b/spec/frontend/vue_shared/components/changed_file_icon_spec.js
index 3a52941a06e..02c4dabeffc 100644
--- a/spec/frontend/vue_shared/components/changed_file_icon_spec.js
+++ b/spec/frontend/vue_shared/components/changed_file_icon_spec.js
@@ -18,7 +18,6 @@ describe('Changed file icon', () => {
         showTooltip: true,
         ...props,
       },
-      attachToDocument: true,
     });
   };
 
diff --git a/spec/frontend/vue_shared/components/clipboard_button_spec.js b/spec/frontend/vue_shared/components/clipboard_button_spec.js
index 233088b8d32..37f71867ab9 100644
--- a/spec/frontend/vue_shared/components/clipboard_button_spec.js
+++ b/spec/frontend/vue_shared/components/clipboard_button_spec.js
@@ -9,7 +9,6 @@ describe('clipboard button', () => {
   const createWrapper = propsData => {
     wrapper = shallowMount(ClipboardButton, {
       propsData,
-      attachToDocument: true,
     });
   };
 
diff --git a/spec/frontend/vue_shared/components/commit_spec.js b/spec/frontend/vue_shared/components/commit_spec.js
index 81c67b30a11..3510c9b699d 100644
--- a/spec/frontend/vue_shared/components/commit_spec.js
+++ b/spec/frontend/vue_shared/components/commit_spec.js
@@ -17,7 +17,6 @@ describe('Commit component', () => {
   const createComponent = propsData => {
     wrapper = shallowMount(CommitComponent, {
       propsData,
-      attachToDocument: true,
     });
   };
 
diff --git a/spec/frontend/vue_shared/components/issue/issue_assignees_spec.js b/spec/frontend/vue_shared/components/issue/issue_assignees_spec.js
index 00245c68342..b00261ae067 100644
--- a/spec/frontend/vue_shared/components/issue/issue_assignees_spec.js
+++ b/spec/frontend/vue_shared/components/issue/issue_assignees_spec.js
@@ -17,7 +17,6 @@ describe('IssueAssigneesComponent', () => {
         assignees: mockAssigneesList,
         ...props,
       },
-      attachToDocument: true,
     });
     vm = wrapper.vm; // eslint-disable-line
   };
diff --git a/spec/frontend/vue_shared/components/issue/issue_milestone_spec.js b/spec/frontend/vue_shared/components/issue/issue_milestone_spec.js
index ef752743fa9..4c654e01f74 100644
--- a/spec/frontend/vue_shared/components/issue/issue_milestone_spec.js
+++ b/spec/frontend/vue_shared/components/issue/issue_milestone_spec.js
@@ -13,7 +13,6 @@ const createComponent = (milestone = mockMilestone) => {
     propsData: {
       milestone,
     },
-    attachToDocument: true,
   });
 };
 
diff --git a/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js b/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js
index e895fe27095..f7b1f041ef2 100644
--- a/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js
+++ b/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js
@@ -31,7 +31,6 @@ describe('RelatedIssuableItem', () => {
   beforeEach(() => {
     wrapper = mount(RelatedIssuableItem, {
       slots,
-      attachToDocument: true,
       propsData: props,
     });
   });
diff --git a/spec/frontend/vue_shared/components/markdown/header_spec.js b/spec/frontend/vue_shared/components/markdown/header_spec.js
index 8eec48749c9..551d781d296 100644
--- a/spec/frontend/vue_shared/components/markdown/header_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/header_spec.js
@@ -12,7 +12,6 @@ describe('Markdown field header component', () => {
         previewMarkdown: false,
         ...props,
       },
-      attachToDocument: true,
     });
   };
 
diff --git a/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js b/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js
index 0450166a468..9b9c3d559e3 100644
--- a/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js
@@ -17,7 +17,6 @@ describe('Suggestion Diff component', () => {
         ...DEFAULT_PROPS,
         ...props,
       },
-      attachToDocument: true,
     });
   };
 
diff --git a/spec/frontend/vue_shared/components/modal_copy_button_spec.js b/spec/frontend/vue_shared/components/modal_copy_button_spec.js
index 1c048560212..e5a8860f42e 100644
--- a/spec/frontend/vue_shared/components/modal_copy_button_spec.js
+++ b/spec/frontend/vue_shared/components/modal_copy_button_spec.js
@@ -16,7 +16,6 @@ describe('modal copy button', () => {
         text: 'copy me',
         title: 'Copy this value',
       },
-      attachToDocument: true,
     });
   });
 
diff --git a/spec/frontend/vue_shared/components/notes/system_note_spec.js b/spec/frontend/vue_shared/components/notes/system_note_spec.js
index 91b68ce1c6f..d5eac7c2aa3 100644
--- a/spec/frontend/vue_shared/components/notes/system_note_spec.js
+++ b/spec/frontend/vue_shared/components/notes/system_note_spec.js
@@ -33,7 +33,6 @@ describe('system note component', () => {
     vm = mount(IssueSystemNote, {
       store,
       propsData: props,
-      attachToDocument: true,
     });
   });
 
diff --git a/spec/frontend/vue_shared/components/paginated_list_spec.js b/spec/frontend/vue_shared/components/paginated_list_spec.js
index 3b064410274..46e45296c37 100644
--- a/spec/frontend/vue_shared/components/paginated_list_spec.js
+++ b/spec/frontend/vue_shared/components/paginated_list_spec.js
@@ -26,7 +26,6 @@ describe('Pagination links component', () => {
         list: [{ id: 'foo' }, { id: 'bar' }],
         props,
       },
-      attachToDocument: true,
     });
 
     [glPaginatedList] = wrapper.vm.$children;
diff --git a/spec/frontend/vue_shared/components/resizable_chart_container_spec.js b/spec/frontend/vue_shared/components/resizable_chart_container_spec.js
index 552cfade7b6..3a5514ef318 100644
--- a/spec/frontend/vue_shared/components/resizable_chart_container_spec.js
+++ b/spec/frontend/vue_shared/components/resizable_chart_container_spec.js
@@ -14,7 +14,6 @@ describe('Resizable Chart Container', () => {
 
   beforeEach(() => {
     wrapper = mount(ResizableChartContainer, {
-      attachToDocument: true,
       scopedSlots: {
         default: `
         <div class="slot" slot-scope="{ width, height }">
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select/base_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select/base_spec.js
index 7dd1be24360..d90fafb6bf7 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select/base_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select/base_spec.js
@@ -12,7 +12,6 @@ import {
 const createComponent = (config = mockConfig) =>
   shallowMount(BaseComponent, {
     propsData: config,
-    attachToDocument: true,
   });
 
 describe('BaseComponent', () => {
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js
index 76f6ff96f82..54ad96073c8 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js
@@ -24,7 +24,6 @@ const createComponent = (
       labelFilterBasePath,
       enableScopedLabels: true,
     },
-    attachToDocument: true,
   });
 };
 
diff --git a/spec/frontend/vue_shared/components/time_ago_tooltip_spec.js b/spec/frontend/vue_shared/components/time_ago_tooltip_spec.js
index a1db72c9c73..46fcb92455b 100644
--- a/spec/frontend/vue_shared/components/time_ago_tooltip_spec.js
+++ b/spec/frontend/vue_shared/components/time_ago_tooltip_spec.js
@@ -7,7 +7,6 @@ describe('Time ago with tooltip component', () => {
 
   const buildVm = (propsData = {}) => {
     vm = shallowMount(TimeAgoTooltip, {
-      attachToDocument: true,
       propsData,
     });
   };
diff --git a/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_spec.js b/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_spec.js
index 2bbbab17bce..2f68e15b0d7 100644
--- a/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_spec.js
+++ b/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_spec.js
@@ -26,7 +26,6 @@ describe('User Avatar Link Component', () => {
         ...defaultProps,
         ...props,
       },
-      attachToDocument: true,
     });
   };
 
diff --git a/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js b/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js
index b1c9f8b505b..a8bbc80d2df 100644
--- a/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js
+++ b/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js
@@ -59,7 +59,6 @@ describe('User Popover Component', () => {
               status: null,
             },
           },
-          attachToDocument: true,
         },
       );
     });