@gitlab/ui 80.13.1 → 80.14.0

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

@@ -1,217 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { variantCssColorMap } from '../../../utils/constants';
-import GlAnimatedNumber from '../../utilities/animated_number/animated_number.vue';
-import GlSingleStat from './single_stat.vue';
-
-const title = 'Singe stat title';
-const value = '100';
-const unit = '%';
-const titleIcon = 'hourglass';
-const titleIconClass = 'title-icon-class';
-const metaIcon = 'heart';
-const metaText = 'Success';
-const variant = 'info';
-
-describe('GlSingleStat', () => {
-  let wrapper;
-
-  const createWrapper = (props = {}) => {
-    wrapper = shallowMount(GlSingleStat, {
-      propsData: {
-        title,
-        value,
-        ...props,
-      },
-    });
-  };
-
-  const findItemByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
-  const findAnimatedNumber = () => wrapper.findComponent(GlAnimatedNumber);
-
-  describe('displays the correct default data', () => {
-    beforeEach(() => createWrapper());
-
-    describe.each`
-      element                 | testId                  | shouldDisplay | expected
-      ${'metric value'}       | ${'displayValue'}       | ${true}       | ${value}
-      ${'non animated value'} | ${'non-animated-value'} | ${true}       | ${value}
-      ${'metric title'}       | ${'title-text'}         | ${true}       | ${title}
-      ${'metric value units'} | ${'unit'}               | ${false}      | ${null}
-      ${'metric title icon'}  | ${'title-icon'}         | ${false}      | ${null}
-      ${'meta icon'}          | ${'meta-icon'}          | ${false}      | ${null}
-      ${'meta badge'}         | ${'meta-badge'}         | ${false}      | ${null}
-    `('for the $element', ({ shouldDisplay, testId, expected, element }) => {
-      it(`${shouldDisplay ? 'displays' : "doesn't display"} the ${element}`, () => {
-        const el = findItemByTestId(testId);
-
-        expect(el.exists()).toBe(shouldDisplay);
-
-        if (shouldDisplay) expect(el.text()).toBe(expected);
-      });
-    });
-  });
-
-  describe('shouldAnimate', () => {
-    it.each`
-      propValue | shouldUseAnimatedComponent
-      ${'abc'}  | ${false}
-      ${'123'}  | ${true}
-    `(
-      'renders the correct display type for $propValue',
-      ({ propValue, shouldUseAnimatedComponent }) => {
-        createWrapper({ value: propValue, shouldAnimate: true });
-
-        const el = findAnimatedNumber();
-        expect(el.exists()).toBe(shouldUseAnimatedComponent);
-      }
-    );
-
-    describe('units visibility', () => {
-      it.each`
-        display    | event          | expected
-        ${'hides'} | ${'animating'} | ${true}
-        ${'shows'} | ${'animated'}  | ${false}
-      `('$display the units when $event', async ({ event, expected }) => {
-        createWrapper({ unit, shouldAnimate: true });
-
-        findAnimatedNumber().vm.$emit(event);
-
-        await wrapper.vm.$nextTick();
-
-        expect(findItemByTestId('unit').classes('gl-opacity-0!')).toBe(expected);
-      });
-    });
-  });
-
-  describe('optional data', () => {
-    describe('meta information', () => {
-      describe.each`
-        scenario                                    | mockData
-        ${'with only a meta icon specified'}        | ${{ metaIcon }}
-        ${'with a meta icon and variant specified'} | ${{ metaIcon, variant }}
-      `('$scenario', ({ mockData }) => {
-        beforeEach(() => createWrapper(mockData));
-
-        it('displays a standalone icon', () => {
-          const el = findItemByTestId('meta-icon');
-          const variantSpecified = Object.keys(mockData).includes('variant');
-
-          expect(el.exists()).toBe(true);
-          expect(el.props('name')).toBe(metaIcon);
-          expect(el.classes()).toContain(
-            variantSpecified ? variantCssColorMap[variant] : variantCssColorMap.muted
-          );
-        });
-
-        it('does not display a badge', () => {
-          expect(findItemByTestId('meta-badge').exists()).toBe(false);
-        });
-      });
-
-      describe.each`
-        scenario                                          | mockData
-        ${'with only meta text specified'}                | ${{ metaText }}
-        ${'with meta text and variant specified'}         | ${{ metaText, variant }}
-        ${'with a meta icon and text specified'}          | ${{ metaIcon, metaText }}
-        ${'with a meta icon, text and variant specified'} | ${{ metaIcon, metaText, variant }}
-      `('$scenario', ({ mockData }) => {
-        beforeEach(() => createWrapper(mockData));
-
-        it("doesn't display a standalone icon", () => {
-          expect(findItemByTestId('meta-icon').exists()).toBe(false);
-        });
-
-        it('displays a badge', () => {
-          const badge = findItemByTestId('meta-badge');
-          const iconSpecified = Object.keys(mockData).includes('metaIcon');
-          const variantSpecified = Object.keys(mockData).includes('variant');
-
-          expect(badge.exists()).toBe(true);
-          expect(badge.text()).toBe(metaText);
-          expect(badge.props('icon')).toBe(iconSpecified ? metaIcon : null);
-          expect(badge.props('variant')).toBe(variantSpecified ? variant : 'muted');
-        });
-      });
-    });
-
-    describe.each`
-      element                 | testId          | mockData
-      ${'metric value units'} | ${'unit'}       | ${{ unit }}
-      ${'metric title icon'}  | ${'title-icon'} | ${{ titleIcon }}
-    `('$element', ({ testId, mockData }) => {
-      beforeEach(() => createWrapper(mockData));
-
-      it('displays when specified', () => {
-        const el = findItemByTestId(testId);
-
-        expect(el.exists()).toBe(true);
-      });
-    });
-
-    describe('`titleIconClass` Prop', () => {
-      it.each`
-        classes
-        ${titleIconClass}
-        ${[titleIconClass]}
-        ${{ [titleIconClass]: true }}
-      `(
-        'correctly adds classes to title icon when `titleIconClass` prop is $classes',
-        ({ classes }) => {
-          createWrapper({
-            titleIcon,
-            titleIconClass: classes,
-          });
-
-          expect(findItemByTestId('title-icon').classes()).toEqual(
-            expect.arrayContaining(['title-icon-class'])
-          );
-        }
-      );
-    });
-
-    describe.each([true, false])(`when the \`useDelimiters\` prop is %s`, (useDelimiters) => {
-      const initialValue = '100000.12';
-
-      it('should render the value as expected when not animated', () => {
-        createWrapper({
-          value: initialValue,
-          shouldAnimate: false,
-          useDelimiters,
-        });
-
-        const displayValue = useDelimiters ? '100,000.12' : initialValue;
-
-        expect(findItemByTestId('non-animated-value').text()).toBe(displayValue);
-      });
-
-      it('should pass the value and delimiter setting to `GlAnimatedNumber`', () => {
-        createWrapper({
-          value: initialValue,
-          shouldAnimate: true,
-          animationDecimalPlaces: 2,
-          useDelimiters,
-        });
-
-        expect(findAnimatedNumber().props()).toMatchObject({
-          number: Number(initialValue),
-          decimalPlaces: 2,
-          useDelimiters,
-        });
-      });
-
-      it('should keep all the decimal points defined by the value', () => {
-        const decimalValue = '100000.000';
-
-        createWrapper({
-          value: decimalValue,
-          shouldAnimate: false,
-          useDelimiters,
-        });
-
-        const displayValue = useDelimiters ? '100,000.000' : decimalValue;
-
-        expect(findItemByTestId('non-animated-value').text()).toBe(displayValue);
-      });
-    });
-  });
-});

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

@@ -1,103 +0,0 @@
-import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
-import { GlSingleStat } from '../../../charts';
-import { badgeVariantOptions } from '../../../utils/constants';
-import readme from './single_stat.md';
-
-const generateProps = ({
-  variant = GlSingleStat.props.variant.default,
-  title = 'Single stat',
-  value = '100',
-  unit = '',
-  useDelimiters = false,
-  metaText = '',
-  metaIcon = null,
-  titleIcon = null,
-  shouldAnimate = false,
-  animationDecimalPlaces = 0,
-  titleIconClass = '',
-} = {}) => ({
-  variant,
-  title,
-  value,
-  unit,
-  useDelimiters,
-  metaText,
-  metaIcon,
-  titleIcon,
-  shouldAnimate,
-  animationDecimalPlaces,
-  titleIconClass,
-});
-
-const metaText = 'Super fast';
-const metaIcon = 'check-circle';
-const titleIcon = 'hourglass';
-
-const Template = (args, { argTypes }) => ({
-  components: {
-    GlSingleStat,
-  },
-  props: Object.keys(argTypes),
-  template: `
-    <gl-single-stat
-      :title="title"
-      :value="value"
-      :unit="unit"
-      :use-delimiters="useDelimiters"
-      :variant="variant"
-      :meta-text="metaText"
-      :meta-icon="metaIcon"
-      :title-icon="titleIcon"
-      :should-animate="shouldAnimate"
-      :animation-decimal-places="animationDecimalPlaces"
-      :title-icon-class="titleIconClass"
-    />`,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const WithBadge = Template.bind({});
-WithBadge.args = generateProps({ metaText, metaIcon });
-
-export const WithMetaIcon = Template.bind({});
-WithMetaIcon.args = generateProps({ metaIcon });
-
-export const WithTitleIcon = Template.bind({});
-WithTitleIcon.args = generateProps({ titleIcon });
-
-export const WithDelimiters = Template.bind({});
-WithDelimiters.args = generateProps({ value: '10000', useDelimiters: true });
-
-export default {
-  title: 'charts/single-stat',
-  component: GlSingleStat,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      options: Object.values(badgeVariantOptions),
-      control: 'select',
-    },
-    metaIcon: {
-      options: iconSpriteInfo.icons,
-      control: 'select',
-    },
-    titleIcon: {
-      options: iconSpriteInfo.icons,
-      control: 'select',
-    },
-    unit: {
-      control: 'text',
-    },
-    useDelimiters: {
-      control: 'boolean',
-      description: 'Requires the `value` property to be a valid Number or convertable to one',
-    },
-  },
-};

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

@@ -1,220 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { waitForAnimationFrame } from '~/utils/test_utils';
-import { HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES } from '~/utils/charts/constants';
-import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
-import { expectHeightAutoClasses } from '~helpers/chart_height';
-import Chart from '../chart/chart.vue';
-import SparklineChart from './sparkline.vue';
-
-let mockChartInstance;
-
-jest.mock('echarts', () => ({
-  getInstanceByDom: () => mockChartInstance,
-  graphic: {
-    LinearGradient: jest.fn(),
-  },
-}));
-
-let triggerResize = () => {};
-jest.mock('~/directives/resize_observer/resize_observer', () => ({
-  GlResizeObserverDirective: {
-    bind(el, { value: resizeHandler }) {
-      triggerResize = () => resizeHandler();
-    },
-  },
-}));
-
-describe('sparkline chart component', () => {
-  let wrapper;
-  let componentOptions;
-  const factory = (props = {}) => {
-    componentOptions = {
-      propsData: {
-        data: [[]],
-        variant: null,
-        ...props,
-      },
-      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 getChartContainer = () => getByTestId('chart-container');
-
-  const getTooltip = () => wrapper.findComponent(ChartTooltipStub);
-  const getTooltipTitle = () => getByTestId('tooltip-title');
-  const getTooltipContent = () => getByTestId('tooltip-content');
-
-  const getLastYValue = () => getByTestId('last-y-value');
-
-  const getChartOptions = () => getChart().props('options');
-  const getXAxisLabelFormatter = () => {
-    const {
-      xAxis: {
-        axisPointer: {
-          label: { formatter },
-        },
-      },
-    } = getChartOptions();
-
-    return formatter;
-  };
-
-  const validateSmooth = (smooth) => SparklineChart.props.smooth.validator(smooth);
-
-  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(() => {
-    jest.clearAllMocks();
-  });
-
-  it('emits `chartCreated`, which passes on the chart instance', () => {
-    expect(wrapper.emitted('chartCreated')).toHaveLength(1);
-    expect(wrapper.emitted('chartCreated')[0][0]).toBe(mockChartInstance);
-  });
-
-  it('renders a chart', () => {
-    expect(wrapper.findComponent(Chart).exists()).toBe(true);
-  });
-
-  it('has a default height of 50', () => {
-    expect(getChart().props('height')).toBe(50);
-  });
-
-  it('accepts a custom height', async () => {
-    const newHeight = 1000;
-    wrapper.setProps({ height: newHeight });
-
-    expect(getChart().props('height')).not.toBe(newHeight);
-
-    await wrapper.vm.$nextTick();
-
-    expect(getChart().props('height')).toBe(newHeight);
-  });
-
-  it('triggers the chart to resize when the containing elements size changes', () => {
-    expect(mockChartInstance.resize).toHaveBeenCalledTimes(0);
-
-    triggerResize();
-
-    expect(mockChartInstance.resize).toHaveBeenCalledTimes(1);
-  });
-
-  it('includes a chart tooltip', () => {
-    expect(getTooltip().exists()).toBe(true);
-  });
-
-  it('displays the given tooltip label', async () => {
-    const tooltipLabel = 'foo';
-
-    wrapper.setProps({ tooltipLabel: 'foo' });
-
-    await wrapper.vm.$nextTick();
-    expect(getTooltipContent().text()).toContain(tooltipLabel);
-  });
-
-  it('adds the right content to the tooltip', async () => {
-    const xValue = 'foo';
-    const yValue = 'bar';
-    const mockData = { seriesData: [{ data: [xValue, yValue] }] };
-
-    getXAxisLabelFormatter()(mockData);
-
-    expect(getTooltipTitle().text()).toBe('');
-    expect(getTooltipContent().text()).toBe('');
-
-    await waitForAnimationFrame();
-    expect(getTooltipTitle().text()).toBe(xValue);
-    expect(getTooltipContent().text()).toBe(yValue);
-  });
-
-  it(`shows the last entry's y-value per default`, async () => {
-    const data = [
-      ['foo', 'bar'],
-      ['baz', 'qux'],
-    ];
-    const latestEntryYValue = data[1][1];
-
-    wrapper.setProps({ data });
-
-    await wrapper.vm.$nextTick();
-    expect(getLastYValue().text()).toBe(latestEntryYValue);
-  });
-
-  it(`does not show the last entry's y-value if 'showLastYValue' is false`, async () => {
-    expect(getLastYValue().exists()).toBe(true);
-
-    wrapper.setProps({ showLastYValue: false });
-
-    await wrapper.vm.$nextTick();
-    expect(getLastYValue().exists()).toBe(false);
-    expect(getChartOptions().series[0].markPoint).toBe(undefined);
-  });
-
-  it('gradient will set the series itemStyle color', async () => {
-    wrapper.setProps({ gradient: ['red', 'green'] });
-
-    await wrapper.vm.$nextTick();
-
-    expect(getChartOptions().series[0].itemStyle.color).toBeDefined();
-  });
-
-  describe('smooth', () => {
-    it.each`
-      value  | expected
-      ${-1}  | ${false}
-      ${0}   | ${true}
-      ${0.5} | ${true}
-      ${1}   | ${true}
-      ${1.1} | ${false}
-    `(`validate $value`, ({ value, expected }) => {
-      expect(validateSmooth(value)).toBe(expected);
-    });
-
-    it('sets the series smoothing', async () => {
-      const smooth = 0.75;
-      wrapper.setProps({ smooth });
-
-      await wrapper.vm.$nextTick();
-
-      expect(getChartOptions().series[0].smooth).toBe(smooth);
-    });
-  });
-
-  describe('height', () => {
-    expectHeightAutoClasses({
-      createComponent: factory,
-      findContainer: getChartContainer,
-      findChart: getChart,
-      classes: HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES,
-    });
-
-    describe('sparkline root element style', () => {
-      it('does not set the root element style to height full', () => {
-        factory();
-
-        expect(wrapper.element.classList.value).not.toContain('gl-h-full');
-      });
-
-      it('set the root element style to height full when height is "auto"', () => {
-        factory({ height: 'auto' });
-
-        expect(wrapper.element.classList.value).toContain('gl-h-full');
-      });
-    });
-  });
-});

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

@@ -1,85 +0,0 @@
-import { GlSparklineChart } from '../../../charts';
-import { colorFromDefaultPalette } from '../../../utils/charts/theme';
-import { makeContainer } from '../../../utils/story_decorators/container';
-import readme from './sparkline.md';
-
-const chartData = [
-  ['Mon', 10],
-  ['Tue', 15],
-  ['Wed', 9],
-  ['Thu', 22],
-  ['Fri', 29],
-  ['Sat', 20],
-  ['Sun', 18],
-];
-
-const customGradient = [
-  colorFromDefaultPalette(0),
-  colorFromDefaultPalette(1),
-  colorFromDefaultPalette(2),
-];
-
-const generateProps = ({
-  data = chartData,
-  height = 50,
-  tooltipLabel = 'tooltipLabel',
-  showLastYValue = true,
-  gradient,
-  smooth,
-} = {}) => ({
-  data,
-  height,
-  tooltipLabel,
-  showLastYValue,
-  gradient,
-  smooth,
-});
-
-const Template = (args) => ({
-  components: { GlSparklineChart },
-  props: Object.keys(args),
-  template: `
-    <gl-sparkline-chart
-      :data="data"
-      :height="height"
-      :tooltip-label="tooltipLabel"
-      :show-last-y-value="showLastYValue"
-      :gradient="gradient"
-      :smooth="smooth"
-    />
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const WithoutLastYValue = Template.bind({});
-WithoutLastYValue.args = generateProps({ showLastYValue: false });
-WithoutLastYValue.tags = ['skip-visual-test'];
-
-export const WithChartColorGradient = Template.bind({});
-WithChartColorGradient.args = generateProps({ gradient: customGradient });
-
-export const WithSmoothing = Template.bind({});
-WithSmoothing.args = generateProps({ smooth: 0.5 });
-WithSmoothing.tags = ['skip-visual-test'];
-
-export const AutoHeight = Template.bind({});
-Object.assign(AutoHeight, {
-  args: generateProps({
-    height: 'auto',
-  }),
-  decorators: [makeContainer({ height: '300px' })],
-});
-
-export default {
-  title: 'charts/sparkline-chart',
-  component: GlSparklineChart,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};