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

Make Jest work with gitlab-ui

Closes #56689

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

6 files changed, 57 insertions, 33 deletions

diff --git a/.babelrc.js b/babel.config.js
index 1b05a67354e..e3de8ef2d83 100644
--- a/.babelrc.js
+++ b/babel.config.js
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs, filenames/match-regex */
+
 const BABEL_ENV = process.env.BABEL_ENV || process.env.NODE_ENV || null;
 
 const presets = [
diff --git a/jest.config.js b/jest.config.js
index 4dab7c2891a..fac2e435cef 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -31,4 +31,5 @@ module.exports = {
     '^.+\\.js$': 'babel-jest',
     '^.+\\.vue$': 'vue-jest',
   },
+  transformIgnorePatterns: ['node_modules/(?!(@gitlab/ui)/)'],
 };
diff --git a/spec/frontend/notes/components/__snapshots__/discussion_jump_to_next_button_spec.js.snap b/spec/frontend/notes/components/__snapshots__/discussion_jump_to_next_button_spec.js.snap
new file mode 100644
index 00000000000..11d65ced180
--- /dev/null
+++ b/spec/frontend/notes/components/__snapshots__/discussion_jump_to_next_button_spec.js.snap
@@ -0,0 +1,20 @@
+// 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>
+`;
diff --git a/spec/frontend/notes/components/discussion_jump_to_next_button_spec.js b/spec/frontend/notes/components/discussion_jump_to_next_button_spec.js
new file mode 100644
index 00000000000..989b0458481
--- /dev/null
+++ b/spec/frontend/notes/components/discussion_jump_to_next_button_spec.js
@@ -0,0 +1,30 @@
+import JumpToNextDiscussionButton from '~/notes/components/discussion_jump_to_next_button.vue';
+import { shallowMount } from '@vue/test-utils';
+
+describe('JumpToNextDiscussionButton', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallowMount(JumpToNextDiscussionButton, {
+      sync: false,
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  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');
+
+    expect(wrapper.emitted()).toEqual({
+      onClick: [[]],
+    });
+  });
+});
diff --git a/spec/frontend/test_setup.js b/spec/frontend/test_setup.js
index 4e4dd72a799..d892889b98d 100644
--- a/spec/frontend/test_setup.js
+++ b/spec/frontend/test_setup.js
@@ -1,3 +1,5 @@
+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);
diff --git a/spec/javascripts/notes/components/discussion_jump_to_next_button_spec.js b/spec/javascripts/notes/components/discussion_jump_to_next_button_spec.js
deleted file mode 100644
index c41b29fa788..00000000000
--- a/spec/javascripts/notes/components/discussion_jump_to_next_button_spec.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import jumpToNextDiscussionButton from '~/notes/components/discussion_jump_to_next_button.vue';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-
-const localVue = createLocalVue();
-
-describe('jumpToNextDiscussionButton', () => {
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = shallowMount(jumpToNextDiscussionButton, {
-      localVue,
-      sync: false,
-    });
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('emits onClick event on button click', done => {
-    const button = wrapper.find({ ref: 'button' });
-
-    button.trigger('click');
-
-    localVue.nextTick(() => {
-      expect(wrapper.emitted()).toEqual({
-        onClick: [[]],
-      });
-
-      done();
-    });
-  });
-});