Refactor onboarding component tests to jest

- move ee/spec/javascript/frontend/onboarding tests
  to ee/spec/frontend/onboarding
- migrate tests from karma to jest

ee/spec/frontend/onboarding/new_project_spec.js

@@ -66,7 +66,7 @@ describe('User onboarding new project utils', () => {
       form = document.getElementById('new_project');
       submitBtn = document.getElementById('submitBtn');
       form.addEventListener('submit', submitSpy);
-      jest.spyOn(form, 'submit').mockImplementation(() => {});
+      jest.spyOn(form, 'submit');
     });
 
     describe('when onboarding is not dismissed and there is an onboarding state on the local storage', () => {
@@ -82,7 +82,7 @@ describe('User onboarding new project utils', () => {
 
         bindOnboardingEvents(form);
 
-        expect(form.addEventListener).toHaveBeenCalledWith('submit', jasmine.any(Function));
+        expect(form.addEventListener).toHaveBeenCalledWith('submit', expect.any(Function));
       });
 
       it('calls updateLocalStorage with the correct project path when the form is submitted', () => {

ee/spec/javascripts/onboarding/onboarding_helper/components/action_popover_spec.js → ee/spec/frontend/onboarding/onboarding_helper/components/action_popover_spec.js

@@ -32,23 +32,23 @@ describe('User onboarding action popover', () => {
 
   describe('when mounted', () => {
     it("binds 'onboardingHelper.showActionPopover', 'onboardingHelper.hideActionPopover' and 'onboardingHelper.destroyActionPopover' event listener on eventHub", () => {
-      spyOn(eventHub, '$on');
+      jest.spyOn(eventHub, '$on');
 
       createComponent();
 
       expect(eventHub.$on).toHaveBeenCalledWith(
         'onboardingHelper.showActionPopover',
-        jasmine.any(Function),
+        expect.any(Function),
       );
 
       expect(eventHub.$on).toHaveBeenCalledWith(
         'onboardingHelper.hideActionPopover',
-        jasmine.any(Function),
+        expect.any(Function),
       );
 
       expect(eventHub.$on).toHaveBeenCalledWith(
         'onboardingHelper.destroyActionPopover',
-        jasmine.any(Function),
+        expect.any(Function),
       );
     });
   });
@@ -60,7 +60,7 @@ describe('User onboarding action popover', () => {
 
     describe('beforeDestroy', () => {
       it("unbinds 'showActionPopover', 'hideActionPopover' and 'destroyActionPopover' event handler", () => {
-        spyOn(eventHub, '$off');
+        jest.spyOn(eventHub, '$off');
 
         wrapper.destroy();
 

ee/spec/javascripts/onboarding/onboarding_helper/components/app_spec.js → ee/spec/frontend/onboarding/onboarding_helper/components/app_spec.js

 import Vue from 'vue';
 import OnboardingHelperApp from 'ee/onboarding/onboarding_helper/components/app.vue';
-import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
 import eventHub from 'ee/onboarding/onboarding_helper/event_hub';
 import createStore from 'ee/onboarding/onboarding_helper/store';
 import actionPopoverUtils from 'ee/onboarding/onboarding_helper/action_popover_utils';
 import Tracking from '~/tracking';
 import { mockTourData } from '../mock_data';
+import { redirectTo } from '~/lib/utils/url_utility';
+
+jest.mock('~/lib/utils/url_utility', () => ({
+  redirectTo: jest.fn(),
+}));
 
 describe('User onboarding helper app', () => {
   let vm;
@@ -55,7 +60,7 @@ describe('User onboarding helper app', () => {
   beforeEach(() => {
     vm = createComponent();
 
-    spyOn(vm, 'init');
+    jest.spyOn(vm, 'init');
 
     vm.$mount();
   });
@@ -122,7 +127,7 @@ describe('User onboarding helper app', () => {
   describe('methods', () => {
     describe('initActionPopover', () => {
       it('calls renderPopover with the correct data', () => {
-        spyOn(actionPopoverUtils, 'renderPopover');
+        jest.spyOn(actionPopoverUtils, 'renderPopover');
 
         const expected = {
           selector: '.popup-trigger',
@@ -144,7 +149,7 @@ describe('User onboarding helper app', () => {
       });
 
       it('calls renderPopover with showPopover=true if there is no helpContent data and no popover selector for the current url', () => {
-        spyOn(actionPopoverUtils, 'renderPopover');
+        jest.spyOn(actionPopoverUtils, 'renderPopover');
 
         vm.$store.state.url = 'http://gitlab-org/gitlab-test/xyz';
 
@@ -170,7 +175,7 @@ describe('User onboarding helper app', () => {
 
     describe('showActionPopover', () => {
       it('emits the "onboardingHelper.showActionPopover" event', () => {
-        spyOn(eventHub, '$emit');
+        jest.spyOn(eventHub, '$emit');
 
         vm.showActionPopover();
 
@@ -180,7 +185,7 @@ describe('User onboarding helper app', () => {
 
     describe('hideActionPopover', () => {
       it('emits the "onboardingHelper.hideActionPopover" event', () => {
-        spyOn(eventHub, '$emit');
+        jest.spyOn(eventHub, '$emit');
 
         vm.hideActionPopover();
 
@@ -190,8 +195,8 @@ describe('User onboarding helper app', () => {
 
     describe('handleRestartStep', () => {
       it('calls the "showExitTourContent" and "handleFeedbackTourContent" methods', () => {
-        spyOn(vm, 'showExitTourContent');
-        spyOn(vm, 'handleFeedbackTourContent');
+        jest.spyOn(vm, 'showExitTourContent');
+        jest.spyOn(vm, 'handleFeedbackTourContent');
 
         vm.handleRestartStep();
 
@@ -200,7 +205,7 @@ describe('User onboarding helper app', () => {
       });
 
       it('emits the "onboardingHelper.hideActionPopover" event', () => {
-        spyOn(eventHub, '$emit');
+        jest.spyOn(eventHub, '$emit');
 
         vm.handleRestartStep();
 
@@ -218,8 +223,8 @@ describe('User onboarding helper app', () => {
           click: () => {},
         };
 
-        spyOn(document, 'querySelector').and.returnValue(fakeLink);
-        spyOn(fakeLink, 'click');
+        jest.spyOn(document, 'querySelector').mockReturnValue(fakeLink);
+        jest.spyOn(fakeLink, 'click');
 
         vm.handleSkipStep();
 
@@ -230,7 +235,7 @@ describe('User onboarding helper app', () => {
 
     describe('handleStepContentButton', () => {
       it('shows the exitTour content', () => {
-        spyOn(vm, 'showExitTourContent');
+        jest.spyOn(vm, 'showExitTourContent');
 
         const button = {
           showExitTourContent: true,
@@ -268,19 +273,18 @@ describe('User onboarding helper app', () => {
       });
 
       it('redirects to the redirectPath', () => {
-        const redirectSpy = spyOnDependency(OnboardingHelperApp, 'redirectTo');
         const button = {
           redirectPath: 'my-redirect/path',
         };
 
         vm.handleStepContentButton(button);
 
-        expect(redirectSpy).toHaveBeenCalledWith(button.redirectPath);
+        expect(redirectTo).toHaveBeenCalledWith(button.redirectPath);
       });
 
       it('switches to the next tour part and calls initActionPopover', () => {
-        spyOn(vm.$store, 'dispatch');
-        spyOn(vm, 'initActionPopover');
+        jest.spyOn(vm.$store, 'dispatch');
+        jest.spyOn(vm, 'initActionPopover');
 
         const nextPart = 2;
         const button = {
@@ -294,7 +298,7 @@ describe('User onboarding helper app', () => {
       });
 
       it('shows the next content item', () => {
-        spyOn(vm.$store, 'dispatch');
+        jest.spyOn(vm.$store, 'dispatch');
 
         const button = {};
 
@@ -309,8 +313,8 @@ describe('User onboarding helper app', () => {
 
     describe('handleFeedbackButton', () => {
       beforeEach(() => {
-        spyOn(Tracking, 'event');
-        spyOn(vm.$store, 'dispatch');
+        jest.spyOn(Tracking, 'event');
+        jest.spyOn(vm.$store, 'dispatch');
       });
 
       it('tracks feedback and shows the exit tour content', () => {
@@ -341,7 +345,7 @@ describe('User onboarding helper app', () => {
       });
 
       it('calls the "setExitTour" method', () => {
-        spyOn(vm.$store, 'dispatch');
+        jest.spyOn(vm.$store, 'dispatch');
 
         vm.showExitTourContent(true);
 
@@ -357,7 +361,7 @@ describe('User onboarding helper app', () => {
       });
 
       it('calls the "setTourFeedback" method', () => {
-        spyOn(vm.$store, 'dispatch');
+        jest.spyOn(vm.$store, 'dispatch');
 
         vm.handleFeedbackTourContent(true);
 
@@ -373,7 +377,7 @@ describe('User onboarding helper app', () => {
       });
 
       it('calls the "setDntExitTour" method', () => {
-        spyOn(vm.$store, 'dispatch');
+        jest.spyOn(vm.$store, 'dispatch');
 
         vm.handleDntExitTourContent(true);
 
@@ -383,7 +387,7 @@ describe('User onboarding helper app', () => {
 
     describe('handleExitTourButton', () => {
       it('emits the "onboardingHelper.hideActionPopover" event', () => {
-        spyOn(eventHub, '$emit');
+        jest.spyOn(eventHub, '$emit');
 
         vm.handleExitTourButton();
 
@@ -391,7 +395,7 @@ describe('User onboarding helper app', () => {
       });
 
       it('calls the "setDismissed" method with true', () => {
-        spyOn(vm.$store, 'dispatch');
+        jest.spyOn(vm.$store, 'dispatch');
 
         vm.handleExitTourButton();
 
@@ -399,7 +403,7 @@ describe('User onboarding helper app', () => {
       });
 
       it('emits the "onboardingHelper.destroyActionPopover" event', () => {
-        spyOn(eventHub, '$emit');
+        jest.spyOn(eventHub, '$emit');
 
         vm.handleExitTourButton();
 

ee/spec/javascripts/onboarding/onboarding_helper/components/onboarding_helper_spec.js → ee/spec/frontend/onboarding/onboarding_helper/components/onboarding_helper_spec.js

@@ -238,7 +238,7 @@ describe('User onboarding tour parts list', () => {
       const findExitTourLink = () => wrapper.find('.qa-exit-tour-link');
 
       it('emits the "showDntExitContent" event when the "Exit Learn GitLab" link is clicked and tracking is not enabled', () => {
-        spyOn(Tracking, 'enabled').and.returnValue(false);
+        jest.spyOn(Tracking, 'enabled').mockReturnValue(false);
 
         findExitTourLink().vm.$emit('click');
 
@@ -247,7 +247,7 @@ describe('User onboarding tour parts list', () => {
       });
 
       it('emits the "showFeedbackContent" event when the "Exit Learn GitLab" link is clicked and tracking is enabled', () => {
-        spyOn(Tracking, 'enabled').and.returnValue(true);
+        jest.spyOn(Tracking, 'enabled').mockReturnValue(true);
 
         findExitTourLink().vm.$emit('click');
 
@@ -348,7 +348,7 @@ describe('User onboarding tour parts list', () => {
       expect(wrapper.find(TourPartsList).exists()).toBe(true);
 
       expect(wrapper.find(TourPartsList).props()).toEqual(
-        jasmine.objectContaining({
+        expect.objectContaining({
           tourTitles,
           activeTour,
           totalStepsForTour,

ee/spec/javascripts/onboarding/onboarding_helper/store/actions_spec.js → ee/spec/frontend/onboarding/onboarding_helper/store/actions_spec.js

 import Cookies from 'js-cookie';
-import testAction from 'spec/helpers/vuex_action_helper';
+import testAction from 'helpers/vuex_action_helper';
 import createState from 'ee/onboarding/onboarding_helper/store/state';
 import * as types from 'ee/onboarding/onboarding_helper/store/mutation_types';
 import {
@@ -41,7 +41,7 @@ describe('User onboarding helper store actions', () => {
 
   describe('setTourKey', () => {
     beforeEach(() => {
-      spyOn(onboardingUtils, 'updateLocalStorage').and.stub();
+      jest.spyOn(onboardingUtils, 'updateLocalStorage');
     });
 
     it(`commits ${types.SET_TOUR_KEY} mutation`, done => {
@@ -68,7 +68,7 @@ describe('User onboarding helper store actions', () => {
 
   describe('setLastStepIndex', () => {
     beforeEach(() => {
-      spyOn(onboardingUtils, 'updateLocalStorage').and.stub();
+      jest.spyOn(onboardingUtils, 'updateLocalStorage');
     });
 
     it(`commits ${types.SET_LAST_STEP_INDEX} mutation`, done => {
@@ -183,10 +183,10 @@ describe('User onboarding helper store actions', () => {
         [{ type: types.SET_DISMISSED, payload: dismissed }],
         [],
         () => {
-          setTimeout(() => {
+          setImmediate(() => {
             expect(Cookies.get(ONBOARDING_DISMISSED_COOKIE_NAME)).toEqual(`${dismissed}`);
             done();
-          }, 0);
+          });
         },
       );
     });

ee/spec/javascripts/onboarding/onboarding_welcome/welcome_page_spec.js → ee/spec/frontend/onboarding/onboarding_welcome/welcome_page_spec.js

@@ -5,6 +5,11 @@ import ActionPopover from 'ee/onboarding/onboarding_helper/components/action_pop
 import HelpContentPopover from 'ee/onboarding/onboarding_helper/components/help_content_popover.vue';
 import onboardingUtils from 'ee/onboarding/utils';
 import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
+import { redirectTo } from '~/lib/utils/url_utility';
+
+jest.mock('~/lib/utils/url_utility', () => ({
+  redirectTo: jest.fn(),
+}));
 
 const localVue = createLocalVue();
 
@@ -38,8 +43,7 @@ describe('User onboarding welcome page', () => {
   describe('methods', () => {
     describe('startTour', () => {
       it('resets the localStorage', done => {
-        spyOnDependency(component, 'redirectTo');
-        spyOn(onboardingUtils, 'resetOnboardingLocalStorage').and.stub();
+        jest.spyOn(onboardingUtils, 'resetOnboardingLocalStorage');
 
         wrapper.vm
           .$nextTick()
@@ -53,8 +57,7 @@ describe('User onboarding welcome page', () => {
       });
 
       it('sets the dismissed property to false', done => {
-        spyOnDependency(component, 'redirectTo');
-        spyOn(onboardingUtils, 'updateOnboardingDismissed').and.stub();
+        jest.spyOn(onboardingUtils, 'updateOnboardingDismissed');
 
         wrapper.vm
           .$nextTick()
@@ -68,13 +71,12 @@ describe('User onboarding welcome page', () => {
       });
 
       it('redirects to the project path', done => {
-        const redirectSpy = spyOnDependency(component, 'redirectTo');
         wrapper.vm
           .$nextTick()
           .then(() => wrapper.vm.startTour())
           .then(wrapper.vm.$nextTick)
           .then(() => {
-            expect(redirectSpy).toHaveBeenCalledWith(props.projectFullPath);
+            expect(redirectTo).toHaveBeenCalledWith(props.projectFullPath);
           })
           .then(done)
           .catch(done.fail);
@@ -83,8 +85,7 @@ describe('User onboarding welcome page', () => {
 
     describe('skipTour', () => {
       it('sets the dismissed property to true', done => {
-        spyOnDependency(component, 'redirectTo');
-        spyOn(onboardingUtils, 'updateOnboardingDismissed').and.stub();
+        jest.spyOn(onboardingUtils, 'updateOnboardingDismissed');
 
         wrapper.vm
           .$nextTick()
@@ -98,13 +99,12 @@ describe('User onboarding welcome page', () => {
       });
 
       it('redirects to the skip url', done => {
-        const redirectSpy = spyOnDependency(component, 'redirectTo');
         wrapper.vm
           .$nextTick()
           .then(() => wrapper.vm.skipTour())
           .then(wrapper.vm.$nextTick)
           .then(() => {
-            expect(redirectSpy).toHaveBeenCalledWith(props.skipUrl);
+            expect(redirectTo).toHaveBeenCalledWith(props.skipUrl);
           })
           .then(done)
           .catch(done.fail);

ee/spec/javascripts/onboarding/utils_spec.js → ee/spec/frontend/onboarding/utils_spec.js

 import Cookies from 'js-cookie';
+import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import {
   ONBOARDING_DISMISSED_COOKIE_NAME,
   STORAGE_KEY,
@@ -8,10 +9,12 @@ import onboardingUtils from 'ee/onboarding/utils';
 import AccessorUtilities from '~/lib/utils/accessor';
 
 describe('User onboarding utils', () => {
+  useLocalStorageSpy();
+
   beforeEach(() => {
     Cookies.remove(ONBOARDING_DISMISSED_COOKIE_NAME);
     onboardingUtils.resetOnboardingLocalStorage();
-    spyOn(AccessorUtilities, 'isLocalStorageAccessSafe').and.returnValue(true);
+    jest.spyOn(AccessorUtilities, 'isLocalStorageAccessSafe').mockReturnValue(true);
   });
 
   describe('isOnboardingDismissed', () => {
@@ -34,8 +37,6 @@ describe('User onboarding utils', () => {
     });
 
     it('removes onboarding related data from localStorage', () => {
-      spyOn(localStorage, 'removeItem');
-
       onboardingUtils.updateOnboardingDismissed(true);
 
       expect(localStorage.removeItem).toHaveBeenCalledWith(STORAGE_KEY);
@@ -44,46 +45,33 @@ describe('User onboarding utils', () => {
 
   describe('resetOnboardingLocalStorage', () => {
     it('resets the onboarding props in the localStorage to the default', () => {
-      const modified = {
-        tourKey: 2,
-        lastStepIndex: 5,
-        createdProjectPath: 'foo',
-      };
-
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(modified));
-
+      jest.spyOn(window.localStorage, 'setItem');
       onboardingUtils.resetOnboardingLocalStorage();
-
-      expect(JSON.parse(localStorage.getItem(STORAGE_KEY))).toEqual(ONBOARDING_PROPS_DEFAULTS);
+      expect(localStorage.setItem).toHaveBeenCalledWith(
+        STORAGE_KEY,
+        JSON.stringify(ONBOARDING_PROPS_DEFAULTS),
+      );
     });
   });
 
   describe('getOnboardingLocalStorageState', () => {
     it('retrieves the proper values from localStorage', () => {
-      const modified = {
-        tourKey: 2,
-        lastStepIndex: 5,
-        createdProjectPath: 'foo',
-      };
-
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(modified));
-
-      expect(onboardingUtils.getOnboardingLocalStorageState()).toEqual(modified);
+      jest.spyOn(window.localStorage, 'getItem').mockReturnValue('{}');
+      onboardingUtils.getOnboardingLocalStorageState();
+      expect(localStorage.getItem).toHaveBeenCalledWith(STORAGE_KEY);
     });
   });
 
   describe('updateLocalStorage', () => {
     it('updates the onboarding state on the localStorage', () => {
-      spyOn(localStorage, 'setItem');
-
+      jest.spyOn(window.localStorage, 'getItem').mockReturnValue('{}');
+      jest.spyOn(window.localStorage, 'setItem');
       const modified = {
         tourKey: 2,
         lastStepIndex: 5,
         createdProjectPath: 'foo',
       };
-
       onboardingUtils.updateLocalStorage(modified);
-
       expect(localStorage.setItem).toHaveBeenCalledWith(STORAGE_KEY, JSON.stringify(modified));
     });
   });