Merge branch 'winh-emoji-menu-jest' into 'master'

Migrate emoji_menu_spec.js to Jest

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

app/assets/javascripts/pages/profiles/show/emoji_menu.js

@@ -1,3 +1,4 @@
+import '~/commons/bootstrap';
 import { AwardsHandler } from '~/awards_handler';
 
 class EmojiMenu extends AwardsHandler {

jest.config.js

@@ -16,6 +16,7 @@ module.exports = {
   testMatch: ['<rootDir>/spec/frontend/**/*_spec.js'],
   moduleNameMapper: {
     '^~(.*)$': '<rootDir>/app/assets/javascripts$1',
+    '^helpers(.*)$': '<rootDir>/spec/frontend/helpers$1',
   },
   collectCoverageFrom: ['<rootDir>/app/assets/javascripts/**/*.{js,vue}'],
   coverageDirectory: '<rootDir>/coverage-frontend/',
@@ -23,5 +24,6 @@ module.exports = {
   cacheDirectory: '<rootDir>/tmp/cache/jest',
   modulePathIgnorePatterns: ['<rootDir>/.yarn-cache/'],
   reporters,
-  rootDir: '..', // necessary because this file is in the config/ subdirectory
+  setupTestFrameworkScriptFile: '<rootDir>/spec/frontend/test_setup.js',
+  restoreMocks: true,
 };

package.json

@@ -6,7 +6,7 @@
     "eslint": "eslint --max-warnings 0 --report-unused-disable-directives --ext .js,.vue .",
     "eslint-fix": "eslint --max-warnings 0 --report-unused-disable-directives --ext .js,.vue --fix .",
     "eslint-report": "eslint --max-warnings 0 --ext .js,.vue --format html --output-file ./eslint-report.html --no-inline-config .",
-    "jest": "BABEL_ENV=jest jest --config=config/jest.config.js",
+    "jest": "BABEL_ENV=jest jest",
     "karma": "BABEL_ENV=${BABEL_ENV:=karma} karma start --single-run true config/karma.config.js",
     "karma-coverage": "BABEL_ENV=coverage karma start --single-run true config/karma.config.js",
     "karma-start": "BABEL_ENV=karma karma start config/karma.config.js",

spec/frontend/.eslintrc.yml

@@ -6,4 +6,4 @@ plugins:
 settings:
   import/resolver:
     jest:
-      jestConfigFile: "config/jest.config.js"
+      jestConfigFile: "jest.config.js"

spec/frontend/helpers/test_constants.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export const TEST_HOST = 'http://test.host';

spec/frontend/pages/profiles/show/emoji_menu_spec.js

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import axios from '~/lib/utils/axios_utils';
 import EmojiMenu from '~/pages/profiles/show/emoji_menu';
-import { TEST_HOST } from 'spec/test_constants';
+import { TEST_HOST } from 'helpers/test_constants';
 
 describe('EmojiMenu', () => {
   const dummyEmojiTag = '<dummy></tag>';
@@ -56,7 +56,7 @@ describe('EmojiMenu', () => {
     });
 
     it('does not make an axios requst', done => {
-      spyOn(axios, 'request').and.stub();
+      jest.spyOn(axios, 'request').mockReturnValue();
 
       emojiMenu.addAward(dummyVotesBlock(), dummyAwardUrl, dummyEmoji, false, () => {
         expect(axios.request).not.toHaveBeenCalled();
@@ -67,7 +67,7 @@ describe('EmojiMenu', () => {
 
   describe('bindEvents', () => {
     beforeEach(() => {
-      spyOn(emojiMenu, 'registerEventListener').and.stub();
+      jest.spyOn(emojiMenu, 'registerEventListener').mockReturnValue();
     });
 
     it('binds event listeners to custom toggle button', () => {

spec/frontend/test_setup.js

@@ -0,0 +1,16 @@
+const testTimeoutInMs = 300;
+jest.setTimeout(testTimeoutInMs);
+
+let testStartTime;
+
+// https://github.com/facebook/jest/issues/6947
+beforeEach(() => {
+  testStartTime = Date.now();
+});
+
+afterEach(() => {
+  const elapsedTimeInMs = Date.now() - testStartTime;
+  if (elapsedTimeInMs > testTimeoutInMs) {
+    throw new Error(`Test took too long (${elapsedTimeInMs}ms > ${testTimeoutInMs}ms)!`);
+  }
+});