@gitlab/ui 80.13.1 → 80.14.0

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

@@ -1,242 +0,0 @@
-import { mount } from '@vue/test-utils';
-import lodashDebounce from 'lodash/debounce';
-import GlFormTextarea from './form_textarea.vue';
-
-jest.mock('lodash/debounce', () => jest.fn((fn) => fn));
-
-const modelEvent = GlFormTextarea.model.event;
-const newValue = 'foo';
-
-describe('GlFormTextArea', () => {
-  let wrapper;
-
-  const createComponent = (propsData = {}) => {
-    wrapper = mount(GlFormTextarea, {
-      propsData,
-      scopedSlots: {
-        'character-count-text': function characterCountText({ count }) {
-          return count === 1 ? `${count} character remaining` : `${count} characters remaining`;
-        },
-        'character-count-over-limit-text': function characterCountOverLimitText({ count }) {
-          return count === 1 ? `${count} character over limit` : `${count} characters over limit`;
-        },
-      },
-    });
-  };
-
-  const findTextarea = () => wrapper.find('textarea');
-
-  const itUpdatesDebouncedScreenReaderText = (expectedText) => {
-    it('updates debounced screen reader text', () => {
-      expect(lodashDebounce).toHaveBeenCalledWith(expect.any(Function), 1000);
-      expect(wrapper.find('[data-testid="character-count-text-sr-only"]').text()).toBe(
-        expectedText
-      );
-    });
-  };
-
-  describe('v-model', () => {
-    describe('value binding', () => {
-      beforeEach(() => {
-        createComponent({ value: 'initial' });
-      });
-
-      it(`sets the textarea's value`, () => {
-        expect(findTextarea().element.value).toBe('initial');
-      });
-
-      describe('when the value prop changes', () => {
-        beforeEach(() => {
-          wrapper.setProps({ value: newValue });
-          return wrapper.vm.$nextTick();
-        });
-
-        it(`updates the textarea's value`, () => {
-          expect(findTextarea().element.value).toBe(newValue);
-        });
-      });
-    });
-
-    describe('event emission', () => {
-      beforeEach(() => {
-        createComponent();
-
-        findTextarea().setValue(newValue);
-      });
-
-      it('synchronously emits update event', () => {
-        expect(wrapper.emitted('update')).toEqual([[newValue]]);
-      });
-
-      it(`synchronously emits ${modelEvent} event`, () => {
-        expect(wrapper.emitted(modelEvent)).toEqual([[newValue]]);
-      });
-    });
-  });
-
-  describe('debounce', () => {
-    describe.each([10, 100, 1000])('given a debounce of %dms', (debounce) => {
-      beforeEach(() => {
-        jest.useFakeTimers();
-
-        createComponent({ debounce });
-
-        findTextarea().setValue(newValue);
-      });
-
-      it('synchronously emits an update event', () => {
-        expect(wrapper.emitted('update')).toEqual([[newValue]]);
-      });
-
-      it(`emits a ${modelEvent} 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 });
-
-      findTextarea().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]]);
-    });
-  });
-
-  describe('submit on enter prop', () => {
-    it('should be false by default', () => {
-      createComponent({});
-
-      wrapper.trigger('keyup.enter', {
-        metaKey: true,
-      });
-
-      expect(wrapper.emitted('submit')).toBe(undefined);
-    });
-
-    it('should emit submit when cmd+enter is pressed', async () => {
-      createComponent({ submitOnEnter: true });
-
-      wrapper.trigger('keyup.enter', {
-        metaKey: true,
-      });
-
-      expect(wrapper.emitted('submit')).toEqual([[]]);
-    });
-  });
-
-  describe('when `characterCount` prop is set', () => {
-    const characterCount = 10;
-
-    describe('when textarea character count is under the max character count', () => {
-      const textareaCharacterCount = 5;
-      const expectedText = `${characterCount - textareaCharacterCount} characters remaining`;
-
-      beforeEach(() => {
-        createComponent({
-          value: 'a'.repeat(textareaCharacterCount),
-          characterCount,
-        });
-      });
-
-      it('displays remaining characters', () => {
-        expect(wrapper.text()).toContain(expectedText);
-      });
-
-      itUpdatesDebouncedScreenReaderText(expectedText);
-    });
-
-    describe('when textarea character count is over the max character count', () => {
-      const textareaCharacterCount = 15;
-      const expectedText = `${textareaCharacterCount - characterCount} characters over limit`;
-
-      beforeEach(() => {
-        createComponent({
-          value: 'a'.repeat(textareaCharacterCount),
-          characterCount,
-        });
-      });
-
-      it('displays number of characters over', () => {
-        expect(wrapper.text()).toContain(expectedText);
-      });
-
-      itUpdatesDebouncedScreenReaderText(expectedText);
-    });
-
-    describe('when textarea value is updated', () => {
-      const textareaCharacterCount = 5;
-      const newTextareaCharacterCount = textareaCharacterCount + 3;
-      const expectedText = `${characterCount - newTextareaCharacterCount} characters remaining`;
-
-      beforeEach(() => {
-        createComponent({
-          value: 'a'.repeat(textareaCharacterCount),
-          characterCount,
-        });
-
-        wrapper.setProps({ value: 'a'.repeat(newTextareaCharacterCount) });
-      });
-
-      it('updates character count text', () => {
-        expect(wrapper.text()).toContain(expectedText);
-      });
-
-      itUpdatesDebouncedScreenReaderText(expectedText);
-    });
-
-    describe('when `value` prop is `null`', () => {
-      const expectedText = `${characterCount} characters remaining`;
-
-      beforeEach(() => {
-        createComponent({
-          value: null,
-          characterCount,
-        });
-      });
-
-      it('displays remaining characters', () => {
-        expect(wrapper.text()).toContain(expectedText);
-      });
-
-      itUpdatesDebouncedScreenReaderText(expectedText);
-    });
-
-    describe('when `value` prop is updated to `null`', () => {
-      const textareaCharacterCount = 5;
-      const expectedText = `${characterCount} characters remaining`;
-
-      beforeEach(() => {
-        createComponent({
-          value: 'a'.repeat(textareaCharacterCount),
-          characterCount,
-        });
-
-        wrapper.setProps({ value: null });
-      });
-
-      it('updates character count text', () => {
-        expect(wrapper.text()).toContain(expectedText);
-      });
-
-      itUpdatesDebouncedScreenReaderText(expectedText);
-    });
-  });
-});

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

@@ -1,68 +0,0 @@
-import GlFormTextarea from './form_textarea.vue';
-import readme from './form_textarea.md';
-
-const template = `
-  <gl-form-textarea
-    :value="value"
-    :placeholder="placeholder"
-    :rows="5"
-    :no-resize="noResize"
-    :character-count="characterCount"
-    @input="onInput"
-  >
-    <template #character-count-text="{ count }">{{ characterCountText(count) }}</template>
-    <template #character-count-over-limit-text="{ count }">{{ characterCountOverLimitText(count) }}</template>
-  </gl-form-textarea>
-`;
-
-const generateProps = ({
-  value = 'We take inspiration from other companies, and we always go for the boring solutions. Just like the rest of our work, we continually adjust our values and strive always to make them better. We used to have more values, but it was difficult to remember them all, so we condensed them and gave sub-values and created an acronym. Everyone is welcome to suggest improvements.',
-  placeholder = 'hello',
-  noResize = GlFormTextarea.props.noResize.default,
-  characterCount = null,
-} = {}) => ({
-  value,
-  placeholder,
-  noResize,
-  characterCount,
-});
-
-const Template = (args, { updateArgs }) => ({
-  components: { GlFormTextarea },
-  props: Object.keys(args),
-  methods: {
-    onInput(value) {
-      updateArgs({ ...args, value });
-    },
-    characterCountText(count) {
-      return count === 1 ? `${count} character remaining` : `${count} characters remaining`;
-    },
-    characterCountOverLimitText(count) {
-      return count === 1 ? `${count} character over limit` : `${count} characters over limit`;
-    },
-  },
-  template,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const WithCharacterCount = Template.bind({});
-WithCharacterCount.args = generateProps({
-  value: '',
-  placeholder: 'hello',
-  characterCount: 100,
-});
-
-export default {
-  title: 'base/form/form-textarea',
-  component: GlFormTextarea,
-  parameters: {
-    bootstrapComponent: 'b-form-textarea',
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

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

@@ -1,9 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import GlInputGroupText from './input_group_text.vue';
-
-describe('GlInputGroupText', () => {
-  it('renders main components', () => {
-    const wrapper = shallowMount(GlInputGroupText);
-    expect(wrapper).toBeInstanceOf(Object);
-  });
-});

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

@@ -1,30 +0,0 @@
-import readme from './input_group_text.md';
-import GlInputGroupText from './input_group_text.vue';
-
-const generateProps = (props = {}) => ({
-  ...props,
-});
-
-const Template = (args) => ({
-  components: { GlInputGroupText },
-  props: Object.keys(args),
-  template: `
-      <gl-input-group-text>Some text</gl-input-group-text>
-    `,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export default {
-  title: 'base/form/input-group-text',
-  component: GlInputGroupText,
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

package/src/components/base/icon/__snapshots__/icon.spec.js.snap

@@ -1,14 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Icon component when created shows svg class "s8" and path "/path/to/icons.svg#check-circle" 1`] = `
-<svg
-  aria-hidden="true"
-  class="gl-icon s8"
-  data-testid="check-circle-icon"
-  role="img"
->
-  <use
-    href="/path/to/icons.svg#check-circle"
-  />
-</svg>
-`;

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

@@ -1,92 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { iconSizeOptions } from '~/utils/constants';
-import Icon from './icon.vue';
-
-const ICONS_PATH = '/path/to/icons.svg';
-const TEST_SIZE = 8;
-const TEST_NAME = 'check-circle';
-
-jest.mock('@gitlab/svgs/dist/icons.svg', () => '/path/to/icons.svg');
-
-describe('Icon component', () => {
-  let wrapper;
-  let consoleSpy;
-
-  const createComponent = (props) => {
-    wrapper = shallowMount(Icon, {
-      propsData: {
-        size: TEST_SIZE,
-        name: TEST_NAME,
-        ...props,
-      },
-    });
-  };
-
-  const validateSize = (size) => Icon.props.size.validator(size);
-  const validateName = (name) => Icon.props.name.validator(name);
-
-  afterEach(() => {
-    if (consoleSpy) {
-      consoleSpy.mockRestore();
-    }
-  });
-
-  it('has role=img', () => {
-    createComponent();
-
-    expect(wrapper.attributes('role')).toBe('img');
-  });
-
-  describe('when created', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    it(`shows svg class "s${TEST_SIZE}" and path "${ICONS_PATH}#${TEST_NAME}"`, () => {
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-  });
-
-  describe('size validator', () => {
-    const maxSize = Math.max(...iconSizeOptions);
-
-    it('fails with size outside options', () => {
-      expect(validateSize(maxSize + 10)).toBe(false);
-    });
-
-    it('passes with size in options', () => {
-      expect(validateSize(maxSize)).toBe(true);
-    });
-  });
-
-  describe('name validator', () => {
-    it('fails with name that does not exist', () => {
-      const badName = `${TEST_NAME}-bogus-zebra`;
-      consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
-
-      expect(validateName(badName)).toBe(false);
-
-      expect(consoleSpy).toHaveBeenCalledWith(
-        `Icon '${badName}' is not a known icon of @gitlab/svgs`
-      );
-    });
-
-    it('passes with name that exists', () => {
-      expect(validateName(TEST_NAME)).toBe(true);
-    });
-  });
-
-  describe('aria-hidden', () => {
-    it('is true when there is no aria-label', () => {
-      createComponent();
-
-      expect(wrapper.attributes('aria-hidden')).toBe('true');
-    });
-
-    it('does not exist there is an aria-label', () => {
-      createComponent({ 'aria-label': 'Icon label' });
-
-      expect(wrapper.attributes('aria-hidden')).toBeUndefined();
-    });
-  });
-});

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

@@ -1,56 +0,0 @@
-import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
-import { iconSizeOptions } from '../../../utils/constants';
-import { disableControls } from '../../../utils/stories_utils';
-import GlIcon from './icon.vue';
-import readme from './icon.md';
-
-const components = {
-  GlIcon,
-};
-
-const defaultValue = (prop) => GlIcon.props[prop].default;
-
-const generateProps = ({
-  name = 'check-circle',
-  size = defaultValue('size'),
-  ariaLabel = 'This is an icon',
-} = {}) => ({
-  name,
-  size,
-  ariaLabel,
-});
-
-const template = `<gl-icon :name="name" :size="size" :aria-label="ariaLabel"/>`;
-
-const Template = (args) => ({
-  components,
-  props: Object.keys(args),
-  template,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export default {
-  title: 'base/icon',
-  component: GlIcon,
-  tags: ['skip-visual-test'],
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    ...disableControls(['useDeprecatedSizes']),
-    name: {
-      options: iconSpriteInfo.icons,
-      control: 'select',
-    },
-    size: {
-      options: iconSizeOptions,
-      control: 'select',
-    },
-  },
-};

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

@@ -1,182 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import throttle from 'lodash/throttle';
-import InfiniteScroll, { adjustScrollGap } from './infinite_scroll.vue';
-
-jest.mock('lodash/throttle', () => jest.fn((fn) => fn));
-
-const INITIAL_HEIGHT = 500;
-const INITIAL_SCROLL_TOP = 0;
-const ADJUST_SCROLL_GAP = adjustScrollGap;
-
-describe('Infinite Scroll component', () => {
-  let wrapper;
-  let mockScrollHeight;
-  let mockScrollTop;
-  let mockScrollTo;
-
-  const findInfiniteContainer = () => wrapper.findComponent({ ref: 'infiniteContainer' });
-
-  const props = {
-    fetchedItems: 2,
-    totalItems: 10,
-  };
-
-  const createComponent = ({ propsData = props, listeners = {} } = {}) => {
-    wrapper = shallowMount(InfiniteScroll, {
-      propsData,
-      listeners,
-      attachTo: document.body,
-    });
-
-    // Mock properties on the container that are not in JSDOM
-    mockScrollTo = jest.fn(({ top }) => {
-      mockScrollTop = top;
-      findInfiniteContainer().trigger('scroll');
-    });
-
-    Object.defineProperties(findInfiniteContainer().element, {
-      scrollTo: {
-        get: () => mockScrollTo,
-      },
-      scrollTop: {
-        get: () => mockScrollTop,
-      },
-      scrollHeight: {
-        get: () => mockScrollHeight,
-        set: (val) => {
-          mockScrollHeight = val;
-        },
-      },
-    });
-  };
-
-  beforeEach(() => {
-    mockScrollHeight = INITIAL_HEIGHT;
-    mockScrollTop = INITIAL_SCROLL_TOP;
-  });
-
-  afterEach(() => {
-    throttle.mockClear();
-  });
-
-  it('emits nothing on creation', () => {
-    createComponent();
-
-    return wrapper.vm.$nextTick(() => {
-      expect(wrapper.emitted('bottomReached')).toBe(undefined);
-      expect(wrapper.emitted('topReached')).toBe(undefined);
-    });
-  });
-
-  it('emits bottomReached when scrolled to the bottom', () => {
-    createComponent();
-
-    expect(wrapper.emitted('bottomReached')).toBe(undefined);
-
-    mockScrollTo({ top: INITIAL_HEIGHT - 0.5 });
-    expect(wrapper.emitted('bottomReached')).toHaveLength(1);
-  });
-
-  it('emits topReached when scrolled to the top', () => {
-    mockScrollTop = mockScrollHeight;
-
-    createComponent();
-
-    expect(wrapper.emitted('topReached')).toBe(undefined);
-
-    mockScrollTo({ top: 0 });
-    expect(wrapper.emitted('topReached')).toHaveLength(1);
-  });
-
-  it('scrolls to the bottom when `topReached` is defined', () => {
-    createComponent({
-      listeners: {
-        topReached: () => {},
-      },
-    });
-
-    return wrapper.vm.$nextTick(() => {
-      expect(mockScrollTo).toHaveBeenCalledWith({ top: INITIAL_HEIGHT - ADJUST_SCROLL_GAP });
-    });
-  });
-
-  it('does not scroll to the bottom when `topReached` and `bottomReached` are defined', () => {
-    createComponent({
-      listeners: {
-        bottomReached: () => {},
-        topReached: () => {},
-      },
-    });
-
-    return wrapper.vm.$nextTick(() => {
-      expect(mockScrollTo).not.toHaveBeenCalled();
-    });
-  });
-
-  it('scroll past loaded items', () => {
-    createComponent();
-
-    const BATCH_HEIGHT = 100;
-
-    // Mock more items are loaded
-    wrapper.setProps({ fetchedItems: 4 });
-
-    return wrapper.vm.$nextTick(() => {
-      // Mock list was expanded in height by BATCH_HEIGHT px
-      mockScrollHeight = INITIAL_HEIGHT + BATCH_HEIGHT;
-
-      return wrapper.vm.$nextTick(() => {
-        expect(mockScrollTo).toHaveBeenCalledWith({
-          top: BATCH_HEIGHT - ADJUST_SCROLL_GAP,
-        });
-      });
-    });
-  });
-
-  describe('the legend', () => {
-    describe.each`
-      totalItems   | expectedLegend
-      ${99}        | ${'Showing 2 of 99 items'}
-      ${2}         | ${'Showing 2 of 2 items'}
-      ${0}         | ${'Showing 2 items'}
-      ${-1}        | ${'Showing 2 items'}
-      ${undefined} | ${'Showing 2 items'}
-    `('given $totalItems total items', ({ totalItems, expectedLegend }) => {
-      beforeEach(() => {
-        createComponent({
-          propsData: {
-            fetchedItems: 2,
-            totalItems,
-          },
-        });
-      });
-
-      it('displays the expected text', () => {
-        expect(wrapper.text()).toContain(expectedLegend);
-      });
-    });
-  });
-
-  describe('public methods via $ref', () => {
-    it('scrollUp', () => {
-      createComponent();
-      wrapper.vm.scrollUp();
-
-      expect(mockScrollTo).toHaveBeenCalledWith({ top: ADJUST_SCROLL_GAP });
-    });
-
-    it('scrollDown', () => {
-      createComponent();
-      wrapper.vm.scrollDown();
-
-      expect(mockScrollTo).toHaveBeenCalledWith({ top: INITIAL_HEIGHT - ADJUST_SCROLL_GAP });
-    });
-
-    it('scrollTo', () => {
-      createComponent();
-      wrapper.vm.scrollTo({ top: 250, behavior: 'instant' });
-
-      expect(mockScrollTo).toHaveBeenCalledWith({ top: 250, behavior: 'instant' });
-    });
-  });
-});