@gitlab/ui 80.13.1 → 80.14.0

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

@@ -1,94 +0,0 @@
-import { setStoryTimeout } from '../../../utils/test_utils';
-import GlLoadingIcon from '../loading_icon/loading_icon.vue';
-import GlInfiniteScroll from './infinite_scroll.vue';
-import readme from './infinite_scroll.md';
-
-const ITEMS_BATCH_SIZE = 20;
-
-const template = `
-  <gl-infinite-scroll
-    :total-items="totalItems"
-    :fetched-items="localFetchedItems"
-    :max-list-height="maxListHeight"
-    @bottomReached="onBottomReached"
-    >
-    <template #items>
-      <ul class="list-group list-group-flushed list-unstyled">
-        <li v-for="item in localFetchedItems" :key="item" class="list-group-item">Item #{{ item }}</li>
-      </ul>
-    </template>
-
-    <template v-if="localIsLoading" #default>
-      <div class="gl-mt-3">
-        <gl-loading-icon />
-      </div>
-    </template>
-  </gl-infinite-scroll>
-`;
-
-const generateProps = ({
-  isLoading = false,
-  totalItems = null,
-  fetchedItems = ITEMS_BATCH_SIZE,
-  maxListHeight = 285,
-} = {}) => ({
-  isLoading,
-  totalItems,
-  fetchedItems,
-  maxListHeight,
-});
-
-const Template = (args, { argTypes }) => ({
-  components: {
-    GlInfiniteScroll,
-    GlLoadingIcon,
-  },
-  props: Object.keys(argTypes),
-  watch: {
-    fetchedItems: {
-      immediate: true,
-      handler(fetchedItems) {
-        this.localFetchedItems = fetchedItems;
-      },
-    },
-    isLoading: {
-      immediate: true,
-      handler(isLoading) {
-        this.localIsLoading = isLoading;
-      },
-    },
-  },
-  data() {
-    return {
-      loadTimer: null,
-      localFetchedItems: null,
-      localIsLoading: false,
-    };
-  },
-  methods: {
-    onBottomReached() {
-      clearTimeout(this.loadTimer);
-      this.localIsLoading = true;
-      this.loadTimer = setStoryTimeout(() => {
-        this.localFetchedItems += ITEMS_BATCH_SIZE;
-        this.localIsLoading = false;
-      }, 500);
-    },
-  },
-  template,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export default {
-  title: 'base/infinite-scroll',
-  component: GlInfiniteScroll,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

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

@@ -1,313 +0,0 @@
-import { mount } from '@vue/test-utils';
-import GlKeysetPagination from './keyset_pagination.vue';
-
-describe('GlKeysetPagination', () => {
-  let wrapper;
-
-  const startCursor = 'TEST_START_CURSOR';
-  const endCursor = 'TEST_END_CURSOR';
-
-  const buttonTagName = 'BUTTON';
-  const linkTagName = 'A';
-
-  const createComponent = (props = {}, scopedSlots = {}) => {
-    wrapper = mount(GlKeysetPagination, {
-      propsData: {
-        hasPreviousPage: true,
-        hasNextPage: true,
-        ...props,
-      },
-      scopedSlots,
-    });
-  };
-
-  const findPrevButton = () => wrapper.find('[data-testid="prevButton"]');
-  const findNextButton = () => wrapper.find('[data-testid="nextButton"]');
-
-  const expectPrevButtonToBeDisabled = () => {
-    expect(findPrevButton().attributes('disabled')).toBe('disabled');
-    expect(findPrevButton().classes('disabled')).toBe(true);
-  };
-
-  const expectNextButtonToBeDisabled = () => {
-    expect(findNextButton().attributes('disabled')).toBe('disabled');
-    expect(findNextButton().classes('disabled')).toBe(true);
-  };
-
-  const expectPrevButtonToBeEnabled = () => {
-    expect(findPrevButton().attributes('disabled')).toBeUndefined();
-    expect(findPrevButton().classes('disabled')).toBe(false);
-  };
-
-  const expectNextButtonToBeEnabled = () => {
-    expect(findNextButton().attributes('disabled')).toBeUndefined();
-    expect(findNextButton().classes('disabled')).toBe(false);
-  };
-
-  describe('template', () => {
-    describe('icons', () => {
-      beforeEach(() => {
-        createComponent();
-      });
-
-      it('renders a left chevron icon in the "Prev" button', () => {
-        expect(findPrevButton().find('[data-testid="chevron-left-icon"]').exists()).toBe(true);
-      });
-
-      it('renders a right chevron icon in the "Next" button', () => {
-        expect(findNextButton().find('[data-testid="chevron-right-icon"]').exists()).toBe(true);
-      });
-    });
-  });
-
-  describe('when both hasNextPage & hasPreviousPage is false', () => {
-    beforeEach(() => {
-      createComponent({ hasNextPage: false, hasPreviousPage: false });
-    });
-
-    it('does not render pagination', () => {
-      expect(findPrevButton().exists()).toBe(false);
-      expect(findNextButton().exists()).toBe(false);
-    });
-  });
-
-  describe('hasPreviousPage', () => {
-    describe('when hasPreviousPage is false', () => {
-      beforeEach(() => {
-        createComponent({ hasPreviousPage: false });
-      });
-
-      it('renders the "Prev" button as disabled', () => {
-        expectPrevButtonToBeDisabled();
-      });
-    });
-
-    describe('when hasPreviousPage is true', () => {
-      beforeEach(() => {
-        createComponent({ hasPreviousPage: true });
-      });
-
-      it('renders the "Prev" button as enabled', () => {
-        expectPrevButtonToBeEnabled();
-      });
-    });
-  });
-
-  describe('hasNextPage', () => {
-    describe('when hasNextPage is false', () => {
-      beforeEach(() => {
-        createComponent({ hasNextPage: false });
-      });
-
-      it('renders the "Next" button as disabled', () => {
-        expectNextButtonToBeDisabled();
-      });
-    });
-
-    describe('when hasNextPage is true', () => {
-      beforeEach(() => {
-        createComponent({ hasNextPage: true });
-      });
-
-      it('renders the "Next" button as enabled', () => {
-        expectNextButtonToBeEnabled();
-      });
-    });
-  });
-
-  describe('events', () => {
-    describe('when the "Prev" button is clicked', () => {
-      beforeEach(() => {
-        createComponent({ hasPreviousPage: true, startCursor });
-
-        findPrevButton().vm.$emit('click');
-      });
-
-      it('emits a "prev" event with the startCursor as a parameter', () => {
-        expect(wrapper.emitted()).toEqual({
-          prev: [[startCursor]],
-        });
-      });
-    });
-
-    describe('when the "Next" button is clicked', () => {
-      beforeEach(() => {
-        createComponent({ hasNextPage: true, endCursor });
-
-        findNextButton().vm.$emit('click');
-      });
-
-      it('emits a "next" event with the endCursor as a parameter', () => {
-        expect(wrapper.emitted()).toEqual({
-          next: [[endCursor]],
-        });
-      });
-    });
-  });
-
-  describe('prevText', () => {
-    describe('when no value is provided', () => {
-      beforeEach(() => {
-        createComponent();
-      });
-
-      it('renders the default text: "Previous"', () => {
-        expect(findPrevButton().text()).toBe('Previous');
-      });
-    });
-
-    describe('when a custom string is provided', () => {
-      const prevText = 'Previous Page';
-
-      beforeEach(() => {
-        createComponent({ prevText });
-      });
-
-      it('renders the custom text inside the button', () => {
-        expect(findPrevButton().text()).toBe(prevText);
-      });
-    });
-  });
-
-  describe('nextText', () => {
-    describe('when no value is provided', () => {
-      beforeEach(() => {
-        createComponent();
-      });
-
-      it('renders the default text: "Next"', () => {
-        expect(findNextButton().text()).toBe('Next');
-      });
-    });
-
-    describe('when a custom string is provided', () => {
-      const nextText = 'Next Page';
-
-      beforeEach(() => {
-        createComponent({ nextText });
-      });
-
-      it('renders the custom text inside the button', () => {
-        expect(findNextButton().text()).toBe(nextText);
-      });
-    });
-  });
-
-  describe('prevButtonLink', () => {
-    describe('when no value is provided', () => {
-      beforeEach(() => {
-        createComponent();
-      });
-
-      it('renders the button as a regular button (not a link)', () => {
-        expect(findPrevButton().element.tagName).toBe(buttonTagName);
-      });
-    });
-
-    describe('when a link is provided', () => {
-      const prevButtonLink = 'https://example.com/prev';
-
-      beforeEach(() => {
-        createComponent({ prevButtonLink });
-      });
-
-      it('renders the button as a link', () => {
-        expect(findPrevButton().element.tagName).toBe(linkTagName);
-      });
-
-      it('render the link with the correct href', () => {
-        expect(findPrevButton().attributes('href')).toBe(prevButtonLink);
-      });
-    });
-  });
-
-  describe('nextButtonLink', () => {
-    describe('when no value is provided', () => {
-      beforeEach(() => {
-        createComponent();
-      });
-
-      it('renders the button as a regular button (not a link)', () => {
-        expect(findNextButton().element.tagName).toBe(buttonTagName);
-      });
-    });
-
-    describe('when a link is provided', () => {
-      const nextButtonLink = 'https://example.com/next';
-
-      beforeEach(() => {
-        createComponent({ nextButtonLink });
-      });
-
-      it('renders the button as a link', () => {
-        expect(findNextButton().element.tagName).toBe(linkTagName);
-      });
-
-      it('render the link with the correct href', () => {
-        expect(findNextButton().attributes('href')).toBe(nextButtonLink);
-      });
-    });
-  });
-
-  describe('disabled', () => {
-    describe('when hasNextPage and hasPreviousPage are true, and disabled is false', () => {
-      beforeEach(() => {
-        createComponent({
-          hasNextPage: true,
-          hasPreviousPage: true,
-          disabled: false,
-        });
-      });
-
-      it('renders both buttons as enabled', () => {
-        expectPrevButtonToBeEnabled();
-        expectNextButtonToBeEnabled();
-      });
-    });
-  });
-
-  describe('when hasNextPage, hasPreviousPage, and disabled are true', () => {
-    beforeEach(() => {
-      createComponent({
-        hasNextPage: true,
-        hasPreviousPage: true,
-        disabled: true,
-      });
-    });
-
-    it('renders both buttons as disabled', () => {
-      expectPrevButtonToBeDisabled();
-      expectNextButtonToBeDisabled();
-    });
-  });
-
-  describe('slots', () => {
-    describe('when the previous-button-content slot is provided', () => {
-      const previousButtonContent = '<span data-testid="custom-content">GO BACK!!</span>';
-
-      beforeEach(() => {
-        createComponent(undefined, {
-          'previous-button-content': previousButtonContent,
-        });
-      });
-
-      it('renders the provided content inside the "Prev" button', () => {
-        expect(findPrevButton().find('[data-testid="custom-content"]').exists()).toBe(true);
-      });
-    });
-  });
-
-  describe('when the next-button-content slot is provided', () => {
-    const nextButtonContent = '<span data-testid="custom-content">GO FORWARD!!</span>';
-
-    beforeEach(() => {
-      createComponent(undefined, {
-        'next-button-content': nextButtonContent,
-      });
-    });
-
-    it('renders the provided content inside the "Next" button', () => {
-      expect(findNextButton().find('[data-testid="custom-content"]').exists()).toBe(true);
-    });
-  });
-});

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

@@ -1,66 +0,0 @@
-import readme from './keyset_pagination.md';
-import GlKeysetPagination from './keyset_pagination.vue';
-
-const generateProps = ({
-  hasPreviousPage = false,
-  hasNextPage = true,
-  startCursor = 'eyJpZCI6IjE3NTg1ODciLCJyZWxlYXNlZF9hdCI6IjIwMjAtMDgtMjAgMTQ6NDc6MDguNTQ1MjE1MDAwIFVUQyJ9',
-  endCursor = 'eyJpZCI6IjEyNjcxNzkiLCJyZWxlYXNlZF9hdCI6IjIwMjAtMDItMTkgMjE6MDA6MDUuODU5NTQ2MDAwIFVUQyJ9',
-  prevText,
-  nextText,
-  prevButtonLink = '',
-  nextButtonLink = '',
-  disabled = false,
-} = {}) => ({
-  hasPreviousPage,
-  hasNextPage,
-  startCursor,
-  endCursor,
-  prevText,
-  nextText,
-  prevButtonLink,
-  nextButtonLink,
-  disabled,
-});
-
-const Template = (args, { argTypes }) => ({
-  components: { GlKeysetPagination },
-  props: Object.keys(argTypes),
-  template: `
-      <gl-keyset-pagination v-bind="$props"/>
-    `,
-});
-
-/* eslint-disable no-alert */
-export const Events = (args, { argTypes }) => ({
-  components: { GlKeysetPagination },
-  props: Object.keys(argTypes),
-  methods: {
-    onPrev(startCursor) {
-      alert(`"prev" event fired with start cursor: "${startCursor}"`);
-    },
-    onNext(endCursor) {
-      alert(`"next" event fired with end cursor: "${endCursor}"`);
-    },
-  },
-  template: `
-      <gl-keyset-pagination v-bind="$props" @prev="onPrev($event)" @next="onNext($event)" />
-    `,
-});
-Events.args = generateProps({ hasPreviousPage: true });
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export default {
-  title: 'base/keyset-pagination',
-  component: GlKeysetPagination,
-  parameters: {
-    bootstrapComponent: false,
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};