diff options
Diffstat (limited to 'spec/frontend/analytics/usage_trends')
-rw-r--r-- | spec/frontend/analytics/usage_trends/components/usage_counts_spec.js (renamed from spec/frontend/analytics/usage_trends/components/instance_counts_spec.js) | 22 |
1 files changed, 15 insertions, 7 deletions
diff --git a/spec/frontend/analytics/usage_trends/components/instance_counts_spec.js b/spec/frontend/analytics/usage_trends/components/usage_counts_spec.js index 707d2cc310f..703767dab47 100644 --- a/spec/frontend/analytics/usage_trends/components/instance_counts_spec.js +++ b/spec/frontend/analytics/usage_trends/components/usage_counts_spec.js @@ -1,5 +1,6 @@ +import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui'; +import { GlSingleStat } from '@gitlab/ui/dist/charts'; import { shallowMount } from '@vue/test-utils'; -import MetricCard from '~/analytics/shared/components/metric_card.vue'; import UsageCounts from '~/analytics/usage_trends/components/usage_counts.vue'; import { mockUsageCounts } from '../mock_data'; @@ -27,18 +28,18 @@ describe('UsageCounts', () => { afterEach(() => { wrapper.destroy(); - wrapper = null; }); - const findMetricCard = () => wrapper.find(MetricCard); + const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoading); + const findAllSingleStats = () => wrapper.findAllComponents(GlSingleStat); describe('while loading', () => { beforeEach(() => { createComponent({ loading: true }); }); - it('displays the metric card with isLoading=true', () => { - expect(findMetricCard().props('isLoading')).toBe(true); + it('displays a loading indicator', () => { + expect(findSkeletonLoader().exists()).toBe(true); }); }); @@ -47,8 +48,15 @@ describe('UsageCounts', () => { createComponent({ data: { counts: mockUsageCounts } }); }); - it('passes the counts data to the metric card', () => { - expect(findMetricCard().props('metrics')).toEqual(mockUsageCounts); + it.each` + index | value | title + ${0} | ${mockUsageCounts[0].value} | ${mockUsageCounts[0].label} + ${1} | ${mockUsageCounts[1].value} | ${mockUsageCounts[1].label} + `('renders a GlSingleStat for "$title"', ({ index, value, title }) => { + const singleStat = findAllSingleStats().at(index); + + expect(singleStat.props('value')).toBe(`${value}`); + expect(singleStat.props('title')).toBe(title); }); }); }); |