Add latest changes from gitlab-org/gitlab@master

1 files changed, 84 insertions, 4 deletions

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,
+        });
+      });
+    });
+  });
 });