117 lines
3.5 KiB
JavaScript
117 lines
3.5 KiB
JavaScript
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);
|
|
});
|
|
});
|
|
});
|