gitlab-org--gitlab-foss/spec/frontend/zen_mode_spec.js

114 lines
2.7 KiB
JavaScript
Raw Normal View History

import $ from 'jquery';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import Dropzone from 'dropzone';
2018-06-21 08:22:40 -04:00
import Mousetrap from 'mousetrap';
import * as utils from '~/lib/utils/common_utils';
2017-06-30 17:37:31 -04:00
import ZenMode from '~/zen_mode';
import initNotes from '~/init_notes';
2016-07-24 16:45:11 -04:00
2017-11-22 18:20:23 -05:00
describe('ZenMode', () => {
let mock;
2017-11-22 18:20:23 -05:00
let zen;
2018-06-21 08:22:40 -04:00
let dropzoneForElementSpy;
const fixtureName = 'snippets/show.html';
2017-11-22 18:20:23 -05:00
preloadFixtures(fixtureName);
function enterZen() {
$('.notes-form .js-zen-enter').click();
}
function exitZen() {
$('.notes-form .js-zen-leave').click();
}
function escapeKeydown() {
2018-06-21 08:22:40 -04:00
$('.notes-form textarea').trigger(
$.Event('keydown', {
keyCode: 27,
}),
);
2017-11-22 18:20:23 -05:00
}
beforeEach(() => {
mock = new MockAdapter(axios);
mock.onGet().reply(200);
2017-11-22 18:20:23 -05:00
loadFixtures(fixtureName);
initNotes();
2017-11-22 18:20:23 -05:00
dropzoneForElementSpy = jest.spyOn(Dropzone, 'forElement').mockImplementation(() => ({
2017-11-22 18:20:23 -05:00
enable: () => true,
}));
zen = new ZenMode();
// Set this manually because we can't actually scroll the window
zen.scroll_position = 456;
});
2018-06-21 08:22:40 -04:00
describe('enabling dropzone', () => {
beforeEach(() => {
enterZen();
});
it('should not call dropzone if element is not dropzone valid', () => {
$('.div-dropzone').addClass('js-invalid-dropzone');
exitZen();
2018-10-09 14:03:09 -04:00
expect(dropzoneForElementSpy.mock.calls.length).toEqual(0);
2018-06-21 08:22:40 -04:00
});
it('should call dropzone if element is dropzone valid', () => {
$('.div-dropzone').removeClass('js-invalid-dropzone');
exitZen();
2018-10-09 14:03:09 -04:00
expect(dropzoneForElementSpy.mock.calls.length).toEqual(2);
2018-06-21 08:22:40 -04:00
});
});
2017-11-22 18:20:23 -05:00
describe('on enter', () => {
it('pauses Mousetrap', () => {
const mouseTrapPauseSpy = jest.spyOn(Mousetrap, 'pause');
2017-11-22 18:20:23 -05:00
enterZen();
2018-10-09 14:03:09 -04:00
2018-06-21 08:22:40 -04:00
expect(mouseTrapPauseSpy).toHaveBeenCalled();
2016-07-24 16:45:11 -04:00
});
2017-11-22 18:20:23 -05:00
it('removes textarea styling', () => {
$('.notes-form textarea').attr('style', 'height: 400px');
enterZen();
2018-10-09 14:03:09 -04:00
2017-11-22 18:20:23 -05:00
expect($('.notes-form textarea')).not.toHaveAttr('style');
2016-07-24 16:45:11 -04:00
});
2017-11-22 18:20:23 -05:00
});
describe('in use', () => {
beforeEach(enterZen);
it('exits on Escape', () => {
escapeKeydown();
2018-10-09 14:03:09 -04:00
2017-11-22 18:20:23 -05:00
expect($('.notes-form .zen-backdrop')).not.toHaveClass('fullscreen');
});
});
describe('on exit', () => {
beforeEach(enterZen);
it('unpauses Mousetrap', () => {
const mouseTrapUnpauseSpy = jest.spyOn(Mousetrap, 'unpause');
2017-11-22 18:20:23 -05:00
exitZen();
2018-10-09 14:03:09 -04:00
2018-06-21 08:22:40 -04:00
expect(mouseTrapUnpauseSpy).toHaveBeenCalled();
2016-07-24 16:45:11 -04:00
});
2017-11-22 18:20:23 -05:00
it('restores the scroll position', () => {
jest.spyOn(utils, 'scrollToElement');
2017-11-22 18:20:23 -05:00
exitZen();
2018-10-09 14:03:09 -04:00
expect(utils.scrollToElement).toHaveBeenCalled();
2016-07-24 16:45:11 -04:00
});
});
2017-11-22 18:20:23 -05:00
});