@gitlab/ui 80.13.1 → 80.14.0

package/src/components/charts/column/column.stories.js

@@ -1,111 +0,0 @@
-import { GlColumnChart } from '../../../charts';
-import {
-  mockDefaultLineData,
-  mockDefaultBarData,
-  mockSecondaryBarData,
-  mockSecondaryTrendlineData,
-} from '../../../utils/charts/mock_data';
-import { toolbox } from '../../../utils/charts/story_config';
-
-const template = (content = '') => `
-  <gl-column-chart
-    :bars="bars"
-    :lines="lines"
-    :secondary-data="secondaryData"
-    :option="option"
-    :y-axis-title="yAxisTitle"
-    :secondary-data-title="secondaryDataTitle"
-    :x-axis-title="xAxisTitle"
-    :x-axis-type="xAxisType"
-    :height="height"
-  >
-    ${content}
-  </gl-column-chart>
-  `;
-
-const generateProps = ({
-  bars = mockDefaultBarData,
-  lines = [],
-  option = {},
-  yAxisTitle = 'Pushes per day',
-  xAxisTitle = 'User',
-  xAxisType = 'category',
-  secondaryData = [],
-  secondaryDataTitle = '',
-  height = null,
-} = {}) => ({
-  bars,
-  lines,
-  option,
-  yAxisTitle,
-  xAxisTitle,
-  xAxisType,
-  secondaryData,
-  secondaryDataTitle,
-  height,
-});
-
-const Template = (args, { argTypes }) => ({
-  components: { GlColumnChart },
-  props: Object.keys(argTypes),
-  template: template(),
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const WithLineSeries = Template.bind({});
-WithLineSeries.args = generateProps({
-  lines: mockDefaultLineData,
-});
-
-export const WithZoomAndScroll = Template.bind({});
-WithZoomAndScroll.args = generateProps({
-  option: {
-    dataZoom: [
-      {
-        type: 'slider',
-        startValue: 1,
-      },
-    ],
-  },
-});
-
-export const WithToolbox = Template.bind({});
-WithToolbox.args = generateProps({
-  option: {
-    toolbox,
-  },
-});
-
-export const SecondaryYAxis = Template.bind({});
-SecondaryYAxis.args = generateProps({
-  legend: true,
-  secondaryData: mockSecondaryBarData,
-  secondaryDataTitle: 'New bar data',
-});
-
-export const SecondaryYAxisLine = Template.bind({});
-SecondaryYAxisLine.args = generateProps({
-  legend: true,
-  secondaryData: mockSecondaryTrendlineData,
-  secondaryDataTitle: 'New line data',
-});
-
-export const WithCustomTooltip = (args, { argTypes }) => ({
-  components: { GlColumnChart },
-  props: Object.keys(argTypes),
-  template: template(`
-    <template #tooltip-title="{ params }">Custom tooltip title: {{params && params.value}}</template>
-    <template #tooltip-content="{ params }">
-      <div v-for="p in params && params.seriesData">Wow so custom: {{p.seriesName}}: {{p.value[1]}}</div>
-    </template>
-  `),
-});
-WithCustomTooltip.args = generateProps();
-WithCustomTooltip.tags = ['skip-visual-test'];
-
-export default {
-  title: 'charts/column-chart',
-  component: GlColumnChart,
-};

package/src/components/charts/column/column_chart.spec.js

@@ -1,223 +0,0 @@
-import { nextTick } from 'vue';
-import { shallowMount } from '@vue/test-utils';
-import {
-  createMockChartInstance,
-  ChartTooltipStub,
-  chartTooltipStubData,
-} from '~helpers/chart_stubs';
-import { expectHeightAutoClasses } from '~helpers/chart_height';
-import {
-  mockDefaultLineData,
-  mockDefaultBarData,
-  mockSecondaryData,
-  mockDefaultStackedBarData,
-} from '../../../utils/charts/mock_data';
-import Chart from '../chart/chart.vue';
-import ColumnChart from './column.vue';
-
-let mockChartInstance;
-
-jest.mock('echarts', () => ({
-  getInstanceByDom: () => mockChartInstance,
-}));
-
-describe('column chart component', () => {
-  const defaultChartProps = {
-    xAxisTitle: 'x axis',
-    yAxisTitle: 'y axis',
-    xAxisType: 'category',
-    bars: mockDefaultBarData,
-  };
-  let wrapper;
-
-  const chartItemClickedSpy = jest.fn();
-  const findChart = () => wrapper.findComponent(Chart);
-  const findChartTooltip = () => wrapper.findComponent({ ref: 'dataTooltip' });
-
-  const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
-
-  const factory = (props = defaultChartProps, options = {}) => {
-    wrapper = shallowMount(ColumnChart, {
-      propsData: { ...props },
-      listeners: {
-        chartItemClicked: chartItemClickedSpy,
-      },
-      ...options,
-    });
-  };
-
-  describe('mounted', () => {
-    beforeEach(() => {
-      factory();
-
-      mockChartInstance = createMockChartInstance();
-      emitChartCreated();
-    });
-
-    it('emits "created" when onCreated is called', () => {
-      expect(wrapper.emitted('created')).toHaveLength(1);
-    });
-
-    it('calls event listener when "chartItemClicked" is emitted on the Chart component', () => {
-      findChart().vm.$emit('chartItemClicked');
-
-      expect(chartItemClickedSpy).toHaveBeenCalled();
-    });
-
-    it('should correctly render the chart', () => {
-      const chart = findChart();
-
-      expect(chart.props('options')).toMatchSnapshot();
-    });
-  });
-
-  describe('with line data provided', () => {
-    beforeEach(() => {
-      factory({
-        ...defaultChartProps,
-        bars: [],
-        lines: mockDefaultLineData,
-      });
-    });
-    it('should correctly render the chart', () => {
-      expect(findChart().props('options')).toMatchSnapshot();
-    });
-  });
-
-  describe('with secondary axis data provided', () => {
-    const secondaryDataTitle = 'Column test secondary';
-
-    beforeEach(() => {
-      factory({
-        ...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('with multiple series data provided', () => {
-    it('should pass through custom stack series property', () => {
-      factory({
-        ...defaultChartProps,
-        bars: mockDefaultStackedBarData.map((series) => ({
-          ...series,
-          stack: 'some-custom-stack',
-        })),
-      });
-
-      const hasExpectedStackProperty = findChart()
-        .props('options')
-        .series.every((series) => series.stack === 'some-custom-stack');
-
-      expect(hasExpectedStackProperty).toBe(true);
-    });
-  });
-
-  describe('tooltip', () => {
-    it('configures chart tooltip', async () => {
-      factory(defaultChartProps, {
-        stubs: {
-          'chart-tooltip': ChartTooltipStub,
-        },
-      });
-      mockChartInstance = createMockChartInstance();
-      emitChartCreated();
-      await nextTick();
-
-      expect(findChartTooltip().props()).toMatchObject({
-        chart: mockChartInstance,
-        useDefaultTooltipFormatter: true,
-      });
-    });
-
-    describe('custom tooltip slots', () => {
-      const { params, title, content } = chartTooltipStubData;
-
-      it('customizes value', async () => {
-        const tooltipValueSlot = jest.fn().mockReturnValue('Custom tooltip value');
-
-        factory(defaultChartProps, {
-          stubs: {
-            'chart-tooltip': ChartTooltipStub,
-          },
-          scopedSlots: {
-            'tooltip-value': tooltipValueSlot,
-          },
-        });
-
-        mockChartInstance = createMockChartInstance();
-        emitChartCreated();
-        await nextTick();
-
-        expect(tooltipValueSlot).toHaveBeenCalledWith({ value: 9 });
-        expect(findChartTooltip().text()).toBe('Custom tooltip value');
-      });
-
-      it('customizes title', async () => {
-        const tooltipTitleSlot = jest.fn().mockReturnValue('Custom tooltip title');
-
-        factory(defaultChartProps, {
-          stubs: {
-            'chart-tooltip': ChartTooltipStub,
-          },
-          scopedSlots: {
-            'tooltip-title': tooltipTitleSlot,
-          },
-        });
-
-        mockChartInstance = createMockChartInstance();
-        emitChartCreated();
-        await nextTick();
-
-        expect(tooltipTitleSlot).toHaveBeenCalledWith({
-          params,
-          title,
-        });
-        expect(findChartTooltip().text()).toBe('Custom tooltip title');
-      });
-
-      it('customizes content', async () => {
-        const tooltipContentSlot = jest.fn().mockReturnValue('Custom tooltip content');
-
-        factory(defaultChartProps, {
-          stubs: {
-            'chart-tooltip': ChartTooltipStub,
-          },
-          scopedSlots: {
-            'tooltip-content': tooltipContentSlot,
-          },
-        });
-
-        mockChartInstance = createMockChartInstance();
-        emitChartCreated();
-        await nextTick();
-
-        expect(tooltipContentSlot).toHaveBeenCalledWith({
-          params,
-          content,
-        });
-        expect(findChartTooltip().text()).toBe('Custom tooltip content');
-      });
-    });
-  });
-
-  describe('height', () => {
-    expectHeightAutoClasses({
-      createComponent: (props) => factory({ ...defaultChartProps, ...props }),
-      findContainer: () => wrapper,
-      findChart,
-    });
-  });
-});

package/src/components/charts/discrete_scatter/discrete_scatter.spec.js

@@ -1,173 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
-import { createMockChartInstance } from '~helpers/chart_stubs';
-import { expectHeightAutoClasses } from '~helpers/chart_height';
-import Chart from '../chart/chart.vue';
-import ChartTooltip from '../tooltip/tooltip.vue';
-import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
-import DiscreteScatterChart from './discrete_scatter.vue';
-
-let mockChartInstance;
-
-jest.mock('echarts', () => ({
-  getInstanceByDom: () => mockChartInstance,
-}));
-
-describe('column chart component', () => {
-  const mockData = {
-    x: '19 May',
-    y: 6.95,
-  };
-
-  const mockDataPixel = {
-    x: 1,
-    y: 2,
-  };
-
-  const defaultChartProps = {
-    xAxisTitle: 'x axis',
-    yAxisTitle: 'y axis',
-    xAxisType: 'category',
-    data: [[mockData.x, mockData.y]],
-  };
-  let wrapper;
-
-  const findChart = () => wrapper.findComponent(Chart);
-
-  const createComponent = (props = {}) => {
-    wrapper = shallowMount(DiscreteScatterChart, {
-      propsData: { ...defaultChartProps, ...props },
-    });
-  };
-
-  beforeEach(() => {
-    mockChartInstance = createMockChartInstance();
-    mockChartInstance.convertToPixel.mockReturnValue([mockDataPixel.x, mockDataPixel.y]);
-  });
-
-  describe('height', () => {
-    expectHeightAutoClasses({
-      createComponent,
-      findContainer: () => wrapper,
-      findChart,
-    });
-  });
-
-  describe('tooltip formatter', () => {
-    let onLabelChange;
-
-    beforeEach(async () => {
-      createComponent();
-
-      await findChart().vm.$emit('created', mockChartInstance);
-      onLabelChange = findChart().props('options').tooltip.formatter;
-    });
-
-    describe.each([
-      {
-        params: {
-          data: [mockData.x, mockData.y],
-        },
-        descr: 'when data is an array',
-      },
-      {
-        params: {
-          data: { value: [mockData.x, mockData.y] },
-        },
-        descr: 'when data is an object',
-      },
-    ])('$descr', ({ params }) => {
-      it('sets the popover content', async () => {
-        onLabelChange(params);
-        await nextTick();
-
-        expect(mockChartInstance.convertToPixel).toHaveBeenCalledTimes(1);
-        expect(mockChartInstance.convertToPixel).toHaveBeenLastCalledWith('grid', [
-          mockData.x,
-          mockData.y,
-        ]);
-
-        expect(wrapper.findComponent(ChartTooltip).props('left')).toBe(`${mockDataPixel.x}px`);
-        expect(wrapper.findComponent(ChartTooltip).props('top')).toBe(`${mockDataPixel.y}px`);
-        expect(wrapper.findComponent(TooltipDefaultFormat).props('tooltipContent')).toEqual({
-          'y axis': { color: '', value: mockData.y },
-        });
-      });
-    });
-
-    describe.each([
-      {
-        params: {},
-        descr: 'when data is missing',
-      },
-      {
-        params: {
-          data: [],
-        },
-        descr: 'when data is an empty array',
-      },
-      {
-        params: { data: 'foo' },
-        descr: 'when data is not an array',
-      },
-      {
-        params: {
-          data: { value: [] },
-        },
-        descr: 'when data.value is an empty array',
-      },
-      {
-        params: { data: { value: undefined } },
-        descr: 'when data.value is undefined',
-      },
-      {
-        params: { data: { value: 'foo' } },
-        descr: 'when data.value is not an array',
-      },
-    ])('$descr', ({ params }) => {
-      it('does not set the tooltip content', async () => {
-        onLabelChange(params);
-        await nextTick();
-
-        expect(mockChartInstance.convertToPixel).not.toHaveBeenCalled();
-        expect(wrapper.findComponent(ChartTooltip).props('left')).toBe('0');
-        expect(wrapper.findComponent(ChartTooltip).props('top')).toBe('0');
-        expect(wrapper.findComponent(TooltipDefaultFormat).props('tooltipContent')).toEqual({
-          'y axis': { color: '', value: undefined },
-        });
-      });
-    });
-  });
-
-  describe('disable-tooltip', () => {
-    describe('when false', () => {
-      beforeEach(async () => {
-        createComponent();
-        await findChart().vm.$emit('created', mockChartInstance);
-      });
-
-      it('renders the ChartTooltip component', async () => {
-        expect(wrapper.findComponent(ChartTooltip).exists()).toBe(true);
-      });
-
-      it('sets chart tooltip options', () => {
-        expect(findChart().props('options').tooltip).not.toBeUndefined();
-      });
-    });
-
-    describe('when true', () => {
-      beforeEach(async () => {
-        createComponent({ disableTooltip: true });
-        await findChart().vm.$emit('created', mockChartInstance);
-      });
-
-      it('does not render the ChartTooltip component', async () => {
-        expect(wrapper.findComponent(ChartTooltip).exists()).toBe(false);
-      });
-
-      it('does not set chart tooltip options', () => {
-        expect(findChart().props('options').tooltip).toBeUndefined();
-      });
-    });
-  });
-});

package/src/components/charts/discrete_scatter/discrete_scatter.stories.js

@@ -1,64 +0,0 @@
-import { GlDiscreteScatterChart } from '../../../charts';
-
-const Template = (args, { argTypes }) => ({
-  components: { GlDiscreteScatterChart },
-  props: Object.keys(argTypes),
-  template: `
-  <gl-discrete-scatter-chart
-    :data="data"
-    :option="option"
-    :y-axis-title="yAxisTitle"
-    :x-axis-title="xAxisTitle"
-    data-testid="discrete-scatter-chart"
-    :height="height"
-    :disableTooltip="disableTooltip"
-  />
-`,
-});
-
-const generateProps = ({
-  data = [
-    {
-      type: 'scatter',
-      data: [
-        ['19 May', 6.95],
-        ['20 May', 7.58],
-        ['21 May', 8.81],
-        ['22 May', 8.33],
-        ['23 May', 9.96],
-        ['24 May', 7.24],
-        ['25 May', 4.26],
-      ],
-    },
-  ],
-  option = {},
-  yAxisTitle = 'Pushes per day',
-  xAxisTitle = 'Date',
-  height = null,
-} = {}) => ({
-  data,
-  option,
-  yAxisTitle,
-  xAxisTitle,
-  height,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const WithZoomAndScroll = Template.bind({});
-WithZoomAndScroll.args = generateProps({
-  option: {
-    dataZoom: [
-      {
-        type: 'slider',
-        startValue: 1,
-      },
-    ],
-  },
-});
-
-export default {
-  title: 'charts/discrete-scatter-chart',
-  component: GlDiscreteScatterChart,
-};