1 files changed, 92 insertions, 0 deletions
diff --git a/spec/frontend/import_entities/components/pagination_bar_spec.js b/spec/frontend/import_entities/components/pagination_bar_spec.js
new file mode 100644
index 00000000000..163ce11a8db
--- /dev/null
+++ b/spec/frontend/import_entities/components/pagination_bar_spec.js
@@ -0,0 +1,92 @@
+import { GlPagination, GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import PaginationBar from '~/import_entities/components/pagination_bar.vue';
+import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
+
+describe('Pagination bar', () => {
+  const DEFAULT_PROPS = {
+    pageInfo: {
+      total: 50,
+      page: 1,
+      perPage: 20,
+    },
+    itemsCount: 17,
+  };
+  let wrapper;
+
+  const createComponent = (propsData) => {
+    wrapper = mount(PaginationBar, {
+      propsData: {
+        ...DEFAULT_PROPS,
+        ...propsData,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('events', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('emits set-page event when page is selected', () => {
+      const NEXT_PAGE = 3;
+      // PaginationLinks uses prop instead of event for handling page change
+      // So we go one level deep to test this
+      wrapper
+        .findComponent(PaginationLinks)
+        .findComponent(GlPagination)
+        .vm.$emit('input', NEXT_PAGE);
+      expect(wrapper.emitted('set-page')).toEqual([[NEXT_PAGE]]);
+    });
+
+    it('emits set-page-size event when page size is selected', () => {
+      const firstItemInPageSizeDropdown = wrapper.findComponent(GlDropdownItem);
+      firstItemInPageSizeDropdown.vm.$emit('click');
+
+      const [emittedPageSizeChange] = wrapper.emitted('set-page-size')[0];
+      expect(firstItemInPageSizeDropdown.text()).toMatchInterpolatedText(
+        `${emittedPageSizeChange} items per page`,
+      );
+    });
+  });
+
+  it('renders current page size', () => {
+    const CURRENT_PAGE_SIZE = 40;
+
+    createComponent({
+      pageInfo: {
+        ...DEFAULT_PROPS.pageInfo,
+        perPage: CURRENT_PAGE_SIZE,
+      },
+    });
+
+    expect(wrapper.find(GlDropdown).find('button').text()).toMatchInterpolatedText(
+      `${CURRENT_PAGE_SIZE} items per page`,
+    );
+  });
+
+  it('renders current page information', () => {
+    createComponent();
+
+    expect(wrapper.find('[data-testid="information"]').text()).toMatchInterpolatedText(
+      'Showing 1 - 17 of 50',
+    );
+  });
+
+  it('renders current page information when total count is over 1000', () => {
+    createComponent({
+      pageInfo: {
+        ...DEFAULT_PROPS.pageInfo,
+        total: 1200,
+      },
+    });
+
+    expect(wrapper.find('[data-testid="information"]').text()).toMatchInterpolatedText(
+      'Showing 1 - 17 of 1000+',
+    );
+  });
+});