1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
import { mount, shallowMount } from '@vue/test-utils';
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, 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);
describe('template', () => {
describe('when no items are available', () => {
it('renders table with empty state', () => {
createComponent({ mountFn: mount });
expect(findGlEmptyState().text()).toBe(ImportDetailsTable.i18n.emptyText);
});
it('does not render pagination', () => {
createComponent();
expect(findPaginationBar().exists()).toBe(false);
});
});
});
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,
});
});
});
});
});
|
