82 lines
2.6 KiB
JavaScript
82 lines
2.6 KiB
JavaScript
|
import { GlSingleStat } from '@gitlab/ui/dist/charts';
|
||
|
|
import { shallowMount } from '@vue/test-utils';
|
||
|
|
import MetricTile from '~/analytics/shared/components/metric_tile.vue';
|
||
|
|
import MetricPopover from '~/analytics/shared/components/metric_popover.vue';
|
||
|
|
import { redirectTo } from '~/lib/utils/url_utility';
|
||
|
|
|
||
|
|
jest.mock('~/lib/utils/url_utility');
|
||
|
|
|
||
|
|
describe('MetricTile', () => {
|
||
|
|
let wrapper;
|
||
|
|
|
||
|
|
const createComponent = (props = {}) => {
|
||
|
|
return shallowMount(MetricTile, {
|
||
|
|
propsData: {
|
||
|
|
metric: {},
|
||
|
|
...props,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const findSingleStat = () => wrapper.findComponent(GlSingleStat);
|
||
|
|
const findPopover = () => wrapper.findComponent(MetricPopover);
|
||
|
|
|
||
|
|
afterEach(() => {
|
||
|
|
wrapper.destroy();
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('template', () => {
|
||
|
|
describe('links', () => {
|
||
|
|
it('when the metric has links, it redirects the user on click', () => {
|
||
|
|
const metric = {
|
||
|
|
identifier: 'deploys',
|
||
|
|
value: '10',
|
||
|
|
label: 'Deploys',
|
||
|
|
links: [{ url: 'foo/bar' }],
|
||
|
|
};
|
||
|
|
wrapper = createComponent({ metric });
|
||
|
|
|
||
|
|
const singleStat = findSingleStat();
|
||
|
|
singleStat.vm.$emit('click');
|
||
|
|
expect(redirectTo).toHaveBeenCalledWith('foo/bar');
|
||
|
|
});
|
||
|
|
|
||
|
|
it("when the metric doesn't have links, it won't the user on click", () => {
|
||
|
|
const metric = { identifier: 'deploys', value: '10', label: 'Deploys' };
|
||
|
|
wrapper = createComponent({ metric });
|
||
|
|
|
||
|
|
const singleStat = findSingleStat();
|
||
|
|
singleStat.vm.$emit('click');
|
||
|
|
expect(redirectTo).not.toHaveBeenCalled();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('decimal places', () => {
|
||
|
|
it(`will render 0 decimal places for an integer value`, () => {
|
||
|
|
const metric = { identifier: 'deploys', value: '10', label: 'Deploys' };
|
||
|
|
wrapper = createComponent({ metric });
|
||
|
|
|
||
|
|
const singleStat = findSingleStat();
|
||
|
|
expect(singleStat.props('animationDecimalPlaces')).toBe(0);
|
||
|
|
});
|
||
|
|
|
||
|
|
it(`will render 1 decimal place for a float value`, () => {
|
||
|
|
const metric = { identifier: 'deploys', value: '10.5', label: 'Deploys' };
|
||
|
|
wrapper = createComponent({ metric });
|
||
|
|
|
||
|
|
const singleStat = findSingleStat();
|
||
|
|
expect(singleStat.props('animationDecimalPlaces')).toBe(1);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
it('renders a metric popover', () => {
|
||
|
|
const metric = { identifier: 'deploys', value: '10', label: 'Deploys' };
|
||
|
|
wrapper = createComponent({ metric });
|
||
|
|
|
||
|
|
const popover = findPopover();
|
||
|
|
expect(popover.exists()).toBe(true);
|
||
|
|
expect(popover.props()).toMatchObject({ metric, target: metric.identifier });
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|