112 lines
3.2 KiB
JavaScript
112 lines
3.2 KiB
JavaScript
import { shallowMount } from '@vue/test-utils';
|
|
import Vue, { nextTick } from 'vue';
|
|
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', () => {
|
|
Vue.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,
|
|
});
|
|
};
|
|
const findResizer = () => wrapper.findComponent(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', async () => {
|
|
const newSize = TEST_WIDTH - 100;
|
|
const resizer = findResizer();
|
|
|
|
resizer.vm.$emit('update:size', newSize);
|
|
|
|
await nextTick();
|
|
expect(findInlineStyle()).toBe(createInlineStyle(newSize));
|
|
});
|
|
});
|
|
});
|