Commit 6654679e authored by Brandon Labuschagne's avatar Brandon Labuschagne

Merge branch '335951-ensure-glsinglestat-animates-when-data-is-changed' into 'master'

Ensure GlSingleStat animates when data is changed

See merge request gitlab-org/gitlab!72759
parents 1972ec41 1402f830
...@@ -91,11 +91,8 @@ export default { ...@@ -91,11 +91,8 @@ export default {
</script> </script>
<template> <template>
<div class="gl-display-flex gl-flex-wrap" data-testid="vsa-time-metrics"> <div class="gl-display-flex gl-flex-wrap" data-testid="vsa-time-metrics">
<div v-if="isLoading" class="gl-h-auto gl-py-3 gl-pr-9 gl-my-6"> <gl-skeleton-loading v-if="isLoading" class="gl-h-auto gl-py-3 gl-pr-9 gl-my-6" />
<gl-skeleton-loading /> <div v-for="metric in metrics" v-show="!isLoading" :key="metric.key" class="gl-my-6 gl-pr-9">
</div>
<template v-else>
<div v-for="metric in metrics" :key="metric.key" class="gl-my-6 gl-pr-9">
<gl-single-stat <gl-single-stat
:id="metric.key" :id="metric.key"
:value="`${metric.value}`" :value="`${metric.value}`"
...@@ -109,6 +106,5 @@ export default { ...@@ -109,6 +106,5 @@ export default {
/> />
<metric-popover :metric="metric" :target="metric.key" /> <metric-popover :metric="metric" :target="metric.key" />
</div> </div>
</template>
</div> </div>
</template> </template>
...@@ -28,7 +28,7 @@ export default { ...@@ -28,7 +28,7 @@ export default {
<div v-for="stat in stats" :key="stat.title"> <div v-for="stat in stats" :key="stat.title">
<gl-skeleton-loader v-if="isLoading" :height="$options.loaderHeight" /> <gl-skeleton-loader v-if="isLoading" :height="$options.loaderHeight" />
<gl-single-stat <gl-single-stat
v-else v-show="!isLoading"
:value="stat.value" :value="stat.value"
:title="stat.title" :title="stat.title"
:unit="stat.unit" :unit="stat.unit"
......
...@@ -16,17 +16,27 @@ describe('ThroughputStats', () => { ...@@ -16,17 +16,27 @@ describe('ThroughputStats', () => {
}); });
}; };
afterEach(() => {
wrapper.destroy();
});
describe('default behaviour', () => { describe('default behaviour', () => {
beforeEach(() => { beforeEach(() => {
wrapper = createWrapper(); wrapper = createWrapper();
}); });
it('displays a GlSingleStat component for each stat entry', () => { it('displays a GlSingleStat component for each stat entry', () => {
expect(wrapper.findAll(GlSingleStat)).toHaveLength(stats.length); const components = wrapper.findAllComponents(GlSingleStat);
expect(components).toHaveLength(stats.length);
stats.forEach((stat, index) => {
expect(components.at(index).isVisible()).toBe(true);
});
}); });
it('passes the GlSingleStat the correct props', () => { it('passes the GlSingleStat the correct props', () => {
const component = wrapper.findAll(GlSingleStat).at(0); const component = wrapper.findAllComponents(GlSingleStat).at(0);
const { title, unit, value } = stats[0]; const { title, unit, value } = stats[0];
expect(component.props('title')).toBe(title); expect(component.props('title')).toBe(title);
...@@ -35,7 +45,7 @@ describe('ThroughputStats', () => { ...@@ -35,7 +45,7 @@ describe('ThroughputStats', () => {
}); });
it('does not display any GlSkeletonLoader components', () => { it('does not display any GlSkeletonLoader components', () => {
expect(wrapper.findAll(GlSkeletonLoader)).toHaveLength(0); expect(wrapper.findAllComponents(GlSkeletonLoader)).toHaveLength(0);
}); });
}); });
...@@ -45,11 +55,17 @@ describe('ThroughputStats', () => { ...@@ -45,11 +55,17 @@ describe('ThroughputStats', () => {
}); });
it('displays a GlSkeletonLoader component for each stat entry', () => { it('displays a GlSkeletonLoader component for each stat entry', () => {
expect(wrapper.findAll(GlSkeletonLoader)).toHaveLength(stats.length); expect(wrapper.findAllComponents(GlSkeletonLoader)).toHaveLength(stats.length);
}); });
it('does not display any GlSingleStat components', () => { it('hides all GlSingleStat components', () => {
expect(wrapper.findAll(GlSingleStat)).toHaveLength(0); const components = wrapper.findAllComponents(GlSingleStat);
expect(components).toHaveLength(stats.length);
stats.forEach((stat, index) => {
expect(components.at(index).isVisible()).toBe(false);
});
}); });
}); });
}); });
...@@ -46,7 +46,6 @@ describe('ValueStreamMetrics', () => { ...@@ -46,7 +46,6 @@ describe('ValueStreamMetrics', () => {
afterEach(() => { afterEach(() => {
wrapper.destroy(); wrapper.destroy();
wrapper = null;
}); });
describe('with successful requests', () => { describe('with successful requests', () => {
...@@ -58,7 +57,23 @@ describe('ValueStreamMetrics', () => { ...@@ -58,7 +57,23 @@ describe('ValueStreamMetrics', () => {
it('will display a loader with pending requests', async () => { it('will display a loader with pending requests', async () => {
await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
expect(wrapper.find(GlSkeletonLoading).exists()).toBe(true); expect(wrapper.findComponent(GlSkeletonLoading).exists()).toBe(true);
});
it('renders hidden GlSingleStat components for each metric', async () => {
await waitForPromises();
wrapper.setData({ isLoading: true });
await wrapper.vm.$nextTick();
const components = findMetrics();
expect(components).toHaveLength(metricsData.length);
metricsData.forEach((metric, index) => {
expect(components.at(index).isVisible()).toBe(false);
});
}); });
describe('with data loaded', () => { describe('with data loaded', () => {
...@@ -80,6 +95,7 @@ describe('ValueStreamMetrics', () => { ...@@ -80,6 +95,7 @@ describe('ValueStreamMetrics', () => {
it(`renders a single stat component for "${title}" with value and unit`, () => { it(`renders a single stat component for "${title}" with value and unit`, () => {
const metric = findMetrics().at(index); const metric = findMetrics().at(index);
expect(metric.props()).toMatchObject({ value, title, unit: unit ?? '' }); expect(metric.props()).toMatchObject({ value, title, unit: unit ?? '' });
expect(metric.isVisible()).toBe(true);
}); });
it(`${ it(`${
......
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