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
|
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import ResizablePanel from '~/ide/components/resizable_panel.vue';
import { SIDE_LEFT, SIDE_RIGHT } from '~/ide/constants';
import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
const TEST_WIDTH = 500;
const TEST_MIN_WIDTH = 400;
describe('~/ide/components/resizable_panel', () => {
const localVue = createLocalVue();
localVue.use(Vuex);
let wrapper;
let store;
beforeEach(() => {
store = new Vuex.Store({});
jest.spyOn(store, 'dispatch').mockImplementation();
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
const createComponent = (props = {}) => {
wrapper = shallowMount(ResizablePanel, {
propsData: {
initialWidth: TEST_WIDTH,
minSize: TEST_MIN_WIDTH,
side: SIDE_LEFT,
...props,
},
store,
localVue,
});
};
const findResizer = () => wrapper.find(PanelResizer);
const findInlineStyle = () => wrapper.element.style.cssText;
const createInlineStyle = (width) => `width: ${width}px;`;
describe.each`
props | showResizer | resizerSide | expectedStyle
${{ resizable: true, side: SIDE_LEFT }} | ${true} | ${SIDE_RIGHT} | ${createInlineStyle(TEST_WIDTH)}
${{ resizable: true, side: SIDE_RIGHT }} | ${true} | ${SIDE_LEFT} | ${createInlineStyle(TEST_WIDTH)}
${{ resizable: false, side: SIDE_LEFT }} | ${false} | ${SIDE_RIGHT} | ${''}
`('with props $props', ({ props, showResizer, resizerSide, expectedStyle }) => {
beforeEach(() => {
createComponent(props);
});
it(`show resizer is ${showResizer}`, () => {
const expectedDisplay = showResizer ? '' : 'none';
const resizer = findResizer();
expect(resizer.exists()).toBe(true);
expect(resizer.element.style.display).toBe(expectedDisplay);
});
it(`resizer side is '${resizerSide}'`, () => {
const resizer = findResizer();
expect(resizer.props('side')).toBe(resizerSide);
});
it(`has style '${expectedStyle}'`, () => {
expect(findInlineStyle()).toBe(expectedStyle);
});
});
describe('default', () => {
beforeEach(() => {
createComponent();
});
it('does not dispatch anything', () => {
expect(store.dispatch).not.toHaveBeenCalled();
});
it.each`
event | dispatchArgs
${'resize-start'} | ${['setResizingStatus', true]}
${'resize-end'} | ${['setResizingStatus', false]}
`('when resizer emits $event, dispatch $dispatchArgs', ({ event, dispatchArgs }) => {
const resizer = findResizer();
resizer.vm.$emit(event);
expect(store.dispatch).toHaveBeenCalledWith(...dispatchArgs);
});
it('renders resizer', () => {
const resizer = findResizer();
expect(resizer.props()).toMatchObject({
maxSize: window.innerWidth / 2,
minSize: TEST_MIN_WIDTH,
startSize: TEST_WIDTH,
});
});
it('when resizer emits update:size, changes inline width', () => {
const newSize = TEST_WIDTH - 100;
const resizer = findResizer();
resizer.vm.$emit('update:size', newSize);
return wrapper.vm.$nextTick().then(() => {
expect(findInlineStyle()).toBe(createInlineStyle(newSize));
});
});
});
});
|
