65 lines
1.8 KiB
JavaScript
65 lines
1.8 KiB
JavaScript
import Vue from 'vue';
|
|
import { mount } from '@vue/test-utils';
|
|
import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue';
|
|
import $ from 'jquery';
|
|
|
|
jest.mock('~/lib/utils/common_utils', () => ({
|
|
debounceByAnimationFrame(callback) {
|
|
return jest.spyOn({ callback }, 'callback');
|
|
},
|
|
}));
|
|
|
|
describe('Resizable Chart Container', () => {
|
|
let wrapper;
|
|
|
|
beforeEach(() => {
|
|
wrapper = mount(ResizableChartContainer, {
|
|
attachToDocument: true,
|
|
scopedSlots: {
|
|
default: `
|
|
<div class="slot" slot-scope="{ width, height }">
|
|
<span class="width">{{width}}</span>
|
|
<span class="height">{{height}}</span>
|
|
</div>
|
|
`,
|
|
},
|
|
});
|
|
});
|
|
|
|
afterEach(() => {
|
|
wrapper.destroy();
|
|
});
|
|
|
|
it('renders the component', () => {
|
|
expect(wrapper.element).toMatchSnapshot();
|
|
});
|
|
|
|
it('updates the slot width and height props', () => {
|
|
const width = 1920;
|
|
const height = 1080;
|
|
|
|
// JSDOM mocks and sets clientWidth/clientHeight to 0 so we set manually
|
|
wrapper.vm.$refs.chartWrapper = { clientWidth: width, clientHeight: height };
|
|
|
|
$(document).trigger('content.resize');
|
|
|
|
return Vue.nextTick().then(() => {
|
|
const widthNode = wrapper.find('.slot > .width');
|
|
const heightNode = wrapper.find('.slot > .height');
|
|
|
|
expect(parseInt(widthNode.text(), 10)).toEqual(width);
|
|
expect(parseInt(heightNode.text(), 10)).toEqual(height);
|
|
});
|
|
});
|
|
|
|
it('calls onResize on manual resize', () => {
|
|
$(document).trigger('content.resize');
|
|
expect(wrapper.vm.debouncedResize).toHaveBeenCalled();
|
|
});
|
|
|
|
it('calls onResize on page resize', () => {
|
|
window.dispatchEvent(new Event('resize'));
|
|
expect(wrapper.vm.debouncedResize).toHaveBeenCalled();
|
|
});
|
|
});
|