@gitlab/ui 80.13.1 → 80.14.0

package/src/components/experimental/experiment_badge/experiment_badge.spec.js

@@ -1,77 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import GlBadge from '../../base/badge/badge.vue';
-import GlPopover from '../../base/popover/popover.vue';
-import GlLink from '../../base/link/link.vue';
-import GlSprintf from '../../utilities/sprintf/sprintf.vue';
-import GlExperimentBadge, { i18n } from './experiment_badge.vue';
-
-jest.mock('lodash/uniqueId', () => () => 'fakeUniqueId');
-
-describe('GlExperimentBadge', () => {
-  let wrapper;
-
-  const findBadge = () => wrapper.findComponent(GlBadge);
-  const findPopover = () => wrapper.findComponent(GlPopover);
-  const findHelpLink = () => wrapper.findComponent(GlLink);
-
-  const createComponent = (props = {}) => {
-    wrapper = shallowMount(GlExperimentBadge, {
-      propsData: {
-        ...props,
-      },
-      stubs: {
-        GlSprintf,
-      },
-    });
-  };
-
-  beforeEach(() => {
-    createComponent();
-  });
-
-  it('renders main components', () => {
-    expect(findBadge().exists()).toBe(true);
-    expect(findPopover().exists()).toBe(true);
-  });
-
-  it('correctly sets the placement of the popover', () => {
-    const popoverPlacement = 'right';
-    createComponent({ popoverPlacement });
-    expect(findPopover().props('placement')).toBe(popoverPlacement);
-  });
-
-  it('sets the link to the help page if passed', () => {
-    const helpPageUrl = 'https://gitlab.com';
-    createComponent({ helpPageUrl });
-    expect(findHelpLink().attributes('href')).toBe(helpPageUrl);
-  });
-
-  it('generates the unique ID to connect the button and the popover', () => {
-    expect(findBadge().attributes('id')).toBe('fakeUniqueId');
-    expect(findPopover().attributes('target')).toBe('fakeUniqueId');
-  });
-
-  describe.each`
-    type            | expectedType
-    ${'beta'}       | ${'beta'}
-    ${'experiment'} | ${'experiment'}
-    ${undefined}    | ${'experiment'}
-  `('when type is %s', ({ type, expectedType } = {}) => {
-    beforeEach(() => {
-      createComponent({ type });
-    });
-
-    it('sets correct props on the badge', () => {
-      const badgeVariant = 'neutral';
-      const badgeSize = 'md';
-      expect(findBadge().props('variant')).toBe(badgeVariant);
-      expect(findBadge().props('size')).toBe(badgeSize);
-      expect(findBadge().find('span').text()).toBe(i18n[expectedType].BADGE);
-    });
-
-    it('sets correct props on the popover', () => {
-      expect(findPopover().props('triggers')).toBe('click');
-      expect(findPopover().props('title')).toBe(i18n[expectedType].POPOVER_TITLE);
-    });
-  });
-});

package/src/components/experimental/experiment_badge/experiment_badge.stories.js

@@ -1,58 +0,0 @@
-import GlExperimentBadge from './experiment_badge.vue';
-import readme from './experiment_badge.md';
-
-const defaultValue = (prop) => GlExperimentBadge.props[prop].default;
-
-const generateProps = ({
-  helpPageUrl = defaultValue('helpPageUrl'),
-  popoverPlacement = defaultValue('popoverPlacement'),
-  type = defaultValue('type'),
-} = {}) => ({
-  helpPageUrl,
-  popoverPlacement,
-  type,
-});
-
-const Template = (args, { argTypes }) => ({
-  components: { GlExperimentBadge },
-  props: Object.keys(argTypes),
-  template: `
-    <div class='gl-h-13'>
-      <gl-experiment-badge
-        :help-page-url='helpPageUrl'
-        :popover-placement='popoverPlacement'
-        :type='type' />
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const WithHelpPageUrl = Template.bind({});
-WithHelpPageUrl.args = {
-  ...generateProps({
-    helpPageUrl: 'https://docs.gitlab.com/ee/policy/experiment-beta-support.html#experiment',
-  }),
-};
-
-export const CustomPlacement = Template.bind({});
-CustomPlacement.args = {
-  ...generateProps({
-    popoverPlacement: 'right',
-  }),
-};
-
-export default {
-  title: 'experimental/experiment_badge',
-  component: GlExperimentBadge,
-  tags: ['skip-visual-test'],
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {},
-};

package/src/components/regions/dashboard_skeleton/dashboard_skeleton.stories.js

@@ -1,29 +0,0 @@
-import GlDashboardSkeleton from './dashboard_skeleton.vue';
-import readme from './dashboard_skeleton.md';
-
-const defaultValue = (prop) => GlDashboardSkeleton.props[prop].default;
-
-const generateProps = ({ cards = defaultValue('cards') } = {}) => ({
-  cards,
-});
-
-const Template = (args, { argTypes }) => ({
-  components: { GlDashboardSkeleton },
-  props: Object.keys(argTypes),
-  template: '<gl-dashboard-skeleton :cards="cards" />',
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export default {
-  title: 'regions/dashboard-skeleton',
-  component: GlDashboardSkeleton,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

package/src/components/regions/empty_state/empty_state.spec.js

@@ -1,293 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import Button from '~/components/base/button/button.vue';
-import EmptyState from './empty_state.vue';
-
-describe('empty state component', () => {
-  let component;
-  const props = {
-    title: 'Empty State Title',
-    description: 'Empty state description.',
-    svgPath: 'https://www.example.com/test.jpg',
-    svgHeight: 144,
-    primaryButtonText: 'Primary Button',
-    primaryButtonLink: 'http://example.com/primary',
-    secondaryButtonText: 'Secondary Button',
-    secondaryButtonLink: 'http://example.com/secondary',
-  };
-
-  describe('with no buttons', () => {
-    beforeEach(() => {
-      component = shallowMount(EmptyState, {
-        propsData: {
-          title: props.title,
-          description: props.description,
-          svgPath: props.svgPath,
-          svgHeight: props.svgHeight,
-        },
-      });
-    });
-
-    it('should render the title', () => {
-      const title = component.find('h1');
-      expect(title.text()).toBe(props.title);
-    });
-
-    it('should render the description', () => {
-      const description = component.find('p');
-      expect(description.text()).toBe(props.description);
-    });
-
-    it('should pass through the SVG path', () => {
-      const image = component.find('img');
-      expect(image.attributes().src).toBe(props.svgPath);
-    });
-
-    it('should pass through the SVG height integer', () => {
-      const image = component.find('img');
-      expect(image.attributes().height).toBe(props.svgHeight.toString());
-    });
-  });
-
-  describe('with a primary button', () => {
-    beforeEach(() => {
-      component = shallowMount(EmptyState, {
-        propsData: {
-          title: props.title,
-          svgPath: props.svgPath,
-          primaryButtonLink: props.primaryButtonLink,
-          primaryButtonText: props.primaryButtonText,
-        },
-      });
-    });
-
-    it('should only render one button', () => {
-      const buttons = component.findAllComponents(Button);
-      expect(buttons).toHaveLength(1);
-    });
-
-    it('should render the primary button', () => {
-      const button = component.findComponent(Button);
-      expect(button.attributes().href).toBe(props.primaryButtonLink);
-    });
-  });
-
-  describe('with a secondary button', () => {
-    beforeEach(() => {
-      component = shallowMount(EmptyState, {
-        propsData: {
-          title: props.title,
-          secondaryButtonLink: props.secondaryButtonLink,
-          secondaryButtonText: props.secondaryButtonText,
-        },
-      });
-    });
-
-    it('should only render the secondary button', () => {
-      const buttons = component.findAllComponents(Button);
-      const button = buttons.at(0);
-
-      expect(buttons).toHaveLength(1);
-      expect(button.props('variant')).toBe('default');
-      expect(button.text()).toBe(props.secondaryButtonText);
-      expect(button.attributes('href')).toBe(props.secondaryButtonLink);
-    });
-  });
-
-  describe('with a primary and secondary button', () => {
-    beforeEach(() => {
-      component = shallowMount(EmptyState, {
-        propsData: {
-          title: props.title,
-          svgPath: props.svgPath,
-          primaryButtonLink: props.primaryButtonLink,
-          primaryButtonText: props.primaryButtonText,
-          secondaryButtonLink: props.secondaryButtonLink,
-          secondaryButtonText: props.secondaryButtonText,
-        },
-      });
-    });
-
-    it('should render two buttons', () => {
-      const buttons = component.findAllComponents(Button);
-      expect(buttons).toHaveLength(2);
-    });
-
-    it('should render the primary button', () => {
-      const button = component.findComponent(Button);
-      expect(button.attributes().href).toBe(props.primaryButtonLink);
-    });
-
-    it('should also render the secondary button', () => {
-      const button = component.findAllComponents(Button).at(1);
-      expect(button.attributes().href).toBe(props.secondaryButtonLink);
-    });
-  });
-
-  describe('with custom actions', () => {
-    beforeEach(() => {
-      component = shallowMount(EmptyState, {
-        propsData: {
-          title: props.title,
-          svgPath: props.svgPath,
-          primaryButtonLink: props.primaryButtonLink,
-          primaryButtonText: props.primaryButtonText,
-          secondaryButtonLink: props.secondaryButtonLink,
-          secondaryButtonText: props.secondaryButtonText,
-        },
-        slots: {
-          actions: '<button>Custom button</button>',
-        },
-      });
-    });
-
-    it(`should render slot's contents instead of default buttons`, () => {
-      const defaultButtons = component.findAllComponents(Button);
-      const customButtons = component.find('button');
-      expect(defaultButtons.length).toBe(0);
-      expect(customButtons.exists()).toBe(true);
-    });
-  });
-
-  describe('with different titles', () => {
-    it('should render title from prop', () => {
-      component = shallowMount(EmptyState, {
-        propsData: {
-          ...props,
-        },
-      });
-
-      const title = component.find('h1');
-      expect(title.text()).toBe(props.title);
-    });
-
-    it('should render title from slot', () => {
-      const slotTitle = 'Slotted title';
-
-      component = shallowMount(EmptyState, {
-        propsData: {
-          ...props,
-          title: null,
-        },
-        slots: {
-          title: `<strong id="slotted">${slotTitle}</strong>`,
-        },
-      });
-
-      const title = component.find('#slotted');
-      expect(title.text()).toBe(slotTitle);
-    });
-
-    it('should render a slotted title over a props title', () => {
-      const slotTitle = 'Slotted title';
-
-      component = shallowMount(EmptyState, {
-        propsData: {
-          ...props,
-        },
-        slots: {
-          title: `<strong id="slotted">${slotTitle}</strong>`,
-        },
-      });
-
-      const title = component.find('#slotted');
-      const propTitle = component.find('h1');
-
-      expect(title.text()).toBe(slotTitle);
-      expect(propTitle.exists()).toBe(false);
-    });
-  });
-
-  describe('with different descriptions', () => {
-    it('should render description from prop', () => {
-      component = shallowMount(EmptyState, {
-        propsData: {
-          ...props,
-        },
-      });
-
-      const description = component.find('p');
-      expect(description.text()).toBe(props.description);
-    });
-
-    it('should render description from slot', () => {
-      const slotDescription = 'Slotted description';
-
-      component = shallowMount(EmptyState, {
-        propsData: {
-          ...props,
-          description: null,
-        },
-        slots: {
-          description: `<span id="slotted">${slotDescription}</span>`,
-        },
-      });
-
-      const description = component.find('#slotted');
-      expect(description.text()).toBe(slotDescription);
-    });
-
-    it('should render a slotted description over a props description', () => {
-      const slotDescription = 'Slotted description';
-
-      component = shallowMount(EmptyState, {
-        propsData: {
-          ...props,
-        },
-        slots: {
-          description: `<span id="slotted">${slotDescription}</span>`,
-        },
-      });
-
-      const description = component.find('#slotted');
-      const p = component.find('p');
-
-      expect(description.text()).toBe(slotDescription);
-      expect(p.text()).not.toBe(props.description);
-    });
-  });
-
-  describe('with custom content class', () => {
-    const findContentContainer = () => component.find('[data-testid="gl-empty-state-content"]');
-    const customContentClass = 'gl-p-0';
-    const expectedDefaultContentClasses = [
-      'gl-empty-state-content',
-      'gl-mx-auto',
-      'gl-my-0',
-      'gl-m-auto',
-      'gl-p-5',
-      customContentClass,
-    ];
-    const expectedCompactContentClasses = [
-      'gl-empty-state-content',
-      'gl-mx-auto',
-      'gl-my-0',
-      'gl-flex-grow-1',
-      'gl-flex-basis-0',
-      'gl-px-4',
-      customContentClass,
-    ];
-
-    it.each`
-      contentClass                      | compact  | expectedClasses
-      ${customContentClass}             | ${false} | ${expectedDefaultContentClasses}
-      ${[customContentClass]}           | ${false} | ${expectedDefaultContentClasses}
-      ${{ [customContentClass]: true }} | ${false} | ${expectedDefaultContentClasses}
-      ${customContentClass}             | ${true}  | ${expectedCompactContentClasses}
-      ${[customContentClass]}           | ${true}  | ${expectedCompactContentClasses}
-      ${{ [customContentClass]: true }} | ${true}  | ${expectedCompactContentClasses}
-    `(
-      'applies $contentClass class when compact is $compact',
-      ({ contentClass, compact, expectedClasses }) => {
-        component = shallowMount(EmptyState, {
-          propsData: {
-            ...props,
-            compact,
-            contentClass,
-          },
-        });
-
-        expect(findContentContainer().classes()).toEqual(expectedClasses);
-      }
-    );
-  });
-});

package/src/components/regions/empty_state/empty_state.stories.js

@@ -1,160 +0,0 @@
-import productivityAnalyticsEmptyStateSvg from '@gitlab/svgs/dist/illustrations/productivity-analytics-empty-state.svg';
-import issuesSvg from '@gitlab/svgs/dist/illustrations/rocket-launch-md.svg';
-import GlButton from '../../base/button/button.vue';
-import GlEmptyState from './empty_state.vue';
-import readme from './empty_state.md';
-
-const template = `
-  <gl-empty-state
-    :title="title"
-    :svg-path="svgPath"
-    :svg-height="svgHeight"
-    :description="description"
-    :primary-button-text="primaryButtonText"
-    :secondary-button-text="secondaryButtonText"
-    :compact="compact"
-    :primary-button-link="primaryButtonLink"
-    :secondary-button-link="secondaryButtonLink"
-    :contentClass="contentClass"
-  />`;
-
-const Template = (args) => ({
-  components: {
-    GlEmptyState,
-  },
-  props: Object.keys(args),
-  template,
-});
-
-const generateProps = ({
-  title = 'This state is empty',
-  svgPath = productivityAnalyticsEmptyStateSvg,
-  svgHeight = 144,
-  description = 'The title and message should be clear, concise, and explain why the user is seeing this screen.',
-  primaryButtonText = 'Something actionable',
-  secondaryButtonText = 'Something else',
-  primaryButtonLink = '#',
-  secondaryButtonLink = '#',
-  compact = false,
-  contentClass = [],
-} = {}) => ({
-  title,
-  svgPath,
-  svgHeight,
-  description,
-  primaryButtonText,
-  secondaryButtonText,
-  primaryButtonLink,
-  secondaryButtonLink,
-  compact,
-  contentClass,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const SingleButton = Template.bind({});
-SingleButton.args = generateProps({
-  secondaryButtonText: null,
-});
-
-export const NoButtons = Template.bind({});
-NoButtons.args = generateProps({
-  primaryButtonText: null,
-  secondaryButtonText: null,
-});
-
-export const NoIllustration = Template.bind({});
-NoIllustration.args = generateProps({
-  svgPath: null,
-});
-
-export const CustomActions = (args) => ({
-  components: {
-    GlEmptyState,
-    GlButton,
-  },
-  props: Object.keys(args),
-  template: `
-    <gl-empty-state
-      :title="title"
-      :svg-path="svgPath"
-      :svg-height="svgHeight"
-      :description="description"
-      :primary-button-text="primaryButtonText"
-      :secondary-button-text="secondaryButtonText"
-      :compact="compact"
-      :primary-button-link="primaryButtonLink"
-      :secondary-button-link="secondaryButtonLink"
-      :contentClass="contentClass"
-    >
-      <template #actions>
-        <gl-button
-          variant="confirm"
-          class="gl-mb-3"
-        >Custom button</gl-button>
-        <gl-button
-          variant="link"
-          class="gl-mb-3 gl-ml-3"
-          href="#"
-          @click.prevent
-        >Custom link</gl-button>
-      </template>
-    </gl-empty-state>
-  `,
-});
-CustomActions.args = generateProps();
-
-export const NotFullscreen = Template.bind({});
-NotFullscreen.args = generateProps({
-  compact: true,
-  svgHeight: null,
-  title: 'This is a compact empty state',
-  description: 'It could be included in a settings page, or a list view',
-});
-
-export const SlottedDescription = (args) => ({
-  components: {
-    GlEmptyState,
-    GlButton,
-  },
-  props: Object.keys(args),
-  template: `
-    <gl-empty-state
-      :title="title"
-      :svg-path="svgPath"
-      :svg-height="svgHeight"
-      :description="description"
-      :primary-button-text="primaryButtonText"
-      :secondary-button-text="secondaryButtonText"
-      :compact="compact"
-      :primary-button-link="primaryButtonLink"
-      :secondary-button-link="secondaryButtonLink"
-      :contentClass="contentClass"
-    >
-      <template #description>
-        <p>A slotted description allows you to use more custom HTML such as <a href="#">links</a>.</p>
-        <pre>You could also include code snippets</pre>
-        <p><strong>Note:</strong> A slotted description will override one provided by a property.</p>
-      </template>
-    </gl-empty-state>
-  `,
-});
-SlottedDescription.args = generateProps({
-  title: 'Slotted description example',
-  svgPath: issuesSvg,
-  primaryButtonText: 'Learn more',
-  secondaryButtonText: null,
-});
-
-export default {
-  title: 'regions/empty-state',
-  component: GlEmptyState,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

package/src/components/shared_components/charts/tooltip_default_format.spec.js

@@ -1,69 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-
-import SeriesLabel from '../../charts/series_label/series_label.vue';
-import TooltipDefaultFormat from './tooltip_default_format.vue';
-
-const mockTooltipContent = {
-  'Series A': {
-    color: '#000000',
-    value: 1000,
-  },
-  'Series B': {
-    color: '#ffffff',
-    value: 5555.5,
-  },
-};
-
-describe('tooltip default format', () => {
-  let wrapper;
-
-  const createComponent = ({ props, ...options } = {}) => {
-    wrapper = shallowMount(TooltipDefaultFormat, {
-      propsData: {
-        tooltipContent: mockTooltipContent,
-        ...props,
-      },
-      ...options,
-    });
-  };
-
-  const findSeriesLabelAt = (i) => wrapper.findAllComponents(SeriesLabel).at(i);
-
-  it('renders default tooltip', () => {
-    createComponent();
-
-    const text = wrapper.text();
-
-    expect(text).toContain('Series A');
-    expect(text).toContain('1000');
-
-    expect(text).toContain('Series B');
-    expect(text).toContain('5555.5');
-  });
-
-  it('renders label colors', () => {
-    createComponent();
-
-    expect(findSeriesLabelAt(0).props('color')).toBe('#000000');
-    expect(findSeriesLabelAt(1).props('color')).toBe('#ffffff');
-  });
-
-  it('renders formatted values', () => {
-    createComponent({
-      scopedSlots: {
-        'tooltip-value': ({ value }) =>
-          value.toLocaleString(undefined, {
-            minimumFractionDigits: 2,
-          }),
-      },
-    });
-
-    const text = wrapper.text();
-
-    expect(text).toContain('Series A');
-    expect(text).toContain('1,000.00');
-
-    expect(text).toContain('Series B');
-    expect(text).toContain('5,555.50');
-  });
-});

package/src/components/shared_components/clear_icon_button/__snapshots__/clear_icon_button.spec.js.snap

@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Clear Icon Button renders successfully 1`] = `
-<gl-button-stub
-  aria-label="Tooltip Text"
-  buttontextclasses=""
-  category="tertiary"
-  class="gl-clear-icon-button"
-  icon="clear"
-  name="clear"
-  size="small"
-  title="Tooltip Text"
-  variant="default"
-/>
-`;