Merge branch 'winh-jest-html-fixtures' into 'master'

Add helpers for HTML fixtures to Jest

Closes #57998

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

4 files changed, 47 insertions, 10 deletions

diff --git a/spec/frontend/.eslintrc.yml b/spec/frontend/.eslintrc.yml
index 046215e4c93..054dc27cda6 100644
--- a/spec/frontend/.eslintrc.yml
+++ b/spec/frontend/.eslintrc.yml
@@ -2,8 +2,13 @@
 env:
   jest/globals: true
 plugins:
-- jest
+  - jest
 settings:
   import/resolver:
     jest:
-      jestConfigFile: "jest.config.js"
+      jestConfigFile: 'jest.config.js'
+globals:
+  getJSONFixture: false
+  loadFixtures: false
+  preloadFixtures: false
+  setFixtures: false
diff --git a/spec/frontend/helpers/fixtures.js b/spec/frontend/helpers/fixtures.js
index de9058d7832..f0351aa31c6 100644
--- a/spec/frontend/helpers/fixtures.js
+++ b/spec/frontend/helpers/fixtures.js
@@ -1,5 +1,3 @@
-/* eslint-disable import/prefer-default-export, global-require, import/no-dynamic-require */
-
 import fs from 'fs';
 import path from 'path';
 
@@ -7,16 +5,32 @@ import { ErrorWithStack } from 'jest-util';
 
 const fixturesBasePath = path.join(process.cwd(), 'spec', 'javascripts', 'fixtures');
 
-export function getJSONFixture(relativePath, ee = false) {
-  const absolutePath = path.join(fixturesBasePath, ee ? 'ee' : '', relativePath);
+export function getFixture(relativePath) {
+  const absolutePath = path.join(fixturesBasePath, relativePath);
   if (!fs.existsSync(absolutePath)) {
     throw new ErrorWithStack(
       `Fixture file ${relativePath} does not exist.
 
 Did you run bin/rake karma:fixtures?`,
-      getJSONFixture,
+      getFixture,
     );
   }
 
-  return require(absolutePath);
+  return fs.readFileSync(absolutePath, 'utf8');
 }
+
+export const getJSONFixture = relativePath => JSON.parse(getFixture(relativePath));
+
+export const resetHTMLFixture = () => {
+  document.body.textContent = '';
+};
+
+export const setHTMLFixture = (htmlContent, resetHook = afterEach) => {
+  document.body.outerHTML = htmlContent;
+  resetHook(resetHTMLFixture);
+};
+
+export const loadHTMLFixture = (relativePath, resetHook = afterEach) => {
+  const fileContent = getFixture(relativePath);
+  setHTMLFixture(fileContent, resetHook);
+};
diff --git a/spec/javascripts/pages/admin/abuse_reports/abuse_reports_spec.js b/spec/frontend/pages/admin/abuse_reports/abuse_reports_spec.js
index f7637964c60..1e0bc708c31 100644
--- a/spec/javascripts/pages/admin/abuse_reports/abuse_reports_spec.js
+++ b/spec/frontend/pages/admin/abuse_reports/abuse_reports_spec.js
@@ -16,9 +16,9 @@ describe('Abuse Reports', () => {
 
   preloadFixtures(FIXTURE);
 
-  beforeEach(function() {
+  beforeEach(() => {
     loadFixtures(FIXTURE);
-    this.abuseReports = new AbuseReports();
+    new AbuseReports(); // eslint-disable-line no-new
     $messages = $('.abuse-reports .message');
   });
 
diff --git a/spec/frontend/test_setup.js b/spec/frontend/test_setup.js
index f5b91d0e1c3..1e3c28e25eb 100644
--- a/spec/frontend/test_setup.js
+++ b/spec/frontend/test_setup.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import Translate from '~/vue_shared/translate';
 import axios from '~/lib/utils/axios_utils';
 import { initializeTestTimeout } from './helpers/timeout';
+import { getJSONFixture, loadHTMLFixture, setHTMLFixture } from './helpers/fixtures';
 
 // wait for pending setTimeout()s
 afterEach(() => {
@@ -26,3 +27,20 @@ Vue.config.devtools = false;
 Vue.config.productionTip = false;
 
 Vue.use(Translate);
+
+// workaround for JSDOM not supporting innerText
+// see https://github.com/jsdom/jsdom/issues/1245
+Object.defineProperty(global.Element.prototype, 'innerText', {
+  get() {
+    return this.textContent;
+  },
+  configurable: true, // make it so that it doesn't blow chunks on re-running tests with things like --watch
+});
+
+// convenience wrapper for migration from Karma
+Object.assign(global, {
+  loadFixtures: loadHTMLFixture,
+  loadJSONFixtures: getJSONFixture,
+  preloadFixtures() {},
+  setFixtures: setHTMLFixture,
+});