@gitlab/ui 80.13.1 → 80.14.0

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

@@ -1,280 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { createMockChartInstance } from '~helpers/chart_stubs';
-import { gaugeSafeHues, gaugeWarningHue } from '../../../utils/charts/theme';
-import Chart from '../chart/chart.vue';
-import GlGauge from './gauge.vue';
-
-const placeholder = '--';
-
-const defaultProps = {
-  value: 48,
-  min: 0,
-  max: 100,
-};
-
-let mockChartInstance;
-
-jest.mock('echarts', () => ({
-  getInstanceByDom: () => mockChartInstance,
-}));
-
-describe('gauge component', () => {
-  let wrapper;
-
-  const findChart = () => wrapper.findComponent(Chart);
-  const findChartOptions = () => findChart().props('options');
-
-  const findSeries = () => findChartOptions().series[0];
-
-  const findDetailText = () => findSeries().detail.formatter();
-  const findAxisColor = () => findSeries().axisLine.lineStyle.color;
-
-  const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
-
-  const createComponent = (props = {}) => {
-    wrapper = shallowMount(GlGauge, { propsData: { ...defaultProps, ...props } });
-    emitChartCreated();
-  };
-
-  beforeEach(() => {
-    mockChartInstance = createMockChartInstance();
-  });
-
-  it('emits `created`, with the chart instance', () => {
-    createComponent();
-
-    return wrapper.vm.$nextTick().then(() => {
-      expect(wrapper.emitted('created').length).toBe(1);
-      expect(wrapper.emitted('created')[0][0]).toBe(mockChartInstance);
-    });
-  });
-
-  describe('min and max', () => {
-    it('are correctly set', () => {
-      createComponent();
-
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findSeries().min).toBe(defaultProps.min);
-        expect(findSeries().max).toBe(defaultProps.max);
-      });
-    });
-
-    it('if not provided, they are set to default values', () => {
-      createComponent({});
-
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findSeries().min).toBe(0);
-        expect(findSeries().max).toBe(100);
-      });
-    });
-  });
-
-  describe('gauge detail text', () => {
-    const text = 'Sample text';
-
-    it('is displayed when text prop is set', () => {
-      createComponent({ text });
-
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findDetailText()).toBe(text);
-      });
-    });
-
-    it('is equal to value when text prop is not set', () => {
-      createComponent({ value: 30 });
-
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findDetailText()).toBe(30);
-      });
-    });
-
-    it('is equal to value when text prop is not set and value is less than min', () => {
-      createComponent({ value: 30, min: 100, max: 500 });
-
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findDetailText()).toBe(30);
-      });
-    });
-
-    it('is equal to value when text prop is not set and value is more than max', () => {
-      createComponent({ value: 600, min: 100, max: 500 });
-
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findDetailText()).toBe(600);
-      });
-    });
-
-    it('shows a placeholder when text prop is not set and value is NaN', () => {
-      createComponent({ value: 'not a number' });
-
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper).toHaveLoggedVueErrors();
-        expect(findDetailText()).toBe(placeholder);
-      });
-    });
-  });
-
-  describe('gauge splits', () => {
-    it('are 10 in number when no prop is set', () => {
-      createComponent();
-
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findSeries().splitNumber).toBe(10);
-      });
-    });
-
-    it('are set to correct value when prop is set', () => {
-      createComponent({ splitNumber: 30 });
-
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findSeries().splitNumber).toBe(30);
-      });
-    });
-  });
-
-  describe('thresholds and related colors', () => {
-    describe('when no threshold is set', () => {
-      beforeEach(() => {
-        createComponent();
-      });
-
-      it('axis has a single color set', () => {
-        expect(findAxisColor().length).toBe(1);
-      });
-
-      it('axis has correct color set', () => {
-        expect(findAxisColor()[0]).toEqual([1, gaugeSafeHues[0]]);
-      });
-    });
-
-    describe('when one threshold is set', () => {
-      beforeEach(() => {
-        createComponent({ thresholds: [50] });
-      });
-
-      it('axis has two colors set', () => {
-        expect(findAxisColor().length).toBe(2);
-      });
-
-      it('first color is a safely looking color', () => {
-        expect(findAxisColor()[0]).toEqual([0.5, gaugeSafeHues[0]]);
-      });
-
-      it('second color denotes the danger/warning zone', () => {
-        expect(findAxisColor()[1]).toEqual([1, gaugeWarningHue]);
-      });
-    });
-
-    describe('when two thresholds are set', () => {
-      beforeEach(() => {
-        createComponent({ thresholds: [50, 95] });
-      });
-
-      it('axis has three colors set', () => {
-        expect(findAxisColor().length).toBe(3);
-      });
-
-      it('first color is a safely looking color', () => {
-        expect(findAxisColor()[0]).toEqual([0.5, gaugeSafeHues[0]]);
-      });
-
-      it('second color is also safely looking, but a bit darker', () => {
-        expect(findAxisColor()[1]).toEqual([0.95, gaugeSafeHues[1]]);
-      });
-
-      it('third color denotes the danger/warning zone', () => {
-        expect(findAxisColor()[2]).toEqual([1, gaugeWarningHue]);
-      });
-    });
-
-    describe('when more than two thresholds are set', () => {
-      it('only two of them are used', () => {
-        createComponent({ thresholds: [95, 50, 15, 25] });
-        expect(findAxisColor().length).toBe(3);
-      });
-
-      it('if some of them are invalid values they are skipped', () => {
-        createComponent({ thresholds: [undefined, 95, 'a string', NaN, 50, 15, 25] });
-
-        expect(wrapper).toHaveLoggedVueErrors();
-
-        expect(findAxisColor().length).toBe(3);
-      });
-    });
-
-    describe('thresholds are sorted by numeric value', () => {
-      it('when values are valid', () => {
-        createComponent({ thresholds: [95, 50, 15, 25] });
-
-        expect(findAxisColor().length).toBe(3);
-        expect(findAxisColor()[0]).toEqual([0.5, gaugeSafeHues[0]]);
-        expect(findAxisColor()[1]).toEqual([0.95, gaugeSafeHues[1]]);
-        expect(findAxisColor()[2]).toEqual([1, gaugeWarningHue]);
-      });
-
-      it('when some values are invalid', () => {
-        createComponent({ thresholds: [NaN, 95, undefined, 'a string', 50, 15, 25] });
-
-        expect(wrapper).toHaveLoggedVueErrors();
-
-        expect(findAxisColor().length).toBe(3);
-        expect(findAxisColor()[0]).toEqual([0.5, gaugeSafeHues[0]]);
-        expect(findAxisColor()[1]).toEqual([0.95, gaugeSafeHues[1]]);
-        expect(findAxisColor()[2]).toEqual([1, gaugeWarningHue]);
-      });
-    });
-
-    describe('when thresholds outside of min and max range are set, they will not show on the arc', () => {
-      beforeEach(() => {
-        createComponent({ thresholds: [-50, -0.1, 150] });
-      });
-
-      it('axis has a single color set', () => {
-        expect(findAxisColor().length).toBe(1);
-      });
-    });
-
-    describe('when thresholds that are not numbers are set, they will not show on the arc', () => {
-      beforeEach(async () => {
-        createComponent({ thresholds: ['not a number', NaN, undefined] });
-
-        await wrapper.vm.$nextTick();
-        // eslint-disable-next-line jest/no-standalone-expect
-        expect(wrapper).toHaveLoggedVueErrors();
-      });
-
-      it('axis has a single color set', () => {
-        expect(findAxisColor().length).toBe(1);
-      });
-    });
-
-    describe('when custom options are added', () => {
-      it('options get applied on the chart instance', () => {
-        createComponent({ option: { series: [{ min: 30, max: 50 }] } });
-
-        expect(findChartOptions().series[0].min).toBe(30);
-        expect(findChartOptions().series[0].max).toBe(50);
-      });
-
-      describe('options are merged with values set as props', () => {
-        beforeEach(() => {
-          createComponent({
-            min: 10,
-            max: 20,
-            splitNumber: 20,
-            option: { series: [{ min: 30, max: 50 }] },
-          });
-        });
-
-        it('they override props', () => {
-          expect(findChartOptions().series[0].min).toBe(30);
-          expect(findChartOptions().series[0].max).toBe(50);
-        });
-
-        it('they leave values that are not overriden as is', () => {
-          expect(findChartOptions().series[0].splitNumber).toBe(20);
-        });
-      });
-    });
-  });
-});

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

@@ -1,97 +0,0 @@
-import { toolbox } from '../../../utils/charts/story_config';
-import readme from './gauge.md';
-import GlGauge from './gauge.vue';
-
-const template = `
-  <gl-gauge
-    :value="value"
-    :min="min"
-    :max="max"
-    :thresholds="thresholds"
-    :text="text"
-    :splitNumber="splitNumber"
-    :option="option"
-    :height="height"
-  />
-`;
-
-const generateProps = ({
-  value = 48,
-  min = 0,
-  max = 100,
-  text = '',
-  option = {},
-  thresholds = [38, 82],
-  splitNumber = 10,
-  height = null,
-} = {}) => ({
-  option,
-  value,
-  min,
-  max,
-  thresholds,
-  text,
-  splitNumber,
-  height,
-});
-
-const Template = (args, { argTypes }) => ({
-  components: { GlGauge },
-  props: Object.keys(argTypes),
-  template,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const OneThreshold = Template.bind({});
-OneThreshold.args = generateProps({
-  value: 65,
-  thresholds: [85],
-});
-
-export const TwoThresholds = Template.bind({});
-TwoThresholds.args = generateProps({
-  value: 90,
-  thresholds: [60, 85],
-});
-
-export const NoThresholds = Template.bind({});
-NoThresholds.args = generateProps({
-  value: 90,
-  thresholds: [],
-});
-
-export const WithCustomDetailText = Template.bind({});
-WithCustomDetailText.args = generateProps({
-  value: 90,
-  text: '90Mbps',
-  thresholds: [60, 85],
-});
-
-export const WithNaNValues = Template.bind({});
-WithNaNValues.args = generateProps({
-  min: 'not a number value',
-  max: 'not a number value',
-  value: 'not a number value',
-  thresholds: [60, 85],
-});
-
-export const WithToolbox = Template.bind({});
-WithToolbox.args = generateProps({
-  option: {
-    toolbox,
-  },
-});
-
-export default {
-  title: 'charts/gauge-chart',
-  component: GlGauge,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

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

@@ -1,103 +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 HeatMapChart from './heatmap.vue';
-
-let mockChartInstance;
-
-jest.mock('echarts', () => ({
-  getInstanceByDom: () => mockChartInstance,
-}));
-
-describe('heatmap 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(HeatMapChart, {
-      propsData: {
-        options: { series: [] },
-        dataSeries: [],
-        ...props,
-      },
-    });
-
-    emitChartCreated();
-  };
-
-  beforeEach(async () => {
-    mockChartInstance = createMockChartInstance();
-  });
-
-  it('emits `created`, with the chart instance', () => {
-    createComponent();
-
-    expect(wrapper.emitted('created').length).toBe(1);
-    expect(wrapper.emitted('created')[0][0]).toBe(mockChartInstance);
-  });
-
-  describe('tooltip position', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    it('is initialized', () => {
-      expect(findChartTooltip().props('left')).toBe('0');
-      expect(findChartTooltip().props('top')).toBe('0');
-    });
-
-    it('is reset when the xAxis formatter is triggered', () => {
-      const seriesId = 'Series Name0';
-      const value = ['2020-02-10T06:45:26.879Z', 0.002671530922619002];
-      const pixel = [66, 99];
-
-      const params = {
-        seriesData: [{ seriesId, value }],
-      };
-
-      mockChartInstance.convertToPixel.mockReturnValueOnce(pixel);
-
-      getOptions().xAxis.axisPointer.label.formatter(params);
-
-      return wrapper.vm.$nextTick(() => {
-        expect(mockChartInstance.convertToPixel).toHaveBeenCalledWith({ seriesId }, value);
-
-        expect(findChartTooltip().props('left')).toBe(`${pixel[0]}px`);
-        expect(findChartTooltip().props('top')).toBe(`${pixel[1]}px`);
-      });
-    });
-  });
-
-  describe('showTooltip', () => {
-    it('is true by default', async () => {
-      createComponent();
-      await nextTick();
-
-      expect(findChartTooltip().props('show')).toBe(true);
-    });
-
-    it('sets show prop on the tooltip component', async () => {
-      createComponent({ showTooltip: false });
-      await nextTick();
-
-      expect(findChartTooltip().props('show')).toBe(false);
-    });
-  });
-
-  describe('height', () => {
-    expectHeightAutoClasses({
-      createComponent,
-      findContainer: () => wrapper,
-      findChart,
-    });
-  });
-});

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

@@ -1,78 +0,0 @@
-import { GlHeatmap } from '../../../charts';
-import { toolbox } from '../../../utils/charts/story_config';
-import { disableControls } from '../../../utils/stories_utils';
-
-function generateData() {
-  let data = [
-    [5, 0, 5],
-    [2, 5, 1],
-    [3, 2, 0],
-    [5, 3, 4],
-    [0, 4, 10],
-    [0, 5, 4],
-    [0, 6, 6],
-  ];
-  data = data.map((item) => [item[1], item[0], item[2] || '-']);
-  return data;
-}
-
-const template = `
-    <gl-heatmap
-      :data-series="data"
-      :x-axis-labels="xAxisLabels"
-      :y-axis-labels="yAxisLabels"
-      :x-axis-name="xAxisName"
-      :y-axis-name="yAxisName"
-      :options="options"
-      :height="height"
-      :show-tooltip="showTooltip"
-    />
-`;
-
-const generateProps = ({
-  data = generateData(),
-  xAxisLabels = ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
-  yAxisLabels = ['Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon', 'Sun'],
-  xAxisName = 'Hour',
-  yAxisName = 'Day',
-  options = {},
-  height = null,
-  showTooltip = true,
-} = {}) => ({
-  data,
-  xAxisLabels,
-  yAxisLabels,
-  xAxisName,
-  yAxisName,
-  options,
-  height,
-  showTooltip,
-});
-
-const Template = (args, { argTypes }) => ({
-  components: {
-    GlHeatmap,
-  },
-  props: Object.keys(argTypes),
-  template,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const WithToolbox = Template.bind({});
-WithToolbox.args = generateProps({ options: { toolbox } });
-
-export default {
-  title: 'charts/heatmap',
-  component: GlHeatmap,
-  argTypes: {
-    ...disableControls([
-      'dataSeries',
-      'formatTooltipText',
-      'legendAverageText',
-      'legendMaxText',
-      'responsive',
-    ]),
-  },
-};