Merge branch 'himkp-jest-vue-shared' into 'master'

Migrate some spec/javascripts/vue_shared specs to Jest

See merge request gitlab-org/gitlab!31393

spec/javascripts/vue_shared/components/ci_badge_link_spec.js → spec/frontend/vue_shared/components/ci_badge_link_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import ciBadge from '~/vue_shared/components/ci_badge_link.vue';
 
 describe('CI Badge Link Component', () => {

spec/javascripts/vue_shared/components/ci_icon_spec.js → spec/frontend/vue_shared/components/ci_icon_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import ciIcon from '~/vue_shared/components/ci_icon.vue';
 
 describe('CI Icon component', () => {

spec/javascripts/vue_shared/components/content_viewer/content_viewer_spec.js → spec/frontend/vue_shared/components/content_viewer/content_viewer_spec.js

 import Vue from 'vue';
 import MockAdapter from 'axios-mock-adapter';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import waitForPromises from 'spec/helpers/wait_for_promises';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import { GREEN_BOX_IMAGE_URL } from 'spec/test_constants';
 import axios from '~/lib/utils/axios_utils';
 import contentViewer from '~/vue_shared/components/content_viewer/content_viewer.vue';
@@ -96,7 +96,7 @@ describe('ContentViewer', () => {
 
   it('markdown preview receives the file path as a parameter', done => {
     mock = new MockAdapter(axios);
-    spyOn(axios, 'post').and.callThrough();
+    jest.spyOn(axios, 'post');
     mock.onPost(`${gon.relative_url_root}/testproject/preview_markdown`).reply(200, {
       body: '<b>testing</b>',
     });
@@ -114,7 +114,7 @@ describe('ContentViewer', () => {
         expect(axios.post).toHaveBeenCalledWith(
           `${gon.relative_url_root}/testproject/preview_markdown`,
           { path: 'foo/test.md', text: '*  Test' },
-          jasmine.any(Object),
+          expect.any(Object),
         );
       })
       .then(done)

spec/javascripts/vue_shared/components/diff_viewer/diff_viewer_spec.js → spec/frontend/vue_shared/components/diff_viewer/diff_viewer_spec.js

 import Vue from 'vue';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import { GREEN_BOX_IMAGE_URL, RED_BOX_IMAGE_URL } from 'spec/test_constants';
 import diffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
 
@@ -32,7 +32,7 @@ describe('DiffViewer', () => {
 
     createComponent({ ...requiredProps, projectPath: '' });
 
-    setTimeout(() => {
+    setImmediate(() => {
       expect(vm.$el.querySelector('.deleted img').getAttribute('src')).toBe(
         `//-/raw/DEF/${RED_BOX_IMAGE_URL}`,
       );
@@ -53,7 +53,7 @@ describe('DiffViewer', () => {
       oldPath: 'testold.abc',
     });
 
-    setTimeout(() => {
+    setImmediate(() => {
       expect(vm.$el.querySelector('.deleted .file-info').textContent.trim()).toContain(
         'testold.abc',
       );

spec/javascripts/vue_shared/components/dropdown/dropdown_button_spec.js → spec/frontend/vue_shared/components/dropdown/dropdown_button_spec.js

 import Vue from 'vue';
 
-import { mountComponentWithSlots } from 'spec/helpers/vue_mount_component_helper';
+import { mountComponentWithSlots } from 'helpers/vue_mount_component_helper';
 import dropdownButtonComponent from '~/vue_shared/components/dropdown/dropdown_button.vue';
 
 const defaultLabel = 'Select';
@@ -74,7 +74,7 @@ describe('DropdownButtonComponent', () => {
         },
       );
 
-      expect(vm.$el).not.toContainElement('.dropdown-toggle-text');
+      expect(vm.$el.querySelector('.dropdown-toggle-text')).toBeNull();
       expect(vm.$el).toHaveText('Lorem Ipsum Dolar');
     });
   });

spec/javascripts/vue_shared/components/dropdown/dropdown_hidden_input_spec.js → spec/frontend/vue_shared/components/dropdown/dropdown_hidden_input_spec.js

 import Vue from 'vue';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import dropdownHiddenInputComponent from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
 
 import { mockLabels } from './mock_data';

spec/javascripts/vue_shared/components/file_finder/item_spec.js → spec/frontend/vue_shared/components/file_finder/item_spec.js

 import Vue from 'vue';
-import { file } from 'spec/ide/helpers';
+import { file } from 'jest/ide/helpers';
 import ItemComponent from '~/vue_shared/components/file_finder/item.vue';
-import createComponent from '../../../helpers/vue_mount_component_helper';
+import createComponent from 'helpers/vue_mount_component_helper';
 
 describe('File finder item spec', () => {
   const Component = Vue.extend(ItemComponent);
@@ -75,7 +75,7 @@ describe('File finder item spec', () => {
   });
 
   it('emits event when clicked', () => {
-    spyOn(vm, '$emit');
+    jest.spyOn(vm, '$emit').mockImplementation(() => {});
 
     vm.$el.click();
 

spec/javascripts/vue_shared/components/filtered_search_dropdown_spec.js → spec/frontend/vue_shared/components/filtered_search_dropdown_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import component from '~/vue_shared/components/filtered_search_dropdown.vue';
 
 describe('Filtered search dropdown', () => {
@@ -125,7 +125,7 @@ describe('Filtered search dropdown', () => {
 
       describe('on click create button', () => {
         it('emits createItem event with the filter', done => {
-          spyOn(vm, '$emit');
+          jest.spyOn(vm, '$emit').mockImplementation(() => {});
           vm.$nextTick(() => {
             vm.$el.querySelector('.js-dropdown-create-button').click();
 

spec/javascripts/vue_shared/components/gl_countdown_spec.js → spec/frontend/vue_shared/components/gl_countdown_spec.js

-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import Vue from 'vue';
 import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
 
@@ -8,13 +8,12 @@ describe('GlCountdown', () => {
   let now = '2000-01-01T00:00:00Z';
 
   beforeEach(() => {
-    spyOn(Date, 'now').and.callFake(() => new Date(now).getTime());
-    jasmine.clock().install();
+    jest.spyOn(Date, 'now').mockImplementation(() => new Date(now).getTime());
   });
 
   afterEach(() => {
     vm.$destroy();
-    jasmine.clock().uninstall();
+    jest.clearAllTimers();
   });
 
   describe('when there is time remaining', () => {
@@ -29,16 +28,16 @@ describe('GlCountdown', () => {
     });
 
     it('displays remaining time', () => {
-      expect(vm.$el).toContainText('01:02:03');
+      expect(vm.$el.textContent).toContain('01:02:03');
     });
 
     it('updates remaining time', done => {
       now = '2000-01-01T00:00:01Z';
-      jasmine.clock().tick(1000);
+      jest.advanceTimersByTime(1000);
 
       Vue.nextTick()
         .then(() => {
-          expect(vm.$el).toContainText('01:02:02');
+          expect(vm.$el.textContent).toContain('01:02:02');
           done();
         })
         .catch(done.fail);
@@ -57,19 +56,26 @@ describe('GlCountdown', () => {
     });
 
     it('displays 00:00:00', () => {
-      expect(vm.$el).toContainText('00:00:00');
+      expect(vm.$el.textContent).toContain('00:00:00');
     });
   });
 
   describe('when an invalid date is passed', () => {
+    beforeEach(() => {
+      Vue.config.warnHandler = jest.fn();
+    });
+
+    afterEach(() => {
+      Vue.config.warnHandler = null;
+    });
+
     it('throws a validation error', () => {
-      spyOn(Vue.config, 'warnHandler').and.stub();
       vm = mountComponent(Component, {
         endDateString: 'this is invalid',
       });
 
       expect(Vue.config.warnHandler).toHaveBeenCalledTimes(1);
-      const [errorMessage] = Vue.config.warnHandler.calls.argsFor(0);
+      const [errorMessage] = Vue.config.warnHandler.mock.calls[0];
 
       expect(errorMessage).toMatch(/^Invalid prop: .* "endDateString"/);
     });

spec/javascripts/vue_shared/components/header_ci_component_spec.js → spec/frontend/vue_shared/components/header_ci_component_spec.js

 import Vue from 'vue';
-import mountComponent, { mountComponentWithSlots } from 'spec/helpers/vue_mount_component_helper';
+import mountComponent, { mountComponentWithSlots } from 'helpers/vue_mount_component_helper';
 import headerCi from '~/vue_shared/components/header_ci_component.vue';
 
 describe('Header CI Component', () => {

spec/javascripts/vue_shared/components/markdown/toolbar_spec.js → spec/frontend/vue_shared/components/markdown/toolbar_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import toolbar from '~/vue_shared/components/markdown/toolbar.vue';
 
 describe('toolbar', () => {

spec/javascripts/vue_shared/components/navigation_tabs_spec.js → spec/frontend/vue_shared/components/navigation_tabs_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import navigationTabs from '~/vue_shared/components/navigation_tabs.vue';
 
 describe('navigation tabs component', () => {
@@ -56,7 +56,7 @@ describe('navigation tabs component', () => {
   });
 
   it('should trigger onTabClick', () => {
-    spyOn(vm, '$emit');
+    jest.spyOn(vm, '$emit').mockImplementation(() => {});
     vm.$el.querySelector('.js-pipelines-tab-pending').click();
 
     expect(vm.$emit).toHaveBeenCalledWith('onChangeTab', 'pending');

spec/javascripts/vue_shared/components/pikaday_spec.js → spec/frontend/vue_shared/components/pikaday_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import datePicker from '~/vue_shared/components/pikaday.vue';
 
 describe('datePicker', () => {
@@ -20,7 +20,7 @@ describe('datePicker', () => {
   });
 
   it('should toggle when dropdown is clicked', () => {
-    const hidePicker = jasmine.createSpy();
+    const hidePicker = jest.fn();
     vm.$on('hidePicker', hidePicker);
 
     vm.$el.querySelector('.dropdown-menu-toggle').click();

spec/javascripts/vue_shared/components/project_avatar/default_spec.js → spec/frontend/vue_shared/components/project_avatar/default_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { projectData } from 'spec/ide/mock_data';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import { projectData } from 'jest/ide/mock_data';
 import { TEST_HOST } from 'spec/test_constants';
 import { getFirstCharacterCapitalized } from '~/lib/utils/text_utility';
 import ProjectAvatarDefault from '~/vue_shared/components/project_avatar/default.vue';
@@ -48,8 +48,8 @@ describe('ProjectAvatarDefault component', () => {
 
     vm.$nextTick()
       .then(() => {
-        expect(vm.$el).toContainElement('.avatar');
-        expect(vm.$el).not.toContainElement('.identicon');
+        expect(vm.$el.querySelector('.avatar')).not.toBeNull();
+        expect(vm.$el.querySelector('.identicon')).toBeNull();
         expect(vm.$el.querySelector('img')).toHaveAttr('src', avatarUrl);
       })
       .then(done)

spec/javascripts/vue_shared/components/project_selector/project_list_item_spec.js → spec/frontend/vue_shared/components/project_selector/project_list_item_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
-import { trimText } from 'spec/helpers/text_helper';
+import { trimText } from 'helpers/text_helper';
 import ProjectListItem from '~/vue_shared/components/project_selector/project_list_item.vue';
 
 const localVue = createLocalVue();
@@ -9,7 +9,7 @@ describe('ProjectListItem component', () => {
   let wrapper;
   let vm;
   let options;
-  loadJSONFixtures('static/projects.json');
+
   const project = getJSONFixture('static/projects.json')[0];
 
   beforeEach(() => {
@@ -44,7 +44,7 @@ describe('ProjectListItem component', () => {
     wrapper = shallowMount(Component, options);
     ({ vm } = wrapper);
 
-    spyOn(vm, '$emit');
+    jest.spyOn(vm, '$emit').mockImplementation(() => {});
     wrapper.vm.onClick();
 
     expect(wrapper.vm.$emit).toHaveBeenCalledWith('click');
@@ -95,7 +95,7 @@ describe('ProjectListItem component', () => {
   });
 
   it('prevents search query and project name XSS', () => {
-    const alertSpy = spyOn(window, 'alert');
+    const alertSpy = jest.spyOn(window, 'alert');
     options.propsData.project.name = "my-xss-pro<script>alert('XSS');</script>ject";
     options.propsData.matcher = "pro<script>alert('XSS');</script>";
 

spec/frontend/vue_shared/components/sidebar/labels_select/base_spec.js

@@ -4,10 +4,7 @@ import { shallowMount } from '@vue/test-utils';
 import LabelsSelect from '~/labels_select';
 import BaseComponent from '~/vue_shared/components/sidebar/labels_select/base.vue';
 
-import {
-  mockConfig,
-  mockLabels,
-} from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data';
+import { mockConfig, mockLabels } from './mock_data';
 
 const createComponent = (config = mockConfig) =>
   shallowMount(BaseComponent, {

spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js

@@ -3,10 +3,7 @@ import Vue from 'vue';
 import mountComponent from 'helpers/vue_mount_component_helper';
 import dropdownButtonComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_button.vue';
 
-import {
-  mockConfig,
-  mockLabels,
-} from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data';
+import { mockConfig, mockLabels } from './mock_data';
 
 const componentConfig = {
   ...mockConfig,

spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js

@@ -3,7 +3,7 @@ import Vue from 'vue';
 import mountComponent from 'helpers/vue_mount_component_helper';
 import dropdownCreateLabelComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue';
 
-import { mockSuggestedColors } from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data';
+import { mockSuggestedColors } from './mock_data';
 
 const createComponent = headerTitle => {
   const Component = Vue.extend(dropdownCreateLabelComponent);

spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js

@@ -3,7 +3,7 @@ import Vue from 'vue';
 import mountComponent from 'helpers/vue_mount_component_helper';
 import dropdownFooterComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_footer.vue';
 
-import { mockConfig } from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data';
+import { mockConfig } from './mock_data';
 
 const createComponent = (
   labelsWebUrl = mockConfig.labelsWebUrl,

spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js

@@ -3,7 +3,7 @@ import Vue from 'vue';
 import mountComponent from 'helpers/vue_mount_component_helper';
 import dropdownValueCollapsedComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue';
 
-import { mockLabels } from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data';
+import { mockLabels } from './mock_data';
 
 const createComponent = (labels = mockLabels) => {
   const Component = Vue.extend(dropdownValueCollapsedComponent);

spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js

@@ -2,10 +2,7 @@ import { mount } from '@vue/test-utils';
 import DropdownValueComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_value.vue';
 import { GlLabel } from '@gitlab/ui';
 
-import {
-  mockConfig,
-  mockLabels,
-} from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data';
+import { mockConfig, mockLabels } from './mock_data';
 
 const createComponent = (
   labels = mockLabels,

spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js → spec/frontend/vue_shared/components/stacked_progress_bar_spec.js

 import Vue from 'vue';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import stackedProgressBarComponent from '~/vue_shared/components/stacked_progress_bar.vue';
 
 const createComponent = config => {

spec/javascripts/vue_shared/components/tabs/tab_spec.js → spec/frontend/vue_shared/components/tabs/tab_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import Tab from '~/vue_shared/components/tabs/tab.vue';
 
 describe('Tab component', () => {

spec/javascripts/vue_shared/components/tabs/tabs_spec.js → spec/frontend/vue_shared/components/tabs/tabs_spec.js

@@ -5,28 +5,23 @@ import Tab from '~/vue_shared/components/tabs/tab.vue';
 describe('Tabs component', () => {
   let vm;
 
-  beforeEach(done => {
+  beforeEach(() => {
     vm = new Vue({
       components: {
         Tabs,
         Tab,
       },
-      template: `
-        <div>
-          <tabs>
-            <tab title="Testing" active>
-              First tab
-            </tab>
-            <tab>
-              <template slot="title">Test slot</template>
-              Second tab
-            </tab>
-          </tabs>
-        </div>
-      `,
+      render(h) {
+        return h('div', [
+          h('tabs', [
+            h('tab', { attrs: { title: 'Testing', active: true } }, 'First tab'),
+            h('tab', [h('template', { slot: 'title' }, 'Test slot'), 'Second tab']),
+          ]),
+        ]);
+      },
     }).$mount();
 
-    setTimeout(done);
+    return vm.$nextTick();
   });
 
   describe('tab links', () => {
@@ -46,14 +41,12 @@ describe('Tabs component', () => {
       expect(vm.$el.querySelector('a').classList).toContain('active');
     });
 
-    it('updates active class on click', done => {
+    it('updates active class on click', () => {
       vm.$el.querySelectorAll('a')[1].click();
 
-      setTimeout(() => {
+      return vm.$nextTick(() => {
         expect(vm.$el.querySelector('a').classList).not.toContain('active');
         expect(vm.$el.querySelectorAll('a')[1].classList).toContain('active');
-
-        done();
       });
     });
   });

spec/javascripts/vue_shared/components/toggle_button_spec.js → spec/frontend/vue_shared/components/toggle_button_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import toggleButton from '~/vue_shared/components/toggle_button.vue';
 
 describe('Toggle Button', () => {
@@ -42,7 +42,7 @@ describe('Toggle Button', () => {
         value: true,
       });
 
-      spyOn(vm, '$emit');
+      jest.spyOn(vm, '$emit').mockImplementation(() => {});
     });
 
     it('renders is checked class', () => {
@@ -72,7 +72,7 @@ describe('Toggle Button', () => {
         value: true,
         disabledInput: true,
       });
-      spyOn(vm, '$emit');
+      jest.spyOn(vm, '$emit').mockImplementation(() => {});
     });
 
     it('renders disabled button', () => {

spec/frontend/vue_shared/components/user_avatar/user_avatar_svg_spec.js

+import { shallowMount } from '@vue/test-utils';
+import UserAvatarSvg from '~/vue_shared/components/user_avatar/user_avatar_svg.vue';
+
+describe('User Avatar Svg Component', () => {
+  describe('Initialization', () => {
+    let wrapper;
+
+    beforeEach(() => {
+      wrapper = shallowMount(UserAvatarSvg, {
+        propsData: {
+          size: 99,
+          svg:
+            '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M1.707 15.707C1.077z"/></svg>',
+        },
+      });
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+
+    it('should have <svg> as a child element', () => {
+      expect(wrapper.element.tagName).toEqual('svg');
+      expect(wrapper.html()).toContain('<path');
+    });
+  });
+});

spec/javascripts/vue_shared/components/user_avatar/user_avatar_svg_spec.js

-import Vue from 'vue';
-import avatarSvg from 'icons/_icon_random.svg';
-import UserAvatarSvg from '~/vue_shared/components/user_avatar/user_avatar_svg.vue';
-
-const UserAvatarSvgComponent = Vue.extend(UserAvatarSvg);
-
-describe('User Avatar Svg Component', function() {
-  describe('Initialization', function() {
-    beforeEach(function() {
-      this.propsData = {
-        size: 99,
-        svg: avatarSvg,
-      };
-
-      this.userAvatarSvg = new UserAvatarSvgComponent({
-        propsData: this.propsData,
-      }).$mount();
-    });
-
-    it('should return a defined Vue component', function() {
-      expect(this.userAvatarSvg).toBeDefined();
-    });
-
-    it('should have <svg> as a child element', function() {
-      expect(this.userAvatarSvg.$el.tagName).toEqual('svg');
-      expect(this.userAvatarSvg.$el.innerHTML).toContain('<path');
-    });
-  });
-});