@gitlab/ui 32.38.0 → 32.42.0

package/src/components/charts/area/area.vue

@@ -345,8 +345,9 @@ export default {
       :left="annotationsTooltipPosition.left"
       placement="bottom"
     >
-      <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-      <div slot="title">{{ annotationsTooltipTitle }}</div>
+      <template #title>
+        <div>{{ annotationsTooltipTitle }}</div>
+      </template>
       <div>{{ annotationsTooltipContent }}</div>
     </chart-tooltip>
     <chart-tooltip
@@ -359,19 +360,15 @@ export default {
       :top="dataTooltipPosition.top"
       :left="dataTooltipPosition.left"
     >
-      <template v-if="formatTooltipText">
-        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-        <slot slot="title" name="tooltip-title"></slot>
-        <slot name="tooltip-content"></slot>
-      </template>
-      <template v-else>
-        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-        <div slot="title">
+      <template #title>
+        <slot v-if="formatTooltipText" name="tooltip-title"></slot>
+        <template v-else>
           {{ dataTooltipTitle }}
           <template v-if="options.xAxis.name">({{ options.xAxis.name }})</template>
-        </div>
-        <tooltip-default-format :tooltip-content="dataTooltipContent" />
+        </template>
       </template>
+      <slot v-if="formatTooltipText" name="tooltip-content"></slot>
+      <tooltip-default-format v-else :tooltip-content="dataTooltipContent" />
     </chart-tooltip>
     <chart-legend
       v-if="compiledOptions"

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

@@ -1,18 +1,10 @@
 import { shallowMount } from '@vue/test-utils';
 import Chart from '../chart/chart.vue';
 import BarChart from './bar.vue';
-import ChartTooltip from '~/components/charts/tooltip/tooltip.vue';
 import TooltipDefaultFormat from '~/components/shared_components/charts/tooltip_default_format.vue';
+import { createMockChartInstance } from '~helpers/chart_stubs';
 
-const mockChartInstance = {
-  getDom: () => {
-    return {
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn(),
-    };
-  },
-  convertToPixel: jest.fn(),
-};
+let mockChartInstance;
 
 jest.mock('echarts', () => ({
   getInstanceByDom: () => mockChartInstance,
@@ -34,7 +26,6 @@ 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);
 
@@ -47,8 +38,8 @@ describe('Bar chart component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
+  beforeEach(() => {
+    mockChartInstance = createMockChartInstance();
   });
 
   describe('when mounted', () => {
@@ -123,19 +114,6 @@ describe('Bar chart component', () => {
           );
         });
       });
-
-      it('render accurate tooltip title and content', () => {
-        const expectedTooltipTitle = `${labelParams.value} (${defaultChartProps.yAxisTitle})`;
-
-        getOptions().yAxis.axisPointer.label.formatter(labelParams);
-        return wrapper.vm.$nextTick(() => {
-          const tooltipTextContent = findChartTooltip().element.textContent;
-
-          expect(tooltipTextContent).toContain(expectedTooltipTitle);
-          expect(tooltipTextContent).toContain(defaultChartProps.xAxisTitle);
-          expect(tooltipTextContent).toContain(labelParams.seriesData[0].data[0]);
-        });
-      });
     });
   });
 });

package/src/components/charts/bar/bar.vue

@@ -238,8 +238,9 @@ export default {
       :top="tooltipPosition.top"
       :left="tooltipPosition.left"
     >
-      <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-      <div slot="title">{{ tooltipTitle }} ({{ yAxisTitle }})</div>
+      <template #title>
+        <div>{{ tooltipTitle }} ({{ yAxisTitle }})</div>
+      </template>
       <tooltip-default-format :tooltip-content="tooltipContent" />
     </chart-tooltip>
   </div>

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

@@ -25,10 +25,6 @@ describe('chart component', () => {
     wrapper = shallowMount(...mountArgs);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('initializes chart using $refs.chart', () => {
     expect(echarts.init).toHaveBeenCalledWith(
       wrapper.findComponent({ ref: 'chart' }).element,

package/src/components/charts/column/column.vue

@@ -207,8 +207,9 @@ export default {
       :top="tooltipPosition.top"
       :left="tooltipPosition.left"
     >
-      <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-      <div slot="title">{{ tooltipTitle }} ({{ xAxisTitle }})</div>
+      <template #title>
+        <div>{{ tooltipTitle }} ({{ xAxisTitle }})</div>
+      </template>
       <tooltip-default-format :tooltip-content="tooltipContent" />
     </chart-tooltip>
   </div>

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

@@ -6,6 +6,13 @@ import {
 } from '../../../utils/charts/mock_data';
 import Chart from '../chart/chart.vue';
 import ColumnChart from './column.vue';
+import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
+
+let mockChartInstance;
+
+jest.mock('echarts', () => ({
+  getInstanceByDom: () => mockChartInstance,
+}));
 
 describe('column chart component', () => {
   const defaultChartProps = {
@@ -16,40 +23,33 @@ describe('column chart component', () => {
   };
   let wrapper;
 
-  const TooltipStub = {
-    name: 'chart-tooltip',
-    template: '<div />',
-  };
-
   const chartItemClickedSpy = jest.fn();
   const findChart = () => wrapper.findComponent(Chart);
+  const findTooltip = () => wrapper.findComponent(ChartTooltipStub);
+  const getChartOptions = () => findChart().props('options');
 
-  const factory = (props = defaultChartProps) => {
+  const factory = (props = defaultChartProps, slots) => {
     wrapper = shallowMount(ColumnChart, {
       propsData: { ...props },
       stubs: {
-        chart: true,
-        'chart-tooltip': TooltipStub,
+        'chart-tooltip': ChartTooltipStub,
       },
       listeners: {
         chartItemClicked: chartItemClickedSpy,
       },
+      data() {
+        return {
+          chart: mockChartInstance,
+        };
+      },
+      slots,
     });
-    const chart = {
-      getDom: jest.fn(() => ({
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-      })),
-    };
-    wrapper.setData({ chart });
   };
 
   beforeEach(() => {
-    factory();
-  });
+    mockChartInstance = createMockChartInstance();
 
-  afterEach(() => {
-    wrapper.destroy();
+    factory();
   });
 
   it('emits "created" when onCreated is called', () => {
@@ -104,4 +104,20 @@ describe('column chart component', () => {
       expect(chart.props('options').yAxis[1].name).toEqual(secondaryDataTitle);
     });
   });
+
+  describe('tooltip', () => {
+    it('displays the generic tooltip content', async () => {
+      const params = {
+        seriesData: [{ seriesIndex: '0', seriesName: 'Full', value: ['Mary', 934] }],
+      };
+
+      getChartOptions().xAxis.axisPointer.label.formatter(params);
+
+      await wrapper.vm.$nextTick();
+
+      const expectedTooltipTitle = `${params.seriesData[0].value[0]} (${defaultChartProps.xAxisTitle})`;
+
+      expect(findTooltip().text()).toContain(expectedTooltipTitle);
+    });
+  });
 });

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

@@ -13,6 +13,7 @@ const template = `
     :option="option"
     :y-axis-title="yAxisTitle"
     :x-axis-title="xAxisTitle"
+    data-testid="discrete-scatter-chart"
   />
 `;
 

package/src/components/charts/discrete_scatter/discrete_scatter.vue

@@ -174,16 +174,13 @@ export default {
       :top="tooltipPosition.top"
       :left="tooltipPosition.left"
     >
-      <template v-if="formatTooltipText">
-        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-        <slot slot="title" name="tooltip-title"></slot>
-        <slot name="tooltip-content"></slot>
+      <template #title>
+        <slot name="tooltip-title">{{ tooltipTitle }} ({{ xAxisTitle }})</slot>
       </template>
-      <template v-else>
-        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-        <div slot="title">{{ tooltipTitle }} ({{ xAxisTitle }})</div>
+
+      <slot name="tooltip-content">
         <tooltip-default-format :tooltip-content="tooltipContent" />
-      </template>
+      </slot>
     </chart-tooltip>
   </div>
 </template>

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

@@ -1,8 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
-
 import { gaugeSafeHues, gaugeWarningHue } from '../../../utils/charts/theme';
 import Chart from '../chart/chart.vue';
 import GlGauge from './gauge.vue';
+import { createMockChartInstance } from '~helpers/chart_stubs';
 
 const placeholder = '--';
 
@@ -20,7 +20,6 @@ jest.mock('echarts', () => ({
 
 describe('gauge component', () => {
   let wrapper;
-  let options;
 
   const findChart = () => wrapper.findComponent(Chart);
   const findChartOptions = () => findChart().props('options');
@@ -38,28 +37,7 @@ describe('gauge component', () => {
   };
 
   beforeEach(() => {
-    options = {
-      series: [],
-    };
-
-    mockChartInstance = {
-      getDom: () => {
-        return {
-          addEventListener: jest.fn(),
-          removeEventListener: jest.fn(),
-        };
-      },
-      on: jest.fn(),
-      off: jest.fn(),
-      convertToPixel: jest.fn(),
-      getOption: () => {
-        return options;
-      },
-    };
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
+    mockChartInstance = createMockChartInstance();
   });
 
   it('emits `created`, with the chart instance', () => {

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

@@ -4,6 +4,7 @@ import Chart from '../chart/chart.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';
 import HeatMapChart from './heatmap.vue';
 import { TOOLTIP_LEFT_OFFSET } from '~/utils/charts/constants';
+import { createMockChartInstance } from '~helpers/chart_stubs';
 
 let mockChartInstance;
 
@@ -13,7 +14,6 @@ jest.mock('echarts', () => ({
 
 describe('heatmap component', () => {
   let wrapper;
-  let options;
 
   const findChart = () => wrapper.findComponent(Chart);
   const findChartTooltip = () => wrapper.findComponent(ChartTooltip);
@@ -22,33 +22,16 @@ describe('heatmap component', () => {
   const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
 
   beforeEach(() => {
-    options = {
-      series: [],
-    };
-
-    mockChartInstance = {
-      getDom: () => {
-        return {
-          addEventListener: jest.fn(),
-          removeEventListener: jest.fn(),
-        };
-      },
-      convertToPixel: jest.fn(),
-      getOption: () => {
-        return options;
-      },
-    };
-
-    wrapper = shallowMount(HeatMapChart, { propsData: { options, dataSeries: [] } });
+    mockChartInstance = createMockChartInstance();
+
+    wrapper = shallowMount(HeatMapChart, {
+      propsData: { options: { series: [] }, dataSeries: [] },
+    });
     emitChartCreated();
 
     return wrapper.vm.$nextTick();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('emits `created`, with the chart instance', () => {
     expect(wrapper.emitted('created').length).toBe(1);
     expect(wrapper.emitted('created')[0][0]).toBe(mockChartInstance);

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

@@ -2,16 +2,13 @@ import { shallowMount } from '@vue/test-utils';
 import Chart from '../chart/chart.vue';
 import GlChartSeriesLabel from '../series_label/series_label.vue';
 import Legend from './legend.vue';
+import { createMockChartInstance } from '~helpers/chart_stubs';
+
+let mockChartInstance;
 
 jest.mock('echarts', () => ({
-  getInstanceByDom: jest.fn((instance) => instance),
-  init: jest.fn(() => ({
-    dispatchAction: jest.fn(),
-    resize: jest.fn(),
-    setOption: jest.fn(),
-    on: jest.fn(),
-    off: jest.fn(),
-  })),
+  getInstanceByDom: () => mockChartInstance,
+  init: () => mockChartInstance,
   registerTheme: jest.fn(),
 }));
 
@@ -58,24 +55,21 @@ describe('chart legend component', () => {
     legendWrapper = shallowMount(Legend, {
       propsData: {
         ...propsData,
-        chart,
+        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();
   });
 
-  afterEach(() => {
-    chartWrapper.destroy();
-    legendWrapper.destroy();
-  });
-
   it('renders the legend with no errors', () => {
     expect(legendWrapper.exists()).toBe(true);
   });

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

@@ -6,6 +6,8 @@ import LineChart from './line.vue';
 
 import { LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '~/utils/charts/constants';
 
+import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
+
 let mockChartInstance;
 
 jest.mock('echarts', () => ({
@@ -23,36 +25,16 @@ describe('line component', () => {
 
   const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
 
-  const createShallowWrapper = (props = {}) => {
+  const createShallowWrapper = (props = {}, mountOptions = {}) => {
     wrapper = shallowMount(LineChart, {
       propsData: { option, data: [], ...props },
+      ...mountOptions,
     });
     emitChartCreated();
   };
 
   beforeEach(() => {
-    option = {
-      series: [],
-    };
-
-    mockChartInstance = {
-      getDom: () => {
-        return {
-          addEventListener: jest.fn(),
-          removeEventListener: jest.fn(),
-        };
-      },
-      on: jest.fn(),
-      off: jest.fn(),
-      convertToPixel: jest.fn(),
-      getOption: () => {
-        return option;
-      },
-    };
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
+    mockChartInstance = createMockChartInstance();
   });
 
   it('emits `created`, with the chart instance', async () => {
@@ -128,14 +110,21 @@ describe('line component', () => {
         },
       };
 
-      createShallowWrapper({
-        annotations: [
-          {
-            min: '',
-            max: '',
+      createShallowWrapper(
+        {
+          annotations: [
+            {
+              min: '',
+              max: '',
+            },
+          ],
+        },
+        {
+          stubs: {
+            'chart-tooltip': ChartTooltipStub,
           },
-        ],
-      });
+        }
+      );
 
       wrapper.vm.onChartDataPointMouseOver(params);
 

package/src/components/charts/line/line.vue

@@ -339,8 +339,9 @@ export default {
       :left="annotationsTooltipPosition.left"
       placement="bottom"
     >
-      <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-      <div slot="title">{{ annotationsTooltipTitle }}</div>
+      <template #title>
+        <div>{{ annotationsTooltipTitle }}</div>
+      </template>
       <div>{{ annotationsTooltipContent }}</div>
     </chart-tooltip>
     <chart-tooltip

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

@@ -26,10 +26,6 @@ describe('GlSingleStat', () => {
 
   const findIemByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('displays the correct default data', () => {
     beforeEach(() => createWrapper());
 

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

@@ -1,29 +1,15 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Chart from '../chart/chart.vue';
-import ChartTooltip from '../tooltip/tooltip.vue';
 import SparklineChart from './sparkline.vue';
 import { waitForAnimationFrame } from '~/utils/test_utils';
+import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
 
-const mockResize = jest.fn();
-const mockChartInstance = {
-  subscribedEvents: {},
-  getDom: () => {},
-  convertToPixel: () => [],
-  resize: mockResize,
-};
+let mockChartInstance;
 
-// echarts need to be mocked to prevent prop-validation in chart-tooltips to fail
 jest.mock('echarts', () => ({
   getInstanceByDom: () => mockChartInstance,
 }));
 
-jest.mock('~/utils/charts/theme', () => ({
-  sparkline: {
-    variants: { foo: 'foo', bar: 'bar' },
-    defaultVariant: 'foo',
-  },
-}));
-
 let triggerResize = () => {};
 jest.mock('~/directives/resize_observer/resize_observer', () => ({
   GlResizeObserverDirective: {
@@ -46,19 +32,23 @@ describe('sparkline chart component', () => {
         variant: null,
       },
       scopedSlots: { latestSeriesEntry: jest.fn() },
+      stubs: {
+        'chart-tooltip': ChartTooltipStub,
+      },
     };
 
     wrapper = shallowMount(SparklineChart, componentOptions);
   };
 
   // helpers
+  const getByTestId = (id) => wrapper.find(`[data-testid="${id}"]`);
   const getChart = () => wrapper.findComponent(Chart);
 
-  const getTooltip = () => wrapper.findComponent(ChartTooltip);
-  const getTooltipTitle = () => getTooltip().find('.js-tooltip-title');
-  const getTooltipContent = () => getTooltip().find('.js-tooltip-content');
+  const getTooltip = () => wrapper.findComponent(ChartTooltipStub);
+  const getTooltipTitle = () => getByTestId('tooltip-title');
+  const getTooltipContent = () => getByTestId('tooltip-content');
 
-  const getLastYValue = () => wrapper.find('.js-last-y-value');
+  const getLastYValue = () => getByTestId('last-y-value');
 
   const getChartOptions = () => getChart().props('options');
   const getXAxisLabelFormatter = () => {
@@ -76,18 +66,18 @@ describe('sparkline chart component', () => {
   const emitChartCreated = () => getChart().vm.$emit('created', mockChartInstance);
 
   beforeEach(() => {
+    mockChartInstance = createMockChartInstance();
     factory();
     // needs to run after every mount, or the chart-instance is `null` and `beforeDestroy` throws
     emitChartCreated();
   });
 
   afterEach(() => {
-    wrapper.destroy();
     jest.clearAllMocks();
   });
 
   it('emits `chartCreated`, which passes on the chart instance', () => {
-    expect(wrapper.emitted('chartCreated').length).toBe(1);
+    expect(wrapper.emitted('chartCreated')).toHaveLength(1);
     expect(wrapper.emitted('chartCreated')[0][0]).toBe(mockChartInstance);
   });
 
@@ -153,7 +143,7 @@ describe('sparkline chart component', () => {
     expect(getTooltip().attributes('show')).toBeFalsy();
   });
 
-  it('adds the right content to the tooltip', () => {
+  it('adds the right content to the tooltip', async () => {
     const xValue = 'foo';
     const yValue = 'bar';
     const mockData = { seriesData: [{ data: [xValue, yValue] }] };
@@ -163,10 +153,9 @@ describe('sparkline chart component', () => {
     expect(getTooltipTitle().text()).toBe('');
     expect(getTooltipContent().text()).toBe('');
 
-    return waitForAnimationFrame().then(() => {
-      expect(getTooltipTitle().text()).toBe(xValue);
-      expect(getTooltipContent().text()).toBe(yValue);
-    });
+    await waitForAnimationFrame();
+    expect(getTooltipTitle().text()).toBe(xValue);
+    expect(getTooltipContent().text()).toBe(yValue);
   });
 
   it(`shows the last entry's y-value per default`, async () => {
@@ -182,13 +171,12 @@ describe('sparkline chart component', () => {
     expect(getLastYValue().text()).toBe(latestEntryYValue);
   });
 
-  it(`does not show the last entry's y-value if 'showLastYValue' is false`, () => {
+  it(`does not show the last entry's y-value if 'showLastYValue' is false`, async () => {
     expect(getLastYValue().exists()).toBe(true);
 
     wrapper.setProps({ showLastYValue: false });
 
-    return wrapper.vm.$nextTick().then(() => {
-      expect(getLastYValue().exists()).toBe(false);
-    });
+    await wrapper.vm.$nextTick();
+    expect(getLastYValue().exists()).toBe(false);
   });
 });