Refactor test to use sync and attachToDocument

- dismiss_button_spec.js
- dismissal_note_spec
- event_item_spec
- modal_footer_spec
- modal_spec

ee/spec/frontend/vue_shared/security_reports/card_security_reports_app_spec.js

@@ -25,6 +25,7 @@ describe('Card security reports app', () => {
       localVue,
       store: createStore(),
       sync: false,
+      attachToDocument: true,
       stubs: ['security-dashboard-table'],
       propsData: {
         hasPipelineData: true,

ee/spec/frontend/vue_shared/security_reports/components/dismiss_button_spec.js

@@ -5,12 +5,16 @@ import LoadingButton from '~/vue_shared/components/loading_button.vue';
 describe('DismissalButton', () => {
   let wrapper;
 
+  const mountComponent = options => {
+    wrapper = mount(component, { sync: false, attachToDocument: true, ...options });
+  };
+
   describe('With a non-dismissed vulnerability', () => {
     beforeEach(() => {
       const propsData = {
         isDismissed: false,
       };
-      wrapper = mount(component, { propsData });
+      mountComponent({ propsData });
     });
 
     it('should render the dismiss button', () => {
@@ -37,7 +41,7 @@ describe('DismissalButton', () => {
       const propsData = {
         isDismissed: true,
       };
-      wrapper = mount(component, { propsData });
+      mountComponent({ propsData });
     });
 
     it('should render the undo dismiss button', () => {

ee/spec/frontend/vue_shared/security_reports/components/dismissal_note_spec.js

@@ -21,9 +21,13 @@ describe('dismissal note', () => {
   };
   let wrapper;
 
+  const mountComponent = (options, mountFn = shallowMount) => {
+    wrapper = mountFn(component, { sync: false, attachToDocument: true, ...options });
+  };
+
   describe('with no attached project or pipeline', () => {
     beforeEach(() => {
-      wrapper = shallowMount(component, {
+      mountComponent({
         propsData: { feedback },
       });
     });
@@ -43,7 +47,7 @@ describe('dismissal note', () => {
 
   describe('with an attached project', () => {
     beforeEach(() => {
-      wrapper = shallowMount(component, {
+      mountComponent({
         propsData: { feedback, project },
       });
     });
@@ -55,7 +59,7 @@ describe('dismissal note', () => {
 
   describe('with an attached pipeline', () => {
     beforeEach(() => {
-      wrapper = shallowMount(component, {
+      mountComponent({
         propsData: { feedback: { ...feedback, pipeline } },
       });
     });
@@ -67,7 +71,7 @@ describe('dismissal note', () => {
 
   describe('with an attached pipeline and project', () => {
     beforeEach(() => {
-      wrapper = shallowMount(component, {
+      mountComponent({
         propsData: { feedback: { ...feedback, pipeline }, project },
       });
     });
@@ -84,7 +88,7 @@ describe('dismissal note', () => {
     };
 
     beforeEach(() => {
-      wrapper = shallowMount(component, {
+      mountComponent({
         propsData: {
           feedback,
           project: unsafeProject,
@@ -116,7 +120,7 @@ describe('dismissal note', () => {
 
     describe('without confirm deletion buttons', () => {
       beforeEach(() => {
-        wrapper = shallowMount(component, {
+        mountComponent({
           propsData: {
             feedback: {
               ...feedback,
@@ -143,7 +147,8 @@ describe('dismissal note', () => {
 
     describe('with confirm deletion buttons', () => {
       beforeEach(() => {
-        wrapper = mount(component, {
+        mountComponent(
+          {
             propsData: {
               feedback: {
                 ...feedback,
@@ -152,7 +157,9 @@ describe('dismissal note', () => {
               project,
               isShowingDeleteButtons: true,
             },
-        });
+          },
+          mount,
+        );
         commentItem = wrapper.findAll(EventItem).at(1);
       });
 

ee/spec/frontend/vue_shared/security_reports/components/event_item_spec.js

@@ -2,9 +2,13 @@ import Component from 'ee/vue_shared/security_reports/components/event_item.vue'
 import { shallowMount, mount } from '@vue/test-utils';
 
 describe('Event Item', () => {
-  describe('initial state', () => {
   let wrapper;
 
+  const mountComponent = (options, mountFn = shallowMount) => {
+    wrapper = mountFn(Component, { sync: false, attachToDocument: true, ...options });
+  };
+
+  describe('initial state', () => {
     const propsData = {
       author: {
         name: 'Tanuki',
@@ -17,7 +21,7 @@ describe('Event Item', () => {
     });
 
     beforeEach(() => {
-      wrapper = shallowMount(Component, { propsData });
+      mountComponent({ propsData });
     });
 
     it('uses the author name', () => {
@@ -41,8 +45,6 @@ describe('Event Item', () => {
     });
   });
   describe('with action buttons', () => {
-    let wrapper;
-
     const propsData = {
       author: {
         name: 'Tanuki',
@@ -67,7 +69,7 @@ describe('Event Item', () => {
     });
 
     beforeEach(() => {
-      wrapper = mount(Component, { propsData });
+      mountComponent({ propsData }, mount);
     });
 
     it('renders the action buttons container', () => {

ee/spec/frontend/vue_shared/security_reports/components/modal_footer_spec.js

@@ -8,13 +8,17 @@ import createState from 'ee/vue_shared/security_reports/store/state';
 describe('Security Reports modal footer', () => {
   let wrapper;
 
+  const mountComponent = options => {
+    wrapper = mount(component, { sync: false, attachToDocument: true, ...options });
+  };
+
   describe('can only create issue', () => {
     beforeEach(() => {
       const propsData = {
         modal: createState().modal,
         canCreateIssue: true,
       };
-      wrapper = mount(component, { propsData });
+      mountComponent({ propsData });
     });
 
     it('does not render dismiss button', () => {
@@ -38,7 +42,7 @@ describe('Security Reports modal footer', () => {
         modal: createState().modal,
         canCreateMergeRequest: true,
       };
-      wrapper = mount(component, { propsData });
+      mountComponent({ propsData });
     });
 
     it('only renders the create merge request button', () => {
@@ -58,7 +62,7 @@ describe('Security Reports modal footer', () => {
         modal: createState().modal,
         canDownloadPatch: true,
       };
-      wrapper = mount(component, { propsData });
+      mountComponent({ propsData });
     });
 
     it('renders the download patch button', () => {
@@ -79,7 +83,7 @@ describe('Security Reports modal footer', () => {
         canCreateIssue: true,
         canCreateMergeRequest: true,
       };
-      wrapper = mount(component, { propsData });
+      mountComponent({ propsData });
     });
 
     it('renders create merge request and issue button as a split button', () => {
@@ -99,7 +103,7 @@ describe('Security Reports modal footer', () => {
         canCreateMergeRequest: true,
         canDownloadPatch: true,
       };
-      wrapper = mount(component, { propsData });
+      mountComponent({ propsData });
     });
 
     it('renders the split button', () => {
@@ -117,7 +121,7 @@ describe('Security Reports modal footer', () => {
         modal: createState().modal,
         canDismissVulnerability: true,
       };
-      wrapper = mount(component, { propsData });
+      mountComponent({ propsData });
     });
 
     it('should render the dismiss button', () => {

ee/spec/frontend/vue_shared/security_reports/components/modal_spec.js

@@ -4,9 +4,12 @@ import createState from 'ee/vue_shared/security_reports/store/state';
 import { mount, shallowMount } from '@vue/test-utils';
 
 describe('Security Reports modal', () => {
-  const Component = Vue.extend(component);
   let wrapper;
 
+  const mountComponent = (options, mountFn = shallowMount) => {
+    wrapper = mountFn(component, { sync: false, attachToDocument: true, ...options });
+  };
+
   describe('with permissions', () => {
     describe('with dismissed issue', () => {
       beforeEach(() => {
@@ -19,7 +22,7 @@ describe('Security Reports modal', () => {
           author: { username: 'jsmith', name: 'John Smith' },
           pipeline: { id: '123', path: '#' },
         };
-        wrapper = mount(Component, { propsData });
+        mountComponent({ propsData }, mount);
       });
 
       it('renders dismissal author and associated pipeline', () => {
@@ -39,7 +42,7 @@ describe('Security Reports modal', () => {
           modal: createState().modal,
           canDismissVulnerability: true,
         };
-        wrapper = mount(Component, { propsData });
+        mountComponent({ propsData }, mount);
       });
 
       it('renders the footer', () => {
@@ -57,7 +60,7 @@ describe('Security Reports modal', () => {
         const summary = 'Upgrade to 123';
         const diff = 'abc123';
         propsData.modal.vulnerability.remediations = [{ summary, diff }];
-        wrapper = mount(Component, { propsData, sync: true });
+        mountComponent({ propsData }, mount);
       });
 
       it('renders create merge request and issue button as a split button', () => {
@@ -100,7 +103,7 @@ describe('Security Reports modal', () => {
           vulnerabilityFeedbackHelpPath: 'feedbacksHelpPath',
         };
         propsData.modal.title = 'Arbitrary file existence disclosure in Action Pack';
-        wrapper = mount(Component, { propsData });
+        mountComponent({ propsData }, mount);
       });
 
       it('renders title', () => {
@@ -120,7 +123,7 @@ describe('Security Reports modal', () => {
       const propsData = {
         modal: createState().modal,
       };
-      wrapper = shallowMount(Component, { propsData });
+      mountComponent({ propsData });
     });
 
     it('does not display the footer', () => {
@@ -138,7 +141,7 @@ describe('Security Reports modal', () => {
         propsData.modal.vulnerability.issue_feedback = {
           issue_url: 'http://issue.url',
         };
-        wrapper = shallowMount(Component, { propsData });
+        mountComponent({ propsData });
       });
 
       it('displays a link to the issue', () => {
@@ -156,7 +159,7 @@ describe('Security Reports modal', () => {
         propsData.modal.vulnerability.issue_feedback = {
           issue_url: null,
         };
-        wrapper = shallowMount(Component, { propsData });
+        mountComponent({ propsData });
       });
 
       it('hides the link to the issue', () => {
@@ -176,7 +179,7 @@ describe('Security Reports modal', () => {
         propsData.modal.vulnerability.merge_request_feedback = {
           merge_request_path: 'http://mr.url',
         };
-        wrapper = shallowMount(Component, { propsData });
+        mountComponent({ propsData });
       });
 
       it('displays a link to the merge request', () => {
@@ -194,7 +197,7 @@ describe('Security Reports modal', () => {
         propsData.modal.vulnerability.merge_request_feedback = {
           merge_request_path: null,
         };
-        wrapper = shallowMount(Component, { propsData });
+        mountComponent({ propsData });
       });
 
       it('hides the link to the merge request', () => {
@@ -210,7 +213,7 @@ describe('Security Reports modal', () => {
         modal: createState().modal,
       };
       propsData.modal.isResolved = true;
-      wrapper = shallowMount(Component, { propsData });
+      mountComponent({ propsData });
     });
 
     it('does not display the footer', () => {
@@ -230,7 +233,7 @@ describe('Security Reports modal', () => {
       propsData.modal.vulnerability.blob_path = blobPath;
       propsData.modal.data.namespace.value = namespaceValue;
       propsData.modal.data.file.value = fileValue;
-      wrapper = mount(Component, { propsData });
+      mountComponent({ propsData }, mount);
     });
 
     it('is rendered', () => {
@@ -265,7 +268,7 @@ describe('Security Reports modal', () => {
 
       const solution = 'Upgrade to XYZ';
       propsData.modal.vulnerability.solution = solution;
-      wrapper = mount(Component, { propsData });
+      mountComponent({ propsData }, mount);
 
       const solutionCard = wrapper.find('.js-solution-card');
 
@@ -280,7 +283,7 @@ describe('Security Reports modal', () => {
       };
       const summary = 'Upgrade to 123';
       propsData.modal.vulnerability.remediations = [{ summary }];
-      wrapper = mount(Component, { propsData });
+      mountComponent({ propsData }, mount);
 
       const solutionCard = wrapper.find('.js-solution-card');
 
@@ -293,7 +296,7 @@ describe('Security Reports modal', () => {
       const propsData = {
         modal: createState().modal,
       };
-      wrapper = mount(Component, { propsData });
+      mountComponent({ propsData }, mount);
 
       const solutionCard = wrapper.find('.js-solution-card');
 
@@ -325,7 +328,7 @@ describe('Security Reports modal', () => {
 
     describe('with a non-dismissed vulnerability', () => {
       beforeEach(() => {
-        wrapper = mount(Component, { propsData });
+        mountComponent({ propsData });
       });
 
       it('creates an error when an empty comment is submitted', () => {
@@ -349,7 +352,7 @@ describe('Security Reports modal', () => {
     describe('with a dismissed vulnerability', () => {
       beforeEach(() => {
         propsData.modal.vulnerability.dismissal_feedback = { author: {} };
-        wrapper = mount(Component, { propsData });
+        mountComponent({ propsData });
       });
 
       it('creates an error when an empty comment is submitted', () => {