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
|
import { nextTick } from 'vue';
import { shallowMount } from '@vue/test-utils';
import { Mousetrap } from '~/lib/mousetrap';
import DiffsFileTree from '~/diffs/components/diffs_file_tree.vue';
import TreeList from '~/diffs/components/tree_list.vue';
import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
import { SET_SHOW_TREE_LIST } from '~/diffs/store/mutation_types';
import createDiffsStore from '../create_diffs_store';
describe('DiffsFileTree', () => {
let wrapper;
let store;
const createComponent = ({ renderDiffFiles = true, showTreeList = true } = {}) => {
store = createDiffsStore();
store.commit(`diffs/${SET_SHOW_TREE_LIST}`, showTreeList);
wrapper = shallowMount(DiffsFileTree, {
store,
propsData: {
renderDiffFiles,
},
});
};
describe('visibility', () => {
describe('when renderDiffFiles and showTreeList are true', () => {
beforeEach(() => {
createComponent();
});
it('tree list is visible', () => {
expect(wrapper.findComponent(TreeList).exists()).toBe(true);
});
});
describe('when renderDiffFiles and showTreeList are false', () => {
beforeEach(() => {
createComponent({ renderDiffFiles: false, showTreeList: false });
});
it('tree list is hidden', () => {
expect(wrapper.findComponent(TreeList).exists()).toBe(false);
});
});
});
it('emits toggled event', async () => {
createComponent();
store.commit(`diffs/${SET_SHOW_TREE_LIST}`, false);
await nextTick();
expect(wrapper.emitted('toggled')).toStrictEqual([[]]);
});
it('toggles when "f" hotkey is pressed', async () => {
createComponent();
Mousetrap.trigger('f');
await nextTick();
expect(wrapper.findComponent(TreeList).exists()).toBe(false);
});
describe('size', () => {
const checkWidth = (width) => {
expect(wrapper.element.style.width).toEqual(`${width}px`);
expect(wrapper.findComponent(PanelResizer).props('startSize')).toEqual(width);
};
afterEach(() => {
localStorage.removeItem('mr_tree_list_width');
});
describe('when no localStorage record is set', () => {
beforeEach(() => {
createComponent();
});
it('sets initial width when no localStorage has been set', () => {
checkWidth(320);
});
});
it('sets initial width to localStorage size', () => {
localStorage.setItem('mr_tree_list_width', '200');
createComponent();
checkWidth(200);
});
it('sets width of tree list', () => {
createComponent({}, ({ state }) => {
state.diffs.treeEntries = { 111: { type: 'blob', fileHash: '111', path: '111.js' } };
});
checkWidth(320);
});
it('updates width', async () => {
const WIDTH = 500;
createComponent();
wrapper.findComponent(PanelResizer).vm.$emit('update:size', WIDTH);
await nextTick();
checkWidth(WIDTH);
});
it('passes down hideFileStats as true when width is less than 260', async () => {
createComponent();
wrapper.findComponent(PanelResizer).vm.$emit('update:size', 200);
await nextTick();
expect(wrapper.findComponent(TreeList).props('hideFileStats')).toBe(true);
});
it('passes down hideFileStats as false when width is bigger than 260', async () => {
createComponent();
wrapper.findComponent(PanelResizer).vm.$emit('update:size', 300);
await nextTick();
expect(wrapper.findComponent(TreeList).props('hideFileStats')).toBe(false);
});
});
});
|
