Commit 597f6c0e authored by Simon Knox's avatar Simon Knox Committed by Enrique Alcántara

Fix occasionally-hidden burnup charts

Don't render the charts until they have data or they can
be stuck with 0 width. This is something to do with
resizable-chart-container but I don't know what yet.
parent 93c2848c
---
title: Fix charts sometimes being hidden on milestone page
merge_request: 52552
author:
type: fixed
......@@ -369,6 +369,7 @@ export default {
:open-issues-count="issuesCount"
:open-issues-weight="issuesWeight"
:issues-selected="issuesSelected"
:loading="loading"
class="col-md-6"
/>
<burnup-chart
......@@ -376,6 +377,7 @@ export default {
:due-date="dueDate"
:burnup-data="burnupData"
:issues-selected="issuesSelected"
:loading="loading"
class="col-md-6"
/>
</div>
......
......@@ -40,6 +40,11 @@ export default {
required: false,
default: true,
},
loading: {
type: Boolean,
required: false,
default: false,
},
},
data() {
return {
......@@ -126,7 +131,7 @@ export default {
<div v-if="showTitle" class="burndown-header d-flex align-items-center">
<h3>{{ __('Burndown chart') }}</h3>
</div>
<resizable-chart-container class="burndown-chart js-burndown-chart">
<resizable-chart-container v-if="!loading" class="burndown-chart js-burndown-chart">
<gl-line-chart
slot-scope="{ width }"
:width="width"
......
......@@ -30,6 +30,11 @@ export default {
required: false,
default: () => [],
},
loading: {
type: Boolean,
required: false,
default: false,
},
},
data() {
return {
......@@ -114,8 +119,10 @@ export default {
<div class="burndown-header d-flex align-items-center">
<h3>{{ __('Burnup chart') }}</h3>
</div>
<resizable-chart-container class="js-burnup-chart">
<resizable-chart-container v-if="!loading" class="js-burnup-chart">
<gl-line-chart
slot-scope="{ width }"
:width="width"
:data="dataSeries"
:option="options"
:format-tooltip-text="formatTooltipText"
......
......@@ -39,7 +39,7 @@ describe('burndown_chart', () => {
burndownEventsPath: '/api/v4/projects/1234/milestones/1/burndown_events',
};
const createComponent = ({ props = {}, data = {} } = {}) => {
const createComponent = ({ props = {}, data = {}, loading = false } = {}) => {
wrapper = shallowMount(BurnCharts, {
propsData: {
...defaultProps,
......@@ -49,7 +49,7 @@ describe('burndown_chart', () => {
$apollo: {
queries: {
report: {
loading: false,
loading,
},
},
},
......@@ -69,6 +69,20 @@ describe('burndown_chart', () => {
wrapper.destroy();
});
it('passes loading=true through to charts', () => {
createComponent({ loading: true });
expect(findBurndownChart().props('loading')).toBe(true);
expect(findBurnupChart().props('loading')).toBe(true);
});
it('passes loading=false through to charts', () => {
createComponent({ loading: false });
expect(findBurndownChart().props('loading')).toBe(false);
expect(findBurnupChart().props('loading')).toBe(false);
});
it('includes Issues and Issue weight buttons', () => {
createComponent();
......
......@@ -27,6 +27,18 @@ describe('burndown_chart', () => {
});
};
it('hides chart while loading', () => {
createComponent({ loading: true });
expect(findChart().exists()).toBe(false);
});
it('shows chart when not loading', () => {
createComponent({ loading: false });
expect(findChart().exists()).toBe(true);
});
describe('with single point', () => {
it('does not show guideline', () => {
createComponent({
......
......@@ -26,6 +26,18 @@ describe('Burnup chart', () => {
});
};
it('hides chart while loading', () => {
createComponent({ loading: true });
expect(findChart().exists()).toBe(false);
});
it('shows chart when not loading', () => {
createComponent({ loading: false });
expect(findChart().exists()).toBe(true);
});
it('renders the lineChart correctly', () => {
const burnupData = [day1, day2, day3];
......
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