1 files changed, 250 insertions, 171 deletions

diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js
index ae0f605c419..850bbd93df5 100644
--- a/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js
+++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js
@@ -1,20 +1,81 @@
-import Vue from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
+import { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
 import { trimText } from 'helpers/text_helper';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import autoMergeEnabledComponent from '~/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue';
 import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
 import eventHub from '~/vue_merge_request_widget/event_hub';
 import { MWPS_MERGE_STRATEGY } from '~/vue_merge_request_widget/constants';
 
+let wrapper;
+let mergeRequestWidgetGraphqlEnabled = false;
+
+function convertPropsToGraphqlState(props) {
+  return {
+    autoMergeStrategy: props.autoMergeStrategy,
+    cancelAutoMergePath: 'http://text.com',
+    mergeUser: {
+      id: props.mergeUserId,
+      ...props.setToAutoMergeBy,
+    },
+    targetBranch: props.targetBranch,
+    targetBranchCommitsPath: props.targetBranchPath,
+    shouldRemoveSourceBranch: props.shouldRemoveSourceBranch,
+    forceRemoveSourceBranch: props.shouldRemoveSourceBranch,
+    userPermissions: {
+      removeSourceBranch: props.canRemoveSourceBranch,
+    },
+  };
+}
+
+function factory(propsData) {
+  let state = {};
+
+  if (mergeRequestWidgetGraphqlEnabled) {
+    state = convertPropsToGraphqlState(propsData);
+  }
+
+  wrapper = extendedWrapper(
+    shallowMount(autoMergeEnabledComponent, {
+      propsData: {
+        mr: propsData,
+        service: new MRWidgetService({}),
+      },
+      data() {
+        return { state };
+      },
+      provide: { glFeatures: { mergeRequestWidgetGraphql: mergeRequestWidgetGraphqlEnabled } },
+      mocks: {
+        $apollo: {
+          queries: {
+            state: { loading: false },
+          },
+        },
+      },
+    }),
+  );
+}
+
+const targetBranchPath = '/foo/bar';
+const targetBranch = 'foo';
+const sha = '1EA2EZ34';
+const defaultMrProps = () => ({
+  shouldRemoveSourceBranch: false,
+  canRemoveSourceBranch: true,
+  canCancelAutomaticMerge: true,
+  mergeUserId: 1,
+  currentUserId: 1,
+  setToAutoMergeBy: {},
+  sha,
+  targetBranchPath,
+  targetBranch,
+  autoMergeStrategy: MWPS_MERGE_STRATEGY,
+});
+
 describe('MRWidgetAutoMergeEnabled', () => {
-  let vm;
   let oldWindowGl;
-  const targetBranchPath = '/foo/bar';
-  const targetBranch = 'foo';
-  const sha = '1EA2EZ34';
 
   beforeEach(() => {
-    const Component = Vue.extend(autoMergeEnabledComponent);
     jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
 
     oldWindowGl = window.gl;
@@ -23,216 +84,234 @@ describe('MRWidgetAutoMergeEnabled', () => {
         defaultAvatarUrl: 'no_avatar.png',
       },
     };
-
-    vm = mountComponent(Component, {
-      mr: {
-        shouldRemoveSourceBranch: false,
-        canRemoveSourceBranch: true,
-        canCancelAutomaticMerge: true,
-        mergeUserId: 1,
-        currentUserId: 1,
-        setToAutoMergeBy: {},
-        sha,
-        targetBranchPath,
-        targetBranch,
-        autoMergeStrategy: MWPS_MERGE_STRATEGY,
-      },
-      service: new MRWidgetService({}),
-    });
   });
 
   afterEach(() => {
-    vm.$destroy();
     window.gl = oldWindowGl;
+    wrapper.destroy();
+    wrapper = null;
   });
 
-  describe('computed', () => {
-    describe('canRemoveSourceBranch', () => {
-      it('should return true when user is able to remove source branch', () => {
-        expect(vm.canRemoveSourceBranch).toBeTruthy();
+  [true, false].forEach((mergeRequestWidgetGraphql) => {
+    describe(`when graphql is ${mergeRequestWidgetGraphql ? 'enabled' : 'disabled'}`, () => {
+      beforeEach(() => {
+        mergeRequestWidgetGraphqlEnabled = mergeRequestWidgetGraphql;
       });
 
-      it('should return false when user id is not the same with who set the MWPS', () => {
-        vm.mr.mergeUserId = 2;
-
-        expect(vm.canRemoveSourceBranch).toBeFalsy();
-
-        vm.mr.currentUserId = 2;
-
-        expect(vm.canRemoveSourceBranch).toBeTruthy();
+      describe('computed', () => {
+        describe('canRemoveSourceBranch', () => {
+          it('should return true when user is able to remove source branch', () => {
+            factory({
+              ...defaultMrProps(),
+            });
 
-        vm.mr.currentUserId = 3;
+            expect(wrapper.findByTestId('removeSourceBranchButton').exists()).toBe(true);
+          });
 
-        expect(vm.canRemoveSourceBranch).toBeFalsy();
-      });
+          it.each`
+            mergeUserId | currentUserId
+            ${2}        | ${1}
+            ${1}        | ${2}
+          `(
+            'should return false when user id is not the same with who set the MWPS',
+            ({ mergeUserId, currentUserId }) => {
+              factory({
+                ...defaultMrProps(),
+                mergeUserId,
+                currentUserId,
+              });
+
+              expect(wrapper.findByTestId('removeSourceBranchButton').exists()).toBe(false);
+            },
+          );
 
-      it('should return false when shouldRemoveSourceBranch set to false', () => {
-        vm.mr.shouldRemoveSourceBranch = true;
+          it('should return false when shouldRemoveSourceBranch set to false', () => {
+            factory({
+              ...defaultMrProps(),
+              shouldRemoveSourceBranch: true,
+            });
 
-        expect(vm.canRemoveSourceBranch).toBeFalsy();
-      });
+            expect(wrapper.findByTestId('removeSourceBranchButton').exists()).toBe(false);
+          });
 
-      it('should return false if user is not able to remove the source branch', () => {
-        vm.mr.canRemoveSourceBranch = false;
+          it('should return false if user is not able to remove the source branch', () => {
+            factory({
+              ...defaultMrProps(),
+              canRemoveSourceBranch: false,
+            });
 
-        expect(vm.canRemoveSourceBranch).toBeFalsy();
-      });
-    });
+            expect(wrapper.findByTestId('removeSourceBranchButton').exists()).toBe(false);
+          });
+        });
 
-    describe('statusTextBeforeAuthor', () => {
-      it('should return "Set by" if the MWPS is selected', () => {
-        Vue.set(vm.mr, 'autoMergeStrategy', MWPS_MERGE_STRATEGY);
+        describe('statusTextBeforeAuthor', () => {
+          it('should return "Set by" if the MWPS is selected', () => {
+            factory({
+              ...defaultMrProps(),
+              autoMergeStrategy: MWPS_MERGE_STRATEGY,
+            });
 
-        expect(vm.statusTextBeforeAuthor).toBe('Set by');
-      });
-    });
+            expect(wrapper.findByTestId('beforeStatusText').text()).toBe('Set by');
+          });
+        });
 
-    describe('statusTextAfterAuthor', () => {
-      it('should return "to be merged automatically..." if MWPS is selected', () => {
-        Vue.set(vm.mr, 'autoMergeStrategy', MWPS_MERGE_STRATEGY);
+        describe('statusTextAfterAuthor', () => {
+          it('should return "to be merged automatically..." if MWPS is selected', () => {
+            factory({
+              ...defaultMrProps(),
+              autoMergeStrategy: MWPS_MERGE_STRATEGY,
+            });
 
-        expect(vm.statusTextAfterAuthor).toBe(
-          'to be merged automatically when the pipeline succeeds',
-        );
-      });
-    });
+            expect(wrapper.findByTestId('afterStatusText').text()).toBe(
+              'to be merged automatically when the pipeline succeeds',
+            );
+          });
+        });
 
-    describe('cancelButtonText', () => {
-      it('should return "Cancel automatic merge" if MWPS is selected', () => {
-        Vue.set(vm.mr, 'autoMergeStrategy', MWPS_MERGE_STRATEGY);
+        describe('cancelButtonText', () => {
+          it('should return "Cancel automatic merge" if MWPS is selected', () => {
+            factory({
+              ...defaultMrProps(),
+              autoMergeStrategy: MWPS_MERGE_STRATEGY,
+            });
 
-        expect(vm.cancelButtonText).toBe('Cancel automatic merge');
+            expect(wrapper.findByTestId('cancelAutomaticMergeButton').text()).toBe(
+              'Cancel automatic merge',
+            );
+          });
+        });
       });
-    });
-  });
 
-  describe('methods', () => {
-    describe('cancelAutomaticMerge', () => {
-      it('should set flag and call service then tell main component to update the widget with data', done => {
-        const mrObj = {
-          is_new_mr_data: true,
-        };
-        jest.spyOn(vm.service, 'cancelAutomaticMerge').mockReturnValue(
-          new Promise(resolve => {
-            resolve({
-              data: mrObj,
+      describe('methods', () => {
+        describe('cancelAutomaticMerge', () => {
+          it('should set flag and call service then tell main component to update the widget with data', (done) => {
+            factory({
+              ...defaultMrProps(),
             });
-          }),
-        );
-
-        vm.cancelAutomaticMerge();
-        setImmediate(() => {
-          expect(vm.isCancellingAutoMerge).toBeTruthy();
-          expect(eventHub.$emit).toHaveBeenCalledWith('UpdateWidgetData', mrObj);
-          done();
+            const mrObj = {
+              is_new_mr_data: true,
+            };
+            jest.spyOn(wrapper.vm.service, 'cancelAutomaticMerge').mockReturnValue(
+              new Promise((resolve) => {
+                resolve({
+                  data: mrObj,
+                });
+              }),
+            );
+
+            wrapper.vm.cancelAutomaticMerge();
+            setImmediate(() => {
+              expect(wrapper.vm.isCancellingAutoMerge).toBeTruthy();
+              expect(eventHub.$emit).toHaveBeenCalledWith('UpdateWidgetData', mrObj);
+              done();
+            });
+          });
         });
-      });
-    });
 
-    describe('removeSourceBranch', () => {
-      it('should set flag and call service then request main component to update the widget', done => {
-        jest.spyOn(vm.service, 'merge').mockReturnValue(
-          Promise.resolve({
-            data: {
-              status: MWPS_MERGE_STRATEGY,
-            },
-          }),
-        );
-
-        vm.removeSourceBranch();
-        setImmediate(() => {
-          expect(eventHub.$emit).toHaveBeenCalledWith('MRWidgetUpdateRequested');
-          expect(vm.service.merge).toHaveBeenCalledWith({
-            sha,
-            auto_merge_strategy: MWPS_MERGE_STRATEGY,
-            should_remove_source_branch: true,
-          });
-          done();
+        describe('removeSourceBranch', () => {
+          it('should set flag and call service then request main component to update the widget', (done) => {
+            factory({
+              ...defaultMrProps(),
+            });
+            jest.spyOn(wrapper.vm.service, 'merge').mockReturnValue(
+              Promise.resolve({
+                data: {
+                  status: MWPS_MERGE_STRATEGY,
+                },
+              }),
+            );
+
+            wrapper.vm.removeSourceBranch();
+            setImmediate(() => {
+              expect(eventHub.$emit).toHaveBeenCalledWith('MRWidgetUpdateRequested');
+              expect(wrapper.vm.service.merge).toHaveBeenCalledWith({
+                sha,
+                auto_merge_strategy: MWPS_MERGE_STRATEGY,
+                should_remove_source_branch: true,
+              });
+              done();
+            });
+          });
         });
       });
-    });
-  });
 
-  describe('template', () => {
-    it('should have correct elements', () => {
-      expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
-      expect(vm.$el.innerText).toContain('to be merged automatically when the pipeline succeeds');
+      describe('template', () => {
+        it('should have correct elements', () => {
+          factory({
+            ...defaultMrProps(),
+          });
 
-      expect(vm.$el.innerText).toContain('The changes will be merged into');
-      expect(vm.$el.innerText).toContain(targetBranch);
-      expect(vm.$el.innerText).toContain('The source branch will not be deleted');
-      expect(vm.$el.querySelector('.js-cancel-auto-merge').innerText).toContain(
-        'Cancel automatic merge',
-      );
+          expect(wrapper.element).toMatchSnapshot();
+        });
 
-      expect(vm.$el.querySelector('.js-cancel-auto-merge').getAttribute('disabled')).toBeFalsy();
-      expect(vm.$el.querySelector('.js-remove-source-branch').innerText).toContain(
-        'Delete source branch',
-      );
+        it('should disable cancel auto merge button when the action is in progress', async () => {
+          factory({
+            ...defaultMrProps(),
+          });
+          wrapper.setData({
+            isCancellingAutoMerge: true,
+          });
 
-      expect(vm.$el.querySelector('.js-remove-source-branch').getAttribute('disabled')).toBeFalsy();
-    });
+          await nextTick();
 
-    it('should disable cancel auto merge button when the action is in progress', done => {
-      vm.isCancellingAutoMerge = true;
+          expect(wrapper.find('.js-cancel-auto-merge').attributes('disabled')).toBe('disabled');
+        });
 
-      Vue.nextTick(() => {
-        expect(vm.$el.querySelector('.js-cancel-auto-merge').getAttribute('disabled')).toBeTruthy();
-        done();
-      });
-    });
+        it('should show source branch will be deleted text when it source branch set to remove', () => {
+          factory({
+            ...defaultMrProps(),
+            shouldRemoveSourceBranch: true,
+          });
 
-    it('should show source branch will be deleted text when it source branch set to remove', done => {
-      vm.mr.shouldRemoveSourceBranch = true;
+          const normalizedText = wrapper.text().replace(/\s+/g, ' ');
 
-      Vue.nextTick(() => {
-        const normalizedText = vm.$el.innerText.replace(/\s+/g, ' ');
+          expect(normalizedText).toContain('The source branch will be deleted');
+          expect(normalizedText).not.toContain('The source branch will not be deleted');
+        });
 
-        expect(normalizedText).toContain('The source branch will be deleted');
-        expect(normalizedText).not.toContain('The source branch will not be deleted');
-        done();
-      });
-    });
+        it('should not show delete source branch button when user not able to delete source branch', () => {
+          factory({
+            ...defaultMrProps(),
+            currentUserId: 4,
+          });
 
-    it('should not show delete source branch button when user not able to delete source branch', done => {
-      vm.mr.currentUserId = 4;
+          expect(wrapper.find('.js-remove-source-branch').exists()).toBe(false);
+        });
 
-      Vue.nextTick(() => {
-        expect(vm.$el.querySelector('.js-remove-source-branch')).toEqual(null);
-        done();
-      });
-    });
+        it('should disable delete source branch button when the action is in progress', async () => {
+          factory({
+            ...defaultMrProps(),
+          });
+          wrapper.setData({
+            isRemovingSourceBranch: true,
+          });
 
-    it('should disable delete source branch button when the action is in progress', done => {
-      vm.isRemovingSourceBranch = true;
+          await nextTick();
 
-      Vue.nextTick(() => {
-        expect(
-          vm.$el.querySelector('.js-remove-source-branch').getAttribute('disabled'),
-        ).toBeTruthy();
-        done();
-      });
-    });
+          expect(wrapper.find('.js-remove-source-branch').attributes('disabled')).toBe('disabled');
+        });
 
-    it('should render the status text as "...to merged automatically" if MWPS is selected', done => {
-      Vue.set(vm.mr, 'autoMergeStrategy', MWPS_MERGE_STRATEGY);
+        it('should render the status text as "...to merged automatically" if MWPS is selected', () => {
+          factory({
+            ...defaultMrProps(),
+            autoMergeStrategy: MWPS_MERGE_STRATEGY,
+          });
 
-      Vue.nextTick(() => {
-        const statusText = trimText(vm.$el.querySelector('.js-status-text-after-author').innerText);
+          const statusText = trimText(wrapper.find('.js-status-text-after-author').text());
 
-        expect(statusText).toBe('to be merged automatically when the pipeline succeeds');
-        done();
-      });
-    });
+          expect(statusText).toBe('to be merged automatically when the pipeline succeeds');
+        });
 
-    it('should render the cancel button as "Cancel automatic merge" if MWPS is selected', done => {
-      Vue.set(vm.mr, 'autoMergeStrategy', MWPS_MERGE_STRATEGY);
+        it('should render the cancel button as "Cancel automatic merge" if MWPS is selected', () => {
+          factory({
+            ...defaultMrProps(),
+            autoMergeStrategy: MWPS_MERGE_STRATEGY,
+          });
 
-      Vue.nextTick(() => {
-        const cancelButtonText = trimText(vm.$el.querySelector('.js-cancel-auto-merge').innerText);
+          const cancelButtonText = trimText(wrapper.find('.js-cancel-auto-merge').text());
 
-        expect(cancelButtonText).toBe('Cancel automatic merge');
-        done();
+          expect(cancelButtonText).toBe('Cancel automatic merge');
+        });
       });
     });
   });