@gitlab/ui 80.13.1 → 80.14.0

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

@@ -1,307 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import Datepicker from '../datepicker/datepicker.vue';
-import Icon from '../icon/icon.vue';
-import DaterangePicker from './daterange_picker.vue';
-
-describe('Daterange Picker', () => {
-  let wrapper;
-
-  const startDate = new Date('2020-08-27');
-  const endDate = new Date('2020-08-29');
-  const defaultMaxDate = new Date('2021-01-01');
-
-  const factory = (props = {}, scopedSlots = {}) => {
-    wrapper = shallowMount(DaterangePicker, {
-      propsData: {
-        defaultStartDate: startDate,
-        defaultEndDate: endDate,
-        ...props,
-      },
-      scopedSlots,
-    });
-  };
-
-  const findStartPicker = () => wrapper.findAllComponents(Datepicker).at(0);
-  const findEndPicker = () => wrapper.findAllComponents(Datepicker).at(1);
-
-  it('renders two datepickers', () => {
-    factory();
-    expect(findStartPicker().exists()).toBe(true);
-    expect(findEndPicker().exists()).toBe(true);
-  });
-
-  describe('from date picker', () => {
-    describe('emits the input event', () => {
-      beforeEach(() => {
-        factory();
-        findStartPicker().vm.$emit('input', startDate);
-      });
-
-      it('updates startDate correctly', () => {
-        expect(wrapper.vm.startDate).toBe(startDate);
-      });
-
-      it("sets the end date picker's minDate to one day after the startDate", () => {
-        const toCalendarMinDate = new Date('2020-08-28');
-
-        expect(findEndPicker().props('minDate')).toEqual(toCalendarMinDate);
-      });
-
-      it('emits `start-date-open` event on component when `open` event fires', () => {
-        findStartPicker().vm.$emit('open');
-
-        expect(wrapper.emitted('start-picker-open')).toHaveLength(1);
-      });
-
-      it('emits `start-date-close` event on component when `close` event fires', () => {
-        findStartPicker().vm.$emit('close');
-
-        expect(wrapper.emitted('start-picker-close')).toHaveLength(1);
-      });
-
-      describe('with a date range violation', () => {
-        beforeEach(() => {
-          factory({
-            defaultEndDate: new Date('2020-08-26'),
-          });
-          findStartPicker().vm.$emit('input', startDate);
-        });
-
-        it('does not emit the "input" event when there is a date range violation', () => {
-          expect(Object.keys(wrapper.emitted())).toHaveLength(0);
-        });
-
-        it('sets openToCalendar=true', () => {
-          expect(wrapper.vm.openToCalendar).toBe(true);
-        });
-
-        it('sets endDate=null', () => {
-          expect(wrapper.vm.endDate).toBe(null);
-        });
-      });
-
-      describe('date range violation with maxDateRange and sameDaySelection', () => {
-        describe.each`
-          maxDateRange | sameDaySelection | violation
-          ${2}         | ${false}         | ${false}
-          ${1}         | ${false}         | ${true}
-          ${2}         | ${true}          | ${true}
-          ${3}         | ${true}          | ${false}
-        `(
-          'with maxDateRange = $maxDateRange, sameDaySelection = $sameDaySelection and violation = $violation',
-          ({ maxDateRange, sameDaySelection, violation }) => {
-            beforeEach(() => {
-              factory({
-                maxDateRange,
-                sameDaySelection,
-              });
-              findStartPicker().vm.$emit('input', startDate);
-            });
-
-            it(`${violation ? 'has' : 'does not have'} a date range violation`, () => {
-              const events = violation ? 0 : 1;
-              expect(Object.keys(wrapper.emitted())).toHaveLength(events);
-            });
-          }
-        );
-      });
-
-      describe('with no date range violation', () => {
-        it('emits the "input" event', () => {
-          expect(wrapper.emitted('input')).toEqual([[{ startDate, endDate: wrapper.vm.endDate }]]);
-        });
-      });
-    });
-  });
-
-  describe('end date picker', () => {
-    describe('emits the input event', () => {
-      beforeEach(() => {
-        factory();
-        findEndPicker().vm.$emit('input', endDate);
-      });
-
-      it('updates endDate correctly', () => {
-        expect(wrapper.vm.endDate).toBe(endDate);
-      });
-
-      it('sets openToCalendar=false', () => {
-        expect(wrapper.vm.openToCalendar).toBe(false);
-      });
-
-      it('calls the event handler', () => {
-        expect(wrapper.emitted('input')).toEqual([[{ startDate: wrapper.vm.startDate, endDate }]]);
-      });
-
-      it('emits `end-date-open` event on component when `open` event fires', () => {
-        findEndPicker().vm.$emit('open');
-
-        expect(wrapper.emitted('end-picker-open')).toHaveLength(1);
-      });
-
-      it('emits `end-date-close` event on component when `close` event fires', () => {
-        findEndPicker().vm.$emit('close');
-
-        expect(wrapper.emitted('end-picker-close')).toHaveLength(1);
-      });
-    });
-  });
-
-  describe('with maxDateRange = 10', () => {
-    beforeEach(() => {
-      factory({ maxDateRange: 10, defaultMaxDate });
-    });
-
-    it('sets the maxDate to the startDate + the maxDateRange', () => {
-      const maxDate = new Date('2020-09-06');
-
-      expect(findEndPicker().props('maxDate')).toEqual(maxDate);
-    });
-  });
-
-  describe('with startPickerTarget/endPickerTarget defined', () => {
-    beforeEach(() => {
-      factory({ startPickerTarget: '.btn', endPickerTarget: '.btn' });
-    });
-
-    it('sets the `target` prop to startPickerTarget', () => {
-      expect(findStartPicker().props('target')).toBe('.btn');
-    });
-
-    it('sets the `target` prop to endPickerTarget', () => {
-      expect(findEndPicker().props('target')).toBe('.btn');
-    });
-  });
-
-  describe('with startPickerContainer/endPickerContainer defined', () => {
-    beforeEach(() => {
-      factory({ startPickerContainer: 'body', endPickerContainer: 'body' });
-    });
-
-    it('sets the `container` prop to startPickerContainer', () => {
-      expect(findStartPicker().props('container')).toBe('body');
-    });
-
-    it('sets the `container` prop to endPickerContainer', () => {
-      expect(findEndPicker().props('container')).toBe('body');
-    });
-  });
-
-  describe('sameDaySelection = true', () => {
-    describe('from date picker', () => {
-      beforeEach(() => {
-        factory({ sameDaySelection: true });
-      });
-
-      it('updates startDate correctly', () => {
-        expect(wrapper.vm.startDate).toBe(startDate);
-      });
-
-      it("sets the end date picker's minDate to the startDate", () => {
-        expect(findEndPicker().props('minDate')).toEqual(startDate);
-      });
-
-      describe('with maxDateRange = 10', () => {
-        beforeEach(() => {
-          factory({ sameDaySelection: true, maxDateRange: 10, defaultMaxDate });
-        });
-
-        it('sets the maxDate to the startDate + the maxDateRange - 1', () => {
-          const maxDate = new Date('2020-09-05');
-
-          expect(findEndPicker().props('maxDate')).toEqual(maxDate);
-        });
-      });
-    });
-  });
-
-  describe('labelClass', () => {
-    const customClass = 'foobar';
-
-    const findLabelsWithCustomClass = () =>
-      wrapper.findAll('label').filter((label) => label.classes(customClass));
-
-    it('does not have the class by default', () => {
-      factory();
-
-      expect(findLabelsWithCustomClass()).toHaveLength(0);
-    });
-
-    it('adds the label class when provided', () => {
-      factory({ labelClass: customClass });
-
-      expect(findLabelsWithCustomClass()).toHaveLength(2);
-    });
-  });
-
-  describe('with date range indicator and tooltip', () => {
-    const tooltip = 'Date range limited to 31 days';
-    const dateRangeIndicatorClass = 'indicator-container-class';
-
-    const findDateRangeIndicator = () => wrapper.find('[data-testid="daterange-picker-indicator"]');
-    const findTooltipIcon = () => wrapper.findComponent(Icon);
-
-    const slots = {
-      default: `<div>{{ props.daysSelected }} days selected</div>`,
-    };
-
-    it('does not show default slot or tooltip icon by default', () => {
-      factory();
-
-      expect(findDateRangeIndicator().exists()).toBe(false);
-      expect(findTooltipIcon().exists()).toBe(false);
-    });
-
-    it('shows the default slot when provided', () => {
-      factory({}, slots);
-
-      expect(findDateRangeIndicator().text()).toBe('2 days selected');
-    });
-
-    it('shows the effective days selected for the default slot when sameDaySelection is true', () => {
-      factory({ sameDaySelection: true }, slots);
-
-      expect(findDateRangeIndicator().text()).toBe('3 days selected');
-    });
-
-    it('shows the icon with the provided tooltip', () => {
-      factory({ tooltip });
-
-      expect(findTooltipIcon().attributes('title')).toBe(tooltip);
-    });
-
-    it('adds the indicator class when provided', () => {
-      factory({ dateRangeIndicatorClass }, slots);
-
-      expect(wrapper.find(`.${dateRangeIndicatorClass}`).exists()).toBe(true);
-    });
-  });
-
-  it.each`
-    prop                  | value                 | testid
-    ${'startPickerClass'} | ${'gl-text-blue-500'} | ${'daterange-picker-start-container'}
-    ${'endPickerClass'}   | ${'gl-text-red-500'}  | ${'daterange-picker-end-container'}
-  `('adds the provided $value class to $testid', ({ prop, value, testid }) => {
-    factory({ [prop]: value });
-
-    expect(wrapper.find(`[data-testid="${testid}"]`).classes()).toContain(value);
-  });
-
-  describe('startOpened', () => {
-    beforeEach(() => {
-      factory({ startOpened: true });
-    });
-    it('sets start-opened on the from date picker', () => {
-      expect(findStartPicker().props('startOpened')).toBe(true);
-    });
-
-    it('defaults to false', () => {
-      factory();
-      expect(findStartPicker().props('startOpened')).toBe(false);
-    });
-
-    it('does not set start-opened on the end date picker', () => {
-      expect(findEndPicker().props('startOpened')).toBe(false);
-    });
-  });
-});

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

@@ -1,145 +0,0 @@
-import { disableControls } from '../../../utils/stories_utils';
-import { makeContainer } from '../../../utils/story_decorators/container';
-import readme from './daterange_picker.md';
-import GlDaterangePicker from './daterange_picker.vue';
-
-const currentYear = 2021;
-const defaultStartDateVal = new Date(currentYear, 9, 4);
-const defaultEndDateVal = new Date(currentYear, 9, 24);
-const defaultMinDateVal = new Date(currentYear, 9, 1);
-const defaultMaxDateVal = new Date(currentYear, 11, 30);
-
-const defaultValue = (prop) => GlDaterangePicker.props[prop].default;
-
-const generateProps = ({
-  fromLabel = defaultValue('fromLabel'),
-  toLabel = defaultValue('toLabel'),
-  defaultMinDate = defaultMinDateVal,
-  defaultMaxDate = defaultMaxDateVal,
-  defaultStartDate = defaultStartDateVal,
-  defaultEndDate = defaultEndDateVal,
-  maxDateRange = 0,
-  sameDaySelection = false,
-  tooltip = '',
-  startPickerClass,
-  endPickerClass,
-  labelClass,
-  theme = defaultValue('theme'),
-  startOpened = false,
-} = {}) => ({
-  defaultMinDate: new Date(defaultMinDate),
-  defaultMaxDate: new Date(defaultMaxDate),
-  defaultStartDate: new Date(defaultStartDate),
-  defaultEndDate: new Date(defaultEndDate),
-  maxDateRange,
-  sameDaySelection,
-  tooltip,
-  fromLabel,
-  toLabel,
-  startPickerClass,
-  endPickerClass,
-  labelClass,
-  theme,
-  startOpened,
-});
-
-const Template = (template, props) => ({
-  components: { GlDaterangePicker },
-  props: Object.keys(props),
-  data() {
-    return {
-      defaultMinDateVal: this.defaultMinDate,
-      defaultMaxDateVal: this.defaultMaxDate,
-      defaultStartDateVal: this.defaultStartDate,
-      defaultEndDateVal: this.defaultEndDate,
-    };
-  },
-  watch: {
-    defaultMinDate(val) {
-      this.defaultMinDateVal = new Date(val);
-    },
-    defaultMaxDate(val) {
-      this.defaultMaxDateVal = new Date(val);
-    },
-  },
-  template,
-});
-
-const defaultTemplate = `
-        <gl-daterange-picker
-          class="gl-display-flex"
-          :default-min-date="defaultMinDateVal"
-          :default-max-date="defaultMaxDateVal"
-          :default-start-date="defaultStartDate"
-          :default-end-date="defaultEndDate"
-          :max-date-range="maxDateRange"
-          :same-day-selection="sameDaySelection"
-          :tooltip="tooltip"
-          :from-label="fromLabel"
-          :to-label="toLabel"
-          :start-picker-class="startPickerClass"
-          :end-picker-class="endPickerClass"
-          :label-class="labelClass"
-          :theme="theme"
-          :start-opened="startOpened"
-        /> `;
-export const Default = Template.bind({}, defaultTemplate);
-Default.args = generateProps();
-
-const withDatesSelectedAndTooltipTemplate = `<gl-daterange-picker
-                                                class="gl-display-flex"
-                                                :default-min-date="defaultMinDateVal"
-                                                :default-max-date="defaultMaxDateVal"
-                                                :default-start-date="defaultStartDate"
-                                                :default-end-date="defaultEndDate"
-                                                :max-date-range="maxDateRange"
-                                                :same-day-selection="sameDaySelection"
-                                                :tooltip="tooltip"
-                                                :from-label="fromLabel"
-                                                :to-label="toLabel"
-                                                :start-picker-class="startPickerClass"
-                                                :end-picker-class="endPickerClass"
-                                                :label-class="labelClass"
-                                                :start-opened="startOpened"
-                                                :theme="theme">
-                                                    <template #default="{ daysSelected }">
-                                                      <span v-if="daysSelected === 1">{{ daysSelected }} day selected</span>
-                                                      <span v-else-if="daysSelected > -1">{{ daysSelected }} days selected</span>
-                                                      <span v-else>No days selected</span>
-                                                    </template>
-                                              </gl-daterange-picker>`;
-export const WithDatesSelectedAndTooltip = Template.bind({}, withDatesSelectedAndTooltipTemplate);
-WithDatesSelectedAndTooltip.args = generateProps({
-  tooltip: 'Date range limited to 31 days',
-  maxDateRange: 31,
-});
-
-export default {
-  title: 'base/daterange-picker',
-  component: GlDaterangePicker,
-  decorators: [makeContainer({ height: '300px' })],
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    ...disableControls([
-      'i18n',
-      'startPickerTarget',
-      'startPickerContainer',
-      'endPickerTarget',
-      'endPickerContainer',
-      'defaultStartDate',
-      'defaultEndDate',
-    ]),
-    defaultMinDate: {
-      control: 'date',
-    },
-    defaultMaxDate: {
-      control: 'date',
-    },
-  },
-};

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

@@ -1,136 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import Drawer from './drawer.vue';
-
-describe('drawer component', () => {
-  let wrapper;
-  const mountWithOpts = ({ props = { open: true }, slots = {} }) => {
-    wrapper = shallowMount(Drawer, { propsData: props, slots });
-  };
-
-  describe('default settings', () => {
-    describe('when open is true', () => {
-      it('makes gl-drawer visible when open is true', () => {
-        mountWithOpts({});
-
-        expect(wrapper.isVisible()).toBe(true);
-      });
-    });
-
-    describe('when header-height is set', () => {
-      it('renders drawer container with `top` and `max-height` styles', () => {
-        const headerHeight = '40px';
-        mountWithOpts({ props: { open: true, headerHeight } });
-
-        expect(wrapper.find('aside').attributes('style')).toBe(
-          `top: ${headerHeight}; z-index: 10; max-height: calc(100vh - ${headerHeight});`
-        );
-      });
-    });
-
-    describe('when sticky header is true', () => {
-      it('renders drawer header with sticky position', () => {
-        mountWithOpts({ props: { open: true, headerSticky: true } });
-        const header = wrapper.find('.gl-drawer-header');
-
-        expect(header.classes()).toContain('gl-drawer-header-sticky');
-        expect(header.attributes('style')).toBe('z-index: 10;');
-      });
-    });
-
-    describe('when open is false', () => {
-      it('cannot find aside html element', () => {
-        mountWithOpts({ props: { open: false } });
-
-        expect(wrapper.find('aside').exists()).toBe(false);
-      });
-    });
-
-    describe('on click of the close button', () => {
-      it('emits close event', () => {
-        mountWithOpts({ props: { open: true } });
-
-        wrapper.find('.gl-drawer-close-button').vm.$emit('click');
-
-        expect(wrapper.emitted().close.length).toBe(1);
-      });
-    });
-
-    describe('on esc keydown', () => {
-      it('emits close event when open is true', () => {
-        mountWithOpts({ props: { open: true } });
-
-        const event = new KeyboardEvent('keydown', { keyCode: 27 });
-        document.dispatchEvent(event);
-
-        expect(wrapper.emitted().close.length).toBe(1);
-      });
-
-      it('does not call onClose when open is false', () => {
-        mountWithOpts({ props: { open: false } });
-
-        const event = new KeyboardEvent('keydown', { keyCode: 27 });
-        document.dispatchEvent(event);
-
-        expect(wrapper.emitted('close')).toBe(undefined);
-      });
-
-      it('does not call onClose when open is false and keyCode is not esc', () => {
-        mountWithOpts({ props: { open: false } });
-
-        const event = new KeyboardEvent('keydown', { keyCode: 37 });
-        document.dispatchEvent(event);
-
-        expect(wrapper.emitted('close')).toBe(undefined);
-      });
-    });
-  });
-
-  it.each`
-    slot         | parentSelector
-    ${'title'}   | ${'.gl-drawer-title'}
-    ${'header'}  | ${'.gl-drawer-header'}
-    ${'default'} | ${'.gl-drawer-body'}
-    ${'footer'}  | ${'.gl-drawer-footer'}
-  `('renders nodes when added to the $slot slot', ({ slot, parentSelector }) => {
-    mountWithOpts({
-      slots: {
-        [slot]: `<div data-testid="${slot}" />`,
-      },
-    });
-
-    // eslint-disable-next-line unicorn/no-array-callback-reference
-    expect(wrapper.find(parentSelector).find(`[data-testid="${slot}"]`).exists()).toBe(true);
-  });
-
-  it('should add scrim to footer', () => {
-    mountWithOpts({
-      slots: {
-        footer: `<div data-testid="footer" />`,
-      },
-    });
-
-    expect(wrapper.find('.gl-drawer-footer').classes()).toContain('gl-drawer-body-scrim-on-footer');
-    expect(wrapper.find('.gl-drawer-body').classes()).not.toContain('gl-drawer-body-scrim');
-  });
-
-  it('should add scrim to scrollable container', () => {
-    mountWithOpts({
-      slots: {
-        default: `<div data-testid="default" />`,
-      },
-    });
-
-    expect(wrapper.find('.gl-drawer-footer').exists()).toBe(false);
-    expect(wrapper.find('.gl-drawer-body').classes()).toContain('gl-drawer-body-scrim');
-  });
-
-  it.each`
-    variant      | variantClass
-    ${'default'} | ${'gl-drawer-default'}
-    ${'sidebar'} | ${'gl-drawer-sidebar'}
-  `('adds class depending on variant prop', ({ variant, variantClass }) => {
-    mountWithOpts({ props: { open: true, variant } });
-
-    expect(wrapper.find('.gl-drawer').classes()).toContain(variantClass);
-  });
-});