diff options
Diffstat (limited to 'spec/frontend/analytics/shared/components/metric_tile_spec.js')
-rw-r--r-- | spec/frontend/analytics/shared/components/metric_tile_spec.js | 81 |
1 files changed, 81 insertions, 0 deletions
diff --git a/spec/frontend/analytics/shared/components/metric_tile_spec.js b/spec/frontend/analytics/shared/components/metric_tile_spec.js new file mode 100644 index 00000000000..980dfad9eb0 --- /dev/null +++ b/spec/frontend/analytics/shared/components/metric_tile_spec.js @@ -0,0 +1,81 @@ +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 }); + }); + }); +}); |