@gitlab/ui 80.13.1 → 80.14.0

package/src/components/base/form/form_combobox/form_combobox.spec.js

@@ -1,301 +0,0 @@
-import { nextTick } from 'vue';
-import cloneDeep from 'lodash/cloneDeep';
-import { mount } from '@vue/test-utils';
-import GlDropdownItem from '../../dropdown/dropdown_item.vue';
-import GlFormInput from '../form_input/form_input.vue';
-import {
-  stringTokenList,
-  labelText,
-  objectTokenList,
-  oneTokenList,
-  actionsList,
-} from './constants';
-import GlFormCombobox from './form_combobox.vue';
-
-const partialToken = 'do';
-const partialStringTokenMatch = ['dog', 'dodo', 'komodo dragon'];
-const partialObjectTokenMatch = [
-  { id: '2', title: 'dog' },
-  { id: '3', title: 'dodo' },
-  { id: '4', title: 'komodo dragon' },
-];
-const unlistedToken = 'elephant';
-
-const doTimes = (num, fn) => {
-  for (let i = 0; i < num; i += 1) {
-    fn();
-  }
-};
-
-describe('GlFormCombobox', () => {
-  let wrapper;
-
-  const createComponent = ({
-    tokens = stringTokenList,
-    matchValueToAttr = undefined,
-    actionList = [],
-  } = {}) => {
-    wrapper = mount({
-      data() {
-        return {
-          inputVal: '',
-          tokens,
-          labelText,
-          matchValueToAttr,
-          actionList,
-        };
-      },
-      components: { GlFormCombobox },
-      template: `
-        <div>
-          <gl-form-combobox
-            v-model="inputVal"
-            :token-list="tokens"
-            :label-text="labelText"
-            :match-value-to-attr="matchValueToAttr"
-            :action-list="actionList"
-          />
-        </div>
-      `,
-    });
-  };
-
-  // needs new selector now
-  const findDropdown = () => wrapper.find('[data-testid="combobox-dropdown"]');
-  const findDropdownOptions = () =>
-    wrapper.findAllComponents(GlDropdownItem).wrappers.map((item) => item.text());
-  const findInput = () => wrapper.findComponent(GlFormInput);
-  const findInputValue = () => findInput().element.value;
-  const setInput = (val) => findInput().setValue(val);
-  const arrowDown = () => findDropdown().trigger('keydown.down');
-  const arrowUp = () => findDropdown().trigger('keydown.up');
-  const enter = () => wrapper.find('[aria-selected="true"]').trigger('keydown.enter');
-  const findFirstAction = () => wrapper.find('[data-testid="combobox-action"]');
-
-  beforeAll(() => {
-    if (!HTMLElement.prototype.scrollIntoView) {
-      HTMLElement.prototype.scrollIntoView = jest.fn();
-    }
-  });
-
-  afterAll(() => {
-    if (HTMLElement.prototype.scrollIntoView.mock) {
-      delete HTMLElement.prototype.scrollIntoView;
-    }
-  });
-
-  describe.each`
-    valueType   | tokens             | matchValueToAttr | partialTokenMatch
-    ${'string'} | ${stringTokenList} | ${undefined}     | ${partialStringTokenMatch}
-    ${'object'} | ${objectTokenList} | ${'title'}       | ${partialObjectTokenMatch}
-  `('with value as $valueType', ({ valueType, tokens, matchValueToAttr, partialTokenMatch }) => {
-    describe('match and filter functionality', () => {
-      beforeEach(() => {
-        createComponent({ tokens, matchValueToAttr });
-      });
-
-      it('is closed when the input is empty', () => {
-        expect(findInput().isVisible()).toBe(true);
-        expect(findInputValue()).toBe('');
-        expect(findDropdown().isVisible()).toBe(false);
-      });
-
-      it('is open when the input text matches a token', async () => {
-        await setInput(partialToken);
-        expect(findDropdown().isVisible()).toBe(true);
-      });
-
-      it('shows partial matches at string start and mid-string', async () => {
-        await setInput(partialToken);
-        expect(findDropdown().isVisible()).toBe(true);
-
-        if (valueType === 'string') {
-          expect(findDropdownOptions()).toEqual(partialTokenMatch);
-        } else {
-          findDropdownOptions().forEach((option, index) => {
-            expect(option).toContain(partialTokenMatch[index][matchValueToAttr]);
-          });
-        }
-      });
-
-      it('is closed when the text does not match', async () => {
-        await setInput(unlistedToken);
-        expect(findDropdown().isVisible()).toBe(false);
-      });
-    });
-
-    describe('keyboard navigation in dropdown', () => {
-      beforeEach(() => {
-        createComponent({ tokens, matchValueToAttr });
-      });
-
-      describe('on down arrow + enter', () => {
-        it('selects the next item in the list and closes the dropdown', async () => {
-          await setInput(partialToken);
-          arrowDown();
-          await nextTick();
-          enter();
-          await nextTick();
-
-          if (valueType === 'string') {
-            expect(findInputValue()).toBe(partialTokenMatch[0]);
-          } else {
-            expect(findInputValue()).toBe(partialTokenMatch[0][matchValueToAttr]);
-          }
-        });
-
-        it('loops to the top when it reaches the bottom', async () => {
-          await setInput(partialToken);
-          doTimes(findDropdownOptions().length + 1, arrowDown);
-          await nextTick();
-          enter();
-          await nextTick();
-
-          if (valueType === 'string') {
-            expect(findInputValue()).toBe(partialTokenMatch[0]);
-          } else {
-            expect(findInputValue()).toBe(partialTokenMatch[0][matchValueToAttr]);
-          }
-        });
-      });
-
-      describe('on up arrow + enter', () => {
-        it('selects the previous item in the list and closes the dropdown', async () => {
-          setInput(partialToken);
-
-          await wrapper.vm.$nextTick();
-          doTimes(3, arrowDown);
-          arrowUp();
-          await nextTick();
-          enter();
-          await nextTick();
-
-          await wrapper.vm.$nextTick();
-
-          if (valueType === 'string') {
-            expect(findInputValue()).toBe(partialTokenMatch[1]);
-          } else {
-            expect(findInputValue()).toBe(partialTokenMatch[1][matchValueToAttr]);
-          }
-          expect(findDropdown().isVisible()).toBe(false);
-        });
-
-        it('loops to the bottom when it reaches the top', async () => {
-          await setInput(partialToken);
-          arrowDown();
-          arrowUp();
-          await nextTick();
-          enter();
-          await nextTick();
-
-          if (valueType === 'string') {
-            expect(findInputValue()).toBe(partialTokenMatch[partialTokenMatch.length - 1]);
-          } else {
-            expect(findInputValue()).toBe(
-              partialTokenMatch[partialTokenMatch.length - 1][matchValueToAttr]
-            );
-          }
-        });
-      });
-
-      describe('on enter with no item highlighted', () => {
-        it('does nothing', async () => {
-          await setInput(partialToken);
-          await findInput().trigger('keydown.enter');
-          expect(findInputValue()).toBe(partialToken);
-          expect(findDropdown().isVisible()).toBe(true);
-        });
-      });
-
-      describe('on click', () => {
-        it('selects the clicked item regardless of arrow highlight', async () => {
-          await setInput(partialToken);
-          await wrapper.find('[data-testid="combobox-dropdown"] button').trigger('click');
-
-          if (valueType === 'string') {
-            expect(findInputValue()).toBe(partialTokenMatch[0]);
-          } else {
-            expect(findInputValue()).toBe(partialTokenMatch[0][matchValueToAttr]);
-          }
-        });
-      });
-
-      describe('on tab', () => {
-        it('selects entered text, closes dropdown', async () => {
-          await setInput(partialToken);
-          findInput().trigger('keydown.tab');
-          doTimes(2, arrowDown);
-
-          await wrapper.vm.$nextTick();
-          expect(findInputValue()).toBe(partialToken);
-          expect(findDropdown().isVisible()).toBe(false);
-        });
-      });
-
-      describe('on esc', () => {
-        describe('when dropdown is open', () => {
-          it('closes dropdown and does not select anything', async () => {
-            await setInput(partialToken);
-            await findInput().trigger('keydown.esc');
-            expect(findInputValue()).toBe(partialToken);
-            expect(findDropdown().isVisible()).toBe(false);
-          });
-        });
-
-        describe('when dropdown is closed', () => {
-          it('clears the input field', async () => {
-            await setInput(unlistedToken);
-            expect(findDropdown().isVisible()).toBe(false);
-            await findInput().trigger('keydown.esc');
-            expect(findInputValue()).toBe('');
-          });
-        });
-      });
-    });
-  });
-
-  describe('with action items', () => {
-    let actionSpy;
-    const windowAlert = window.alert;
-
-    beforeEach(() => {
-      const actionList = cloneDeep(actionsList);
-      actionSpy = jest.spyOn(actionList[0], 'fn');
-      createComponent({ tokens: oneTokenList, actionList });
-      window.alert = jest.fn();
-    });
-
-    afterEach(() => {
-      window.alert = windowAlert;
-    });
-
-    it('click on action item executes its function', async () => {
-      await setInput(partialToken);
-      expect(findDropdown().isVisible()).toBe(true);
-
-      await findFirstAction().trigger('click');
-
-      expect(actionSpy).toHaveBeenCalled();
-      expect(findDropdown().isVisible()).toBe(false);
-    });
-
-    it('keyboard navigation and executes function on enter', async () => {
-      await setInput('dog');
-      doTimes(2, arrowDown);
-      await nextTick();
-      enter();
-      await nextTick();
-
-      expect(actionSpy).toHaveBeenCalled();
-      expect(findDropdown().isVisible()).toBe(false);
-    });
-
-    it('displays only action items when no result match input value', async () => {
-      await setInput('doNotMatchAnything');
-      expect(findDropdown().isVisible()).toBe(true);
-
-      expect(findFirstAction().exists()).toBe(true);
-      expect(findDropdownOptions().length).toBe(2);
-    });
-  });
-});

package/src/components/base/form/form_combobox/form_combobox.stories.js

@@ -1,116 +0,0 @@
-import { userEvent, within, waitFor, expect } from '@storybook/test';
-import { makeContainer } from '../../../../utils/story_decorators/container';
-import { stringTokenList, labelText, objectTokenList, actionsList } from './constants';
-import readme from './form_combobox.md';
-import GlFormCombobox from './form_combobox.vue';
-
-const template = `
-  <gl-form-combobox
-    v-model="value"
-    ref="combobox"
-    :token-list="tokenList"
-    :label-text="labelText"
-    :match-value-to-attr="matchValueToAttr"
-    :action-list="actionList"
-  />`;
-
-const generateProps = ({
-  tokenList = stringTokenList,
-  matchValueToAttr,
-  actionList = undefined,
-} = {}) => ({
-  tokenList,
-  labelText,
-  matchValueToAttr,
-  actionList,
-});
-
-const Template = (args) => ({
-  components: { GlFormCombobox },
-  data: () => {
-    return {
-      value: '',
-    };
-  },
-  props: Object.keys(args),
-  template,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const WithObjectValue = (args, { argTypes }) => ({
-  components: { GlFormCombobox },
-  props: Object.keys(argTypes),
-  data: () => {
-    return {
-      value: '',
-    };
-  },
-  template: `
-    <gl-form-combobox
-      v-model="value"
-      ref="combobox"
-      :token-list="tokenList"
-      :label-text="labelText"
-      :match-value-to-attr="matchValueToAttr"
-    >
-      <template #result="{ item }">
-        <div class="gl-display-flex">
-          <div class="gl-text-subtle gl-mr-4">{{ item.id }}</div>
-          <div>{{ item.title }}</div>
-        </div>
-      </template>
-    </gl-form-combobox>
-  `,
-});
-WithObjectValue.args = generateProps({ tokenList: objectTokenList, matchValueToAttr: 'title' });
-WithObjectValue.decorators = [makeContainer({ height: '370px' })];
-WithObjectValue.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const searchbox = canvas.getByRole('searchbox');
-  userEvent.type(searchbox, 'g');
-
-  await waitFor(() =>
-    expect(within(document).getByRole('menuitem', { name: '1 giraffe' })).toBeVisible()
-  );
-  await waitFor(() => expect(searchbox).toHaveFocus());
-};
-
-export const WithActions = (args, { argTypes }) => ({
-  components: { GlFormCombobox },
-  props: Object.keys(argTypes),
-  template,
-  data: () => {
-    return {
-      value: '',
-    };
-  },
-});
-WithActions.args = generateProps({
-  tokenList: stringTokenList,
-  actionList: actionsList,
-});
-WithActions.decorators = [makeContainer({ height: '180px' })];
-WithActions.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const searchbox = canvas.getByRole('searchbox');
-  userEvent.type(searchbox, 'dog');
-
-  await waitFor(() =>
-    expect(within(document).getByRole('menuitem', { name: 'dog' })).toBeVisible()
-  );
-  await waitFor(() => expect(searchbox).toHaveFocus());
-};
-
-export default {
-  title: 'base/form/form-combobox',
-  component: GlFormCombobox,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

package/src/components/base/form/form_date/form_date.spec.js

@@ -1,85 +0,0 @@
-import { mount, shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
-import GlFormDate from './form_date.vue';
-
-describe('GlFormDate', () => {
-  let wrapper;
-
-  const createComponent = (propsData = {}, mountFn = shallowMount) => {
-    wrapper = mountFn(GlFormDate, { propsData });
-  };
-
-  const findInput = () => wrapper.findComponent({ ref: 'input' });
-  const findInvalidFeedback = () => wrapper.findComponent({ ref: 'invalidFeedback' });
-  const findOutput = () => wrapper.findComponent({ ref: 'output' });
-
-  describe('props', () => {
-    it.each`
-      propName   | value           | attribute  | expectedValue
-      ${'id'}    | ${'idForInput'} | ${'id'}    | ${'idForInput'}
-      ${'min'}   | ${'2020-01-01'} | ${'min'}   | ${'2020-01-01'}
-      ${'max'}   | ${'2020-01-31'} | ${'max'}   | ${'2020-01-31'}
-      ${'value'} | ${'2020-01-19'} | ${'value'} | ${'2020-01-19'}
-    `(
-      'when `$propName` prop is passed sets input `$attribute` to `$expectedValue`',
-      ({ propName, value, attribute, expectedValue }) => {
-        createComponent({ [propName]: value });
-
-        expect(findInput().attributes(attribute)).toBe(expectedValue);
-      }
-    );
-
-    it('when `id` prop is not passed sets a unique input `id` attribute', async () => {
-      createComponent({ value: '2019-01-01' }, mount);
-      await nextTick();
-      await nextTick();
-      expect(findInput().attributes('id')).not.toBe('');
-      expect(findOutput().attributes('for')).not.toBe('');
-      expect(findInput().attributes('id')).toMatch(findOutput().attributes('for'));
-    });
-
-    it.each`
-      propName   | attribute  | expectedValue
-      ${'min'}   | ${'min'}   | ${undefined}
-      ${'max'}   | ${'max'}   | ${undefined}
-      ${'value'} | ${'value'} | ${undefined}
-    `(
-      'when `$propName` prop is not passed sets input `$attribute` attribute to `$expectedValue`',
-      ({ attribute, expectedValue }) => {
-        createComponent();
-
-        expect(findInput().attributes(attribute)).toBe(expectedValue);
-      }
-    );
-  });
-
-  describe('validation', () => {
-    it('when `value` is less than `min` adds `aria-invalid="true"` attribute and invalid-feedback`', () => {
-      createComponent(
-        {
-          min: '2020-01-01',
-          value: '2019-01-01',
-        },
-        mount
-      );
-
-      expect(findInput().attributes('aria-describedby')).toMatch('form-date-invalid-feedback-');
-      expect(findInput().attributes('aria-invalid')).toBe('true');
-      expect(findInvalidFeedback().text()).toBe('Must be after minimum date');
-    });
-
-    it('when `value` is greater than `max` adds `aria-invalid="true"` attribute and invalid-feedback`', () => {
-      createComponent(
-        {
-          max: '2020-01-01',
-          value: '2021-01-01',
-        },
-        mount
-      );
-
-      expect(findInput().attributes('aria-describedby')).toMatch('form-date-invalid-feedback-');
-      expect(findInput().attributes('aria-invalid')).toBe('true');
-      expect(findInvalidFeedback().text()).toBe('Must be before maximum date');
-    });
-  });
-});

package/src/components/base/form/form_date/form_date.stories.js

@@ -1,108 +0,0 @@
-import GlFormGroup from '../form_group/form_group.vue';
-import readme from './form_date.md';
-import GlFormDate from './form_date.vue';
-
-const defaultValue = (prop) => GlFormDate.props[prop].default;
-
-const template = `
-<gl-form-group :label="labelText" :label-for="inputId">
-  <gl-form-date
-    :id="inputId"
-    v-model="localValue"
-    :disabled="disabled"
-    :min="min"
-    :max="max"
-    :min-invalid-feedback="minInvalidFeedback"
-    :max-invalid-feedback="maxInvalidFeedback"
-    :readonly="readonly"
-    :value="value"
-  />
-</gl-form-group>`;
-
-const generateProps = ({
-  inputId = 'input-id',
-  labelText = 'Label',
-  disabled = false,
-  min = '',
-  max = '',
-  minInvalidFeedback = defaultValue('minInvalidFeedback'),
-  maxInvalidFeedback = defaultValue('maxInvalidFeedback'),
-  readonly = false,
-  value = '',
-} = {}) => ({
-  inputId,
-  labelText,
-  disabled,
-  min,
-  max,
-  minInvalidFeedback,
-  maxInvalidFeedback,
-  readonly,
-  value,
-});
-
-const Template = (args) => ({
-  components: { GlFormDate, GlFormGroup },
-  props: Object.keys(args),
-  watch: {
-    value(newValue) {
-      this.localValue = newValue;
-    },
-  },
-  data() {
-    return {
-      localValue: this.value,
-    };
-  },
-  template,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const Disabled = Template.bind({});
-Disabled.args = generateProps({ disabled: true });
-
-export const DisabledValue = Template.bind({});
-DisabledValue.args = generateProps({
-  disabled: true,
-  value: '2020-01-19',
-});
-
-export const MinMaxDates = Template.bind({});
-MinMaxDates.args = generateProps({
-  min: '2020-01-01',
-  max: '2020-01-31',
-  minInvalidFeedback: 'Must be after 2020-01-01',
-  maxInvalidFeedback: 'Must be before 2020-01-31',
-});
-
-export const Readonly = Template.bind({});
-Readonly.args = generateProps({
-  readonly: true,
-  value: '2020-01-19',
-});
-
-export const Value = Template.bind({});
-Value.args = generateProps({ value: '2020-01-15' });
-
-export const InvalidDate = Template.bind({});
-InvalidDate.args = generateProps({
-  min: '2020-01-01',
-  max: '2020-01-31',
-  minInvalidFeedback: 'Must be after 2020-01-01',
-  maxInvalidFeedback: 'Must be before 2020-01-31',
-  value: '2020-02-02',
-});
-
-export default {
-  title: 'base/form/form-date',
-  component: GlFormDate,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

package/src/components/base/form/form_fields/form_field_validator.spec.js

@@ -1,51 +0,0 @@
-import { mount } from '@vue/test-utils';
-import GlFormFieldValidator from './form_field_validator.vue';
-import { required } from './validators';
-
-const TEST_VALUE = 'root';
-const TEST_MESSAGE = 'this is a required field';
-
-describe('GlFormFieldValidators', () => {
-  let wrapper;
-
-  const createWrapper = (props = {}) => {
-    wrapper = mount(GlFormFieldValidator, {
-      propsData: {
-        value: TEST_VALUE,
-        validators: [required(TEST_MESSAGE)],
-        shouldValidate: true,
-        ...props,
-      },
-    });
-  };
-  it('should call validators with value prop', () => {
-    const validators = [jest.fn(), jest.fn(), jest.fn()];
-
-    createWrapper({ validators });
-
-    validators.forEach((validator) => expect(validator).toHaveBeenCalledWith(TEST_VALUE));
-  });
-  it('should not call validators when told not to', () => {
-    const validators = [jest.fn(), jest.fn(), jest.fn()];
-
-    createWrapper({ validators, shouldValidate: false });
-
-    validators.forEach((validator) => expect(validator).not.toHaveBeenCalledWith(TEST_VALUE));
-  });
-
-  it('should not render anything ever forever', () => {
-    createWrapper();
-
-    expect(wrapper.html()).toBe('');
-  });
-
-  it('should emit update with result of validator', async () => {
-    createWrapper();
-
-    expect(wrapper.emitted('update')).toBeUndefined();
-
-    await wrapper.setProps({ value: '' });
-
-    expect(wrapper.emitted('update')).toEqual([[TEST_MESSAGE]]);
-  });
-});