@gitlab/ui 80.13.1 → 80.14.0

package/src/components/base/label/label.spec.js

@@ -1,257 +0,0 @@
-import { mount, shallowMount } from '@vue/test-utils';
-import GlLink from '../link/link.vue';
-import GlTooltip from '../tooltip/tooltip.vue';
-import Label from './label.vue';
-
-// Light color
-const grey = {
-  hex: '#CCCCCC',
-  rgb: 'rgb(204, 204, 204)',
-};
-// Dark color
-const navy = {
-  hex: '#000080',
-  rgb: 'rgb(0, 0, 128)',
-};
-
-const white = {
-  shorthex: '#FFF',
-  rgb: 'rgb(255, 255, 255)',
-  rgba: 'rgba(255, 255, 255, 1)',
-};
-
-const defaultProps = {
-  title: 'title',
-  backgroundColor: grey.rgb,
-};
-
-describe('Label component', () => {
-  let wrapper;
-
-  const createComponent = (propsData, { mountFn = shallowMount } = {}) => {
-    wrapper = mountFn(Label, {
-      propsData,
-    });
-  };
-
-  const findLink = () => wrapper.findComponent(GlLink);
-  const findContent = () => wrapper.find('.gl-label-link');
-  const findTitle = () => wrapper.find('.gl-label-text');
-  const findSubTitle = () => wrapper.find('.gl-label-text-scoped');
-  const findTooltip = () => wrapper.findComponent(GlTooltip);
-  const findTooltipText = () => findTooltip().text();
-  const findCloseButton = () => wrapper.find('.gl-label-close');
-
-  describe('basic label', () => {
-    it('renders the label title', () => {
-      const title = 'Label Title';
-      createComponent({ ...defaultProps, title });
-      expect(findTitle().text()).toEqual(title);
-    });
-
-    it('renders a title with two colons as a basic label', () => {
-      createComponent({ ...defaultProps, title: 'scoped::label' });
-
-      expect(findTitle().text()).toEqual('scoped::label');
-      expect(findSubTitle().exists()).toBe(false);
-    });
-
-    it('renders a black label', () => {
-      createComponent({ ...defaultProps });
-
-      expect(wrapper.classes()).toContain('gl-label-text-dark');
-    });
-
-    it('renders a white label if background color is dark', () => {
-      createComponent({ ...defaultProps, backgroundColor: navy.hex });
-
-      expect(wrapper.classes()).toContain('gl-label-text-light');
-    });
-
-    it('renders the label description without "Scoped label"', () => {
-      const props = { ...defaultProps, description: 'lorem ipsum' };
-
-      createComponent(props);
-
-      expect(findTooltipText()).toContain(props.description);
-      expect(findTooltipText()).not.toContain('Scoped label');
-    });
-
-    it('supports short hex for background color to infer text color', () => {
-      createComponent({ ...defaultProps, backgroundColor: white.shorthex });
-
-      expect(wrapper.classes()).toContain('gl-label-text-dark');
-    });
-
-    it('supports rgba for background color to infer text color', () => {
-      createComponent({ ...defaultProps, backgroundColor: white.rgba });
-
-      expect(wrapper.classes()).toContain('gl-label-text-dark');
-    });
-
-    it('renders the label description', () => {
-      const props = { ...defaultProps, description: 'lorem ipsum' };
-
-      createComponent(props);
-
-      expect(wrapper.text()).toContain(props.description);
-    });
-
-    it('links to label target', () => {
-      const props = { ...defaultProps, target: 'http://local.host' };
-
-      createComponent(props);
-
-      expect(wrapper.findComponent(GlLink).attributes('href')).toEqual(props.target);
-    });
-
-    describe('close button', () => {
-      it('does not render by default', () => {
-        createComponent({ ...defaultProps });
-
-        expect(findCloseButton().exists()).toBe(false);
-      });
-
-      it('renders when showCloseButton is true', () => {
-        const props = { ...defaultProps, showCloseButton: true };
-
-        createComponent(props);
-
-        expect(findCloseButton().exists()).toBe(true);
-      });
-
-      it('emits close when "x" is clicked', () => {
-        const props = { ...defaultProps, showCloseButton: true };
-
-        createComponent(props, { mountFn: mount });
-
-        findCloseButton().trigger('click');
-        expect(wrapper.emitted('close')).toHaveLength(1);
-      });
-
-      it('does not emit close when "x" is clicked when disabled', () => {
-        const props = { ...defaultProps, showCloseButton: true, disabled: true };
-
-        createComponent(props, { mountFn: mount });
-
-        findCloseButton().trigger('click');
-        expect(wrapper.emitted('close')).toBe(undefined);
-      });
-    });
-
-    describe('label has no target', () => {
-      const props = { ...defaultProps, target: '' };
-
-      it('renders the label content as text', () => {
-        createComponent(props, { mountFn: mount });
-
-        expect(findContent().element.tagName.toLowerCase()).toBe('span');
-      });
-
-      it('does not render a link', () => {
-        createComponent(props, { mountFn: shallowMount });
-
-        expect(findLink().exists()).toBe(false);
-      });
-    });
-  });
-
-  describe('scoped label', () => {
-    const scopedProps = {
-      ...defaultProps,
-      title: 'scoped::label',
-      scoped: true,
-    };
-
-    it('renders the scoped title', () => {
-      createComponent({ ...scopedProps });
-
-      expect(findTitle().text()).toEqual('scoped');
-      expect(findSubTitle().text()).toEqual('label');
-    });
-
-    it('renders a black label', () => {
-      createComponent({ ...scopedProps });
-
-      expect(wrapper.classes()).toContain('gl-label-text-dark');
-    });
-
-    it('renders a white label if background color is dark', () => {
-      createComponent({ ...scopedProps, backgroundColor: navy.hex });
-
-      expect(wrapper.classes()).toContain('gl-label-text-light');
-    });
-
-    it('renders the label description with "Scoped label"', () => {
-      const props = { ...scopedProps, description: 'lorem ipsum' };
-
-      createComponent(props);
-
-      expect(findTooltipText()).toContain(props.description);
-      expect(findTooltipText()).toContain('Scoped label');
-    });
-
-    it('links to label target', () => {
-      const props = { ...scopedProps, target: 'http://local.host' };
-      createComponent(props);
-      expect(findLink().attributes('href')).toEqual(props.target);
-    });
-
-    it('supports title with multiple occurrences of ::', () => {
-      const props = { ...scopedProps, title: 'one::two::three' };
-      createComponent(props);
-      expect(findTitle().text()).toEqual('one::two');
-      expect(findSubTitle().text()).toEqual('three');
-    });
-
-    describe('close button', () => {
-      it('does not render by default', () => {
-        const props = { ...scopedProps };
-        createComponent(props);
-
-        expect(findCloseButton().exists()).toBe(false);
-      });
-
-      it('renders when showCloseButton is true', () => {
-        const props = { ...scopedProps, showCloseButton: true };
-        createComponent(props);
-
-        expect(findCloseButton().exists()).toBe(true);
-      });
-
-      it('emits close when "x" is clicked', () => {
-        const props = { ...scopedProps, showCloseButton: true };
-
-        createComponent(props, { mountFn: mount });
-
-        findCloseButton().trigger('click');
-        expect(wrapper.emitted('close')).toHaveLength(1);
-      });
-
-      it('does not emit close when "x" is clicked when disabled', () => {
-        const props = { ...scopedProps, showCloseButton: true, disabled: true };
-
-        createComponent(props, { mountFn: mount });
-
-        findCloseButton().trigger('click');
-        expect(wrapper.emitted('close')).toBe(undefined);
-      });
-    });
-
-    describe('label has no target', () => {
-      const props = { ...defaultProps, target: '' };
-
-      it('renders the label content as text', () => {
-        createComponent(props, { mountFn: mount });
-
-        expect(findContent().element.tagName.toLowerCase()).toBe('span');
-      });
-
-      it('does not render a link', () => {
-        createComponent(props, { mountFn: shallowMount });
-
-        expect(findLink().exists()).toBe(false);
-      });
-    });
-  });
-});

package/src/components/base/label/label.stories.js

@@ -1,76 +0,0 @@
-import { tooltipPlacements } from '../../../utils/constants';
-import GlLabel from './label.vue';
-import readme from './label.md';
-
-const template = `
-  <div class="gl-display-flex">
-    <gl-label
-      :background-color="backgroundColor"
-      :title="title"
-      :description="description"
-      :tooltip-placement="tooltipPlacement"
-      :target="target"
-      :scoped="scoped"
-      :show-close-button="showCloseButton"
-      :disabled="disabled"
-    />
-  </div>`;
-
-const Template = (args, { argTypes }) => ({
-  components: { GlLabel },
-  props: Object.keys(argTypes),
-  template,
-});
-
-const generateProps = ({
-  title = 'Label title',
-  tooltipPlacement = tooltipPlacements.top,
-  scoped = false,
-  description = '',
-  target = '#',
-  backgroundColor = '#D9C2EE',
-  showCloseButton = false,
-  disabled = false,
-} = {}) => ({
-  backgroundColor,
-  title,
-  description,
-  tooltipPlacement,
-  target,
-  scoped,
-  showCloseButton,
-  disabled,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const Scoped = Template.bind({});
-Scoped.args = generateProps({ title: 'scoped::label', scoped: true });
-
-export const WithCloseButton = Template.bind({});
-WithCloseButton.args = generateProps({ showCloseButton: true });
-
-export const WithoutTarget = Template.bind({});
-WithoutTarget.args = generateProps({ target: '' });
-
-export default {
-  title: 'base/label',
-  component: GlLabel,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    backgroundColor: {
-      control: 'color',
-    },
-    tooltipPlacement: {
-      options: tooltipPlacements,
-      control: 'select',
-    },
-  },
-};

package/src/components/base/link/link.spec.js

@@ -1,88 +0,0 @@
-import { mount } from '@vue/test-utils';
-import Link from './link.vue';
-
-describe('link component', () => {
-  let wrapper;
-
-  const createWrapper = (options) => {
-    wrapper = mount(Link, options);
-  };
-
-  describe('default settings', () => {
-    beforeEach(() => {
-      createWrapper();
-    });
-
-    it('should not have a target attribute', () => {
-      expect(wrapper.attributes('target')).toBeUndefined();
-    });
-
-    it('should not have a rel attribute', () => {
-      expect(wrapper.attributes('rel')).toBeUndefined();
-    });
-
-    it('should have a default href as #', () => {
-      expect(wrapper.attributes('href')).toBe('#');
-    });
-  });
-
-  describe('target blank', () => {
-    it('should set secure rels for hrefs in a different domain', () => {
-      createWrapper({
-        propsData: {
-          target: '_blank',
-          href: 'http://example.com',
-        },
-      });
-
-      expect(wrapper.attributes('rel')).toBe('noopener noreferrer');
-    });
-
-    it('should set noopener rel for hrefs for the same domain', () => {
-      // This behavior is due to the fact that
-      // bootstrap-vue link component adds rel="noopener" when target is set as "_blank"
-      // https://github.com/bootstrap-vue/bootstrap-vue/pull/418/files#diff-997fcb1eb150236aec5306a4d72229beR25
-      createWrapper({
-        propsData: {
-          target: '_blank',
-          href: window.location.hostname,
-        },
-      });
-      expect(wrapper.attributes('rel')).toBe('noopener');
-    });
-
-    it('should keep rel attribute for hrefs in the same domain', () => {
-      createWrapper({ attrs: { rel: 'nofollow', href: window.location.hostname } });
-
-      expect(wrapper.attributes('rel')).toBe('nofollow');
-    });
-  });
-
-  describe('unsafe urls', () => {
-    // eslint-disable-next-line no-script-url
-    const unsafeUrl = 'javascript:alert(1)';
-
-    // GlSafeLinkDirective is actually responsible to handle the unsafe URLs
-    // and GlLink uses this directive to make all the links secure by default
-    it('should set href to blank', () => {
-      createWrapper({
-        propsData: {
-          href: unsafeUrl,
-        },
-      });
-
-      expect(wrapper.attributes('href')).toBe('about:blank');
-    });
-
-    it('should allow unsafe URL if isUnsafeLink is true', () => {
-      createWrapper({
-        propsData: {
-          href: unsafeUrl,
-          isUnsafeLink: true,
-        },
-      });
-
-      expect(wrapper.attributes('href')).toBe(unsafeUrl);
-    });
-  });
-});

package/src/components/base/link/link.stories.js

@@ -1,64 +0,0 @@
-import { targetOptions } from '../../../utils/constants';
-import GlLink from './link.vue';
-import readme from './link.md';
-
-const generateProps = ({ href = '#', target = null } = {}) => ({
-  href,
-  target,
-});
-
-const makeStory =
-  (options) =>
-  (args, { argTypes }) => ({
-    components: {
-      GlLink,
-    },
-    props: Object.keys(argTypes),
-    ...options,
-  });
-
-export const DefaultLink = makeStory({
-  components: { GlLink },
-  template: `
-    <gl-link
-      :href="href"
-      :target="target"
-    >
-        This is a link
-    </gl-link>`,
-});
-DefaultLink.args = generateProps();
-
-export const LongLink = makeStory({
-  components: { GlLink },
-  template: `
-    <gl-link
-      :href="href"
-      :target="target"
-    >
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    Quamquam tu hanc copiosiorem etiam soles dicere.
-    Ergo illi intellegunt quid Epicurus dicat, ego non intellego? Claudii libidini, qui tum erat summo ne imperio, dederetur.
-    Si quicquam extra virtutem habeatur in bonis. Nunc omni virtuti vitium contrario nomine opponitur. Duo Reges: constructio interrete.
-    </gl-link>`,
-});
-LongLink.args = generateProps();
-
-export default {
-  title: 'base/link',
-  component: GlLink,
-  parameters: {
-    bootstrapComponent: 'b-link',
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    target: {
-      options: targetOptions,
-      control: 'select',
-    },
-  },
-};

package/src/components/base/loading_icon/loading_icon.spec.js

@@ -1,109 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import LoadingIcon from './loading_icon.vue';
-
-describe('loading icon component', () => {
-  let wrapper;
-  const createComponent = ({ attrs, ...propsData } = {}) => {
-    wrapper = shallowMount(LoadingIcon, { propsData, attrs });
-  };
-
-  const spinnerBaseCssClass = 'gl-spinner';
-  const findSpinnerEl = () => wrapper.find(`.${spinnerBaseCssClass}`);
-  const getSpinnerClasses = () => findSpinnerEl().classes();
-
-  const dotsLoaderBaseCssClass = 'gl-dots-loader';
-  const findDotsLoaderEl = () => wrapper.find(`.${dotsLoaderBaseCssClass}`);
-  const getDotsLoaderClasses = () => findDotsLoaderEl().classes();
-
-  describe.each`
-    variant      | baseCssClass              | getLoaderClasses
-    ${'spinner'} | ${spinnerBaseCssClass}    | ${getSpinnerClasses}
-    ${'dots'}    | ${dotsLoaderBaseCssClass} | ${getDotsLoaderClasses}
-  `('variant $variant', ({ variant, baseCssClass, getLoaderClasses }) => {
-    describe('display', () => {
-      it('should render as a block by default', () => {
-        createComponent({ variant });
-        expect(wrapper.element.tagName).toBe('DIV');
-      });
-
-      it('should render inline using prop', () => {
-        createComponent({ variant, inline: true });
-        expect(wrapper.element.tagName).toBe('SPAN');
-      });
-    });
-
-    describe('css class', () => {
-      const supportedSizes = ['sm', 'md', 'lg'];
-      const supportedColors = ['dark', 'light'];
-      const sizeColorCombinations = supportedSizes.reduce(
-        (combinations, size) => combinations.concat(supportedColors.map((color) => [size, color])),
-        []
-      );
-
-      it('should render the loader css class by default', () => {
-        createComponent({ variant });
-        const loaderClasses = getLoaderClasses();
-
-        expect(loaderClasses).toContain(baseCssClass);
-      });
-
-      it.each(supportedSizes)('should render loader properly for size %s', (size) => {
-        createComponent({ variant, size });
-        const loaderClasses = getLoaderClasses();
-
-        expect(loaderClasses).toContain(baseCssClass);
-        expect(loaderClasses).toContain(`${baseCssClass}-${size}`);
-      });
-
-      it.each(supportedColors)('should render loader properly for color %s', (color) => {
-        createComponent({ variant, color });
-        const loaderClasses = getLoaderClasses();
-
-        expect(loaderClasses).toContain(baseCssClass);
-        expect(loaderClasses).toContain(`${baseCssClass}-${color}`);
-      });
-
-      it.each(sizeColorCombinations)(
-        'should render loader properly for combination of size: "%s" and color: "%s"',
-        (size, color) => {
-          createComponent({ variant, size, color });
-          const loaderClasses = getLoaderClasses();
-
-          expect(loaderClasses).toContain(baseCssClass);
-          expect(loaderClasses).toContain(`${baseCssClass}-${size}`);
-          expect(loaderClasses).toContain(`${baseCssClass}-${color}`);
-        }
-      );
-    });
-
-    describe('aria label', () => {
-      it('should default to loading', () => {
-        createComponent({ variant });
-
-        expect(wrapper.attributes('aria-label')).toBe('Loading');
-      });
-
-      it('should change using prop', () => {
-        const label = 'label';
-        createComponent({ variant, label });
-
-        expect(wrapper.attributes('aria-label')).toBe(label);
-      });
-    });
-
-    describe('role', () => {
-      it('should have default role value as status', () => {
-        createComponent({ variant });
-
-        expect(wrapper.attributes('role')).toBe('status');
-      });
-
-      it('should have role value as custom value passed', () => {
-        const role = 'dialog';
-        createComponent({ variant, attrs: { role } });
-
-        expect(wrapper.attributes('role')).toBe(role);
-      });
-    });
-  });
-});

package/src/components/base/loading_icon/loading_icon.stories.js

@@ -1,60 +0,0 @@
-import { viewModeOptions, loadingIconSizes, loadingIconVariants } from '../../../utils/constants';
-import GlLoadingIcon from './loading_icon.vue';
-import readme from './loading_icon.md';
-
-const template = `
-  <div :class="['gl-p-3', 'gl-rounded-base', 'gl-text-center', { 'bg-dark' : color === 'light' } ]" >
-    <gl-loading-icon
-      :label="label"
-      :size="size"
-      :inline="inline"
-      :color="color"
-      :variant="variant"
-    />Loading
-  </div>
-`;
-
-const defaultValue = (prop) => GlLoadingIcon.props[prop].default;
-
-const generateProps = () => ({
-  label: defaultValue('label'),
-  size: defaultValue('size'),
-  color: defaultValue('color'),
-  inline: defaultValue('inline'),
-  variant: defaultValue('variant'),
-});
-
-const Template = (args) => ({
-  components: { GlLoadingIcon },
-  props: Object.keys(args),
-  template,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export default {
-  title: 'base/loading icon',
-  component: GlLoadingIcon,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    color: {
-      options: viewModeOptions,
-      control: 'select',
-    },
-    size: {
-      options: loadingIconSizes,
-      control: 'select',
-    },
-    variant: {
-      options: loadingIconVariants,
-      control: 'select',
-    },
-  },
-};

package/src/components/base/markdown/markdown.spec.js

@@ -1,24 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import GlMarkdown from './markdown.vue';
-
-describe('GlMarkdown', () => {
-  it('applies gl-compact-markdown class when compact property is true', () => {
-    const wrapper = shallowMount(GlMarkdown, {
-      propsData: {
-        compact: true,
-      },
-    });
-
-    expect(wrapper.classes()).toContain('gl-compact-markdown');
-  });
-
-  it('does not apply gl-compact-markdown class when compact property is false', () => {
-    const wrapper = shallowMount(GlMarkdown, {
-      propsData: {
-        compact: false,
-      },
-    });
-
-    expect(wrapper.classes()).not.toContain('gl-compact-markdown');
-  });
-});