130 lines
4 KiB
JavaScript
130 lines
4 KiB
JavaScript
|
import { mount } from '@vue/test-utils';
|
||
|
|
import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
|
||
|
|
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
|
||
|
|
import MetricCard from '~/analytics/shared/components/metric_card.vue';
|
||
|
|
|
||
|
|
const metrics = [
|
||
|
|
{ key: 'first_metric', value: 10, label: 'First metric', unit: 'days', link: 'some_link' },
|
||
|
|
{ key: 'second_metric', value: 20, label: 'Yet another metric' },
|
||
|
|
{ key: 'third_metric', value: null, label: 'Null metric without value', unit: 'parsecs' },
|
||
|
|
{ key: 'fourth_metric', value: '-', label: 'Metric without value', unit: 'parsecs' },
|
||
|
|
];
|
||
|
|
|
||
|
|
const defaultProps = {
|
||
|
|
title: 'My fancy title',
|
||
|
|
isLoading: false,
|
||
|
|
metrics,
|
||
|
|
};
|
||
|
|
|
||
|
|
describe('MetricCard', () => {
|
||
|
|
let wrapper;
|
||
|
|
|
||
|
|
const factory = (props = defaultProps) => {
|
||
|
|
wrapper = mount(MetricCard, {
|
||
|
|
propsData: {
|
||
|
|
...defaultProps,
|
||
|
|
...props,
|
||
|
|
},
|
||
|
|
directives: {
|
||
|
|
GlTooltip: createMockDirective(),
|
||
|
|
},
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
afterEach(() => {
|
||
|
|
wrapper.destroy();
|
||
|
|
});
|
||
|
|
|
||
|
|
const findTitle = () => wrapper.find({ ref: 'title' });
|
||
|
|
const findLoadingIndicator = () => wrapper.find(GlSkeletonLoading);
|
||
|
|
const findMetricsWrapper = () => wrapper.find({ ref: 'metricsWrapper' });
|
||
|
|
const findMetricItem = () => wrapper.findAll({ ref: 'metricItem' });
|
||
|
|
const findTooltip = () => wrapper.find('[data-testid="tooltip"]');
|
||
|
|
|
||
|
|
describe('template', () => {
|
||
|
|
it('renders the title', () => {
|
||
|
|
factory();
|
||
|
|
|
||
|
|
expect(findTitle().text()).toContain('My fancy title');
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('when isLoading is true', () => {
|
||
|
|
beforeEach(() => {
|
||
|
|
factory({ isLoading: true });
|
||
|
|
});
|
||
|
|
|
||
|
|
it('displays a loading indicator', () => {
|
||
|
|
expect(findLoadingIndicator().exists()).toBe(true);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('does not display the metrics container', () => {
|
||
|
|
expect(findMetricsWrapper().exists()).toBe(false);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('when isLoading is false', () => {
|
||
|
|
beforeEach(() => {
|
||
|
|
factory({ isLoading: false });
|
||
|
|
});
|
||
|
|
|
||
|
|
it('does not display a loading indicator', () => {
|
||
|
|
expect(findLoadingIndicator().exists()).toBe(false);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('displays the metrics container', () => {
|
||
|
|
expect(findMetricsWrapper().exists()).toBe(true);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('renders two metrics', () => {
|
||
|
|
expect(findMetricItem()).toHaveLength(metrics.length);
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('with tooltip text', () => {
|
||
|
|
const tooltipText = 'This is a tooltip';
|
||
|
|
const tooltipMetric = {
|
||
|
|
key: 'fifth_metric',
|
||
|
|
value: '-',
|
||
|
|
label: 'Metric with tooltip',
|
||
|
|
unit: 'parsecs',
|
||
|
|
tooltipText,
|
||
|
|
};
|
||
|
|
|
||
|
|
beforeEach(() => {
|
||
|
|
factory({
|
||
|
|
isLoading: false,
|
||
|
|
metrics: [tooltipMetric],
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
it('will render a tooltip', () => {
|
||
|
|
const tt = getBinding(findTooltip().element, 'gl-tooltip');
|
||
|
|
expect(tt.value.title).toEqual(tooltipText);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
describe.each`
|
||
|
|
columnIndex | label | value | unit | link
|
||
|
|
${0} | ${'First metric'} | ${10} | ${' days'} | ${'some_link'}
|
||
|
|
${1} | ${'Yet another metric'} | ${20} | ${''} | ${null}
|
||
|
|
${2} | ${'Null metric without value'} | ${'-'} | ${''} | ${null}
|
||
|
|
${3} | ${'Metric without value'} | ${'-'} | ${''} | ${null}
|
||
|
|
`('metric columns', ({ columnIndex, label, value, unit, link }) => {
|
||
|
|
it(`renders ${value}${unit} ${label} with URL ${link}`, () => {
|
||
|
|
const allMetricItems = findMetricItem();
|
||
|
|
const metricItem = allMetricItems.at(columnIndex);
|
||
|
|
const text = metricItem.text();
|
||
|
|
|
||
|
|
expect(text).toContain(`${value}${unit}`);
|
||
|
|
expect(text).toContain(label);
|
||
|
|
|
||
|
|
if (link) {
|
||
|
|
expect(metricItem.find('a').attributes('href')).toBe(link);
|
||
|
|
} else {
|
||
|
|
expect(metricItem.find('a').exists()).toBe(false);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|