UNPKG

@gitlab/ui

Version:
284 lines (218 loc) • 8.04 kB
import { shallowMount } from '@vue/test-utils'; import { mockDefaultStackedLineData, mockDefaultStackedBarData, mockSecondaryData, } from '../../../utils/charts/mock_data'; import Chart from '../chart/chart.vue'; import ChartLegend from '../legend/legend.vue'; import * as themeUtils from '../../../utils/charts/theme'; import StackedColumnChart from './stacked_column.vue'; import TooltipDefaultFormat from '~/components/shared_components/charts/tooltip_default_format.vue'; import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs'; import { LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '~/utils/charts/constants'; let mockChartInstance; jest.mock('echarts', () => ({ getInstanceByDom: () => mockChartInstance, })); const defaultChartProps = { seriesNames: [], bars: mockDefaultStackedBarData, groupBy: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], xAxisType: 'category', xAxisTitle: 'January - December 2018', yAxisTitle: 'Commits', }; describe('stacked column chart component', () => { let wrapper; const findChart = () => wrapper.findComponent(Chart); const findLegend = () => wrapper.findComponent(ChartLegend); const getOptions = () => findChart().props('options'); const findDataTooltip = () => wrapper.findComponent(ChartTooltipStub); const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance); const createShallowWrapper = ({ props = {}, slots = {} } = {}) => { wrapper = shallowMount(StackedColumnChart, { propsData: { ...defaultChartProps, ...props }, stubs: { 'tooltip-default-format': TooltipDefaultFormat, ChartTooltip: ChartTooltipStub, }, slots, }); emitChartCreated(); }; beforeEach(() => { mockChartInstance = createMockChartInstance(); }); afterEach(() => { jest.restoreAllMocks(); }); it('emits `created`, with the chart instance', () => { createShallowWrapper(); return wrapper.vm.$nextTick(() => { expect(wrapper.emitted('created').length).toBe(1); expect(wrapper.emitted('created')[0][0]).toBe(mockChartInstance); }); }); it('should correctly render the chart', () => { createShallowWrapper(); const chart = findChart(); expect(chart.props('options')).toMatchSnapshot(); }); describe('with line data provided', () => { beforeEach(() => { createShallowWrapper({ props: { bars: [], lines: mockDefaultStackedLineData, }, }); }); it('should correctly render the chart', () => { expect(findChart().props('options')).toMatchSnapshot(); }); }); describe('legend', () => { it('is inline by default', () => { createShallowWrapper(); return wrapper.vm.$nextTick(() => { expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_INLINE); }); }); it('is inline if correct prop value is set', () => { createShallowWrapper({ props: { legendLayout: LEGEND_LAYOUT_INLINE } }); return wrapper.vm.$nextTick(() => { expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_INLINE); }); }); it('is tabular if correct prop value is set', () => { createShallowWrapper({ props: { legendLayout: LEGEND_LAYOUT_TABLE } }); return wrapper.vm.$nextTick(() => { expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_TABLE); }); }); }); describe('with secondary axis data provided', () => { const secondaryDataTitle = 'test secondary'; beforeEach(() => { createShallowWrapper({ props: { ...defaultChartProps, secondaryData: mockSecondaryData, secondaryDataTitle, }, }); }); it('should correctly render the chart', () => { const chart = findChart(); expect(chart.props('options')).toMatchSnapshot(); }); it('should set the secondary Y axis name', () => { const chart = findChart(); expect(chart.props('options').yAxis[1].name).toEqual(secondaryDataTitle); }); }); describe('tooltip', () => { describe('position', () => { const tooltipTitle = 'FooBar'; beforeEach(() => { createShallowWrapper(); }); it('is initialized', () => { expect(findDataTooltip().props('left')).toBe('0'); expect(findDataTooltip().props('top')).toBe('0'); expect(findDataTooltip().text()).not.toContain(tooltipTitle); }); it('is reset when mouse moves', async () => { const left = '10px'; const top = '30px'; wrapper.setData({ tooltipPosition: { left, top }, tooltipTitle }); await wrapper.vm.$nextTick(); expect(findDataTooltip().props('left')).toBe(`${left}`); expect(findDataTooltip().props('top')).toBe(`${top}`); expect(findDataTooltip().text()).toContain(tooltipTitle); }); }); const params = { seriesData: [{ seriesIndex: '0', seriesName: 'Blah', value: 'Jan' }], }; describe('default', () => { beforeEach(() => { createShallowWrapper(); }); it('calls the default tooltip text function', async () => { wrapper.vm.defaultFormatTooltipText = jest.fn(); expect(wrapper.vm.defaultFormatTooltipText).not.toHaveBeenCalled(); getOptions().xAxis.axisPointer.label.formatter(params); await wrapper.vm.$nextTick(); expect(wrapper.vm.defaultFormatTooltipText).toHaveBeenCalled(); }); it('displays the generic tooltip content', async () => { getOptions().xAxis.axisPointer.label.formatter(params); await wrapper.vm.$nextTick(); const tooltipText = findDataTooltip().element.textContent; expect(tooltipText).toContain(defaultChartProps.xAxisTitle); expect(tooltipText).toContain(params.seriesData[0].seriesName); expect(tooltipText).toContain(params.seriesData[0].value); }); }); describe('custom', () => { const formatTooltipText = jest.fn(); const customTitle = 'Custom title'; const customContent = 'Custom content'; beforeEach(() => { createShallowWrapper({ props: { formatTooltipText, }, slots: { 'tooltip-title': customTitle, 'tooltip-content': customContent, }, }); }); it('calls the formatTooltipText tooltip text function', async () => { expect(formatTooltipText).not.toHaveBeenCalled(); getOptions().xAxis.axisPointer.label.formatter(params); await wrapper.vm.$nextTick(); expect(formatTooltipText).toHaveBeenCalled(); }); it('displays the custom tooltip content', async () => { getOptions().xAxis.axisPointer.label.formatter(params); await wrapper.vm.$nextTick(); const tooltipText = findDataTooltip().element.textContent; expect(tooltipText).toContain(customTitle); expect(tooltipText).toContain(customContent); }); }); }); describe('color palette', () => { let paletteSpy; describe('default palette', () => { beforeEach(() => { paletteSpy = jest.spyOn(themeUtils, 'colorFromDefaultPalette'); createShallowWrapper(); }); it('calls colorFromDefaultPalette', () => { expect(paletteSpy).toHaveBeenCalled(); }); }); describe('custom palette', () => { beforeEach(() => { paletteSpy = jest.spyOn(themeUtils, 'colorFromDefaultPalette'); createShallowWrapper({ props: { customPalette: ['#FFFHHH', '#FFFJJJ', '#FFFIII', '#FFFKKK'], }, }); }); it('does not call colorFromDefaultPalette', () => { expect(paletteSpy).not.toHaveBeenCalled(); }); it('matches the snapshot', () => { const chart = findChart(); expect(chart.props('options')).toMatchSnapshot(); }); }); }); });