2 files changed, 96 insertions, 34 deletions

diff --git a/spec/frontend/import_entities/import_projects/components/import_projects_table_spec.js b/spec/frontend/import_entities/import_projects/components/import_projects_table_spec.js
index 53807167fe8..51f82dab381 100644
--- a/spec/frontend/import_entities/import_projects/components/import_projects_table_spec.js
+++ b/spec/frontend/import_entities/import_projects/components/import_projects_table_spec.js
@@ -59,7 +59,6 @@ describe('ImportProjectsTable', () => {
       actions: {
         fetchRepos: fetchReposFn,
         fetchJobs: jest.fn(),
-        fetchNamespaces: jest.fn(),
         importAll: importAllFn,
         stopJobsPolling: jest.fn(),
         clearJobsEtagPoll: jest.fn(),
@@ -95,12 +94,6 @@ describe('ImportProjectsTable', () => {
     expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
   });
 
-  it('renders a loading icon while namespaces are loading', () => {
-    createComponent({ state: { isLoadingNamespaces: true } });
-
-    expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
-  });
-
   it('renders a table with provider repos', () => {
     const repositories = [
       { importSource: { id: 1 }, importedProject: null },
@@ -214,35 +207,52 @@ describe('ImportProjectsTable', () => {
   });
 
   describe('when paginatable is set to true', () => {
-    const pageInfo = { page: 1 };
+    const initState = {
+      namespaces: [{ fullPath: 'path' }],
+      pageInfo: { page: 1, hasNextPage: true },
+      repositories: [
+        { importSource: { id: 1 }, importedProject: null, importStatus: STATUSES.NONE },
+      ],
+    };
+
+    describe('with hasNextPage true', () => {
+      beforeEach(() => {
+        createComponent({
+          state: initState,
+          paginatable: true,
+        });
+      });
 
-    beforeEach(() => {
-      createComponent({
-        state: {
-          namespaces: [{ fullPath: 'path' }],
-          pageInfo,
-          repositories: [
-            { importSource: { id: 1 }, importedProject: null, importStatus: STATUSES.NONE },
-          ],
-        },
-        paginatable: true,
+      it('does not call fetchRepos on mount', () => {
+        expect(fetchReposFn).not.toHaveBeenCalled();
       });
-    });
 
-    it('does not call fetchRepos on mount', () => {
-      expect(fetchReposFn).not.toHaveBeenCalled();
-    });
+      it('renders intersection observer component', () => {
+        expect(wrapper.findComponent(GlIntersectionObserver).exists()).toBe(true);
+      });
+
+      it('calls fetchRepos when intersection observer appears', async () => {
+        wrapper.findComponent(GlIntersectionObserver).vm.$emit('appear');
 
-    it('renders intersection observer component', () => {
-      expect(wrapper.findComponent(GlIntersectionObserver).exists()).toBe(true);
+        await nextTick();
+
+        expect(fetchReposFn).toHaveBeenCalled();
+      });
     });
 
-    it('calls fetchRepos when intersection observer appears', async () => {
-      wrapper.findComponent(GlIntersectionObserver).vm.$emit('appear');
+    describe('with hasNextPage false', () => {
+      beforeEach(() => {
+        initState.pageInfo.hasNextPage = false;
 
-      await nextTick();
+        createComponent({
+          state: initState,
+          paginatable: true,
+        });
+      });
 
-      expect(fetchReposFn).toHaveBeenCalled();
+      it('does not render intersection observer component', () => {
+        expect(wrapper.findComponent(GlIntersectionObserver).exists()).toBe(false);
+      });
     });
   });
 
diff --git a/spec/frontend/import_entities/import_projects/components/provider_repo_table_row_spec.js b/spec/frontend/import_entities/import_projects/components/provider_repo_table_row_spec.js
index 40934e90b78..d686036781f 100644
--- a/spec/frontend/import_entities/import_projects/components/provider_repo_table_row_spec.js
+++ b/spec/frontend/import_entities/import_projects/components/provider_repo_table_row_spec.js
@@ -10,13 +10,13 @@ import ProviderRepoTableRow from '~/import_entities/import_projects/components/p
 describe('ProviderRepoTableRow', () => {
   let wrapper;
   const fetchImport = jest.fn();
+  const cancelImport = jest.fn();
   const setImportTarget = jest.fn();
   const fakeImportTarget = {
     targetNamespace: 'target',
     newName: 'newName',
   };
 
-  const availableNamespaces = ['test'];
   const userNamespace = 'root';
 
   function initStore(initialState) {
@@ -25,7 +25,7 @@ describe('ProviderRepoTableRow', () => {
       getters: {
         getImportTarget: () => () => fakeImportTarget,
       },
-      actions: { fetchImport, setImportTarget },
+      actions: { fetchImport, cancelImport, setImportTarget },
     });
 
     return store;
@@ -37,6 +37,14 @@ describe('ProviderRepoTableRow', () => {
     return buttons.length ? buttons.at(0) : buttons;
   };
 
+  const findCancelButton = () => {
+    const buttons = wrapper
+      .findAllComponents(GlButton)
+      .filter((node) => node.attributes('aria-label') === 'Cancel');
+
+    return buttons.length ? buttons.at(0) : buttons;
+  };
+
   function mountComponent(props) {
     Vue.use(Vuex);
 
@@ -44,7 +52,7 @@ describe('ProviderRepoTableRow', () => {
 
     wrapper = shallowMount(ProviderRepoTableRow, {
       store,
-      propsData: { availableNamespaces, userNamespace, optionalStages: {}, ...props },
+      propsData: { userNamespace, optionalStages: {}, ...props },
     });
   }
 
@@ -78,9 +86,7 @@ describe('ProviderRepoTableRow', () => {
     });
 
     it('renders a group namespace select', () => {
-      expect(wrapper.findComponent(ImportGroupDropdown).props().namespaces).toBe(
-        availableNamespaces,
-      );
+      expect(wrapper.findComponent(ImportGroupDropdown).exists()).toBe(true);
     });
 
     it('renders import button', () => {
@@ -113,6 +119,52 @@ describe('ProviderRepoTableRow', () => {
     });
   });
 
+  describe('when rendering importing project', () => {
+    const repo = {
+      importSource: {
+        id: 'remote-1',
+        fullName: 'fullName',
+        providerLink: 'providerLink',
+      },
+      importedProject: {
+        id: 1,
+        fullPath: 'fullPath',
+        importSource: 'importSource',
+        importStatus: STATUSES.STARTED,
+      },
+    };
+
+    describe('when cancelable is true', () => {
+      beforeEach(() => {
+        mountComponent({ repo, cancelable: true });
+      });
+
+      it('shows cancel button', () => {
+        expect(findCancelButton().isVisible()).toBe(true);
+      });
+
+      it('cancels import when clicking cancel button', async () => {
+        findCancelButton().vm.$emit('click');
+
+        await nextTick();
+
+        expect(cancelImport).toHaveBeenCalledWith(expect.anything(), {
+          repoId: repo.importSource.id,
+        });
+      });
+    });
+
+    describe('when cancelable is false', () => {
+      beforeEach(() => {
+        mountComponent({ repo, cancelable: false });
+      });
+
+      it('hides cancel button', () => {
+        expect(findCancelButton().isVisible()).toBe(false);
+      });
+    });
+  });
+
   describe('when rendering imported project', () => {
     const FAKE_STATS = {};