Commit e605c833 authored by Mike Greiling's avatar Mike Greiling

Merge branch 'resize-vuln-graph' into 'master'

Backport Resizable container component for gl-charts

See merge request gitlab-org/gitlab-ce!26843
parents b54d466c e0725fa4
......@@ -41,6 +41,9 @@ export default class ContextualSidebar {
this.toggleCollapsedSidebar(value, true);
}
});
this.$page.on('transitionstart transitionend', () => {
$(document).trigger('content.resize');
});
$(window).on('resize', () => _.debounce(this.render(), 100));
}
......
<script>
import { debounceByAnimationFrame } from '~/lib/utils/common_utils';
import $ from 'jquery';
export default {
data() {
return {
width: 0,
height: 0,
};
},
beforeDestroy() {
this.contentResizeHandler.off('content.resize', this.debouncedResize);
window.removeEventListener('resize', this.debouncedResize);
},
created() {
this.debouncedResize = debounceByAnimationFrame(this.onResize);
// Handle when we explicictly trigger a custom resize event
this.contentResizeHandler = $(document).on('content.resize', this.debouncedResize);
// Handle window resize
window.addEventListener('resize', this.debouncedResize);
},
methods: {
onResize() {
// Slot dimensions
const { clientWidth, clientHeight } = this.$refs.chartWrapper;
this.width = clientWidth;
this.height = clientHeight;
},
},
};
</script>
<template>
<div ref="chartWrapper">
<slot :width="width" :height="height"> </slot>
</div>
</template>
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Resizable Chart Container renders the component 1`] = `
<div>
<div
class="slot"
>
<span
class="width"
>
0
</span>
<span
class="height"
>
0
</span>
</div>
</div>
`;
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();
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment