Add latest changes from gitlab-org/gitlab@master

3 files changed, 134 insertions, 37 deletions

diff --git a/spec/frontend/import/details/components/import_details_app_spec.js b/spec/frontend/import/details/components/import_details_app_spec.js
index 178ce071de0..6e748a57a1d 100644
--- a/spec/frontend/import/details/components/import_details_app_spec.js
+++ b/spec/frontend/import/details/components/import_details_app_spec.js
@@ -1,16 +1,11 @@
 import { shallowMount } from '@vue/test-utils';
 import ImportDetailsApp from '~/import/details/components/import_details_app.vue';
-import { mockProject } from '../mock_data';
 
 describe('Import details app', () => {
   let wrapper;
 
   const createComponent = () => {
-    wrapper = shallowMount(ImportDetailsApp, {
-      propsData: {
-        project: mockProject,
-      },
-    });
+    wrapper = shallowMount(ImportDetailsApp);
   };
 
   describe('template', () => {
diff --git a/spec/frontend/import/details/components/import_details_table_spec.js b/spec/frontend/import/details/components/import_details_table_spec.js
index 43c9a66c00a..aee8573eb02 100644
--- a/spec/frontend/import/details/components/import_details_table_spec.js
+++ b/spec/frontend/import/details/components/import_details_table_spec.js
@@ -1,17 +1,30 @@
 import { mount, shallowMount } from '@vue/test-utils';
-import { GlEmptyState, GlTable } from '@gitlab/ui';
+import { GlEmptyState, GlLoadingIcon, GlTable } from '@gitlab/ui';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import { HTTP_STATUS_OK, HTTP_STATUS_INTERNAL_SERVER_ERROR } from '~/lib/utils/http_status';
+import { createAlert } from '~/alert';
+import waitForPromises from 'helpers/wait_for_promises';
 
 import PaginationBar from '~/vue_shared/components/pagination_bar/pagination_bar.vue';
 import ImportDetailsTable from '~/import/details/components/import_details_table.vue';
+import { mockImportFailures, mockHeaders } from '../mock_data';
+
+jest.mock('~/alert');
 
 describe('Import details table', () => {
   let wrapper;
+  let mock;
 
-  const createComponent = ({ mountFn = shallowMount } = {}) => {
-    wrapper = mountFn(ImportDetailsTable);
+  const createComponent = ({ mountFn = shallowMount, provide = {} } = {}) => {
+    wrapper = mountFn(ImportDetailsTable, {
+      provide,
+    });
   };
 
+  const findGlLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findGlTable = () => wrapper.findComponent(GlTable);
+  const findGlTableRows = () => findGlTable().find('tbody').findAll('tr');
   const findGlEmptyState = () => findGlTable().findComponent(GlEmptyState);
   const findPaginationBar = () => wrapper.findComponent(PaginationBar);
 
@@ -20,7 +33,7 @@ describe('Import details table', () => {
       it('renders table with empty state', () => {
         createComponent({ mountFn: mount });
 
-        expect(findGlEmptyState().exists()).toBe(true);
+        expect(findGlEmptyState().text()).toBe(ImportDetailsTable.i18n.emptyText);
       });
 
       it('does not render pagination', () => {
@@ -30,4 +43,71 @@ describe('Import details table', () => {
       });
     });
   });
+
+  describe('fetching failures from API', () => {
+    const mockImportFailuresPath = '/failures';
+
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+    });
+
+    afterEach(() => {
+      mock.restore();
+    });
+
+    describe('when request is successful', () => {
+      beforeEach(() => {
+        mock.onGet(mockImportFailuresPath).reply(HTTP_STATUS_OK, mockImportFailures, mockHeaders);
+
+        createComponent({
+          mountFn: mount,
+          provide: {
+            failuresPath: mockImportFailuresPath,
+          },
+        });
+      });
+
+      it('renders loading icon', () => {
+        expect(findGlLoadingIcon().exists()).toBe(true);
+      });
+
+      it('does not render loading icon after fetch', async () => {
+        await waitForPromises();
+
+        expect(findGlLoadingIcon().exists()).toBe(false);
+      });
+
+      it('sets items and pagination info', async () => {
+        await waitForPromises();
+
+        expect(findGlTableRows().length).toBe(mockImportFailures.length);
+        expect(findPaginationBar().props('pageInfo')).toMatchObject({
+          page: mockHeaders['x-page'],
+          perPage: mockHeaders['x-per-page'],
+          total: mockHeaders['x-total'],
+          totalPages: mockHeaders['x-total-pages'],
+        });
+      });
+    });
+
+    describe('when request fails', () => {
+      beforeEach(() => {
+        mock.onGet(mockImportFailuresPath).reply(HTTP_STATUS_INTERNAL_SERVER_ERROR);
+
+        createComponent({
+          provide: {
+            failuresPath: mockImportFailuresPath,
+          },
+        });
+      });
+
+      it('displays an error', async () => {
+        await waitForPromises();
+
+        expect(createAlert).toHaveBeenCalledWith({
+          message: ImportDetailsTable.i18n.fetchErrorMessage,
+        });
+      });
+    });
+  });
 });
diff --git a/spec/frontend/import/details/mock_data.js b/spec/frontend/import/details/mock_data.js
index 514fb3a923d..a8e0e53ed2b 100644
--- a/spec/frontend/import/details/mock_data.js
+++ b/spec/frontend/import/details/mock_data.js
@@ -1,31 +1,53 @@
-export const mockProject = {
-  id: 26,
-  name: 'acl',
-  fullPath: '/root/acl',
-  fullName: 'Administrator / acl',
-  refsUrl: '/root/acl/refs',
-  importSource: 'namespace/acl',
-  importStatus: 'finished',
-  humanImportStatusName: 'finished',
-  providerLink: 'https://github.com/namespace/acl',
-  relationType: null,
-  stats: {
-    fetched: {
-      note: 1,
-      issue: 2,
-      label: 5,
-      collaborator: 2,
-      pullRequest: 1,
-      pullRequestMergedBy: 1,
+export const mockImportFailures = [
+  {
+    type: 'pull_request',
+    title: 'Add one cool feature',
+    url: 'https://github.com/USER/REPO/pull/2',
+    details: {
+      exception_class: 'ActiveRecord::RecordInvalid',
+      exception_message: 'Record invalid',
+      source: 'Gitlab::GithubImport::Importer::PullRequestImporter',
+      github_identifiers: {
+        iid: 2,
+        issuable_type: 'MergeRequest',
+        object_type: 'pull_request',
+      },
     },
-    imported: {
-      note: 1,
-      issue: 2,
-      label: 6,
-      collaborator: 3,
-      pullRequest: 1,
-      pullRequestMergedBy: 1,
-      pullRequestReviewRequest: 1,
+  },
+  {
+    type: 'pull_request',
+    title: 'Add another awesome feature',
+    url: 'https://github.com/USER/REPO/pull/3',
+    details: {
+      exception_class: 'ActiveRecord::RecordInvalid',
+      exception_message: 'Record invalid',
+      source: 'Gitlab::GithubImport::Importer::PullRequestImporter',
+      github_identifiers: {
+        iid: 3,
+        issuable_type: 'MergeRequest',
+        object_type: 'pull_request',
+      },
+    },
+  },
+  {
+    type: 'lfs_object',
+    title: '3a9257fae9e86faee27d7208cb55e086f18e6f29f48c430bfbc26d42eb',
+    url: null,
+    details: {
+      exception_class: 'NameError',
+      exception_message: 'some message',
+      source: 'Gitlab::GithubImport::Importer::LfsObjectImporter',
+      github_identifiers: {
+        oid: '3a9257fae9e86faee27d7208cb55e086f18e6f29f48c430bfbc26d42eb',
+        size: 2473979,
+      },
     },
   },
+];
+
+export const mockHeaders = {
+  'x-page': 1,
+  'x-per-page': 20,
+  'x-total': 3,
+  'x-total-pages': 1,
 };