@gitlab/ui 80.13.1 → 80.14.0

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

@@ -1,237 +0,0 @@
-import { nextTick } from 'vue';
-import { shallowMount } from '@vue/test-utils';
-import { mockPathItems } from './data';
-import GlPath from './path.vue';
-
-const SELECTED_CLASS_INDIGO = 'gl-path-active-item-indigo';
-const SELECTED_CLASS_GREEN = 'gl-path-active-item-green';
-const BACKGROUND_COLOR_DEFAULT = 'rgba(0,0,0,0)';
-const BACKGROUND_COLOR_LIGHT_GRAY = '#f0f0f0';
-
-describe('Path', () => {
-  let wrapper;
-
-  const createComponent = (props = {}, options = {}) => {
-    return shallowMount(GlPath, {
-      propsData: {
-        items: mockPathItems,
-        ...props,
-      },
-      ...options,
-    });
-  };
-
-  const pathNav = () => {
-    return wrapper.find('[data-testid="gl-path-nav"]').element;
-  };
-
-  const listItems = () => {
-    return wrapper.vm.$refs.pathListItems;
-  };
-
-  const pathItemAt = (index) => {
-    return listItems()[index].children[0];
-  };
-
-  const pathItemTextAt = (index) => {
-    return pathItemAt(index).textContent;
-  };
-
-  const clickItemAt = (index) => {
-    pathItemAt(index).click();
-  };
-
-  beforeEach(() => {
-    wrapper = createComponent();
-  });
-
-  it('matches the snapshot', () => {
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
-  describe('theme selection', () => {
-    describe('default', () => {
-      it('applies the indigo theme', () => {
-        expect(pathItemAt(0).classList).toContain(SELECTED_CLASS_INDIGO);
-      });
-    });
-
-    describe('with a theme specified', () => {
-      beforeEach(() => {
-        wrapper = createComponent({ theme: 'green' });
-      });
-
-      it('sets the correct theme', () => {
-        expect(pathItemAt(0).classList).toContain(SELECTED_CLASS_GREEN);
-      });
-    });
-  });
-
-  describe('background color selection', () => {
-    describe('with no background color specified', () => {
-      it('displays the default background color', () => {
-        expect(pathNav().style.getPropertyValue('--path-bg-color')).toBe(BACKGROUND_COLOR_DEFAULT);
-      });
-    });
-
-    describe('with a background color specified', () => {
-      beforeEach(() => {
-        wrapper = createComponent({ backgroundColor: BACKGROUND_COLOR_LIGHT_GRAY });
-      });
-
-      it('sets the correct background color', () => {
-        expect(pathNav().style.getPropertyValue('--path-bg-color')).toBe(
-          BACKGROUND_COLOR_LIGHT_GRAY
-        );
-      });
-    });
-  });
-
-  describe('renders the list of items', () => {
-    it('renders the correct number of items', () => {
-      expect(listItems().length).toBe(mockPathItems.length);
-    });
-
-    it('renders the items in the correct order', () => {
-      expect(pathItemTextAt(0)).toContain(mockPathItems[0].title);
-      expect(pathItemTextAt(4)).toContain(mockPathItems[4].title);
-      expect(pathItemTextAt(9)).toContain(mockPathItems[9].title);
-    });
-
-    describe('with metrics', () => {
-      beforeEach(() => {
-        const data = mockPathItems;
-        data[0].metric = '12d';
-
-        wrapper = createComponent({ items: data });
-      });
-
-      it('matches the snapshot', () => {
-        expect(wrapper.element).toMatchSnapshot();
-      });
-
-      it('renders the inline metric', () => {
-        expect(pathItemTextAt(0)).toContain(mockPathItems[0].title);
-        expect(pathItemTextAt(0)).toContain(mockPathItems[0].metric);
-      });
-    });
-
-    describe('with icons', () => {
-      const iconName = 'home';
-
-      beforeEach(() => {
-        const data = mockPathItems;
-        data[0].icon = iconName;
-
-        wrapper = createComponent({ items: data });
-      });
-
-      it('matches the snapshot', () => {
-        expect(wrapper.element).toMatchSnapshot();
-      });
-
-      it('renders the inline icon', () => {
-        const icon = wrapper.find('[data-testid="gl-path-item-icon"]');
-
-        expect(icon.exists()).toBe(true);
-        expect(icon.props('name')).toBe(iconName);
-      });
-    });
-  });
-
-  describe('renders the correct selected item', () => {
-    describe('with no selected item passed in', () => {
-      it('selects the first item', () => {
-        expect(pathItemAt(0).classList).toContain(SELECTED_CLASS_INDIGO);
-      });
-
-      it('updates the selected item when props change', async () => {
-        const items = JSON.parse(JSON.stringify(mockPathItems));
-        items[3].selected = true;
-
-        wrapper.setProps({ items });
-        await nextTick();
-
-        expect(pathItemAt(0).classList).not.toContain(SELECTED_CLASS_INDIGO);
-        expect(pathItemAt(3).classList).toContain(SELECTED_CLASS_INDIGO);
-      });
-    });
-
-    describe('with a specifically selected item passed in', () => {
-      beforeEach(() => {
-        const data = mockPathItems;
-        data[3].selected = true;
-
-        wrapper = createComponent({ items: data });
-      });
-
-      it('selects the correct item', () => {
-        expect(pathItemAt(3).classList).toContain(SELECTED_CLASS_INDIGO);
-      });
-    });
-
-    describe('with multiple selected items passed in', () => {
-      beforeEach(() => {
-        const data = mockPathItems;
-        data[3].selected = true;
-        data[5].selected = true;
-
-        wrapper = createComponent({ items: data });
-      });
-
-      it('selects the first selected option', () => {
-        expect(pathItemAt(3).classList).toContain(SELECTED_CLASS_INDIGO);
-        expect(pathItemAt(5).classList).not.toContain(SELECTED_CLASS_INDIGO);
-      });
-    });
-  });
-
-  describe('event handling', () => {
-    describe('when an item is clicked', () => {
-      it('emits the selected event with the correct data', () => {
-        clickItemAt(1);
-        clickItemAt(4);
-        clickItemAt(6);
-
-        expect(wrapper.emitted('selected')).toEqual([
-          [mockPathItems[1]],
-          [mockPathItems[4]],
-          [mockPathItems[6]],
-        ]);
-      });
-    });
-
-    describe('when a disabled item is clicked', () => {
-      it('does not emit the selected event', () => {
-        clickItemAt(7);
-
-        expect(wrapper.emitted('selected')).toBeUndefined();
-      });
-    });
-  });
-
-  describe('slots', () => {
-    beforeEach(() => {
-      wrapper = createComponent(null, {
-        scopedSlots: {
-          default: `
-            <div
-              :data-pathid="props.pathId"
-              data-testid="path-item-slot-content">
-              {{ props.pathItem.title }}
-            </div>
-          `,
-        },
-      });
-    });
-
-    it('contains all elements passed into the default slot', () => {
-      mockPathItems.forEach((item, index) => {
-        const pathItem = wrapper.findAll('[data-testid="path-item-slot-content"]').at(index);
-
-        expect(pathItem.text()).toBe(item.title);
-        expect(pathItem.attributes('data-pathid')).toContain('path-');
-      });
-    });
-  });
-});

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

@@ -1,84 +0,0 @@
-import GlPopover from '../popover/popover.vue';
-import { glThemes } from '../../../utils/constants';
-import GlPath from './path.vue';
-import { mockPathItems } from './data';
-import readme from './path.md';
-
-const defaultValue = (prop) => GlPath.props[prop].default;
-
-const generateProps = ({
-  theme = defaultValue('theme'),
-  items = mockPathItems,
-  backgroundColor = defaultValue('backgroundColor'),
-} = {}) => ({
-  theme,
-  items,
-  backgroundColor,
-});
-
-const template = (slot = '') => `
-  <gl-path :items="items" :theme="theme" :background-color="backgroundColor">
-    ${slot}
-  </gl-path>`;
-
-export const Default = (args, { argTypes }) => ({
-  components: { GlPath },
-  props: Object.keys(argTypes),
-  template: template(),
-});
-Default.args = generateProps();
-
-export const WithPopovers = (args, { argTypes }) => ({
-  components: { GlPath, GlPopover },
-  props: Object.keys(argTypes),
-  template: template(`
-    <template #default="{ pathItem, pathId }">
-      <gl-popover triggers="hover" placement="bottom" :target="pathId">
-        <template #title>
-          {{ pathItem.title }}
-        </template>
-        {{ pathItem.metric }}
-      </gl-popover>
-    </template>`),
-});
-WithPopovers.args = generateProps();
-
-export const AllOptions = () => ({
-  components: { GlPath },
-  data: () => ({
-    items: [
-      {
-        title: 'First',
-        metric: '14d',
-        icon: 'home',
-      },
-      {
-        title: 'Second',
-        metric: '2d',
-      },
-    ],
-  }),
-  template: `<gl-path :items="items" />`,
-});
-AllOptions.parameters = { controls: { disable: true } };
-
-export default {
-  title: 'base/path',
-  component: GlPath,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    theme: {
-      options: glThemes,
-      control: 'select',
-    },
-    backgroundColor: {
-      control: 'color',
-    },
-  },
-};

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

@@ -1,104 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { tooltipActionEvents, popoverPlacements } from '../../../utils/constants';
-import GlPopover from './popover.vue';
-
-describe('GlPopover', () => {
-  let wrapper;
-
-  const createWrapper = (props, stubs = {}) => {
-    wrapper = shallowMount(GlPopover, {
-      propsData: {
-        target: document.body,
-        ...props,
-      },
-      stubs,
-    });
-  };
-
-  const findBVPopover = () => wrapper.findComponent({ ref: 'bPopover' });
-  const findCloseButton = () => findBVPopover().find('[data-testid="close-button"]');
-
-  it.each(tooltipActionEvents)('passes through the %s event to the bvPopover instance', (event) => {
-    createWrapper();
-    wrapper.vm.$emit(event);
-
-    expect(findBVPopover().emitted(event)).toHaveLength(1);
-  });
-
-  describe('triggers', () => {
-    it('defaults to "hover focus" for triggers', () => {
-      createWrapper();
-
-      expect(findBVPopover().exists()).toBe(true);
-    });
-
-    it('uses custom triggers if provided', () => {
-      const triggers = 'manual';
-      createWrapper({ triggers });
-
-      expect(findBVPopover().props('triggers')).toBe(triggers);
-    });
-  });
-
-  describe('title slot', () => {
-    it('renders title slot content', () => {
-      const title = 'Popover title';
-      createWrapper({ title });
-
-      expect(findBVPopover().props('title')).toBe(title);
-    });
-  });
-
-  describe('placement', () => {
-    it(`uses "${popoverPlacements.top}" placement by default`, () => {
-      createWrapper();
-
-      expect(findBVPopover().props('placement')).toBe(popoverPlacements.top);
-    });
-
-    it('uses a defined placement', () => {
-      createWrapper({ placement: popoverPlacements.right });
-
-      expect(findBVPopover().props('placement')).toBe(popoverPlacements.right);
-    });
-  });
-
-  describe('close button', () => {
-    let doCloseMock;
-
-    beforeEach(() => {
-      doCloseMock = jest.fn();
-      createWrapper(
-        { showCloseButton: true },
-        {
-          BPopover: {
-            template: `
-              <div>
-                <slot name="title" />
-              </div>
-            `,
-            methods: {
-              doClose: doCloseMock,
-            },
-          },
-        }
-      );
-    });
-
-    it('renders a close button', () => {
-      expect(findCloseButton().exists()).toBe(true);
-    });
-
-    it("calls BPopover's doClose method when clicking on the close button", () => {
-      findCloseButton().vm.$emit('click');
-
-      expect(doCloseMock).toHaveBeenCalled();
-    });
-
-    it('emits close-button-clicked event when clicking on the close button', () => {
-      findCloseButton().vm.$emit('click');
-
-      expect(wrapper.emitted('close-button-clicked')).toHaveLength(1);
-    });
-  });
-});

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

@@ -1,109 +0,0 @@
-import GlButton from '../button/button.vue';
-import { popoverPlacements } from '../../../utils/constants';
-import GlPopover from './popover.vue';
-
-const defaultValue = (prop) => GlPopover.props[prop].default;
-
-const components = { GlPopover, GlButton };
-
-const contentString = `
-  A popover is used to provide supplemental, useful, unique information about an element.
-`;
-
-const getTemplate = (id, slots = '') => `
-  <div style="height:400px;" class="gl-display-flex gl-justify-content-center gl-align-items-center">
-    <gl-button id="${id}">{{placement}}</gl-button>
-    <gl-popover
-      target="${id}"
-      :triggers="triggers"
-      :title="title"
-      :placement="placement"
-      :show-close-button="showCloseButton"
-      content="${contentString}"
-      data-testid="${id}"
-      :show="$options.viewMode !== 'docs'">${slots}</gl-popover>
-  </div>`;
-
-const generateProps = ({
-  placement = defaultValue('placement'),
-  title = 'Popover',
-  triggers = defaultValue('triggers'),
-  cssClasses = defaultValue('cssClasses'),
-  showCloseButton = defaultValue('showCloseButton'),
-} = {}) => ({
-  placement,
-  title,
-  triggers,
-  cssClasses,
-  showCloseButton,
-});
-
-export const Default = (_args, { viewMode, argTypes }) => ({
-  viewMode,
-  components,
-  props: Object.keys(argTypes),
-  template: getTemplate('popover-with-props'),
-});
-Default.args = generateProps();
-
-export const WithCloseButton = (_args, { viewMode, argTypes }) => ({
-  viewMode,
-  components,
-  props: Object.keys(argTypes),
-  template: getTemplate('popover-with-close-button'),
-});
-WithCloseButton.args = generateProps({
-  showCloseButton: true,
-});
-
-export const TextLinks = (_args, { viewMode, argTypes }) => ({
-  viewMode,
-  components,
-  props: Object.keys(argTypes),
-  template: getTemplate(
-    'popover-with-text-links',
-    `
-    <template>
-      A popover is used to provide supplemental, useful, unique information about an element. This one has a link to <a class="gl-link" href="https://design.gitlab.com/components/popover">learn more about popovers.</a>
-    </template>
-  `
-  ),
-});
-TextLinks.args = generateProps({
-  showCloseButton: true,
-});
-
-export const OnClick = (_args, { viewMode, argTypes }) => ({
-  viewMode,
-  components,
-  props: Object.keys(argTypes),
-  template: getTemplate(
-    'popover-button-click',
-    `
-    <template #title>
-      <span data-testid="popover-title">Popover title</span>
-    </template>
-  `
-  ),
-});
-OnClick.args = generateProps({
-  triggers: 'click',
-});
-OnClick.tags = ['skip-visual-test'];
-
-export default {
-  title: 'base/popover',
-  component: GlPopover,
-  parameters: {
-    bootstrapComponent: 'b-popover',
-  },
-  argTypes: {
-    placement: {
-      options: Object.values(popoverPlacements),
-      control: 'select',
-    },
-    title: {
-      control: 'text',
-    },
-  },
-};

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

@@ -1,34 +0,0 @@
-import { variantOptions } from '../../../utils/constants';
-import GlProgressBar from './progress_bar.vue';
-
-const generateProps = ({ value = 30, variant = variantOptions.primary } = {}) => ({
-  value,
-  variant,
-});
-
-const Template = (args, { argTypes }) => ({
-  components: { GlProgressBar },
-  props: Object.keys(argTypes),
-  template: '<gl-progress-bar :value="value" :variant="variant" />',
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const SuccessVariant = Template.bind({});
-SuccessVariant.args = generateProps({ variant: variantOptions.success });
-SuccessVariant.parameters = { controls: { disabled: true } };
-
-export default {
-  title: 'base/progress-bar',
-  component: GlProgressBar,
-  parameters: {
-    bootstrapComponent: 'b-progress',
-  },
-  argTypes: {
-    variant: {
-      options: variantOptions,
-      control: 'select',
-    },
-  },
-};