Merge branch 'winh-jest-gitlab-ui' into 'master'

Make Jest work with gitlab-ui

Closes #56689

See merge request gitlab-org/gitlab-ce!25440

.babelrc.js → babel.config.js

+/* eslint-disable import/no-commonjs, filenames/match-regex */
+
 const BABEL_ENV = process.env.BABEL_ENV || process.env.NODE_ENV || null;
 
 const presets = [

jest.config.js

@@ -31,4 +31,5 @@ module.exports = {
     '^.+\\.js$': 'babel-jest',
     '^.+\\.vue$': 'vue-jest',
   },
+  transformIgnorePatterns: ['node_modules/(?!(@gitlab/ui)/)'],
 };

spec/frontend/notes/components/__snapshots__/discussion_jump_to_next_button_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`JumpToNextDiscussionButton matches the snapshot 1`] = `
+<div
+  class="btn-group"
+  role="group"
+>
+  <button
+    class="btn btn-default discussion-next-btn"
+    data-original-title="Jump to next unresolved discussion"
+    title=""
+  >
+    <icon-stub
+      cssclasses=""
+      name="comment-next"
+      size="16"
+    />
+  </button>
+</div>
+`;

spec/javascripts/notes/components/discussion_jump_to_next_button_spec.js → spec/frontend/notes/components/discussion_jump_to_next_button_spec.js

-import jumpToNextDiscussionButton from '~/notes/components/discussion_jump_to_next_button.vue';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import JumpToNextDiscussionButton from '~/notes/components/discussion_jump_to_next_button.vue';
+import { shallowMount } from '@vue/test-utils';
 
-const localVue = createLocalVue();
-
-describe('jumpToNextDiscussionButton', () => {
+describe('JumpToNextDiscussionButton', () => {
   let wrapper;
 
   beforeEach(() => {
-    wrapper = shallowMount(jumpToNextDiscussionButton, {
-      localVue,
+    wrapper = shallowMount(JumpToNextDiscussionButton, {
       sync: false,
     });
   });
@@ -17,17 +14,17 @@ describe('jumpToNextDiscussionButton', () => {
     wrapper.destroy();
   });
 
-  it('emits onClick event on button click', done => {
+  it('matches the snapshot', () => {
+    expect(wrapper.vm.$el).toMatchSnapshot();
+  });
+
+  it('emits onClick event on button click', () => {
     const button = wrapper.find({ ref: 'button' });
 
     button.trigger('click');
 
-    localVue.nextTick(() => {
-      expect(wrapper.emitted()).toEqual({
-        onClick: [[]],
-      });
-
-      done();
+    expect(wrapper.emitted()).toEqual({
+      onClick: [[]],
     });
   });
 });

spec/frontend/test_setup.js

+import Vue from 'vue';
+import Translate from '~/vue_shared/translate';
 import axios from '~/lib/utils/axios_utils';
 
 const testTimeoutInMs = 300;
@@ -28,3 +30,5 @@ beforeEach(done => {
 
   done();
 });
+
+Vue.use(Translate);