1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import Dropzone from 'dropzone';
import $ from 'jquery';
import Mousetrap from 'mousetrap';
import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
import GLForm from '~/gl_form';
import * as utils from '~/lib/utils/common_utils';
import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
import ZenMode from '~/zen_mode';
describe('ZenMode', () => {
let mock;
let zen;
let dropzoneForElementSpy;
const fixtureName = 'snippets/show.html';
const getTextarea = () => $('.notes-form textarea');
function enterZen() {
$('.notes-form .js-zen-enter').click();
}
function exitZen() {
$('.notes-form .js-zen-leave').click();
}
function escapeKeydown() {
getTextarea().trigger(
$.Event('keydown', {
keyCode: 27,
}),
);
}
beforeEach(() => {
mock = new MockAdapter(axios);
mock.onGet().reply(HTTP_STATUS_OK);
loadHTMLFixture(fixtureName);
const form = $('.js-new-note-form');
new GLForm(form); // eslint-disable-line no-new
dropzoneForElementSpy = jest.spyOn(Dropzone, 'forElement').mockImplementation(() => ({
enable: () => true,
}));
zen = new ZenMode();
// Set this manually because we can't actually scroll the window
zen.scroll_position = 456;
});
afterEach(() => {
$(document).off('click', '.js-zen-enter');
$(document).off('click', '.js-zen-leave');
$(document).off('zen_mode:enter');
$(document).off('zen_mode:leave');
$(document).off('keydown');
resetHTMLFixture();
});
describe('enabling dropzone', () => {
beforeEach(() => {
enterZen();
});
it('should not call dropzone if element is not dropzone valid', () => {
$('.div-dropzone').addClass('js-invalid-dropzone');
exitZen();
expect(dropzoneForElementSpy).not.toHaveBeenCalled();
});
it('should call dropzone if element is dropzone valid', () => {
$('.div-dropzone').removeClass('js-invalid-dropzone');
exitZen();
expect(dropzoneForElementSpy).toHaveBeenCalledTimes(1);
});
});
describe('on enter', () => {
it('pauses Mousetrap', () => {
const mouseTrapPauseSpy = jest.spyOn(Mousetrap, 'pause');
enterZen();
expect(mouseTrapPauseSpy).toHaveBeenCalled();
});
it('removes textarea styling', () => {
getTextarea().attr('style', 'height: 400px');
enterZen();
expect(getTextarea()).not.toHaveAttr('style');
});
});
describe('in use', () => {
beforeEach(enterZen);
it('exits on Escape', () => {
escapeKeydown();
expect($('.notes-form .zen-backdrop')).not.toHaveClass('fullscreen');
});
});
describe('on exit', () => {
beforeEach(enterZen);
it('unpauses Mousetrap', () => {
const mouseTrapUnpauseSpy = jest.spyOn(Mousetrap, 'unpause');
exitZen();
expect(mouseTrapUnpauseSpy).toHaveBeenCalled();
});
it('restores the scroll position', () => {
jest.spyOn(utils, 'scrollToElement');
exitZen();
expect(utils.scrollToElement).toHaveBeenCalled();
});
});
it('restores textarea style', () => {
const style = 'color: red; overflow-y: hidden;';
getTextarea().attr('style', style);
expect(getTextarea()).toHaveAttr('style', style);
enterZen();
exitZen();
expect(getTextarea()).toHaveAttr('style', style);
});
});
|
