gitlab-org--gitlab-foss/spec/frontend/ide/components/resizable_panel_spec.js

114 lines
3.3 KiB
JavaScript

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));
});
});
});
});