@gitlab/ui 80.13.1 → 80.14.0

package/src/components/base/new_dropdowns/listbox/listbox_group.spec.js

@@ -1,61 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import GlListboxGroup from './listbox_group.vue';
-
-describe('GlListboxGroup', () => {
-  let wrapper;
-  const name = 'Group name';
-
-  const buildWrapper = ({ propsData, slots } = {}) => {
-    wrapper = shallowMount(GlListboxGroup, {
-      propsData: {
-        name,
-        ...propsData,
-      },
-      slots,
-    });
-  };
-
-  const findByTestId = (testid, root = wrapper) => root.find(`[data-testid="${testid}"]`);
-  const findLabelElement = () => {
-    const labelElementId = wrapper.attributes('aria-labelledby');
-    return wrapper.find(`#${labelElementId}`);
-  };
-
-  it('renders a group', () => {
-    buildWrapper();
-
-    expect(wrapper.find('ul[role="group"]').element).toBe(wrapper.element);
-  });
-
-  it('renders default slot content', () => {
-    buildWrapper({ slots: { default: '<li data-testid="default-slot-content"></li>' } });
-
-    expect(findByTestId('default-slot-content').exists()).toBe(true);
-  });
-
-  it('labels the group', () => {
-    buildWrapper();
-
-    expect(findLabelElement().text()).toBe(name);
-  });
-
-  it('allows arbitrary content for group label', () => {
-    buildWrapper({ slots: { 'group-label': '<i data-testid="custom-name"></i>' } });
-
-    expect(findByTestId('custom-name', findLabelElement()).exists()).toBe(true);
-  });
-
-  describe('`textSrOnly` is true', () => {
-    beforeEach(() => {
-      buildWrapper({
-        propsData: {
-          textSrOnly: true,
-        },
-      });
-    });
-
-    it('adds `gl-sr-only` class', () => {
-      expect(findLabelElement().classes('gl-sr-only')).toBe(true);
-    });
-  });
-});

package/src/components/base/new_dropdowns/listbox/listbox_item.spec.js

@@ -1,129 +0,0 @@
-import { mount } from '@vue/test-utils';
-import GLIcon from '../../icon/icon.vue';
-
-import { ENTER, SPACE } from '../constants';
-import GlListboxItem from './listbox_item.vue';
-
-describe('GlListboxItem', () => {
-  let wrapper;
-
-  const buildWrapper = (propsData, slots = {}) => {
-    wrapper = mount(GlListboxItem, {
-      propsData,
-      slots,
-    });
-  };
-  const findItem = () => wrapper.find('[role="option"]');
-  const findCheckIcon = () => findItem().findComponent(GLIcon);
-
-  describe('toggleSelection', () => {
-    describe('when selected', () => {
-      beforeEach(() => {
-        buildWrapper({ isSelected: true });
-      });
-
-      it('should set `aria-selected` attribute on the list item to `true`', () => {
-        expect(findItem().attributes('aria-selected')).toBe('true');
-      });
-
-      it('should display check icon', () => {
-        expect(findCheckIcon().classes()).not.toContain('gl-visibility-hidden');
-      });
-
-      it('should emit the `select` event when clicked', async () => {
-        await findItem().trigger('click');
-        expect(wrapper.emitted('select')[0][0]).toBe(false);
-      });
-
-      it('should emit the `select` event on `ENTER` keydown event', async () => {
-        await findItem().trigger('click');
-        findItem().trigger('keydown', { code: SPACE });
-        expect(wrapper.emitted('select')[0][0]).toBe(false);
-      });
-
-      it('should emit the `select` event on `SPACE` keydown event', async () => {
-        await findItem().trigger('click');
-        findItem().trigger('keydown', { code: SPACE });
-        expect(wrapper.emitted('select')[0][0]).toBe(false);
-      });
-    });
-
-    describe('when not selected', () => {
-      beforeEach(() => {
-        buildWrapper({ isSelected: false });
-      });
-
-      it('should set `aria-selected` attribute on the list item to `false`', () => {
-        expect(findItem().attributes('aria-selected')).toBeUndefined();
-      });
-
-      it('should not  display check icon', () => {
-        expect(findCheckIcon().classes()).toContain('gl-visibility-hidden');
-      });
-
-      it('should emit the `select` event when clicked', async () => {
-        await findItem().trigger('click');
-        expect(wrapper.emitted('select')[0][0]).toBe(true);
-      });
-
-      it('should emit the `select` event on `ENTER` keydown event', async () => {
-        await findItem().trigger('click');
-        findItem().trigger('keydown', { code: ENTER });
-        expect(wrapper.emitted('select')[0][0]).toBe(true);
-      });
-
-      it('should emit the `select` event on `SPACE` keydown event', async () => {
-        await findItem().trigger('click');
-        findItem().trigger('keydown', { code: SPACE });
-        expect(wrapper.emitted('select')[0][0]).toBe(true);
-      });
-    });
-  });
-
-  describe('checkbox', () => {
-    describe('is NOT centered', () => {
-      beforeEach(() => {
-        buildWrapper({ isSelected: true });
-      });
-
-      it('should not center check icon by default', () => {
-        expect(findCheckIcon().classes()).toEqual(
-          expect.arrayContaining(['gl-mt-3', 'gl-align-self-start'])
-        );
-      });
-    });
-
-    describe('is centered', () => {
-      beforeEach(() => {
-        buildWrapper({ isSelected: true, isCheckCentered: true });
-      });
-      it('should center the check icon', () => {
-        expect(findCheckIcon().classes()).not.toEqual(
-          expect.arrayContaining(['gl-mt-3', 'gl-align-self-start'])
-        );
-      });
-    });
-  });
-
-  describe('tabindex', () => {
-    it('should set tabindex to `-1` when item is not focused', () => {
-      buildWrapper({ isFocused: false });
-      expect(wrapper.attributes('tabindex')).toBe('-1');
-    });
-
-    it('should set tabindex to `0` when item is focused', () => {
-      buildWrapper({ isFocused: true });
-      expect(wrapper.attributes('tabindex')).toBe('0');
-    });
-  });
-
-  describe('when default slot content provided', () => {
-    const content = 'This is an item';
-    const slots = { default: content };
-
-    it('renders it', () => {
-      buildWrapper({}, slots);
-      expect(wrapper.text()).toContain(content);
-    });
-  });
-});

package/src/components/base/new_dropdowns/listbox/listbox_search_input.spec.js

@@ -1,62 +0,0 @@
-import { mount, shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
-import ClearIcon from '~/components/shared_components/clear_icon_button/clear_icon_button.vue';
-import ListboxSearchInput from './listbox_search_input.vue';
-
-const modelEvent = ListboxSearchInput.model.event;
-const newSearchValue = 'new value';
-
-describe('listbox search input component', () => {
-  let wrapper;
-  const searchValue = 'some value';
-
-  const createComponent = ({ listeners, ...propsData }, mountFn = shallowMount) => {
-    wrapper = mountFn(ListboxSearchInput, { propsData, listeners });
-  };
-
-  const findClearIcon = () => wrapper.findComponent(ClearIcon);
-  const findInput = () => wrapper.findComponent({ ref: 'input' });
-
-  describe('clear icon component', () => {
-    beforeEach(() => {
-      createComponent({ value: searchValue });
-    });
-
-    it('is not rendered when value is empty', () => {
-      createComponent({ value: '' });
-
-      expect(findClearIcon().exists()).toBe(false);
-    });
-
-    it('is rendered when value is provided', () => {
-      expect(findClearIcon().exists()).toBe(true);
-    });
-
-    it('emits empty value when clicked', () => {
-      findClearIcon().vm.$emit('click', { stopPropagation: jest.fn() });
-
-      expect(wrapper.emitted('input')).toEqual([['']]);
-    });
-  });
-
-  describe('v-model', () => {
-    beforeEach(() => {
-      jest.useFakeTimers();
-      createComponent({ value: searchValue }, mount);
-    });
-
-    it('syncs value prop to input value', async () => {
-      expect(findInput().element.value).toEqual(searchValue);
-      wrapper.setProps({ value: newSearchValue });
-      await nextTick();
-
-      expect(findInput().element.value).toEqual(newSearchValue);
-    });
-
-    it(`emits ${modelEvent} event when input value changes`, async () => {
-      findInput().setValue(newSearchValue);
-      await nextTick();
-      expect(wrapper.emitted('input')).toEqual([[newSearchValue]]);
-    });
-  });
-});

package/src/components/base/new_dropdowns/listbox/utils.spec.js

@@ -1,58 +0,0 @@
-import { isOption, flattenedOptions, itemsValidator } from './utils';
-import { mockOptions, mockGroups } from './mock_data';
-
-describe('isOption', () => {
-  it.each([null, undefined, {}, { value: null }, { text: 'group', options: [] }])(
-    'isOption(%p) === false',
-    (notAnOption) => {
-      expect(isOption(notAnOption)).toBe(false);
-    }
-  );
-
-  it.each([
-    { value: '' },
-    { value: 5.3 },
-    { value: 'foo', text: 'bar' },
-    { value: 'qux', foo: true },
-  ])('isOption(%p) === true', (option) => {
-    expect(isOption(option)).toBe(true);
-  });
-});
-
-describe('flattenedOptions', () => {
-  it('returns flattened items as-is', () => {
-    expect(flattenedOptions(mockOptions)).toEqual(mockOptions);
-  });
-
-  it('returns flattened items given groups items', () => {
-    expect(flattenedOptions(mockGroups)).toEqual([
-      ...mockGroups[0].options,
-      ...mockGroups[1].options,
-    ]);
-  });
-
-  it('returns flattened items given mixed items/groups', () => {
-    expect(flattenedOptions([...mockOptions, ...mockGroups])).toEqual([
-      ...mockOptions,
-      ...mockGroups[0].options,
-      ...mockGroups[1].options,
-    ]);
-  });
-});
-
-describe('itemsValidator', () => {
-  it.each`
-    description                         | value                                                                                   | expected
-    ${'valid flat items'}               | ${mockOptions}                                                                          | ${true}
-    ${'valid grouped items'}            | ${mockGroups}                                                                           | ${true}
-    ${'empty list'}                     | ${[]}                                                                                   | ${true}
-    ${'invalid items'}                  | ${[{ foo: true }]}                                                                      | ${false}
-    ${'group with invalid items'}       | ${[{ text: 'foo', options: [{ foo: true }] }]}                                          | ${false}
-    ${'non-unique items'}               | ${[{ value: 'a' }, { value: 'a' }]}                                                     | ${false}
-    ${'non-unique items across groups'} | ${[{ text: 'a', options: [{ value: 'b' }] }, { text: 'z', options: [{ value: 'b' }] }]} | ${false}
-    ${'non-unique groups'}              | ${[{ text: 'a', options: [] }, { text: 'a', options: [] }]}                             | ${false}
-    ${'sibling groups and options'}     | ${[...mockOptions, ...mockGroups]}                                                      | ${false}
-  `('returns $expected given $description', ({ value, expected }) => {
-    expect(itemsValidator(value)).toBe(expected);
-  });
-});