@gitlab/ui 80.13.1 → 80.14.0

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

@@ -1,56 +0,0 @@
-import { noEmojis, required } from './validators';
-
-const TEST_FAIL_MESSAGE = 'Yo test failed!';
-
-describe('components/base/form/form_fields/validators', () => {
-  // note: We used the `factory` to build required, so we implicitly test `factory` heere
-  describe('required', () => {
-    let validator;
-
-    beforeEach(() => {
-      validator = required(TEST_FAIL_MESSAGE);
-    });
-
-    it.each`
-      input        | output
-      ${''}        | ${TEST_FAIL_MESSAGE}
-      ${null}      | ${TEST_FAIL_MESSAGE}
-      ${undefined} | ${TEST_FAIL_MESSAGE}
-      ${'123'}     | ${''}
-      ${{}}        | ${''}
-      ${0}         | ${''}
-      ${1}         | ${''}
-      ${true}      | ${''}
-      ${false}     | ${''}
-    `('with $input, returns $output', ({ input, output }) => {
-      expect(validator(input)).toBe(output);
-    });
-  });
-
-  describe('noEmojis', () => {
-    let validator;
-
-    beforeEach(() => {
-      validator = noEmojis(TEST_FAIL_MESSAGE);
-    });
-
-    it.each`
-      input        | output
-      ${'123🐱'}   | ${TEST_FAIL_MESSAGE}
-      ${'0 🍩'}    | ${TEST_FAIL_MESSAGE}
-      ${'🐟'}      | ${TEST_FAIL_MESSAGE}
-      ${''}        | ${''}
-      ${null}      | ${''}
-      ${undefined} | ${''}
-      ${'123'}     | ${''}
-      ${'0'}       | ${''}
-      ${{}}        | ${''}
-      ${0}         | ${''}
-      ${1}         | ${''}
-      ${true}      | ${''}
-      ${false}     | ${''}
-    `('with $input, returns $output', ({ input, output }) => {
-      expect(validator(input)).toBe(output);
-    });
-  });
-});

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

@@ -1,110 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { BFormGroup } from 'bootstrap-vue';
-import GlFormGroup from './form_group.vue';
-
-describe('Form group component', () => {
-  let wrapper;
-
-  const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
-
-  const findLabelDescription = () => findByTestId('label-description');
-  const findOptionalLabel = () => findByTestId('optional-label');
-
-  const createComponent = (options) => {
-    wrapper = shallowMount(GlFormGroup, {
-      ...options,
-      stubs: { BFormGroup },
-    });
-  };
-
-  it.each`
-    labelClass                      | expectedProp
-    ${'additional-class'}           | ${'additional-class col-form-label'}
-    ${['additional-class']}         | ${['additional-class', 'col-form-label']}
-    ${{ 'additional-class': true }} | ${{ 'additional-class': true, 'col-form-label': true }}
-    ${undefined}                    | ${'col-form-label'}
-  `(
-    'computed label class is $expectedProp when labelClass is $labelClass',
-    ({ labelClass, expectedProp }) => {
-      createComponent({
-        propsData: {
-          labelClass,
-        },
-      });
-
-      expect(wrapper.findComponent(BFormGroup).props('labelClass')).toEqual(expectedProp);
-    }
-  );
-
-  describe('label-description slot', () => {
-    const labelDescriptionFromPropOptions = {
-      propsData: { labelDescription: 'label-description from props' },
-    };
-    const labelDescriptionFromSlotOptions = {
-      slots: { 'label-description': 'label-description from slots' },
-    };
-
-    it.each`
-      labelDescriptionFrom | options
-      ${'prop'}            | ${labelDescriptionFromPropOptions}
-      ${'prop'}            | ${labelDescriptionFromPropOptions}
-      ${'slot'}            | ${labelDescriptionFromSlotOptions}
-      ${'slot'}            | ${labelDescriptionFromSlotOptions}
-    `(
-      'when label-description is provided from $labelDescriptionFrom',
-      ({ labelDescriptionFrom, options }) => {
-        createComponent({
-          ...options,
-        });
-
-        expect(findLabelDescription().text()).toContain(
-          `label-description from ${labelDescriptionFrom}`
-        );
-      }
-    );
-  });
-
-  describe('label slot', () => {
-    const labelFromPropOptions = {
-      propsData: { label: 'label from props' },
-    };
-    const labelFromSlotOptions = {
-      slots: { label: 'label from slots' },
-    };
-
-    it.each`
-      labelFrom | options                 | optional | expectedOptional
-      ${'prop'} | ${labelFromPropOptions} | ${true}  | ${true}
-      ${'prop'} | ${labelFromPropOptions} | ${false} | ${false}
-      ${'slot'} | ${labelFromSlotOptions} | ${true}  | ${false}
-      ${'slot'} | ${labelFromSlotOptions} | ${false} | ${false}
-    `(
-      'when label is provided from $labelFrom, `optional` is $optional',
-      ({ labelFrom, options, optional, expectedOptional }) => {
-        createComponent({
-          ...options,
-          propsData: {
-            ...options.propsData,
-            optional,
-          },
-        });
-
-        expect(wrapper.text()).toContain(`label from ${labelFrom}`);
-        expect(findOptionalLabel().exists()).toBe(expectedOptional);
-      }
-    );
-
-    it('renders optionalText when `optional` is true', () => {
-      const optionalText = '(not required)';
-
-      createComponent({
-        propsData: {
-          optional: true,
-          optionalText,
-        },
-      });
-
-      expect(findOptionalLabel().text()).toBe(optionalText);
-    });
-  });
-});

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

@@ -1,123 +0,0 @@
-import { disableControls } from '../../../../utils/stories_utils';
-import GlFormInput from '../form_input/form_input.vue';
-import GlFormTextarea from '../form_textarea/form_textarea.vue';
-import readme from './form_group.md';
-import GlFormGroup from './form_group.vue';
-
-const components = {
-  GlFormGroup,
-};
-
-const generateProps = ({
-  id = 'group-1',
-  label = 'Label Name',
-  description = 'form group description',
-  labelDescription = '',
-  optional = GlFormGroup.props.optional.default,
-  optionalText = GlFormGroup.props.optionalText.default,
-} = {}) => ({
-  id,
-  label,
-  labelDescription,
-  optional,
-  optionalText,
-  description,
-});
-
-const makeBindings = (overrides = {}) =>
-  Object.entries({
-    ':id': "id + '_group'",
-    ':label-for': 'id',
-    ':label': 'label',
-    ':label-description': 'labelDescription',
-    ':optional': 'optional',
-    ':optional-text': 'optionalText',
-    ':description': 'description',
-    ...overrides,
-  })
-    .map(([key, value]) => `${key}="${value}"`)
-    .join(' ');
-
-const wrap = (template, bindingsOverrides = {}) => `
-  <gl-form-group
-    ${makeBindings(bindingsOverrides)}
-    >
-    ${template}
-  </gl-form-group>
-`;
-
-export const Default = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ...components, GlFormInput },
-  template: wrap('<gl-form-input :id="id" />'),
-});
-Default.args = generateProps();
-
-export const Disabled = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ...components, GlFormInput },
-  template: wrap('<gl-form-input :id="id"  type="text" value="Disabled" disabled />'),
-});
-Disabled.args = generateProps({ description: 'This feature is disabled' });
-
-export const WithTextarea = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ...components, GlFormTextarea },
-  template: wrap('<gl-form-textarea :id="id" placeholder="Enter something" />'),
-});
-WithTextarea.args = generateProps({
-  id: 'textarea2',
-  optional: true,
-  description: '',
-});
-
-export const WithLabelDescription = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ...components, GlFormInput },
-  template: wrap('<gl-form-input :id="id" />'),
-});
-WithLabelDescription.args = generateProps({
-  optional: true,
-  labelDescription: 'form label description',
-});
-
-export const WithValidations = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ...components, GlFormInput },
-  template: `
-    <div>
-    ${wrap('<gl-form-input :id="id + \'-name1\'" :state="false" />', {
-      'invalid-feedback': 'This field is required.',
-      ':label-for': "id + '-name1'",
-    })}
-    ${wrap('<gl-form-input :id="id + \'-name2\'" :state="true" value="Sidney Jones" />', {
-      'valid-feedback': 'This field is valid.',
-      ':id': "'group2'",
-      ':label-for': "id + '-name2'",
-    })}
-    </div>
-  `,
-});
-WithValidations.args = generateProps({
-  label: 'Name',
-  description: 'Enter a first and last name.',
-});
-
-export default {
-  title: 'base/form/form-group',
-  component: GlFormGroup,
-  parameters: {
-    bootstrapComponent: 'b-form-group',
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    ...disableControls(['labelClass']),
-    label: {
-      control: 'text',
-    },
-  },
-};

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

@@ -1,130 +0,0 @@
-import { mount, shallowMount } from '@vue/test-utils';
-import { formInputWidths } from '../../../../utils/constants';
-import GlFormInput from './form_input.vue';
-
-const modelEvent = GlFormInput.model.event;
-const newValue = 'foo';
-
-describe('GlFormInput', () => {
-  let wrapper;
-
-  const createComponent = (propsData = {}, mountFn = shallowMount) => {
-    wrapper = mountFn(GlFormInput, {
-      propsData,
-    });
-  };
-
-  describe('width prop', () => {
-    describe('when number is passed', () => {
-      // Exclude the default null value
-      const widths = Object.values(formInputWidths).filter(Boolean);
-
-      it.each(widths)('adds correct class for width %s', (width) => {
-        createComponent({ width });
-
-        expect(wrapper.classes()).toEqual(['gl-form-input', `gl-form-input-${width}`]);
-      });
-
-      it('does not add a width class if not given the width prop', () => {
-        createComponent();
-
-        expect(wrapper.classes()).toEqual(['gl-form-input']);
-      });
-
-      it('does not add a width class if passed null', () => {
-        createComponent({ width: null });
-
-        expect(wrapper.classes()).toEqual(['gl-form-input']);
-      });
-    });
-
-    describe('when object is passed', () => {
-      describe('when `default` key is provided', () => {
-        it('adds responsive CSS classes and base class', () => {
-          createComponent({ width: { default: 'md', md: 'lg', lg: 'xl' } });
-
-          expect(wrapper.classes()).toEqual([
-            'gl-form-input',
-            'gl-form-input-md',
-            'gl-md-form-input-lg',
-            'gl-lg-form-input-xl',
-          ]);
-        });
-      });
-
-      describe('when `default` key is not provided', () => {
-        it('adds responsive CSS classes', () => {
-          createComponent({ width: { md: 'lg', lg: 'xl' } });
-
-          expect(wrapper.classes()).toEqual([
-            'gl-form-input',
-            'gl-md-form-input-lg',
-            'gl-lg-form-input-xl',
-          ]);
-        });
-      });
-    });
-  });
-
-  describe('v-model', () => {
-    beforeEach(() => {
-      createComponent({}, mount);
-
-      wrapper.setValue(newValue);
-    });
-
-    it('synchronously emits an update event', () => {
-      expect(wrapper.emitted('update')).toEqual([[newValue]]);
-    });
-
-    it('synchronously updates model', () => {
-      expect(wrapper.emitted(modelEvent)).toEqual([[newValue]]);
-    });
-  });
-
-  describe('debounce', () => {
-    describe.each([10, 100, 1000])('given a debounce of %dms', (debounce) => {
-      beforeEach(() => {
-        jest.useFakeTimers();
-
-        createComponent({ debounce }, mount);
-
-        wrapper.setValue(newValue);
-      });
-
-      it('synchronously emits an update event', () => {
-        expect(wrapper.emitted('update')).toEqual([[newValue]]);
-      });
-
-      it('emits a model event 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);
-
-      wrapper.setValue(newValue);
-    });
-
-    it('synchronously emits an update event', () => {
-      expect(wrapper.emitted('update')).toEqual([[newValue]]);
-    });
-
-    it.each(['change', 'blur'])('updates model after %s event', (event) => {
-      expect(wrapper.emitted(modelEvent)).toBe(undefined);
-
-      wrapper.trigger(event);
-
-      expect(wrapper.emitted(modelEvent)).toEqual([[newValue]]);
-    });
-  });
-});

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

@@ -1,128 +0,0 @@
-import { formInputWidths } from '../../../../utils/constants';
-import GlFormGroup from '../form_group/form_group.vue';
-import readme from './form_input.md';
-import GlFormInput from './form_input.vue';
-
-const template = `
-<gl-form-group :label="labelText" :label-for="inputId">
-  <gl-form-input
-    :id="inputId"
-    type="text"
-    :readonly="readonly"
-    :disabled="disabled"
-    :value="value"
-    :width="width"
-  />
-</gl-form-group>`;
-
-const generateProps = ({
-  inputId = 'input-id',
-  width = GlFormInput.props.width.default,
-  value = '',
-  disabled = false,
-  readonly = false,
-  labelText = 'Label',
-  type = 'text',
-} = {}) => ({
-  labelText,
-  inputId,
-  width,
-  value,
-  disabled,
-  readonly,
-  type,
-});
-
-const Template = (args) => ({
-  components: { GlFormInput, GlFormGroup },
-  props: Object.keys(args),
-  template,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps({
-  value: 'some text',
-  labelText: 'Default',
-});
-
-export const Disabled = Template.bind({});
-Disabled.args = generateProps({
-  value: 'some text',
-  disabled: true,
-  labelText: 'Disabled',
-});
-
-export const Readonly = Template.bind({});
-Readonly.args = generateProps({ value: 'readonly text', readonly: true, labelText: 'Readonly' });
-
-export const NumberInput = Template.bind({});
-NumberInput.args = generateProps({
-  value: '42',
-  labelText: 'Number input',
-  type: 'number',
-});
-NumberInput.tags = ['skip-visual-test'];
-
-export const Widths = (args, { argTypes }) => ({
-  components: { GlFormInput, GlFormGroup },
-  props: Object.keys(argTypes),
-  data: () => ({
-    formInputWidths,
-  }),
-  template: `
-  <div>
-    <gl-form-group v-for="(width, name) in formInputWidths" :key="width" :label="name" :label-for="'width-' + width">
-      <gl-form-input
-          :id="'width-' + width"
-          :value="name"
-          :width="width"
-          class="gl-mb-4"
-      />
-    </gl-form-group>
-  </div>`,
-});
-Widths.args = {};
-
-export const ResponsiveWidths = (args, { argTypes }) => ({
-  components: { GlFormInput, GlFormGroup },
-  props: Object.keys(argTypes),
-  template: `
-      <div>
-        <gl-form-group label="Default" label-for="responsive-widths-1">
-          <gl-form-input
-            id="responsive-widths-1"
-            :width="{ default: 'md', md: 'lg', lg: 'xl' }"
-            value="With \`default\` key"
-            class="gl-mb-4"
-          />
-        </gl-form-group>
-
-        <gl-form-group label="Without default" label-for="responsive-widths-2">
-          <gl-form-input
-            id="responsive-widths-2"
-            :width="{ md: 'lg', lg: 'xl' }"
-            value="Without \`default\` key"
-          />
-        </gl-form-group>
-      </div>`,
-});
-ResponsiveWidths.args = {};
-
-export default {
-  title: 'base/form/form-input',
-  component: GlFormInput,
-  parameters: {
-    bootstrapComponent: 'b-form-input',
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    width: {
-      options: formInputWidths,
-      control: 'select',
-    },
-  },
-};

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

@@ -1,121 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { BInputGroup, BFormInput } from 'bootstrap-vue';
-import GlDropdownItem from '../../dropdown/dropdown_item.vue';
-import InputGroup from './form_input_group.vue';
-
-describe('Input Group', () => {
-  let wrapper;
-
-  const createWrapper = (options) => {
-    wrapper = shallowMount(InputGroup, {
-      ...options,
-    });
-  };
-
-  it('renders without errors', () => {
-    createWrapper();
-    expect(wrapper.findComponent(BInputGroup).exists()).toBe(true);
-    expect(wrapper).not.toHaveLoggedVueErrors();
-  });
-
-  it('renders prepend and append texts properly in the slots', () => {
-    const prependText = 'Foo';
-    const appendText = 'Bar';
-    createWrapper({
-      slots: {
-        prepend: `<p id="prepend">${prependText}</p>`,
-        append: `<p id="append">${appendText}</p>>`,
-      },
-    });
-    expect(wrapper.find('#prepend').exists()).toBe(true);
-    expect(wrapper.find('#prepend').text()).toBe(prependText);
-
-    expect(wrapper.find('#append').exists()).toBe(true);
-    expect(wrapper.find('#append').text()).toBe(appendText);
-  });
-
-  it('selects text on click if appropriate prop is set up', () => {
-    const mock = jest.fn();
-    createWrapper({
-      propsData: { selectOnClick: true },
-    });
-    wrapper.vm.$refs.input.$el.select = mock;
-    wrapper.vm.handleClick();
-
-    expect(mock).toHaveBeenCalled();
-  });
-
-  it('does not emit input event if predefinedOptions are not set', () => {
-    createWrapper();
-    expect(wrapper.emitted('input')).toBeUndefined();
-  });
-
-  describe('`inputClass` prop', () => {
-    it.each`
-      inputClass
-      ${'foo-bar baz'}
-      ${['foo-bar', 'baz']}
-      ${{ 'foo-bar': true, baz: true }}
-    `('correctly adds classes to input when `inputClass` prop is $inputClass', ({ inputClass }) => {
-      createWrapper({
-        propsData: { inputClass },
-      });
-
-      expect(wrapper.findComponent(BFormInput).classes()).toEqual(
-        expect.arrayContaining(['gl-form-input', 'foo-bar', 'baz'])
-      );
-    });
-  });
-
-  describe('predefined options', () => {
-    const options = [
-      { name: 'Foo', value: 'foo.com' },
-      { name: 'Bar', value: 'bar.com' },
-    ];
-    let items;
-
-    beforeEach(() => {
-      createWrapper({
-        propsData: { predefinedOptions: options },
-      });
-      items = wrapper.findAllComponents(GlDropdownItem);
-    });
-
-    it('throws an error if the options format does not match the required one', () => {
-      createWrapper({
-        propsData: { predefinedOptions: [{ foo: 'bar' }] },
-      });
-
-      expect(global.console).toHaveLoggedVueErrors();
-    });
-
-    it('are rendered when supplied', () => {
-      expect(items.length).toBe(2);
-      expect(items.at(0).text()).toEqual(options[0].name);
-      expect(items.at(1).text()).toEqual(options[1].name);
-    });
-
-    it('set input value to the value of the first option by default', () => {
-      expect(wrapper.vm.activeOption).toEqual(options[0].name);
-      expect(wrapper.vm.localValue).toEqual(options[0].value);
-    });
-
-    it('populate input with correct value when selected', () => {
-      items.at(1).vm.$emit('click');
-      expect(wrapper.vm.localValue).toEqual(options[1].value);
-    });
-
-    it('emits event with default options value to enable reactive updates outside of the component', () => {
-      expect(wrapper.emitted('input').length).toBe(1);
-      expect(wrapper.emitted('input')[0]).toEqual([options[0].value]);
-    });
-
-    it('emits event when an active option is changed to enable reactive updates outside of the component', async () => {
-      items.at(1).vm.$emit('click');
-      await wrapper.vm.$nextTick();
-
-      expect(wrapper.emitted('input').length).toBe(2);
-      expect(wrapper.emitted('input')[1]).toEqual([options[1].value]);
-    });
-  });
-});