@gitlab/ui 80.13.1 → 80.14.0

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

@@ -1,209 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import ClearIcon from '~/components/shared_components/clear_icon_button/clear_icon_button.vue';
-import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown.vue';
-import GlDisclosureDropdownItem from '../new_dropdowns/disclosure/disclosure_dropdown_item.vue';
-import GlFormInput from '../form/form_input/form_input.vue';
-import SearchBoxByClick from './search_box_by_click.vue';
-
-const GlFormInputGroupStub = {
-  template: `
-    <div>
-      <slot name="prepend"></slot>
-      <slot></slot>
-      <slot name="append"></slot>
-    </div>
-  `,
-};
-
-describe('search box by click component', () => {
-  let wrapper;
-
-  const createComponent = (propsData) => {
-    wrapper = shallowMount(SearchBoxByClick, {
-      propsData,
-      stubs: {
-        GlDisclosureDropdown,
-        GlFormInputGroup: GlFormInputGroupStub,
-      },
-    });
-  };
-
-  const findClearIcon = () => wrapper.findComponent(ClearIcon);
-  const findSearchButton = () => wrapper.find('[data-testid="search-button"]');
-
-  it('emits input event when input changes', async () => {
-    createComponent({ value: 'somevalue' });
-
-    wrapper.findComponent({ ref: 'input' }).vm.$emit('input', 'new value');
-
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted('input')).toEqual([['new value']]);
-  });
-
-  it('does not emit an input event when input is updated to the same value', async () => {
-    createComponent({ value: 'somevalue' });
-
-    await wrapper.setProps({ value: 'another value' });
-
-    expect(wrapper.emitted('input')).toBe(undefined);
-  });
-
-  it('does not displays history dropdown by default', () => {
-    createComponent();
-    expect(wrapper.findComponent({ ref: 'historyDropdown' }).exists()).toBe(false);
-  });
-
-  describe('clear button', () => {
-    it('is not rendered when value is empty', () => {
-      createComponent({ value: '' });
-      expect(findClearIcon().exists()).toBe(false);
-    });
-
-    it('is not rendered when clearable is false', () => {
-      createComponent({ value: 'some', clearable: false });
-      expect(findClearIcon().exists()).toBe(false);
-    });
-
-    it('is rendered when value is provided', () => {
-      createComponent({ value: 'somevalue' });
-      expect(findClearIcon().exists()).toBe(true);
-    });
-
-    it('emits empty string when clicked', async () => {
-      createComponent({ value: 'somevalue' });
-      findClearIcon().vm.$emit('click');
-
-      await wrapper.vm.$nextTick();
-      expect(wrapper.emitted('input')).toEqual([['']]);
-    });
-
-    it('emits clear event when clicked', async () => {
-      createComponent({ value: 'somevalue' });
-      findClearIcon().vm.$emit('click');
-      await wrapper.vm.$nextTick();
-
-      expect(wrapper.emitted('clear')).toHaveLength(1);
-    });
-  });
-
-  describe('when historyItems prop is provided', () => {
-    beforeEach(() => {
-      createComponent({ historyItems: ['one', 'two', 'three'] });
-    });
-
-    it('displays history dropdown', () => {
-      expect(wrapper.findComponent({ ref: 'historyDropdown' }).exists()).toBe(true);
-    });
-
-    it('emits clear-history event when clear button is clicked', () => {
-      wrapper.findComponent({ ref: 'clearHistory' }).vm.$emit('click');
-
-      expect(wrapper.emitted()['clear-history'].length).toBe(1);
-    });
-
-    it('emits proper events when history item is clicked', async () => {
-      wrapper.findComponent(GlDisclosureDropdownItem).vm.$emit('action');
-
-      await wrapper.vm.$nextTick();
-      expect(wrapper.emitted('input')[0]).toEqual(['one']);
-      expect(wrapper.emitted()['history-item-selected'][0]).toEqual(['one']);
-    });
-  });
-
-  describe('disabled state', () => {
-    beforeEach(() => {
-      createComponent({
-        value: 'somevalue',
-        historyItems: ['one', 'two', 'three'],
-        disabled: true,
-      });
-    });
-
-    it('displays disabled history dropdown', () => {
-      expect(wrapper.findComponent({ ref: 'historyDropdown' }).exists()).toBe(true);
-      expect(
-        wrapper.findComponent({ ref: 'historyDropdown' }).attributes('disabled')
-      ).toBeDefined();
-    });
-
-    it('displays disabled input', () => {
-      expect(wrapper.findComponent({ ref: 'input' }).exists()).toBe(true);
-      expect(wrapper.findComponent({ ref: 'input' }).attributes('disabled')).toBeDefined();
-    });
-
-    it('displays disabled search button', () => {
-      expect(findSearchButton().exists()).toBe(true);
-      expect(findSearchButton().attributes('disabled')).toBeDefined();
-    });
-
-    it('does not render clear icon even with value', () => {
-      expect(findClearIcon().exists()).toBe(false);
-    });
-  });
-
-  it('emits submit event when Enter key is pressed', async () => {
-    createComponent({ value: 'some-input' });
-
-    await wrapper.findComponent(GlFormInput).trigger('keydown.enter');
-
-    expect(wrapper.emitted('submit')[0]).toEqual(['some-input']);
-  });
-
-  it('emits submit event when search button is pressed', async () => {
-    createComponent({ value: 'some-input' });
-    findSearchButton().vm.$emit('click');
-
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted('submit')[0]).toEqual(['some-input']);
-  });
-
-  it('adds `searchButtonAttributes` prop to search button', () => {
-    const searchButtonAttributes = { 'data-prop': 'foo-bar' };
-
-    createComponent({ searchButtonAttributes });
-
-    expect(findSearchButton().attributes('data-prop')).toBe(searchButtonAttributes['data-prop']);
-  });
-
-  describe('showSearchButton', () => {
-    describe('when false', () => {
-      beforeEach(() => {
-        createComponent({ showSearchButton: false, value: 'some-value' });
-      });
-
-      it('does not render the search button', () => {
-        expect(findSearchButton().exists()).toBe(false);
-      });
-
-      it('overrides the border style of the input', () => {
-        expect(wrapper.findComponent(GlFormInput).classes()).toContain('gl-rounded-base!');
-      });
-
-      it('does not add *-with-search-button css modifier', () => {
-        expect(wrapper.find('.gl-search-box-by-click').classes()).not.toContain(
-          'gl-search-box-by-click-with-search-button'
-        );
-      });
-    });
-
-    describe('when true', () => {
-      beforeEach(() => {
-        createComponent({ showSearchButton: true, value: 'some-value' });
-      });
-
-      it('does render the search button', () => {
-        expect(findSearchButton().exists()).toBe(true);
-      });
-
-      it('does not override the border style of the input', () => {
-        expect(wrapper.findComponent(GlFormInput).classes()).not.toContain('gl-rounded-base!');
-      });
-
-      it('adds *-with-search-button css modifier', () => {
-        expect(wrapper.find('.gl-search-box-by-click').classes()).toContain(
-          'gl-search-box-by-click-with-search-button'
-        );
-      });
-    });
-  });
-});

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

@@ -1,100 +0,0 @@
-import { disableControls } from '../../../utils/stories_utils';
-import GlSearchBoxByClick from './search_box_by_click.vue';
-import readme from './search_box_by_click.md';
-
-const template = `
-  <gl-search-box-by-click
-    :value="value"
-    :disabled="disabled"
-    :placeholder="placeholder"
-    :history-items="currentHistoryItems"
-    :clearable="clearable"
-    :recent-searches-header="recentSearchesHeader"
-    :clear-button-title="clearButtonTitle"
-    :close-button-title="closeButtonTitle"
-    :clear-recent-searches-text="clearRecentSearchesText"
-    :no-recent-searches-text="noRecentSearchesText"
-    :search-button-attributes="searchButtonAttributes"
-    :show-search-button="showSearchButton"
-    @clear-history="clearCurrentHistory"
-  />
-`;
-
-const defaultValue = (prop) => GlSearchBoxByClick.props[prop].default;
-
-const generateProps = ({
-  disabled = defaultValue('disabled'),
-  value = defaultValue('value'),
-  placeholder = defaultValue('placeholder'),
-  historyItems = defaultValue('historyItems'),
-  clearable = defaultValue('clearable'),
-  recentSearchesHeader = defaultValue('recentSearchesHeader'),
-  clearButtonTitle = defaultValue('clearButtonTitle'),
-  closeButtonTitle = defaultValue('closeButtonTitle'),
-  clearRecentSearchesText = defaultValue('clearRecentSearchesText'),
-  noRecentSearchesText = defaultValue('noRecentSearchesText'),
-  searchButtonAttributes = defaultValue('searchButtonAttributes')(),
-  showSearchButton = defaultValue('showSearchButton'),
-} = {}) => ({
-  disabled,
-  value,
-  placeholder,
-  historyItems,
-  clearable,
-  recentSearchesHeader,
-  clearButtonTitle,
-  closeButtonTitle,
-  clearRecentSearchesText,
-  noRecentSearchesText,
-  searchButtonAttributes,
-  showSearchButton,
-});
-
-const Template = (args, { argTypes }) => ({
-  components: {
-    GlSearchBoxByClick,
-  },
-  props: Object.keys(argTypes),
-  template,
-  data() {
-    return {
-      currentHistoryItems: this.historyItems,
-    };
-  },
-  watch: {
-    historyItems(historyItems) {
-      this.currentHistoryItems = historyItems;
-    },
-  },
-  methods: {
-    clearCurrentHistory() {
-      this.currentHistoryItems = [];
-    },
-  },
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const History = Template.bind({});
-History.args = generateProps({
-  historyItems: ['author:@admin', 'assignee:@admin milestone:%12.5', 'label:~test'],
-});
-
-export default {
-  title: 'base/search-box-by-click',
-  component: GlSearchBoxByClick,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    ...disableControls(['tooltipContainer']),
-    historyItems: {
-      control: 'object',
-    },
-  },
-};

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

@@ -1,164 +0,0 @@
-import { mount, shallowMount } from '@vue/test-utils';
-import ClearIcon from '~/components/shared_components/clear_icon_button/clear_icon_button.vue';
-import LoadingIcon from '../loading_icon/loading_icon.vue';
-import SearchBoxByType from './search_box_by_type.vue';
-
-const modelEvent = SearchBoxByType.model.event;
-const newValue = 'new value';
-
-describe('search box by type component', () => {
-  let wrapper;
-
-  const createComponent = ({ listeners, ...propsData }, mountFn = shallowMount) => {
-    wrapper = mountFn(SearchBoxByType, { propsData, listeners });
-  };
-
-  const findClearIcon = () => wrapper.findComponent(ClearIcon);
-  const findInput = () => wrapper.findComponent({ ref: 'input' });
-
-  describe('borderless', () => {
-    it('renders default class on input when `borderless` prop is false', () => {
-      createComponent({ borderless: false });
-
-      expect(findInput().classes()).toContain('gl-search-box-by-type-input');
-    });
-
-    it('renders borderless class on input when `borderless` prop is true', () => {
-      createComponent({ borderless: true });
-
-      expect(findInput().classes()).toContain('gl-search-box-by-type-input-borderless');
-    });
-  });
-
-  describe('clear icon component', () => {
-    beforeEach(() => {
-      createComponent({ value: 'somevalue' });
-    });
-
-    it('is not rendered when value is empty', () => {
-      createComponent({ value: '' });
-
-      expect(findClearIcon().exists()).toBe(false);
-    });
-
-    it('is not rendered when it is disabled', () => {
-      createComponent({ disabled: true, value: 'somevalue' });
-
-      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([['']]);
-    });
-
-    it('emits `focusin` event when focus inside the component', () => {
-      findInput().vm.$emit('focusin', { preventDefault: jest.fn() });
-
-      expect(wrapper.emitted('focus')).toBe(undefined);
-      expect(wrapper.emitted('focusin')).toHaveLength(1);
-    });
-    it('emits `focusout` event when focus moves outside the component', () => {
-      findInput().vm.$emit('focusout', { preventDefault: jest.fn() });
-      expect(wrapper.emitted('blur')).toBe(undefined);
-
-      expect(wrapper.emitted('focusout')).toHaveLength(1);
-    });
-
-    it('does NOT emit `focusout` event when tabbing inside the component back and forth', () => {
-      findInput().vm.$emit('focusout', {
-        preventDefault: jest.fn(),
-        relatedTarget: wrapper.vm.$refs.input.$el,
-      });
-      findClearIcon().vm.$emit('focusout', {
-        preventDefault: jest.fn(),
-        relatedTarget: wrapper.vm.$refs.clearButton.$el,
-      });
-
-      expect(wrapper.emitted('focusout')).toBe(undefined);
-    });
-  });
-
-  describe('v-model', () => {
-    beforeEach(() => {
-      createComponent({ value: 'somevalue' }, mount);
-    });
-
-    it('syncs value prop to input value', async () => {
-      wrapper.setProps({ value: newValue });
-      await wrapper.vm.$nextTick();
-
-      expect(findInput().element.value).toEqual(newValue);
-    });
-
-    it(`emits ${modelEvent} event when input value changes`, () => {
-      findInput().setValue(newValue);
-
-      expect(wrapper.emitted('input')).toEqual([[newValue]]);
-    });
-  });
-
-  // Regression test for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/937
-  describe('double input event bug', () => {
-    let listener;
-
-    beforeEach(() => {
-      listener = jest.fn();
-      createComponent({ listeners: { input: listener } }, mount);
-      findInput().setValue(newValue);
-    });
-
-    it('only calls the listener once', () => {
-      expect(listener.mock.calls).toEqual([[newValue]]);
-    });
-  });
-
-  describe('debounce', () => {
-    describe.each([10, 100, 1000])('given a debounce of %dms', (debounce) => {
-      beforeEach(() => {
-        jest.useFakeTimers();
-
-        createComponent({ debounce }, mount);
-
-        findInput().setValue(newValue);
-      });
-
-      it(`emits a ${modelEvent} after the debounce delay`, () => {
-        // Just before debounce completes
-        jest.advanceTimersByTime(debounce - 1);
-        expect(wrapper.emitted(modelEvent)).toBe(undefined);
-        // Exactly when debounce completes
-        jest.advanceTimersByTime(1);
-
-        expect(wrapper.emitted(modelEvent)).toEqual([[newValue]]);
-      });
-    });
-  });
-
-  describe('lazy', () => {
-    beforeEach(() => {
-      createComponent({ lazy: true }, mount);
-
-      findInput().setValue(newValue);
-    });
-
-    it.each(['change', 'blur'])(`emits ${modelEvent} event after input's %s event`, (event) => {
-      expect(wrapper.emitted(modelEvent)).toBe(undefined);
-
-      findInput().trigger(event);
-
-      expect(wrapper.emitted(modelEvent)).toEqual([[newValue]]);
-    });
-  });
-
-  it('renders loading icon when `isLoading` prop is provided', () => {
-    createComponent({ isLoading: true });
-
-    expect(wrapper.findComponent(LoadingIcon).exists()).toBe(true);
-  });
-});

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

@@ -1,63 +0,0 @@
-import { disableControls } from '../../../utils/stories_utils';
-import GlSearchBoxByType from './search_box_by_type.vue';
-import readme from './search_box_by_type.md';
-
-const template = `
-  <gl-search-box-by-type
-    v-model="searchQuery"
-    :borderless="borderless"
-    :clear-button-title="clearButtonTitle"
-    :disabled="disabled"
-    :is-loading="isLoading"
-    :placeholder="placeholder"
-  />
-`;
-
-const defaultValue = (prop) => GlSearchBoxByType.props[prop].default;
-
-const generateProps = ({
-  borderless = defaultValue('borderless'),
-  clearButtonTitle = defaultValue('clearButtonTitle'),
-  disabled = defaultValue('disabled'),
-  placeholder = 'Search',
-  isLoading = defaultValue('isLoading'),
-} = {}) => ({
-  borderless,
-  clearButtonTitle,
-  disabled,
-  placeholder,
-  isLoading,
-});
-
-const Template = (args, { argTypes }) => ({
-  components: {
-    GlSearchBoxByType,
-  },
-  props: Object.keys(argTypes),
-  data: () => ({ searchQuery: '' }),
-  template,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const Borderless = Template.bind({});
-Borderless.args = generateProps({
-  borderless: true,
-});
-
-export default {
-  title: 'base/search-box-by-type',
-  component: GlSearchBoxByType,
-  parameters: {
-    bootstrapComponent: 'b-form-input',
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    ...disableControls(['value']),
-  },
-};

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

@@ -1,135 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import SegmentedControl from './segmented_control.vue';
-
-const DISABLED_VALUE = 'disabled-three';
-
-describe('segmented control', () => {
-  let wrapper;
-  let consoleWarnSpy;
-
-  const defaultProps = {
-    options: [
-      { value: 'disabled-zero', text: 'zero', disabled: true },
-      { value: 'valid-one', text: 'one' },
-      { value: 'valid-two', text: 'two' },
-      { value: DISABLED_VALUE, text: 'three', disabled: true },
-    ],
-    checked: 'valid-one',
-  };
-
-  const createComponent = (propsData) => {
-    const options = {
-      propsData: {
-        ...defaultProps,
-        ...propsData,
-      },
-      shouldProxy: true,
-    };
-
-    wrapper = shallowMount(SegmentedControl, options);
-  };
-
-  beforeAll(() => {
-    consoleWarnSpy = jest.spyOn(global.console, 'warn');
-  });
-
-  afterAll(() => {
-    consoleWarnSpy.mockRestore();
-  });
-
-  beforeEach(() => {
-    consoleWarnSpy.mockClear();
-  });
-
-  const warning = 'Segmented button should always have valid option selected';
-  describe('with options and valid value', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    it('should not warn or emit', () => {
-      expect(global.console.warn).not.toHaveBeenCalled();
-      expect(Object.keys(wrapper.emitted)).toHaveLength(0);
-    });
-  });
-
-  describe.each`
-    checked                | desc
-    ${'nonexistent-value'} | ${'non existent'}
-    ${DISABLED_VALUE}      | ${'disabled'}
-  `('with value $desc', ({ checked }) => {
-    beforeEach(() => {
-      createComponent({ checked });
-    });
-
-    it('should warn', () => {
-      expect(global.console.warn).toHaveBeenCalledWith(warning);
-    });
-
-    it('should emit', () => {
-      expect(wrapper.emitted('input')).toEqual([['valid-one']]);
-    });
-  });
-
-  describe('with all options disabled', () => {
-    beforeEach(() => {
-      createComponent({
-        options: [{ value: 'disabled', disabled: true }],
-        checked: 'bogus',
-      });
-    });
-
-    it('should not emit', () => {
-      expect(Object.keys(wrapper.emitted())).toHaveLength(0);
-    });
-  });
-
-  describe('when updated with bad value', () => {
-    beforeEach(async () => {
-      createComponent();
-      wrapper.setProps({ checked: 'nonexistent-value' });
-      await wrapper.vm.$nextTick();
-    });
-
-    it('should log warning', () => {
-      expect(global.console.warn).toHaveBeenCalledWith(warning);
-    });
-
-    it('should emit value', () => {
-      expect(wrapper.emitted('input')).toEqual([['valid-one']]);
-    });
-  });
-
-  describe('when updated with bad options', () => {
-    beforeEach(async () => {
-      createComponent();
-      wrapper.setProps({ options: [{ value: 'bogus' }] });
-      await wrapper.vm.$nextTick();
-    });
-
-    it('should log warning', () => {
-      expect(global.console.warn).toHaveBeenCalledWith(warning);
-    });
-
-    it('should emit value', () => {
-      expect(wrapper.emitted('input')).toEqual([['bogus']]);
-    });
-  });
-
-  describe('when updated with a invalid value we only emit values that are legitimate', () => {
-    beforeEach(async () => {
-      createComponent();
-      wrapper.setProps({ checked: 'doomed-value' });
-      await wrapper.vm.$nextTick();
-      wrapper.setProps({ checked: 'doomed-value-2' });
-    });
-
-    it('should log warning', () => {
-      expect(global.console.warn).toHaveBeenCalledWith(warning);
-    });
-
-    it('should only emit a legitimate value', () => {
-      expect(wrapper.emitted('input')).toEqual([['valid-one'], ['valid-one']]);
-    });
-  });
-});