Merge branch '259680-Refactor-createWrapper' into 'master'

Refactor createWrapper to take object instead of multiple arguments

Closes #259680

See merge request gitlab-org/gitlab!44035

ee/changelogs/unreleased/259680-Refactor-createWrapper.yml

+---
+title: Refactor vulnerabilities related issues component test createWrapper method to take an object instead of multiple arguments
+merge_request: 44035
+author: Kev @KevSlashNull
+type: other

ee/spec/frontend/vulnerabilities/related_issues_spec.js

@@ -33,7 +33,7 @@ describe('Vulnerability related issues component', () => {
   const issue1 = { id: 3, vulnerabilityLinkId: 987 };
   const issue2 = { id: 25, vulnerabilityLinkId: 876 };
 
-  const createWrapper = async (data = {}, provide = {}, opts) => {
+  const createWrapper = async ({ data = {}, provide = {}, stubs = {} } = {}) => {
     wrapper = shallowMount(RelatedIssues, {
       propsData,
       data: () => data,
@@ -46,7 +46,7 @@ describe('Vulnerability related issues component', () => {
         permissionsHelpPath,
         ...provide,
       },
-      ...opts,
+      stubs,
     });
     // Need this special check because RelatedIssues creates the store and uses its state in the data function, so we
     // need to set the state of the store, not replace the state property.
@@ -79,7 +79,7 @@ describe('Vulnerability related issues component', () => {
       },
     };
 
-    createWrapper(data);
+    createWrapper({ data });
 
     expect(relatedIssuesBlock().props()).toMatchObject({
       helpPath: propsData.helpPath,
@@ -120,7 +120,7 @@ describe('Vulnerability related issues component', () => {
   describe('add related issue', () => {
     beforeEach(() => {
       mockAxios.onGet(propsData.endpoint).replyOnce(httpStatusCodes.OK, []);
-      createWrapper({ isFormVisible: true });
+      createWrapper({ data: { isFormVisible: true } });
     });
 
     it('adds related issue with vulnerabilityLinkId populated', async () => {
@@ -178,7 +178,7 @@ describe('Vulnerability related issues component', () => {
       ${true}  | ${false}
       ${false} | ${true}
     `('toggles form visibility from $from to $to', async ({ from, to }) => {
-      createWrapper({ isFormVisible: from });
+      createWrapper({ data: { isFormVisible: from } });
 
       blockEmit('toggleAddRelatedIssuesForm');
       await wrapper.vm.$nextTick();
@@ -187,9 +187,11 @@ describe('Vulnerability related issues component', () => {
 
     it('resets form and hides it', async () => {
       createWrapper({
-        inputValue: 'some input value',
-        isFormVisible: true,
-        state: { pendingReferences: ['135', '246'] },
+        data: {
+          inputValue: 'some input value',
+          isFormVisible: true,
+          state: { pendingReferences: ['135', '246'] },
+        },
       });
       blockEmit('addIssuableFormCancel');
       await wrapper.vm.$nextTick();
@@ -205,7 +207,7 @@ describe('Vulnerability related issues component', () => {
       const pendingReferences = ['135', '246'];
       const untouchedRawReferences = ['357', '468'];
       const touchedReference = 'touchedReference';
-      createWrapper({ state: { pendingReferences } });
+      createWrapper({ data: { state: { pendingReferences } } });
       blockEmit('addIssuableFormInput', { untouchedRawReferences, touchedReference });
       await wrapper.vm.$nextTick();
 
@@ -225,7 +227,7 @@ describe('Vulnerability related issues component', () => {
     });
 
     it('removes pending reference', async () => {
-      createWrapper({ state: { pendingReferences: ['135', '246', '357'] } });
+      createWrapper({ data: { state: { pendingReferences: ['135', '246', '357'] } } });
       blockEmit('pendingIssuableRemoveRequest', 1);
       await wrapper.vm.$nextTick();
 
@@ -266,14 +268,13 @@ describe('Vulnerability related issues component', () => {
 
   describe('when linked issue is already created', () => {
     beforeEach(() => {
-      createWrapper(
-        {
+      createWrapper({
+        data: {
           isFetching: false,
           state: { relatedIssues: [issue1, { ...issue2, vulnerabilityLinkType: 'created' }] },
         },
-        {},
-        { stubs: { RelatedIssuesBlock } },
-      );
+        stubs: { RelatedIssuesBlock },
+      });
     });
 
     it('does not display the create issue button', () => {
@@ -291,7 +292,7 @@ describe('Vulnerability related issues component', () => {
 
     beforeEach(async () => {
       mockAxios.onGet(propsData.endpoint).replyOnce(httpStatusCodes.OK, [issue1, issue2]);
-      createWrapper({}, {}, { stubs: { RelatedIssuesBlock } });
+      createWrapper({ stubs: { RelatedIssuesBlock } });
       await axios.waitForAll();
     });
 
@@ -332,12 +333,11 @@ describe('Vulnerability related issues component', () => {
 
   describe('when project issue tracking is disabled', () => {
     it('hides the "Create Issue" button', () => {
-      createWrapper(
-        {},
-        {
+      createWrapper({
+        provide: {
           createIssueUrl: undefined,
         },
-      );
+      });
 
       expect(findCreateIssueButton().exists()).toBe(false);
     });