From 7a7866a54a99bb97f97c9b85ce0a59f3078c5f1f Mon Sep 17 00:00:00 2001 From: Winnie Hellmann Date: Thu, 28 Mar 2019 20:42:17 +0100 Subject: Move abuse_reports_spec.js to Jest --- .../admin/abuse_reports/abuse_reports_spec.js | 46 ++++++++++++++++++++++ .../admin/abuse_reports/abuse_reports_spec.js | 46 ---------------------- 2 files changed, 46 insertions(+), 46 deletions(-) create mode 100644 spec/frontend/pages/admin/abuse_reports/abuse_reports_spec.js delete mode 100644 spec/javascripts/pages/admin/abuse_reports/abuse_reports_spec.js diff --git a/spec/frontend/pages/admin/abuse_reports/abuse_reports_spec.js b/spec/frontend/pages/admin/abuse_reports/abuse_reports_spec.js new file mode 100644 index 00000000000..1e0bc708c31 --- /dev/null +++ b/spec/frontend/pages/admin/abuse_reports/abuse_reports_spec.js @@ -0,0 +1,46 @@ +import $ from 'jquery'; +import '~/lib/utils/text_utility'; +import AbuseReports from '~/pages/admin/abuse_reports/abuse_reports'; + +describe('Abuse Reports', () => { + const FIXTURE = 'abuse_reports/abuse_reports_list.html'; + const MAX_MESSAGE_LENGTH = 500; + + let $messages; + + const assertMaxLength = $message => { + expect($message.text().length).toEqual(MAX_MESSAGE_LENGTH); + }; + const findMessage = searchText => + $messages.filter((index, element) => element.innerText.indexOf(searchText) > -1).first(); + + preloadFixtures(FIXTURE); + + beforeEach(() => { + loadFixtures(FIXTURE); + new AbuseReports(); // eslint-disable-line no-new + $messages = $('.abuse-reports .message'); + }); + + it('should truncate long messages', () => { + const $longMessage = findMessage('LONG MESSAGE'); + + expect($longMessage.data('originalMessage')).toEqual(jasmine.anything()); + assertMaxLength($longMessage); + }); + + it('should not truncate short messages', () => { + const $shortMessage = findMessage('SHORT MESSAGE'); + + expect($shortMessage.data('originalMessage')).not.toEqual(jasmine.anything()); + }); + + it('should allow clicking a truncated message to expand and collapse the full message', () => { + const $longMessage = findMessage('LONG MESSAGE'); + $longMessage.click(); + + expect($longMessage.data('originalMessage').length).toEqual($longMessage.text().length); + $longMessage.click(); + assertMaxLength($longMessage); + }); +}); diff --git a/spec/javascripts/pages/admin/abuse_reports/abuse_reports_spec.js b/spec/javascripts/pages/admin/abuse_reports/abuse_reports_spec.js deleted file mode 100644 index f7637964c60..00000000000 --- a/spec/javascripts/pages/admin/abuse_reports/abuse_reports_spec.js +++ /dev/null @@ -1,46 +0,0 @@ -import $ from 'jquery'; -import '~/lib/utils/text_utility'; -import AbuseReports from '~/pages/admin/abuse_reports/abuse_reports'; - -describe('Abuse Reports', () => { - const FIXTURE = 'abuse_reports/abuse_reports_list.html'; - const MAX_MESSAGE_LENGTH = 500; - - let $messages; - - const assertMaxLength = $message => { - expect($message.text().length).toEqual(MAX_MESSAGE_LENGTH); - }; - const findMessage = searchText => - $messages.filter((index, element) => element.innerText.indexOf(searchText) > -1).first(); - - preloadFixtures(FIXTURE); - - beforeEach(function() { - loadFixtures(FIXTURE); - this.abuseReports = new AbuseReports(); - $messages = $('.abuse-reports .message'); - }); - - it('should truncate long messages', () => { - const $longMessage = findMessage('LONG MESSAGE'); - - expect($longMessage.data('originalMessage')).toEqual(jasmine.anything()); - assertMaxLength($longMessage); - }); - - it('should not truncate short messages', () => { - const $shortMessage = findMessage('SHORT MESSAGE'); - - expect($shortMessage.data('originalMessage')).not.toEqual(jasmine.anything()); - }); - - it('should allow clicking a truncated message to expand and collapse the full message', () => { - const $longMessage = findMessage('LONG MESSAGE'); - $longMessage.click(); - - expect($longMessage.data('originalMessage').length).toEqual($longMessage.text().length); - $longMessage.click(); - assertMaxLength($longMessage); - }); -}); -- cgit v1.2.1 From 346f7027e2285b3ff1280197045c4db541f4a700 Mon Sep 17 00:00:00 2001 From: Winnie Hellmann Date: Thu, 28 Mar 2019 20:42:32 +0100 Subject: Add workaround for innerText in Jest --- spec/frontend/test_setup.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/spec/frontend/test_setup.js b/spec/frontend/test_setup.js index 006fc60ef57..1edb2450b4c 100644 --- a/spec/frontend/test_setup.js +++ b/spec/frontend/test_setup.js @@ -23,3 +23,12 @@ beforeEach(done => { }); 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 +}); -- cgit v1.2.1 From 9c2237569d9ff9dcca8182de794506b5500ef024 Mon Sep 17 00:00:00 2001 From: Winnie Hellmann Date: Wed, 27 Mar 2019 14:50:11 +0100 Subject: Add helpers for HTML fixtures to Jest --- spec/frontend/helpers/fixtures.js | 26 ++++++++++++++++++++------ 1 file changed, 20 insertions(+), 6 deletions(-) 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); +}; -- cgit v1.2.1 From b0e26ed5cedc9452b63616a58d52c404ff5b5c98 Mon Sep 17 00:00:00 2001 From: Winnie Hellmann Date: Wed, 27 Mar 2019 14:55:40 +0100 Subject: Add Karma-style fixture helpers to Jest --- spec/frontend/.eslintrc.yml | 9 +++++++-- spec/frontend/environment.js | 1 + spec/frontend/test_setup.js | 9 +++++++++ 3 files changed, 17 insertions(+), 2 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/environment.js b/spec/frontend/environment.js index cb128c7d880..d38f8f3bac3 100644 --- a/spec/frontend/environment.js +++ b/spec/frontend/environment.js @@ -6,6 +6,7 @@ const JSDOMEnvironment = require('jest-environment-jsdom'); class CustomEnvironment extends JSDOMEnvironment { constructor(config, context) { super(config, context); + Object.assign(context.console, { error(...args) { throw new ErrorWithStack( diff --git a/spec/frontend/test_setup.js b/spec/frontend/test_setup.js index 1edb2450b4c..2986e5d6f86 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(() => { @@ -32,3 +33,11 @@ Object.defineProperty(global.Element.prototype, 'innerText', { }, 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, +}); -- cgit v1.2.1