From d9ab72d6080f594d0b3cae15f14b3ef2c6c638cb Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Wed, 20 Oct 2021 08:43:02 +0000
Subject: Add latest changes from gitlab-org/gitlab@14-4-stable-ee

---
 .../components/pagination_bar_spec.js              | 92 ++++++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 spec/frontend/import_entities/components/pagination_bar_spec.js

(limited to 'spec/frontend/import_entities')

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+',
+    );
+  });
+});
-- 
cgit v1.2.3