diff options
Diffstat (limited to 'spec/frontend/helpers')
| -rw-r--r-- | spec/frontend/helpers/event_hub_factory_spec.js | 142 | ||||
| -rw-r--r-- | spec/frontend/helpers/fake_request_animation_frame.js | 13 | ||||
| -rw-r--r-- | spec/frontend/helpers/init_vue_mr_page_helper.js | 46 | ||||
| -rw-r--r-- | spec/frontend/helpers/monitor_helper_spec.js | 9 | ||||
| -rw-r--r-- | spec/frontend/helpers/test_constants.js | 22 | ||||
| -rw-r--r-- | spec/frontend/helpers/vue_mock_directive.js | 20 | ||||
| -rw-r--r-- | spec/frontend/helpers/wait_using_real_timer.js | 7 |
7 files changed, 193 insertions, 66 deletions
diff --git a/spec/frontend/helpers/event_hub_factory_spec.js b/spec/frontend/helpers/event_hub_factory_spec.js index dcfec6b836a..c4f63ff6049 100644 --- a/spec/frontend/helpers/event_hub_factory_spec.js +++ b/spec/frontend/helpers/event_hub_factory_spec.js @@ -1,77 +1,72 @@ import createEventHub from '~/helpers/event_hub_factory'; +const TEST_EVENT = 'foobar'; +const TEST_EVENT_2 = 'testevent'; + describe('event bus factory', () => { let eventBus; + let handler; + let otherHandlers; beforeEach(() => { eventBus = createEventHub(); + handler = jest.fn(); + otherHandlers = [jest.fn(), jest.fn()]; }); afterEach(() => { + eventBus.dispose(); eventBus = null; }); - describe('underlying module', () => { - let mitt; + describe('instance', () => { + it.each` + method + ${'$on'} + ${'$once'} + ${'$off'} + ${'$emit'} + `('has $method method', ({ method }) => { + expect(eventBus[method]).toEqual(expect.any(Function)); + }); + }); + describe('$on', () => { beforeEach(() => { - jest.resetModules(); - jest.mock('mitt'); - - // eslint-disable-next-line global-require - mitt = require('mitt'); - mitt.mockReturnValue(() => ({})); - - const createEventHubActual = jest.requireActual('~/helpers/event_hub_factory').default; - eventBus = createEventHubActual(); + eventBus.$on(TEST_EVENT, handler); }); - it('creates an emitter', () => { - expect(mitt).toHaveBeenCalled(); + it('calls handler when event is emitted', () => { + eventBus.$emit(TEST_EVENT); + expect(handler).toHaveBeenCalledWith(); }); - }); - describe('instance', () => { - it.each` - method - ${'on'} - ${'once'} - ${'off'} - ${'emit'} - `('binds $$method to $method ', ({ method }) => { - expect(typeof eventBus[method]).toBe('function'); - expect(eventBus[method]).toBe(eventBus[`$${method}`]); + it('calls handler with multiple args', () => { + eventBus.$emit(TEST_EVENT, 'arg1', 'arg2', 'arg3'); + expect(handler).toHaveBeenCalledWith('arg1', 'arg2', 'arg3'); }); - }); - describe('once', () => { - const event = 'foobar'; - let handler; + it('calls handler multiple times', () => { + eventBus.$emit(TEST_EVENT, 'arg1', 'arg2', 'arg3'); + eventBus.$emit(TEST_EVENT, 'arg1', 'arg2', 'arg3'); - beforeEach(() => { - jest.spyOn(eventBus, 'on'); - jest.spyOn(eventBus, 'off'); - handler = jest.fn(); - eventBus.once(event, handler); + expect(handler).toHaveBeenCalledTimes(2); }); + }); - it('calls on internally', () => { - expect(eventBus.on).toHaveBeenCalled(); + describe('$once', () => { + beforeEach(() => { + eventBus.$once(TEST_EVENT, handler); }); it('calls handler when event is emitted', () => { - eventBus.emit(event); + eventBus.$emit(TEST_EVENT); expect(handler).toHaveBeenCalled(); }); - it('calls off when event is emitted', () => { - eventBus.emit(event); - expect(eventBus.off).toHaveBeenCalled(); - }); - it('calls the handler only once when event is emitted multiple times', () => { - eventBus.emit(event); - eventBus.emit(event); + eventBus.$emit(TEST_EVENT); + eventBus.$emit(TEST_EVENT); expect(handler).toHaveBeenCalledTimes(1); }); @@ -80,15 +75,70 @@ describe('event bus factory', () => { handler = jest.fn().mockImplementation(() => { throw new Error(); }); - eventBus.once(event, handler); + eventBus.$once(TEST_EVENT, handler); }); it('calls off when event is emitted', () => { expect(() => { - eventBus.emit(event); + eventBus.$emit(TEST_EVENT); }).toThrow(); - expect(eventBus.off).toHaveBeenCalled(); + expect(() => { + eventBus.$emit(TEST_EVENT); + }).not.toThrow(); + + expect(handler).toHaveBeenCalledTimes(1); }); }); }); + + describe('$off', () => { + beforeEach(() => { + otherHandlers.forEach(x => eventBus.$on(TEST_EVENT, x)); + eventBus.$on(TEST_EVENT, handler); + }); + + it('can be called on event with no handlers', () => { + expect(() => { + eventBus.$off(TEST_EVENT_2); + }).not.toThrow(); + }); + + it('can be called on event with no handlers, with a handler', () => { + expect(() => { + eventBus.$off(TEST_EVENT_2, handler); + }).not.toThrow(); + }); + + it('with a handler, will no longer call that handler', () => { + eventBus.$off(TEST_EVENT, handler); + + eventBus.$emit(TEST_EVENT); + + expect(handler).not.toHaveBeenCalled(); + expect(otherHandlers.map(x => x.mock.calls.length)).toEqual(otherHandlers.map(() => 1)); + }); + + it('without a handler, will no longer call any handlers', () => { + eventBus.$off(TEST_EVENT); + + eventBus.$emit(TEST_EVENT); + + expect(handler).not.toHaveBeenCalled(); + expect(otherHandlers.map(x => x.mock.calls.length)).toEqual(otherHandlers.map(() => 0)); + }); + }); + + describe('$emit', () => { + beforeEach(() => { + otherHandlers.forEach(x => eventBus.$on(TEST_EVENT_2, x)); + eventBus.$on(TEST_EVENT, handler); + }); + + it('only calls handlers for given type', () => { + eventBus.$emit(TEST_EVENT, 'arg1'); + + expect(handler).toHaveBeenCalledWith('arg1'); + expect(otherHandlers.map(x => x.mock.calls.length)).toEqual(otherHandlers.map(() => 0)); + }); + }); }); diff --git a/spec/frontend/helpers/fake_request_animation_frame.js b/spec/frontend/helpers/fake_request_animation_frame.js new file mode 100644 index 00000000000..b01ae5b7c5f --- /dev/null +++ b/spec/frontend/helpers/fake_request_animation_frame.js @@ -0,0 +1,13 @@ +// eslint-disable-next-line import/prefer-default-export +export const useFakeRequestAnimationFrame = () => { + let orig; + + beforeEach(() => { + orig = global.requestAnimationFrame; + global.requestAnimationFrame = cb => cb(); + }); + + afterEach(() => { + global.requestAnimationFrame = orig; + }); +}; diff --git a/spec/frontend/helpers/init_vue_mr_page_helper.js b/spec/frontend/helpers/init_vue_mr_page_helper.js new file mode 100644 index 00000000000..c1d608cc5a0 --- /dev/null +++ b/spec/frontend/helpers/init_vue_mr_page_helper.js @@ -0,0 +1,46 @@ +import MockAdapter from 'axios-mock-adapter'; +import initMRPage from '~/mr_notes'; +import axios from '~/lib/utils/axios_utils'; +import { userDataMock, notesDataMock, noteableDataMock } from '../notes/mock_data'; +import diffFileMockData from '../diffs/mock_data/diff_file'; + +export default function initVueMRPage() { + const mrTestEl = document.createElement('div'); + mrTestEl.className = 'js-merge-request-test'; + document.body.appendChild(mrTestEl); + + const diffsAppEndpoint = '/diffs/app/endpoint'; + const diffsAppProjectPath = 'testproject'; + const mrEl = document.createElement('div'); + mrEl.className = 'merge-request fixture-mr'; + mrEl.setAttribute('data-mr-action', 'diffs'); + mrTestEl.appendChild(mrEl); + + const mrDiscussionsEl = document.createElement('div'); + mrDiscussionsEl.id = 'js-vue-mr-discussions'; + mrDiscussionsEl.setAttribute('data-current-user-data', JSON.stringify(userDataMock)); + mrDiscussionsEl.setAttribute('data-noteable-data', JSON.stringify(noteableDataMock)); + mrDiscussionsEl.setAttribute('data-notes-data', JSON.stringify(notesDataMock)); + mrDiscussionsEl.setAttribute('data-noteable-type', 'merge-request'); + mrTestEl.appendChild(mrDiscussionsEl); + + const discussionCounterEl = document.createElement('div'); + discussionCounterEl.id = 'js-vue-discussion-counter'; + mrTestEl.appendChild(discussionCounterEl); + + const diffsAppEl = document.createElement('div'); + diffsAppEl.id = 'js-diffs-app'; + diffsAppEl.setAttribute('data-endpoint', diffsAppEndpoint); + diffsAppEl.setAttribute('data-project-path', diffsAppProjectPath); + diffsAppEl.setAttribute('data-current-user-data', JSON.stringify(userDataMock)); + mrTestEl.appendChild(diffsAppEl); + + const mock = new MockAdapter(axios); + mock.onGet(diffsAppEndpoint).reply(200, { + branch_name: 'foo', + diff_files: [diffFileMockData], + }); + + initMRPage(); + return mock; +} diff --git a/spec/frontend/helpers/monitor_helper_spec.js b/spec/frontend/helpers/monitor_helper_spec.js index f7163d496d2..083b6404125 100644 --- a/spec/frontend/helpers/monitor_helper_spec.js +++ b/spec/frontend/helpers/monitor_helper_spec.js @@ -33,15 +33,6 @@ describe('monitor helper', () => { ]); }); - it('excludes NaN values', () => { - expect( - monitorHelper.makeDataSeries( - data({ metric: {}, values: [[1, 1], [2, NaN]] }), - defaultConfig, - ), - ).toEqual([{ ...expectedDataSeries[0], data: [[1, 1]] }]); - }); - it('updates series name from templates', () => { const config = { ...defaultConfig, diff --git a/spec/frontend/helpers/test_constants.js b/spec/frontend/helpers/test_constants.js index c97d47a6406..69b78f556aa 100644 --- a/spec/frontend/helpers/test_constants.js +++ b/spec/frontend/helpers/test_constants.js @@ -1,7 +1,19 @@ -export const FIXTURES_PATH = `/fixtures`; -export const TEST_HOST = 'http://test.host'; +const FIXTURES_PATH = `/fixtures`; +const TEST_HOST = 'http://test.host'; -export const DUMMY_IMAGE_URL = `${FIXTURES_PATH}/static/images/one_white_pixel.png`; +const DUMMY_IMAGE_URL = `${FIXTURES_PATH}/static/images/one_white_pixel.png`; -export const GREEN_BOX_IMAGE_URL = `${FIXTURES_PATH}/static/images/green_box.png`; -export const RED_BOX_IMAGE_URL = `${FIXTURES_PATH}/static/images/red_box.png`; +const GREEN_BOX_IMAGE_URL = `${FIXTURES_PATH}/static/images/green_box.png`; +const RED_BOX_IMAGE_URL = `${FIXTURES_PATH}/static/images/red_box.png`; + +// NOTE: module.exports is needed so that this file can be used +// by environment.js +// +// eslint-disable-next-line import/no-commonjs +module.exports = { + FIXTURES_PATH, + TEST_HOST, + DUMMY_IMAGE_URL, + GREEN_BOX_IMAGE_URL, + RED_BOX_IMAGE_URL, +}; diff --git a/spec/frontend/helpers/vue_mock_directive.js b/spec/frontend/helpers/vue_mock_directive.js index 699fe3eab26..28d4708835d 100644 --- a/spec/frontend/helpers/vue_mock_directive.js +++ b/spec/frontend/helpers/vue_mock_directive.js @@ -2,13 +2,21 @@ export const getKey = name => `$_gl_jest_${name}`; export const getBinding = (el, name) => el[getKey(name)]; +const writeBindingToElement = (el, { name, value, arg, modifiers }) => { + el[getKey(name)] = { + value, + arg, + modifiers, + }; +}; + export const createMockDirective = () => ({ - bind(el, { name, value, arg, modifiers }) { - el[getKey(name)] = { - value, - arg, - modifiers, - }; + bind(el, binding) { + writeBindingToElement(el, binding); + }, + + update(el, binding) { + writeBindingToElement(el, binding); }, unbind(el, { name }) { diff --git a/spec/frontend/helpers/wait_using_real_timer.js b/spec/frontend/helpers/wait_using_real_timer.js new file mode 100644 index 00000000000..ddf23cd97b4 --- /dev/null +++ b/spec/frontend/helpers/wait_using_real_timer.js @@ -0,0 +1,7 @@ +/* useful for timing promises when jest fakeTimers are not reliable enough */ +export default timeout => + new Promise(resolve => { + jest.useRealTimers(); + setTimeout(resolve, timeout); + jest.useFakeTimers(); + }); |