2020-06-08 09:08:23 +00:00
|
|
|
import axios from 'axios';
|
|
|
|
import MockAdapter from 'axios-mock-adapter';
|
2017-10-19 07:45:52 +00:00
|
|
|
import Dropzone from 'dropzone';
|
2021-02-14 18:09:20 +00:00
|
|
|
import $ from 'jquery';
|
2018-06-21 12:22:40 +00:00
|
|
|
import Mousetrap from 'mousetrap';
|
2022-05-13 12:08:49 +00:00
|
|
|
import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
|
2021-08-19 12:08:53 +00:00
|
|
|
import GLForm from '~/gl_form';
|
2020-12-30 09:10:10 +00:00
|
|
|
import * as utils from '~/lib/utils/common_utils';
|
2017-06-30 21:37:31 +00:00
|
|
|
import ZenMode from '~/zen_mode';
|
2016-07-24 20:45:11 +00:00
|
|
|
|
2017-11-22 23:20:23 +00:00
|
|
|
describe('ZenMode', () => {
|
2020-06-08 09:08:23 +00:00
|
|
|
let mock;
|
2017-11-22 23:20:23 +00:00
|
|
|
let zen;
|
2018-06-21 12:22:40 +00:00
|
|
|
let dropzoneForElementSpy;
|
2019-03-26 16:03:28 +00:00
|
|
|
const fixtureName = 'snippets/show.html';
|
2017-11-22 23:20:23 +00:00
|
|
|
|
|
|
|
function enterZen() {
|
|
|
|
$('.notes-form .js-zen-enter').click();
|
|
|
|
}
|
|
|
|
|
|
|
|
function exitZen() {
|
|
|
|
$('.notes-form .js-zen-leave').click();
|
|
|
|
}
|
|
|
|
|
|
|
|
function escapeKeydown() {
|
2018-06-21 12:22:40 +00:00
|
|
|
$('.notes-form textarea').trigger(
|
|
|
|
$.Event('keydown', {
|
|
|
|
keyCode: 27,
|
|
|
|
}),
|
|
|
|
);
|
2017-11-22 23:20:23 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
beforeEach(() => {
|
2020-06-08 09:08:23 +00:00
|
|
|
mock = new MockAdapter(axios);
|
|
|
|
mock.onGet().reply(200);
|
|
|
|
|
2022-05-13 12:08:49 +00:00
|
|
|
loadHTMLFixture(fixtureName);
|
2021-08-19 12:08:53 +00:00
|
|
|
|
|
|
|
const form = $('.js-new-note-form');
|
|
|
|
new GLForm(form); // eslint-disable-line no-new
|
2017-11-22 23:20:23 +00:00
|
|
|
|
2020-06-08 09:08:23 +00:00
|
|
|
dropzoneForElementSpy = jest.spyOn(Dropzone, 'forElement').mockImplementation(() => ({
|
2017-11-22 23:20:23 +00:00
|
|
|
enable: () => true,
|
|
|
|
}));
|
|
|
|
zen = new ZenMode();
|
|
|
|
|
|
|
|
// Set this manually because we can't actually scroll the window
|
|
|
|
zen.scroll_position = 456;
|
|
|
|
});
|
|
|
|
|
2022-05-13 12:08:49 +00:00
|
|
|
afterEach(() => {
|
|
|
|
resetHTMLFixture();
|
|
|
|
});
|
|
|
|
|
2018-06-21 12:22:40 +00: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 18:03:09 +00:00
|
|
|
|
2020-06-08 09:08:23 +00:00
|
|
|
expect(dropzoneForElementSpy.mock.calls.length).toEqual(0);
|
2018-06-21 12:22:40 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should call dropzone if element is dropzone valid', () => {
|
|
|
|
$('.div-dropzone').removeClass('js-invalid-dropzone');
|
|
|
|
exitZen();
|
2018-10-09 18:03:09 +00:00
|
|
|
|
2020-06-08 09:08:23 +00:00
|
|
|
expect(dropzoneForElementSpy.mock.calls.length).toEqual(2);
|
2018-06-21 12:22:40 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2017-11-22 23:20:23 +00:00
|
|
|
describe('on enter', () => {
|
|
|
|
it('pauses Mousetrap', () => {
|
2020-06-08 09:08:23 +00:00
|
|
|
const mouseTrapPauseSpy = jest.spyOn(Mousetrap, 'pause');
|
2017-11-22 23:20:23 +00:00
|
|
|
enterZen();
|
2018-10-09 18:03:09 +00:00
|
|
|
|
2018-06-21 12:22:40 +00:00
|
|
|
expect(mouseTrapPauseSpy).toHaveBeenCalled();
|
2016-07-24 20:45:11 +00:00
|
|
|
});
|
2017-11-22 23:20:23 +00:00
|
|
|
|
|
|
|
it('removes textarea styling', () => {
|
|
|
|
$('.notes-form textarea').attr('style', 'height: 400px');
|
|
|
|
enterZen();
|
2018-10-09 18:03:09 +00:00
|
|
|
|
2017-11-22 23:20:23 +00:00
|
|
|
expect($('.notes-form textarea')).not.toHaveAttr('style');
|
2016-07-24 20:45:11 +00:00
|
|
|
});
|
2017-11-22 23:20:23 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
describe('in use', () => {
|
|
|
|
beforeEach(enterZen);
|
|
|
|
|
|
|
|
it('exits on Escape', () => {
|
|
|
|
escapeKeydown();
|
2018-10-09 18:03:09 +00:00
|
|
|
|
2017-11-22 23:20:23 +00:00
|
|
|
expect($('.notes-form .zen-backdrop')).not.toHaveClass('fullscreen');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('on exit', () => {
|
|
|
|
beforeEach(enterZen);
|
|
|
|
|
|
|
|
it('unpauses Mousetrap', () => {
|
2020-06-08 09:08:23 +00:00
|
|
|
const mouseTrapUnpauseSpy = jest.spyOn(Mousetrap, 'unpause');
|
2017-11-22 23:20:23 +00:00
|
|
|
exitZen();
|
2018-10-09 18:03:09 +00:00
|
|
|
|
2018-06-21 12:22:40 +00:00
|
|
|
expect(mouseTrapUnpauseSpy).toHaveBeenCalled();
|
2016-07-24 20:45:11 +00:00
|
|
|
});
|
2017-11-22 23:20:23 +00:00
|
|
|
|
|
|
|
it('restores the scroll position', () => {
|
2020-12-30 09:10:10 +00:00
|
|
|
jest.spyOn(utils, 'scrollToElement');
|
2017-11-22 23:20:23 +00:00
|
|
|
exitZen();
|
2018-10-09 18:03:09 +00:00
|
|
|
|
2020-12-30 09:10:10 +00:00
|
|
|
expect(utils.scrollToElement).toHaveBeenCalled();
|
2016-07-24 20:45:11 +00:00
|
|
|
});
|
|
|
|
});
|
2017-11-22 23:20:23 +00:00
|
|
|
});
|