@gitlab/ui 80.13.1 → 80.14.0

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

@@ -1,286 +0,0 @@
-import { nextTick } from 'vue';
-import { shallowMount } from '@vue/test-utils';
-
-import { LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '~/utils/charts/constants';
-import {
-  createMockChartInstance,
-  ChartTooltipStub,
-  chartTooltipStubData,
-} from '~helpers/chart_stubs';
-import { expectHeightAutoClasses } from '~helpers/chart_height';
-import Chart from '../chart/chart.vue';
-import ChartLegend from '../legend/legend.vue';
-import AreaChart from './area.vue';
-
-let mockChartInstance;
-
-jest.mock('echarts', () => ({
-  getInstanceByDom: () => mockChartInstance,
-}));
-
-describe('area component', () => {
-  let wrapper;
-
-  const findChart = () => wrapper.findComponent(Chart);
-  const findLegend = () => wrapper.findComponent(ChartLegend);
-  const findDataTooltip = () => wrapper.findComponent({ ref: 'dataTooltip' });
-  const findAnnotationsTooltip = () => wrapper.findComponent({ ref: 'annotationsTooltip' });
-
-  const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
-
-  const createShallowWrapper = ({ props = {}, ...options } = {}) => {
-    wrapper = shallowMount(AreaChart, {
-      propsData: { option: { series: [] }, data: [], ...props },
-      stubs: {
-        'chart-tooltip': ChartTooltipStub,
-      },
-      ...options,
-    });
-    emitChartCreated();
-  };
-
-  beforeEach(() => {
-    mockChartInstance = createMockChartInstance();
-  });
-
-  it('emits `created`, with the chart instance', async () => {
-    createShallowWrapper();
-
-    await nextTick();
-
-    expect(wrapper.emitted('created').length).toBe(1);
-    expect(wrapper.emitted('created')[0][0]).toBe(mockChartInstance);
-  });
-
-  describe('Annotations tooltips', () => {
-    it('are hidden by default', async () => {
-      createShallowWrapper();
-
-      await nextTick();
-
-      expect(findAnnotationsTooltip().exists()).toBe(false);
-    });
-
-    it('are displayed if passed via annotations props', async () => {
-      createShallowWrapper({
-        props: {
-          annotations: [
-            {
-              min: '',
-              max: '',
-            },
-          ],
-        },
-      });
-
-      await nextTick();
-
-      expect(findAnnotationsTooltip().exists()).toBe(true);
-    });
-
-    it('are displayed if passed via option props', async () => {
-      createShallowWrapper({
-        props: {
-          option: {
-            series: [
-              {
-                name: 'annotations',
-                markPoint: {
-                  data: [
-                    {
-                      xAxis: 10,
-                    },
-                  ],
-                },
-                data: [],
-              },
-            ],
-          },
-        },
-      });
-
-      await nextTick();
-
-      expect(findAnnotationsTooltip().exists()).toBe(true);
-    });
-
-    it('has a default title and content when hovered', async () => {
-      const params = {
-        name: 'annotations',
-        componentType: 'markPoint',
-        data: {
-          xAxis: '2018-01-25T01:00:00.000Z',
-          tooltipData: { content: 'Scranton strangler was caught.' },
-        },
-        event: {
-          event: {
-            zrX: 100,
-            zrY: 100,
-          },
-        },
-      };
-
-      createShallowWrapper({
-        props: {
-          annotations: [
-            {
-              min: '',
-              max: '',
-            },
-          ],
-        },
-      });
-
-      wrapper.vm.onChartDataPointMouseOver(params);
-
-      await nextTick();
-
-      expect(findAnnotationsTooltip().html()).toContain(params.data.xAxis);
-      expect(findAnnotationsTooltip().html()).toContain(params.data.tooltipData.content);
-    });
-  });
-
-  describe('data tooltip', () => {
-    it('is initialized', async () => {
-      createShallowWrapper();
-
-      await nextTick();
-
-      expect(findDataTooltip().props()).toMatchObject({
-        useDefaultTooltipFormatter: true,
-        chart: mockChartInstance,
-      });
-    });
-
-    describe('is customized via slots', () => {
-      const { params, title, content } = chartTooltipStubData;
-      const value = params.seriesData[0].value[1];
-
-      it('customizes tooltip value', async () => {
-        const tooltipValueSlot = jest.fn().mockReturnValue('Value');
-
-        createShallowWrapper({
-          scopedSlots: {
-            'tooltip-value': tooltipValueSlot,
-          },
-        });
-        await nextTick();
-
-        expect(tooltipValueSlot).toHaveBeenCalledWith({ value });
-        expect(findDataTooltip().text()).toBe('Value');
-      });
-
-      it('customizes title', async () => {
-        const tooltipTitleSlot = jest.fn().mockReturnValue('Title');
-
-        createShallowWrapper({
-          scopedSlots: {
-            'tooltip-title': tooltipTitleSlot,
-          },
-        });
-        await nextTick();
-
-        expect(tooltipTitleSlot).toHaveBeenCalledWith({
-          params,
-          title,
-        });
-        expect(findDataTooltip().text()).toBe('Title');
-      });
-
-      it('customizes content', async () => {
-        const tooltipContentSlot = jest.fn().mockReturnValue('Title');
-
-        createShallowWrapper({
-          scopedSlots: {
-            'tooltip-content': tooltipContentSlot,
-          },
-        });
-        await nextTick();
-
-        expect(tooltipContentSlot).toHaveBeenCalledWith({
-          params,
-          content,
-        });
-        expect(findDataTooltip().text()).toBe('Title');
-      });
-    });
-
-    it('is customized via formatting function', async () => {
-      createShallowWrapper({
-        props: {
-          formatTooltipText: jest.fn(),
-        },
-      });
-
-      await nextTick();
-
-      expect(findDataTooltip().props()).toMatchObject({
-        useDefaultTooltipFormatter: false,
-        chart: mockChartInstance,
-      });
-    });
-  });
-
-  describe('legend', () => {
-    it('is inline by default', async () => {
-      createShallowWrapper();
-
-      await nextTick();
-
-      expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_INLINE);
-    });
-
-    it('is inline if correct prop value is set', async () => {
-      createShallowWrapper({
-        props: {
-          legendLayout: LEGEND_LAYOUT_INLINE,
-        },
-      });
-
-      await nextTick();
-
-      expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_INLINE);
-    });
-
-    it('is tabular if correct prop value is set', async () => {
-      createShallowWrapper({
-        props: {
-          legendLayout: LEGEND_LAYOUT_TABLE,
-        },
-      });
-
-      await nextTick();
-
-      expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_TABLE);
-    });
-
-    it('displays custom series info when prop is set', async () => {
-      const legendSeriesInfo = [
-        {
-          name: 'Custom Legend Item',
-          type: 'solid',
-          color: '#000',
-          data: [10, 20, 30],
-        },
-      ];
-
-      createShallowWrapper({
-        props: {
-          legendSeriesInfo,
-        },
-      });
-
-      await nextTick();
-
-      expect(findLegend().props('seriesInfo')).toEqual(expect.arrayContaining(legendSeriesInfo));
-    });
-  });
-
-  describe('height', () => {
-    expectHeightAutoClasses({
-      createComponent: (props) => createShallowWrapper({ props: { ...props } }),
-      findContainer: () => wrapper,
-      findChart,
-    });
-  });
-});

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

@@ -1,208 +0,0 @@
-import times from 'lodash/times';
-import { GlAreaChart } from '../../../charts';
-import { mockAnnotationsSeries, mockAnnotationsConfigs } from '../../../utils/charts/mock_data';
-import { toolbox } from '../../../utils/charts/story_config';
-import { DATA_VIZ_AQUA_500, DATA_VIZ_ORANGE_600 } from '../../../tokens/build/js/tokens';
-import { timeSeriesDateFormatter } from '../../../utils/charts/utils';
-import { generateTimeSeries } from '../../../utils/data_utils';
-import { disableControls } from '../../../utils/stories_utils';
-
-const components = {
-  GlAreaChart,
-};
-const defaultData = [
-  {
-    name: 'First Series',
-    data: [
-      ['Mon', 1220],
-      ['Tue', 932],
-      ['Wed', 901],
-      ['Thu', 934],
-      ['Fri', 1290],
-      ['Sat', 1330],
-      ['Sun', 1320],
-    ],
-  },
-];
-
-const defaultOptions = {
-  xAxis: {
-    name: 'Time',
-    type: 'category',
-  },
-};
-
-const template = (content) => `<gl-area-chart
-  :data="data"
-  :option="option"
-  :thresholds="thresholds"
-  :annotations="annotations"
-  :includeLegendAvgMax="includeLegendAvgMax"
-  :height="height"
-  :legendSeriesInfo="legendSeriesInfo"
-  >
-    ${content}
-  </gl-area-chart>`;
-
-const generateProps = ({
-  data = defaultData,
-  option = defaultOptions,
-  thresholds = [],
-  annotations = [],
-  includeLegendAvgMax = true,
-  height = null,
-  legendSeriesInfo = [],
-} = {}) => ({
-  data,
-  option,
-  thresholds,
-  annotations,
-  includeLegendAvgMax,
-  height,
-  legendSeriesInfo,
-});
-
-const Template = (args, { argTypes }) => ({
-  components,
-  props: Object.keys(argTypes),
-  template: template(),
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const WithThreshold = Template.bind({});
-WithThreshold.args = generateProps({
-  thresholds: [{ threshold: 1200, operator: '>' }],
-});
-
-export const WithAnnotationsAsProps = Template.bind({});
-WithAnnotationsAsProps.storyName = 'With annotations as props (recommended)';
-WithAnnotationsAsProps.args = generateProps({
-  ...mockAnnotationsConfigs,
-  data: [
-    {
-      name: 'Time Series',
-      data: generateTimeSeries(),
-    },
-  ],
-  option: {
-    xAxis: {
-      type: 'time',
-      name: 'Time',
-      axisLabel: {
-        formatter: timeSeriesDateFormatter,
-      },
-    },
-  },
-});
-
-export const WithAnnotationsAsOptionSeries = Template.bind({});
-WithAnnotationsAsOptionSeries.args = generateProps({
-  data: [
-    {
-      name: 'Time Series',
-      data: generateTimeSeries(),
-    },
-  ],
-  option: {
-    ...mockAnnotationsSeries,
-    xAxis: {
-      type: 'time',
-      name: 'Time',
-      axisLabel: {
-        formatter: timeSeriesDateFormatter,
-      },
-    },
-  },
-});
-
-export const WithZoomAndScroll = Template.bind({});
-WithZoomAndScroll.args = generateProps({
-  data: [
-    {
-      name: 'Time Series',
-      data: generateTimeSeries(),
-    },
-  ],
-  option: {
-    xAxis: {
-      type: 'time',
-      name: 'Time',
-      axisLabel: {
-        formatter: timeSeriesDateFormatter,
-      },
-    },
-    dataZoom: [
-      {
-        startValue: '2018-03-01T00:00:00.000',
-      },
-    ],
-  },
-});
-
-export const WithToolbox = Template.bind({});
-WithToolbox.args = generateProps({
-  option: {
-    xAxis: {
-      name: 'Time',
-      type: 'category',
-    },
-    toolbox,
-  },
-});
-
-export const MultSeries = Template.bind({});
-MultSeries.args = generateProps({
-  data: times(10, (index) => ({
-    name: index,
-    data: defaultData[0].data.map(([label, value]) => [label, value * index]),
-  })),
-});
-
-export const WithCustomLegendItems = Template.bind({});
-WithCustomLegendItems.args = generateProps({
-  legendSeriesInfo: [
-    {
-      name: 'Custom Legend Item 1',
-      type: 'solid',
-      color: DATA_VIZ_ORANGE_600,
-      data: [10, 20],
-    },
-    {
-      name: 'Custom Legend Item 2',
-      type: 'solid',
-      color: DATA_VIZ_AQUA_500,
-      data: [30, 50],
-    },
-  ],
-});
-
-export const WithCustomTooltip = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components,
-  template: template(`
-    <template #tooltip-title="{ params }">{{params && params.value}}</template>
-    <template #tooltip-content="{ params }">
-      <div v-if="params">{{params.seriesData[0].seriesName}}: {{params.seriesData[0].value[1]}}</div>
-    </template>
-  `),
-});
-WithCustomTooltip.args = generateProps();
-WithCustomTooltip.tags = ['skip-visual-test'];
-
-export default {
-  title: 'charts/area-chart',
-  component: GlAreaChart,
-  argTypes: {
-    ...disableControls([
-      'dataSeries',
-      'formatTooltipText',
-      'legendAverageText',
-      'legendMaxText',
-      'legendMinText',
-      'legendCurrentText',
-      'legendLayout',
-    ]),
-  },
-};

package/src/components/charts/bar/__snapshots__/bar.spec.js.snap

@@ -1,82 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Bar chart component when mounted and chart has created long Y axis labels are ellipsized 1`] = `"Scra..."`;
-
-exports[`Bar chart component when mounted and chart has created long Y axis labels are ellipsized 2`] = `"Dwight"`;
-
-exports[`Bar chart component when mounted should render chart with axis and series 1`] = `
-Object {
-  "grid": Object {
-    "bottom": 44,
-    "left": 64,
-    "right": 32,
-    "top": 16,
-  },
-  "legend": Object {
-    "show": false,
-  },
-  "series": Array [
-    Object {
-      "barMaxWidth": "50%",
-      "data": Array [
-        Array [
-          100,
-          "Scranton Strangler",
-        ],
-        Array [
-          300,
-          "Dwight",
-        ],
-      ],
-      "emphasis": Object {
-        "itemStyle": Object {
-          "color": "rgba(97, 122, 226, 0.4)",
-        },
-      },
-      "itemStyle": Object {
-        "borderColor": "#617ae2",
-        "borderWidth": 1,
-        "color": "rgba(97, 122, 226, 0.2)",
-      },
-      "name": "Office",
-      "stack": "chart",
-      "type": "bar",
-    },
-  ],
-  "xAxis": Object {
-    "axisLabel": Object {
-      "formatter": [Function],
-    },
-    "axisLine": Object {
-      "show": false,
-    },
-    "name": "Pushes per day",
-    "nameLocation": "center",
-    "type": "value",
-  },
-  "yAxis": Object {
-    "axisLabel": Object {
-      "formatter": [Function],
-      "interval": 0,
-    },
-    "axisPointer": Object {
-      "label": Object {
-        "formatter": [Function],
-      },
-      "show": true,
-      "type": "none",
-    },
-    "axisTick": Object {
-      "show": true,
-    },
-    "boundaryGap": true,
-    "name": "User",
-    "nameGap": 50,
-    "nameLocation": "center",
-    "splitLine": Object {
-      "show": false,
-    },
-    "type": "category",
-  },
-}
-`;

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

@@ -1,92 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-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 BarChart from './bar.vue';
-
-let mockChartInstance;
-
-jest.mock('echarts', () => ({
-  getInstanceByDom: () => mockChartInstance,
-}));
-
-const defaultChartProps = {
-  xAxisTitle: 'Pushes per day',
-  xAxisType: 'value',
-  yAxisTitle: 'User',
-  data: {
-    Office: [
-      [100, 'Scranton Strangler'],
-      [300, 'Dwight'],
-    ],
-  },
-};
-
-describe('Bar chart component', () => {
-  let wrapper;
-
-  const findChart = () => wrapper.findComponent(Chart);
-  const findChartTooltip = () => wrapper.findComponent(ChartTooltip);
-
-  const getOptions = () => findChart().props('options');
-  const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
-
-  const createComponent = (props = {}) => {
-    wrapper = shallowMount(BarChart, {
-      propsData: { ...defaultChartProps, ...props },
-    });
-  };
-
-  beforeEach(() => {
-    mockChartInstance = createMockChartInstance();
-  });
-
-  describe('when mounted', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    it('should render chart with axis and series', () => {
-      const chart = findChart();
-
-      expect(chart.props('options')).toMatchSnapshot();
-    });
-
-    it('should not emit created', () => {
-      expect(wrapper.emitted('created')).toBeUndefined();
-    });
-  });
-
-  describe('when mounted and chart has created', () => {
-    beforeEach(() => {
-      createComponent();
-      emitChartCreated();
-    });
-
-    it('emits "created" when onCreated is called', () => {
-      expect(wrapper.emitted('created')).toEqual([[mockChartInstance]]);
-    });
-
-    it('long Y axis labels are ellipsized', () => {
-      const { yAxis: { axisLabel: { formatter } } = {} } = getOptions();
-
-      defaultChartProps.data.Office.map(([, name]) => expect(formatter(name)).toMatchSnapshot());
-    });
-
-    it('configures chart tooltip', () => {
-      expect(findChartTooltip().props()).toMatchObject({
-        chart: mockChartInstance,
-        useDefaultTooltipFormatter: false,
-      });
-    });
-  });
-
-  describe('height', () => {
-    expectHeightAutoClasses({
-      createComponent,
-      findContainer: () => wrapper,
-      findChart,
-    });
-  });
-});