Merge branch 'vs-migrate-add-gitlab-slack-application-to-jest' into 'master'

Migrate ee/add_slack_app to Jest

Closes #194265

See merge request gitlab-org/gitlab!27591

ee/spec/javascripts/add_gitlab_slack_application/components/add_gitlab_slack_application_spec.js → ee/spec/frontend/add_gitlab_slack_application/components/add_gitlab_slack_application_spec.js

 import Vue from 'vue';
 import addGitlabSlackApplication from 'ee/add_gitlab_slack_application/components/add_gitlab_slack_application.vue';
 import GitlabSlackService from 'ee/add_gitlab_slack_application/services/gitlab_slack_service';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import { redirectTo } from '~/lib/utils/url_utility';
+
+jest.mock('~/lib/utils/url_utility');
 
 describe('AddGitlabSlackApplication', () => {
   const redirectLink = '//redirectLink';
@@ -34,35 +37,31 @@ describe('AddGitlabSlackApplication', () => {
 
   const AddGitlabSlackApplication = Vue.extend(addGitlabSlackApplication);
 
-  it('opens popup when button is clicked', done => {
+  it('opens popup when button is clicked', () => {
     const vm = mountComponent(AddGitlabSlackApplication, DEFAULT_PROPS);
 
     vm.$el.querySelector('.js-popup-button').click();
 
-    vm.$nextTick()
-      .then(() => {
-        expect(vm.$el.querySelector('.js-popup')).toBeDefined();
-      })
-      .then(done)
-      .catch(done.fail);
+    return vm.$nextTick().then(() => {
+      expect(vm.$el.querySelector('.js-popup')).toBeDefined();
+    });
   });
 
-  it('hides popup when button is clicked', done => {
+  it('hides popup when button is clicked', () => {
     const vm = mountComponent(AddGitlabSlackApplication, DEFAULT_PROPS);
 
     vm.popupOpen = true;
 
-    vm.$nextTick()
+    return vm
+      .$nextTick()
       .then(() => vm.$el.querySelector('.js-popup-button').click())
       .then(vm.$nextTick)
       .then(() => {
         expect(vm.$el.querySelector('.js-popup')).toBeNull();
-      })
-      .then(done)
-      .catch(done.fail);
+      });
   });
 
-  it('popup has a project select when signed in', done => {
+  it('popup has a project select when signed in', () => {
     const vm = mountComponent(AddGitlabSlackApplication, {
       ...DEFAULT_PROPS,
       isSignedIn: true,
@@ -70,15 +69,12 @@ describe('AddGitlabSlackApplication', () => {
 
     vm.popupOpen = true;
 
-    vm.$nextTick()
-      .then(() => {
-        expect(vm.$el.querySelector('.js-project-select')).toBeDefined();
-      })
-      .then(done)
-      .catch(done.fail);
+    return vm.$nextTick().then(() => {
+      expect(vm.$el.querySelector('.js-project-select')).toBeDefined();
+    });
   });
 
-  it('popup has a message when there is no projects', done => {
+  it('popup has a message when there is no projects', () => {
     const vm = mountComponent(AddGitlabSlackApplication, {
       ...DEFAULT_PROPS,
       projects: [],
@@ -87,17 +83,14 @@ describe('AddGitlabSlackApplication', () => {
 
     vm.popupOpen = true;
 
-    vm.$nextTick()
-      .then(() => {
-        expect(vm.$el.querySelector('.js-no-projects').textContent).toMatch(
-          "You don't have any projects available.",
-        );
-      })
-      .then(done)
-      .catch(done.fail);
+    return vm.$nextTick().then(() => {
+      expect(vm.$el.querySelector('.js-no-projects').textContent).toMatch(
+        "You don't have any projects available.",
+      );
+    });
   });
 
-  it('popup has a sign in link when logged out', done => {
+  it('popup has a sign in link when logged out', () => {
     const vm = mountComponent(AddGitlabSlackApplication, {
       ...DEFAULT_PROPS,
     });
@@ -105,36 +98,31 @@ describe('AddGitlabSlackApplication', () => {
     vm.popupOpen = true;
     vm.selectedProjectId = 4;
 
-    vm.$nextTick()
-      .then(() => {
-        expect(vm.$el.querySelector('.js-gitlab-slack-sign-in-link').href).toMatch(
-          new RegExp(signInPath, 'i'),
-        );
-      })
-      .then(done)
-      .catch(done.fail);
+    return vm.$nextTick().then(() => {
+      expect(vm.$el.querySelector('.js-gitlab-slack-sign-in-link').href).toMatch(
+        new RegExp(signInPath, 'i'),
+      );
+    });
   });
 
-  it('redirects user to external link when submitted', done => {
+  it('redirects user to external link when submitted', () => {
     const vm = mountComponent(AddGitlabSlackApplication, {
       ...DEFAULT_PROPS,
       isSignedIn: true,
     });
     const addToSlackPromise = Promise.resolve({ data: { add_to_slack_link: redirectLink } });
 
-    spyOn(GitlabSlackService, 'addToSlack').and.returnValue(addToSlackPromise);
-    const redirectTo = spyOnDependency(addGitlabSlackApplication, 'redirectTo');
+    jest.spyOn(GitlabSlackService, 'addToSlack').mockReturnValue(addToSlackPromise);
 
     vm.popupOpen = true;
 
-    vm.$nextTick()
+    return vm
+      .$nextTick()
       .then(() => vm.$el.querySelector('.js-add-button').click())
       .then(vm.$nextTick)
       .then(addToSlackPromise)
       .then(() => {
         expect(redirectTo).toHaveBeenCalledWith(redirectLink);
-      })
-      .then(done)
-      .catch(done.fail);
+      });
   });
 });