1 files changed, 156 insertions, 11 deletions

diff --git a/spec/frontend/import_entities/import_groups/components/import_table_spec.js b/spec/frontend/import_entities/import_groups/components/import_table_spec.js
index cd184bb65cc..dd734782169 100644
--- a/spec/frontend/import_entities/import_groups/components/import_table_spec.js
+++ b/spec/frontend/import_entities/import_groups/components/import_table_spec.js
@@ -1,15 +1,15 @@
+import { GlEmptyState, GlLoadingIcon, GlSearchBoxByClick, GlSprintf } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
-import { GlLoadingIcon } from '@gitlab/ui';
-import waitForPromises from 'helpers/wait_for_promises';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import ImportTableRow from '~/import_entities/import_groups/components/import_table_row.vue';
+import waitForPromises from 'helpers/wait_for_promises';
+import { STATUSES } from '~/import_entities/constants';
 import ImportTable from '~/import_entities/import_groups/components/import_table.vue';
-import setTargetNamespaceMutation from '~/import_entities/import_groups/graphql/mutations/set_target_namespace.mutation.graphql';
-import setNewNameMutation from '~/import_entities/import_groups/graphql/mutations/set_new_name.mutation.graphql';
+import ImportTableRow from '~/import_entities/import_groups/components/import_table_row.vue';
 import importGroupMutation from '~/import_entities/import_groups/graphql/mutations/import_group.mutation.graphql';
-
-import { STATUSES } from '~/import_entities/constants';
+import setNewNameMutation from '~/import_entities/import_groups/graphql/mutations/set_new_name.mutation.graphql';
+import setTargetNamespaceMutation from '~/import_entities/import_groups/graphql/mutations/set_target_namespace.mutation.graphql';
+import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
 
 import { availableNamespacesFixture, generateFakeEntry } from '../graphql/fixtures';
 
@@ -20,6 +20,9 @@ describe('import table', () => {
   let wrapper;
   let apolloProvider;
 
+  const FAKE_GROUP = generateFakeEntry({ id: 1, status: STATUSES.NONE });
+  const FAKE_PAGE_INFO = { page: 1, perPage: 20, total: 40, totalPages: 2 };
+
   const createComponent = ({ bulkImportSourceGroups }) => {
     apolloProvider = createMockApollo([], {
       Query: {
@@ -34,6 +37,12 @@ describe('import table', () => {
     });
 
     wrapper = shallowMount(ImportTable, {
+      propsData: {
+        sourceUrl: 'https://demo.host',
+      },
+      stubs: {
+        GlSprintf,
+      },
       localVue,
       apolloProvider,
     });
@@ -62,25 +71,50 @@ describe('import table', () => {
     expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
   });
 
+  it('renders message about empty state when no groups are available for import', async () => {
+    createComponent({
+      bulkImportSourceGroups: () => ({
+        nodes: [],
+        pageInfo: FAKE_PAGE_INFO,
+      }),
+    });
+    await waitForPromises();
+
+    expect(wrapper.find(GlEmptyState).props().title).toBe('No groups available for import');
+  });
+
   it('renders import row for each group in response', async () => {
     const FAKE_GROUPS = [
       generateFakeEntry({ id: 1, status: STATUSES.NONE }),
       generateFakeEntry({ id: 2, status: STATUSES.FINISHED }),
     ];
     createComponent({
-      bulkImportSourceGroups: () => FAKE_GROUPS,
+      bulkImportSourceGroups: () => ({
+        nodes: FAKE_GROUPS,
+        pageInfo: FAKE_PAGE_INFO,
+      }),
     });
     await waitForPromises();
 
     expect(wrapper.findAll(ImportTableRow)).toHaveLength(FAKE_GROUPS.length);
   });
 
-  describe('converts row events to mutation invocations', () => {
-    const FAKE_GROUP = generateFakeEntry({ id: 1, status: STATUSES.NONE });
+  it('does not render status string when result list is empty', async () => {
+    createComponent({
+      bulkImportSourceGroups: jest.fn().mockResolvedValue({
+        nodes: [],
+        pageInfo: FAKE_PAGE_INFO,
+      }),
+    });
+    await waitForPromises();
+
+    expect(wrapper.text()).not.toContain('Showing 1-0');
+  });
 
+  describe('converts row events to mutation invocations', () => {
     beforeEach(() => {
       createComponent({
-        bulkImportSourceGroups: () => [FAKE_GROUP],
+        bulkImportSourceGroups: () => ({ nodes: [FAKE_GROUP], pageInfo: FAKE_PAGE_INFO }),
       });
       return waitForPromises();
     });
@@ -100,4 +134,115 @@ describe('import table', () => {
       });
     });
   });
+
+  describe('pagination', () => {
+    const bulkImportSourceGroupsQueryMock = jest
+      .fn()
+      .mockResolvedValue({ nodes: [FAKE_GROUP], pageInfo: FAKE_PAGE_INFO });
+
+    beforeEach(() => {
+      createComponent({
+        bulkImportSourceGroups: bulkImportSourceGroupsQueryMock,
+      });
+      return waitForPromises();
+    });
+
+    it('correctly passes pagination info from query', () => {
+      expect(wrapper.find(PaginationLinks).props().pageInfo).toStrictEqual(FAKE_PAGE_INFO);
+    });
+
+    it('updates page when page change is requested', async () => {
+      const REQUESTED_PAGE = 2;
+      wrapper.find(PaginationLinks).props().change(REQUESTED_PAGE);
+
+      await waitForPromises();
+      expect(bulkImportSourceGroupsQueryMock).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({ page: REQUESTED_PAGE }),
+        expect.anything(),
+        expect.anything(),
+      );
+    });
+
+    it('updates status text when page is changed', async () => {
+      const REQUESTED_PAGE = 2;
+      bulkImportSourceGroupsQueryMock.mockResolvedValue({
+        nodes: [FAKE_GROUP],
+        pageInfo: {
+          page: 2,
+          total: 38,
+          perPage: 20,
+          totalPages: 2,
+        },
+      });
+      wrapper.find(PaginationLinks).props().change(REQUESTED_PAGE);
+      await waitForPromises();
+
+      expect(wrapper.text()).toContain('Showing 21-21 of 38');
+    });
+  });
+
+  describe('filters', () => {
+    const bulkImportSourceGroupsQueryMock = jest
+      .fn()
+      .mockResolvedValue({ nodes: [FAKE_GROUP], pageInfo: FAKE_PAGE_INFO });
+
+    beforeEach(() => {
+      createComponent({
+        bulkImportSourceGroups: bulkImportSourceGroupsQueryMock,
+      });
+      return waitForPromises();
+    });
+
+    const findFilterInput = () => wrapper.find(GlSearchBoxByClick);
+
+    it('properly passes filter to graphql query when search box is submitted', async () => {
+      createComponent({
+        bulkImportSourceGroups: bulkImportSourceGroupsQueryMock,
+      });
+      await waitForPromises();
+
+      const FILTER_VALUE = 'foo';
+      findFilterInput().vm.$emit('submit', FILTER_VALUE);
+      await waitForPromises();
+
+      expect(bulkImportSourceGroupsQueryMock).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({ filter: FILTER_VALUE }),
+        expect.anything(),
+        expect.anything(),
+      );
+    });
+
+    it('updates status string when search box is submitted', async () => {
+      createComponent({
+        bulkImportSourceGroups: bulkImportSourceGroupsQueryMock,
+      });
+      await waitForPromises();
+
+      const FILTER_VALUE = 'foo';
+      findFilterInput().vm.$emit('submit', FILTER_VALUE);
+      await waitForPromises();
+
+      expect(wrapper.text()).toContain('Showing 1-1 of 40 groups matching filter "foo"');
+    });
+
+    it('properly resets filter in graphql query when search box is cleared', async () => {
+      const FILTER_VALUE = 'foo';
+      findFilterInput().vm.$emit('submit', FILTER_VALUE);
+      await waitForPromises();
+
+      bulkImportSourceGroupsQueryMock.mockClear();
+      await apolloProvider.defaultClient.resetStore();
+      findFilterInput().vm.$emit('clear');
+      await waitForPromises();
+
+      expect(bulkImportSourceGroupsQueryMock).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({ filter: '' }),
+        expect.anything(),
+        expect.anything(),
+      );
+    });
+  });
 });