@gitlab/ui 80.13.1 → 80.13.2

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

@@ -1,274 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { createMockChartInstance } from '~helpers/chart_stubs';
-import Chart from '../chart/chart.vue';
-import GlChartSeriesLabel from '../series_label/series_label.vue';
-import Legend from './legend.vue';
-
-let mockChartInstance;
-
-jest.mock('echarts', () => ({
-  getInstanceByDom: () => mockChartInstance,
-  init: () => mockChartInstance,
-  registerTheme: jest.fn(),
-}));
-
-const mockSeriesInfo = [
-  {
-    type: 'solid',
-    name: 'Example Title 1',
-    color: 'red',
-    data: [1, 2, 3, 4, 5],
-  },
-  {
-    type: 'solid',
-    name: 'Example Title 2',
-    color: 'red',
-    data: [1, 2, 3, 4, 5],
-  },
-  {
-    type: 'solid',
-    name: 'Example Title 3',
-    color: 'red',
-    data: [1, 2, 3, 4, 5],
-  },
-];
-
-const mockElementHeight = (element, clientHeight, scrollHeight) => {
-  Object.defineProperty(element, 'clientHeight', {
-    get: () => clientHeight,
-  });
-  Object.defineProperty(element, 'scrollHeight', {
-    get: () => scrollHeight,
-  });
-};
-
-describe('chart legend component', () => {
-  let chartWrapper;
-  let legendWrapper;
-  let chart;
-
-  const chartArgs = [
-    Chart,
-    {
-      propsData: { options: {} },
-      listeners: {
-        created: (chartInstance) => {
-          chart = chartInstance;
-          chart.getDom = () => chartInstance;
-        },
-      },
-    },
-  ];
-
-  const buildLegend = ({ propsData = {}, seriesInfo = mockSeriesInfo } = {}) => {
-    legendWrapper = shallowMount(Legend, {
-      propsData: {
-        ...propsData,
-        chart: mockChartInstance,
-        seriesInfo,
-      },
-    });
-  };
-
-  beforeEach(async () => {
-    mockChartInstance = createMockChartInstance();
-
-    chartWrapper = shallowMount(...chartArgs);
-    await chartWrapper.vm.$nextTick();
-    // Runs after mounting the chart so that it has an up to date reference
-    buildLegend();
-  });
-
-  it('renders the legend with no errors', () => {
-    expect(legendWrapper.exists()).toBe(true);
-  });
-
-  it('displays correct number of series labels', () => {
-    expect(legendWrapper.findAllComponents(GlChartSeriesLabel).length).toBe(3);
-  });
-
-  it('allows user to override max value label text using props', () => {
-    buildLegend({
-      propsData: {
-        maxText: 'maxText',
-      },
-    });
-
-    expect(legendWrapper.text()).toMatch('maxText');
-  });
-
-  it('allows user to override average value label text using props', () => {
-    buildLegend({
-      propsData: {
-        averageText: 'averageText',
-      },
-    });
-
-    expect(legendWrapper.text()).toMatch('averageText');
-  });
-
-  it('displays "Avg" for the average value label by default', () => {
-    expect(legendWrapper.props().averageText).toMatch('Avg');
-  });
-
-  it('displays "Max" for the max value label by default', () => {
-    expect(legendWrapper.props().maxText).toMatch('Max');
-  });
-
-  it('displays "Min" for the min value label by default', () => {
-    expect(legendWrapper.props().minText).toMatch('Min');
-  });
-
-  it('displays "Current" for the current value label by default', () => {
-    expect(legendWrapper.props().currentText).toMatch('Current');
-  });
-
-  describe('when clicking on a series label', () => {
-    it('dispatches a `highlight` action on the chart', () => {
-      legendWrapper.findComponent(GlChartSeriesLabel).trigger('click');
-      expect(chart.dispatchAction).toHaveBeenCalled();
-    });
-
-    it('does not dispatch a `legendToggleSelect` action when there is only one active series', () => {
-      buildLegend({ seriesInfo: [mockSeriesInfo[0]] });
-
-      legendWrapper.findComponent(GlChartSeriesLabel).trigger('click');
-
-      expect(chart.dispatchAction).toHaveBeenCalledTimes(0);
-    });
-
-    it('does not dispatch a `legendToggleSelect` action on the chart when disabled=true', () => {
-      const disabledLegendItem = {
-        type: 'solid',
-        name: 'Example Title 4',
-        color: 'red',
-        data: [1, 2, 3, 4, 5],
-        disabled: true,
-      };
-
-      const seriesInfo = [...mockSeriesInfo, disabledLegendItem];
-      const disabledLegendItemIndex = seriesInfo.length - 1;
-
-      buildLegend({ seriesInfo });
-
-      legendWrapper
-        .findAllComponents(GlChartSeriesLabel)
-        .at(disabledLegendItemIndex)
-        .trigger('click');
-
-      expect(chart.dispatchAction).toHaveBeenCalledTimes(0);
-    });
-  });
-
-  it('renders the inline layout by default', () => {
-    expect(legendWrapper.props().layout).toMatch('inline');
-    expect(legendWrapper.find('.gl-legend-inline').exists()).toBe(true);
-    expect(legendWrapper.find('.gl-legend-tabular').exists()).toBe(false);
-  });
-
-  it('adds a fade when content scrolls', async () => {
-    const legendInlineEl = legendWrapper.find('.gl-legend-inline').element;
-    mockElementHeight(legendInlineEl, 200, 400);
-
-    // update component to force recalculation of fade class after we mock the heights
-    legendWrapper.setProps({
-      averageText: 'averaaaaage',
-    });
-
-    // Why wait 3 ticks?
-    await legendWrapper.vm.$nextTick(); // 1. component waits a tick itself after update, before checking scrollHeight
-    await legendWrapper.vm.$nextTick(); // 2. so wait for next render, after component has applied class
-    await legendWrapper.vm.$nextTick(); // 3. ??? vue-3 pipeline fails without waiting an extra tick
-
-    expect(legendWrapper.find('.gl-legend-b-fade').exists()).toBe(true);
-  });
-
-  describe('when setting the layout prop to table', () => {
-    beforeEach(() => {
-      buildLegend({
-        propsData: {
-          layout: 'table',
-        },
-      });
-      legendWrapper.vm.$nextTick();
-    });
-
-    it('renders the table layout', () => {
-      expect(legendWrapper.find('.gl-legend-tabular').exists()).toBe(true);
-    });
-
-    it('does not render the inline layout', () => {
-      expect(legendWrapper.find('.gl-legend-inline').exists()).toBe(false);
-    });
-
-    it('allows user to override min value label text using props', () => {
-      legendWrapper.setProps({ minText: 'minText' });
-
-      return legendWrapper.vm.$nextTick().then(() => {
-        expect(legendWrapper.text()).toMatch('minText');
-      });
-    });
-
-    it('allows user to override current value label text using props', () => {
-      legendWrapper.setProps({ currentText: 'currentText' });
-
-      return legendWrapper.vm.$nextTick().then(() => {
-        expect(legendWrapper.text()).toMatch('currentText');
-      });
-    });
-
-    it.each`
-      data          | reason
-      ${null}       | ${'null'}
-      ${undefined}  | ${'undefined'}
-      ${[]}         | ${'empty'}
-      ${[NaN, NaN]} | ${'only NaN values'}
-    `('displays en-dash when series data is $reason', ({ data }) => {
-      const series = [
-        {
-          type: 'solid',
-          name: 'Example Title',
-          color: 'red',
-          data,
-        },
-      ];
-
-      legendWrapper.setProps({
-        seriesInfo: series,
-      });
-
-      return legendWrapper.vm.$nextTick().then(() => {
-        legendWrapper.findAll('.gl-legend-tabular-details-cell').wrappers.forEach((wrapper) => {
-          expect(wrapper.text()).toBe('-');
-        });
-      });
-    });
-
-    it('does not display NaN values in cells', () => {
-      const series = [
-        {
-          type: 'solid',
-          name: 'Example Title 1',
-          data: [1, 2, NaN, 4, 5],
-          color: 'red',
-        },
-        {
-          type: 'solid',
-          name: 'Example Title 2',
-          data: [1, 2, 3, 4, NaN],
-          color: 'red',
-        },
-      ];
-
-      legendWrapper.setProps({
-        seriesInfo: series,
-      });
-
-      return legendWrapper.vm.$nextTick().then(() => {
-        legendWrapper.findAll('.gl-legend-tabular-details-cell').wrappers.forEach((wrapper) => {
-          expect(wrapper.text()).not.toBe('NaN');
-        });
-      });
-    });
-  });
-});

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

@@ -1,174 +0,0 @@
-import { GlChart, GlChartLegend } from '../../../charts';
-import { HEIGHT_AUTO_CLASSES, LEGEND_LAYOUT_TABLE } from '../../../utils/charts/constants';
-import { generateSeriesData } from '../../../utils/charts/story_config';
-import {
-  SERIES_NAME_SHORT,
-  SERIES_NAME_LONG,
-  SERIES_NAME_LONG_WITHOUT_SPACES,
-} from '../../../utils/stories_constants';
-import { GRAY_200 } from '../../../tokens/build/js/tokens';
-import readme from './legend.md';
-
-const generateOptions = (seriesLength, seriesNameType) => {
-  return {
-    legend: {
-      show: false,
-    },
-    xAxis: {
-      type: 'category',
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    },
-    yAxis: {
-      type: 'value',
-    },
-    series: generateSeriesData(seriesLength, seriesNameType).map((data) => ({
-      color: data.color,
-      data: data.data,
-      name: data.name,
-      showSymbol: true,
-      type: 'line',
-    })),
-    animation: false,
-  };
-};
-
-const generateSeriesInfo = (amount, nameType) => {
-  const seriesData = generateSeriesData(amount, nameType);
-
-  return seriesData.map((item) => ({
-    type: 'solid',
-    name: item.name,
-    color: item.color,
-    data: item.data,
-  }));
-};
-
-const generateTemplate = (type, wrapperAttrs = {}, chartAttrs = {}) => {
-  const layoutTypeAttribute =
-    type === LEGEND_LAYOUT_TABLE ? `:layout="'${LEGEND_LAYOUT_TABLE}'"` : '';
-
-  return `<div v-bind='${JSON.stringify(wrapperAttrs)}'>
-    <gl-chart
-      :options="$options.options"
-      v-bind='${JSON.stringify(chartAttrs)}'
-      @created="onCreated"
-    />
-    <gl-chart-legend
-      v-if="chart"
-      ${layoutTypeAttribute}
-      :chart="chart"
-      :series-info="$options.seriesInfo"
-    />
-  </div>`;
-};
-
-const components = {
-  GlChart,
-  GlChartLegend,
-};
-
-const baseStoryOptions = {
-  props: {},
-  components,
-  data() {
-    return {
-      chart: null,
-    };
-  },
-  methods: {
-    onCreated(chart) {
-      this.chart = chart;
-    },
-  },
-};
-
-const disabledLegendItem = {
-  type: 'solid',
-  name: 'Disabled Item',
-  color: GRAY_200,
-  disabled: true,
-};
-
-const getStoryOptions = (seriesLength, seriesNameType, legendLayoutType) => {
-  return {
-    ...baseStoryOptions,
-    options: generateOptions(seriesLength, seriesNameType),
-    seriesInfo: generateSeriesInfo(seriesLength, seriesNameType),
-    template: generateTemplate(legendLayoutType),
-  };
-};
-
-export const Default = () => getStoryOptions(10, SERIES_NAME_SHORT);
-export const DefaultWithDisabledLegendItem = () => {
-  const storyOptions = getStoryOptions(10, SERIES_NAME_SHORT);
-
-  storyOptions.seriesInfo = [...storyOptions.seriesInfo, disabledLegendItem];
-
-  return storyOptions;
-};
-export const DefaultWithLongSeriesNames = () => getStoryOptions(10, SERIES_NAME_LONG);
-
-export const DefaultWithLongSeriesNamesAndNoSpaces = () =>
-  getStoryOptions(10, SERIES_NAME_LONG_WITHOUT_SPACES);
-
-export const DefaultWithOverflowingFixedContainerHeight = () => {
-  const storyOptions = getStoryOptions(50, SERIES_NAME_LONG_WITHOUT_SPACES, null);
-
-  storyOptions.template = generateTemplate(
-    null,
-    {
-      class: HEIGHT_AUTO_CLASSES, // line, area, heatmap etc charts all have these classes on the wrapper element in auto height mode
-      style: 'height: 400px; overflow: hidden; outline: 1px solid red;', // Simulate being inside a dashboard panel with fixed height and no overflow
-    },
-    {
-      height: 'auto',
-      class: 'gl-flex-grow-1', // line, area, heatmap etc charts all have gl-flex-grow-1 on the <gl-chart> element in auto height mode
-    }
-  );
-
-  return storyOptions;
-};
-
-export const WithTabularLayout = () => getStoryOptions(10, SERIES_NAME_SHORT, LEGEND_LAYOUT_TABLE);
-export const WithTabularLayoutAndDisabledLegendItem = () => {
-  const storyOptions = getStoryOptions(10, SERIES_NAME_SHORT, LEGEND_LAYOUT_TABLE);
-
-  storyOptions.seriesInfo = [...storyOptions.seriesInfo, disabledLegendItem];
-
-  return storyOptions;
-};
-export const WithTabularLayoutAndLongSeriesNames = () =>
-  getStoryOptions(10, SERIES_NAME_LONG, LEGEND_LAYOUT_TABLE);
-export const WithTabularLayoutAndLongSeriesNamesWithNoSpaces = () =>
-  getStoryOptions(10, SERIES_NAME_LONG_WITHOUT_SPACES, LEGEND_LAYOUT_TABLE);
-
-export const WithTabularOverflowingFixedContainerHeight = () => {
-  const storyOptions = getStoryOptions(50, SERIES_NAME_LONG_WITHOUT_SPACES, LEGEND_LAYOUT_TABLE);
-
-  storyOptions.template = generateTemplate(
-    LEGEND_LAYOUT_TABLE,
-    {
-      class: HEIGHT_AUTO_CLASSES, // line, area, heatmap etc charts all have these classes on the wrapper element in auto height mode
-      style: 'height: 400px; overflow: hidden; outline: 1px solid red;', // Simulate being inside a dashboard panel with fixed height and no overflow
-    },
-    {
-      height: 'auto',
-      class: 'gl-flex-grow-1', // line, area, heatmap etc charts all have gl-flex-grow-1 on the <gl-chart> element in auto height mode
-    }
-  );
-
-  return storyOptions;
-};
-
-export default {
-  title: 'charts/chart-legend',
-  component: GlChartLegend,
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};