@gitlab/ui 80.13.1 → 80.13.2

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

@@ -1,114 +0,0 @@
-import { userEvent, within, waitFor, expect } from '@storybook/test';
-import readme from './token_selector.md';
-import GlTokenSelector from './token_selector.vue';
-
-const template = `
-  <div>
-    <gl-token-selector
-      v-model="selectedTokens"
-      v-bind="$props"
-      @text-input="handleTextInput"
-      @focus="handleFocus" />
-    {{ selectedTokens }}
-  </div>
-`;
-
-const generateProps = () => ({
-  dropdownItems: [
-    {
-      id: 1,
-      name: 'Vue.js',
-    },
-    {
-      id: 2,
-      name: 'Ruby On Rails',
-      class: 'gl-text-white! gl-bg-data-viz-magenta-950!',
-    },
-    {
-      id: 3,
-      name: 'GraphQL',
-    },
-    {
-      id: 4,
-      name: 'Redis',
-      class: 'gl-text-white! gl-bg-data-viz-green-700!',
-    },
-    {
-      id: 5,
-      name: 'CSS',
-      class: 'gl-text-red-500!',
-      style: { backgroundColor: '#97acff' },
-    },
-  ],
-});
-
-const Template = (args, { argTypes }) => ({
-  components: { GlTokenSelector },
-  props: Object.keys(argTypes),
-  template,
-  data() {
-    return {
-      filteredDropdownItems: [],
-      inputText: '',
-      selectedTokens: [
-        {
-          id: 1,
-          name: 'Vue.js',
-        },
-      ],
-    };
-  },
-  methods: {
-    handleTextInput(value) {
-      this.inputText = value;
-
-      if (this.inputText === '') {
-        this.filteredDropdownItems = this.dropdownItems;
-
-        return;
-      }
-
-      this.filterDropdownItems();
-    },
-    handleFocus() {
-      if (this.inputText !== '') {
-        this.filterDropdownItems();
-      } else {
-        this.filteredDropdownItems = this.dropdownItems;
-      }
-    },
-    filterDropdownItems() {
-      this.filteredDropdownItems = this.dropdownItems.filter((dropdownItem) => {
-        return dropdownItem.name.toLowerCase().includes(this.inputText.toLowerCase());
-      });
-    },
-  },
-});
-
-export const Default = Template.bind({});
-Default.tags = ['skip-visual-test'];
-Default.args = generateProps();
-Default.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const button = canvas.getByRole('textbox');
-  await userEvent.click(button);
-  await waitFor(() => expect(canvas.getByRole('menu')).toBeVisible());
-};
-
-export default {
-  title: 'base/token_selector',
-  component: GlTokenSelector,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    state: {
-      options: [true, false, null],
-      control: 'radio',
-    },
-  },
-};

package/src/components/base/token_selector/token_selector_dropdown.spec.js

@@ -1,347 +0,0 @@
-import { shallowMount, mount } from '@vue/test-utils';
-import { nextTick } from 'vue';
-
-import GlDropdownItem from '../dropdown/dropdown_item.vue';
-import GlTokenSelectorDropdown from './token_selector_dropdown.vue';
-
-describe('GlTokenSelectorDropdown', () => {
-  const dropdownItems = [
-    {
-      id: 1,
-      name: 'Vue.js',
-    },
-    {
-      id: 2,
-      name: 'Ruby On Rails',
-    },
-    {
-      id: 3,
-      name: 'GraphQL',
-    },
-    {
-      id: 4,
-      name: 'Redis',
-    },
-  ];
-
-  const mockRegisterDropdownEventHandlers = jest.fn();
-  const mockRegisterResetFocusedDropdownItem = jest.fn();
-
-  const defaultProps = {
-    show: false,
-    dropdownItems,
-    inputText: '',
-    allowUserDefinedTokens: true,
-    componentId: 'token-selector1',
-    registerDropdownEventHandlers: mockRegisterDropdownEventHandlers,
-    registerResetFocusedDropdownItem: mockRegisterResetFocusedDropdownItem,
-  };
-
-  let wrapper;
-
-  const createComponent = (options, shallow = true) => {
-    const mountFunction = shallow ? shallowMount : mount;
-
-    wrapper = mountFunction(GlTokenSelectorDropdown, {
-      ...options,
-      propsData: {
-        ...defaultProps,
-        ...(options?.propsData || {}),
-      },
-    });
-  };
-
-  const findDropdownMenu = () => wrapper.findComponent({ ref: 'dropdownMenu' });
-
-  const findDropdownItemByName = (name, findButton = true) => {
-    const dropdownItemWrappers = wrapper.findAllComponents(GlDropdownItem);
-
-    const dropdownItem = dropdownItemWrappers.wrappers.find(
-      (dropdownItemWrapper) => dropdownItemWrapper.text() === name
-    );
-
-    return findButton ? dropdownItem.find('button') : dropdownItem;
-  };
-
-  beforeAll(() => {
-    if (!HTMLElement.prototype.scrollIntoView) {
-      HTMLElement.prototype.scrollIntoView = jest.fn();
-    }
-  });
-
-  afterAll(() => {
-    if (HTMLElement.prototype.scrollIntoView.mock) {
-      delete HTMLElement.prototype.scrollIntoView;
-    }
-  });
-
-  describe('props', () => {
-    describe('show', () => {
-      it('displays dropdown when `true`', () => {
-        createComponent({
-          propsData: { show: true },
-        });
-
-        expect(wrapper.classes()).toContain('show');
-        expect(findDropdownMenu().classes()).toContain('show');
-      });
-    });
-
-    describe('menuClass', () => {
-      describe.each`
-        menuClass
-        ${'foo-bar-baz'}
-        ${['foo-bar-baz']}
-        ${{ 'foo-bar-baz': true }}
-      `('when `menuClass` is $menuClass', ({ menuClass }) => {
-        it('adds `foo-bar-baz` to CSS classes', () => {
-          createComponent({
-            propsData: { menuClass },
-          });
-
-          expect(findDropdownMenu().classes()).toContain('foo-bar-baz');
-        });
-      });
-    });
-
-    describe('loading', () => {
-      it('displays loading message when `true`', () => {
-        createComponent({
-          propsData: { show: true, loading: true },
-        });
-
-        expect(wrapper.findComponent(GlDropdownItem).text()).toBe('Searching...');
-      });
-    });
-
-    describe('dropdownItems', () => {
-      describe('when dropdown items are provided', () => {
-        it('displays passed dropdown items', () => {
-          createComponent();
-
-          expect(wrapper.findAllComponents(GlDropdownItem).length).toBe(4);
-        });
-      });
-
-      describe('when dropdown items are not provided', () => {
-        it('displays add user defined token message when `allowUserDefinedTokens` is `true` and `inputText` is not empty', () => {
-          createComponent({
-            propsData: {
-              allowUserDefinedTokens: true,
-              inputText: 'foo bar',
-              dropdownItems: [],
-            },
-          });
-
-          expect(wrapper.findComponent(GlDropdownItem).text()).toBe('Add "foo bar"');
-        });
-
-        it('displays no results message when `allowUserDefinedTokens` is `false`', () => {
-          createComponent({
-            propsData: {
-              allowUserDefinedTokens: false,
-              inputText: 'foo bar',
-              dropdownItems: [],
-            },
-          });
-
-          expect(wrapper.findComponent(GlDropdownItem).text()).toBe('No matches found');
-        });
-
-        it('displays no results message when `inputText` is empty', () => {
-          createComponent({
-            propsData: {
-              allowUserDefinedTokens: true,
-              inputText: '',
-              dropdownItems: [],
-            },
-          });
-
-          expect(wrapper.findComponent(GlDropdownItem).text()).toBe('No matches found');
-        });
-      });
-    });
-
-    describe('registerDropdownEventHandlers', () => {
-      it('calls passed method', () => {
-        createComponent();
-
-        expect(mockRegisterDropdownEventHandlers).toHaveBeenCalled();
-      });
-    });
-
-    describe('registerResetFocusedDropdownItem', () => {
-      it('calls passed method', () => {
-        createComponent();
-
-        expect(mockRegisterResetFocusedDropdownItem).toHaveBeenCalled();
-      });
-    });
-  });
-
-  describe('slots', () => {
-    it('renders `loading-content` slot', () => {
-      createComponent({
-        propsData: {
-          loading: true,
-        },
-        slots: {
-          'loading-content': '<span id="custom-loading-content">Loading</span>',
-        },
-      });
-
-      expect(wrapper.find('#custom-loading-content').exists()).toBe(true);
-    });
-
-    it('renders `dropdown-item-content` slot', () => {
-      createComponent({
-        scopedSlots: {
-          'dropdown-item-content': '<span>Dropdown item id: {{ props.dropdownItem.id }}</span>',
-        },
-      });
-
-      const dropdownItemWrappers = wrapper.findAllComponents(GlDropdownItem);
-
-      expect(
-        dropdownItemWrappers.wrappers.every(
-          (dropdownItem, index) =>
-            `Dropdown item id: ${dropdownItems[index].id}` === dropdownItem.text()
-        )
-      ).toBe(true);
-    });
-
-    it('renders `user-defined-token-content` slot', () => {
-      createComponent({
-        propsData: {
-          allowUserDefinedTokens: true,
-          inputText: 'example.com',
-          dropdownItems: [],
-        },
-        scopedSlots: {
-          'user-defined-token-content':
-            '<span id="custom-user-defined-token-content">Add "{{ props.inputText }}" to domain allowlist</span>',
-        },
-      });
-
-      expect(wrapper.find('#custom-user-defined-token-content').text()).toBe(
-        'Add "example.com" to domain allowlist'
-      );
-    });
-
-    it('renders `no-results-content` slot', () => {
-      createComponent({
-        propsData: {
-          allowUserDefinedTokens: false,
-          inputText: 'foo bar',
-          dropdownItems: [],
-        },
-        slots: {
-          'no-results-content': '<span id="custom-no-results-content">No results found</span>',
-        },
-      });
-
-      expect(wrapper.find('#custom-no-results-content').exists()).toBe(true);
-    });
-
-    it('renders `dropdown-footer` slot', () => {
-      createComponent({
-        slots: {
-          'dropdown-footer': '<span id="loading-text">Loading more results</span>',
-        },
-      });
-
-      expect(wrapper.find('#loading-text').exists()).toBe(true);
-    });
-  });
-
-  describe('keyboard navigation', () => {
-    let dropdownEventHandlers = {
-      handleUpArrow: () => {},
-      handleDownArrow: () => {},
-      handleHomeKey: () => {},
-      handleEndKey: () => {},
-    };
-
-    const registerDropdownEventHandlers = (handlers) => {
-      dropdownEventHandlers = handlers;
-    };
-
-    const setup = async (focusedDropdownItemIndex, handler, handlerArgs = null) => {
-      wrapper.setData({ focusedDropdownItemIndex });
-
-      dropdownEventHandlers[handler](handlerArgs);
-
-      await nextTick();
-    };
-
-    beforeEach(() => {
-      createComponent({ propsData: { registerDropdownEventHandlers, show: true } }, false);
-    });
-
-    describe('when up arrow is pressed', () => {
-      it.each`
-        focusedDropdownItemIndex | expectedFocusedDropdownItemIndex | testName
-        ${3}                     | ${2}                             | ${'focuses on previous dropdown item'}
-        ${0}                     | ${0}                             | ${'does not change focus if there is no previous dropdown item'}
-      `('$testName', async ({ focusedDropdownItemIndex, expectedFocusedDropdownItemIndex }) => {
-        await setup(focusedDropdownItemIndex, 'handleUpArrow');
-
-        const expectedFocusedDropdownItem = findDropdownItemByName(
-          dropdownItems[expectedFocusedDropdownItemIndex].name
-        );
-
-        expect(expectedFocusedDropdownItem.classes()).toContain('is-focused');
-      });
-    });
-
-    describe('when down arrow is pressed', () => {
-      it.each`
-        focusedDropdownItemIndex | expectedFocusedDropdownItemIndex | testName
-        ${0}                     | ${1}                             | ${'focuses on next dropdown item'}
-        ${3}                     | ${3}                             | ${'does not change focus if there is no next dropdown item'}
-      `('$testName', async ({ focusedDropdownItemIndex, expectedFocusedDropdownItemIndex }) => {
-        await setup(focusedDropdownItemIndex, 'handleDownArrow');
-
-        const expectedFocusedDropdownItem = findDropdownItemByName(
-          dropdownItems[expectedFocusedDropdownItemIndex].name
-        );
-
-        expect(expectedFocusedDropdownItem.classes()).toContain('is-focused');
-      });
-
-      it('fires `open` event if `show` prop is `false`', () => {
-        createComponent({ propsData: { registerDropdownEventHandlers, show: false } });
-
-        dropdownEventHandlers.handleDownArrow();
-
-        expect(wrapper.emitted('show')).toHaveLength(1);
-      });
-    });
-
-    it('focuses on the first token when home key is pressed', async () => {
-      await setup(3, 'handleHomeKey', { preventDefault: () => {} });
-
-      const expectedFocusedDropdownItem = findDropdownItemByName(dropdownItems[0].name);
-
-      expect(expectedFocusedDropdownItem.classes()).toContain('is-focused');
-    });
-
-    it('focuses on the last token when end key is pressed', async () => {
-      await setup(0, 'handleEndKey', { preventDefault: () => {} });
-
-      const expectedFocusedDropdownItem = findDropdownItemByName(dropdownItems[3].name);
-
-      expect(expectedFocusedDropdownItem.classes()).toContain('is-focused');
-    });
-
-    it('scrolls focused dropdown item into view', async () => {
-      createComponent();
-
-      await setup(0, 'handleEndKey', { preventDefault: () => {} });
-
-      const expectedFocusedDropdownItem = findDropdownItemByName(dropdownItems[3].name, false);
-
-      expect(expectedFocusedDropdownItem.vm.$el.scrollIntoView).toHaveBeenCalled();
-    });
-  });
-});

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

@@ -1,27 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { tooltipActionEvents } from '../../../utils/constants';
-import GlTooltip from './tooltip.vue';
-
-describe('GlTooltip', () => {
-  let wrapper;
-
-  const createWrapper = () => {
-    wrapper = shallowMount(GlTooltip, {
-      propsData: {
-        target: document.body,
-      },
-    });
-  };
-
-  const findBVTooltip = () => wrapper.findComponent({ ref: 'bvTooltip' });
-
-  beforeEach(() => {
-    createWrapper();
-  });
-
-  it.each(tooltipActionEvents)('passes through the %s event to the bvTooltip instance', (event) => {
-    wrapper.vm.$emit(event);
-
-    expect(findBVTooltip().emitted(event)).toHaveLength(1);
-  });
-});

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

@@ -1,70 +0,0 @@
-import { userEvent, within, waitFor, expect } from '@storybook/test';
-import { GlTooltipDirective } from '../../../directives/tooltip';
-import GlButton from '../button/button.vue';
-import GlTooltip from './tooltip.vue';
-import readme from './tooltip.md';
-
-function makeTooltip(modifier = '') {
-  return {
-    components: { GlTooltip, GlButton },
-    directives: {
-      GlTooltip: GlTooltipDirective,
-    },
-    template: `
-    <div class="gl-display-flex gl-align-items-center gl-justify-content-center gl-p-7 gl-m-7">
-      <gl-button
-        v-gl-tooltip${modifier}
-        title="some tooltip text"
-      >
-          Tooltip
-      </gl-button>
-    </div>
-  `,
-  };
-}
-
-const play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const button = canvas.getByRole('button');
-  await userEvent.click(button);
-  await waitFor(() => expect(button).toHaveFocus());
-  await waitFor(() => expect(within(document).getByRole('tooltip')).toBeVisible());
-};
-
-export const TopDefault = (args, argTypes) => ({
-  ...makeTooltip(),
-  props: Object.keys(argTypes),
-});
-TopDefault.play = play;
-
-export const Right = (args, argTypes) => ({
-  ...makeTooltip('.right'),
-  props: Object.keys(argTypes),
-});
-Right.play = play;
-
-export const Bottom = (args, argTypes) => ({
-  ...makeTooltip('.bottom'),
-  props: Object.keys(argTypes),
-});
-Bottom.play = play;
-
-export const Left = (args, argTypes) => ({
-  ...makeTooltip('.left'),
-  props: Object.keys(argTypes),
-});
-Left.play = play;
-
-// A default export contains higher-level info about the component and the stories' settings.
-export default {
-  title: 'base/tooltip',
-  component: GlTooltip,
-  parameters: {
-    bootstrapComponent: 'b-tooltip',
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};