187 lines
5.4 KiB
JavaScript
187 lines
5.4 KiB
JavaScript
import { GlTable, GlLink, GlPagination, GlAlert } from '@gitlab/ui';
|
|
import * as Sentry from '@sentry/browser';
|
|
import { shallowMount, mount } from '@vue/test-utils';
|
|
import MockAdapter from 'axios-mock-adapter';
|
|
import waitForPromises from 'helpers/wait_for_promises';
|
|
import { DEFAULT_PER_PAGE } from '~/api';
|
|
import IntegrationOverrides from '~/integrations/overrides/components/integration_overrides.vue';
|
|
import axios from '~/lib/utils/axios_utils';
|
|
import httpStatus from '~/lib/utils/http_status';
|
|
import ProjectAvatar from '~/vue_shared/components/project_avatar.vue';
|
|
import UrlSync from '~/vue_shared/components/url_sync.vue';
|
|
|
|
const mockOverrides = Array(DEFAULT_PER_PAGE * 3)
|
|
.fill(1)
|
|
.map((_, index) => ({
|
|
name: `test-proj-${index}`,
|
|
avatar_url: `avatar-${index}`,
|
|
full_path: `test-proj-${index}`,
|
|
full_name: `test-proj-${index}`,
|
|
}));
|
|
|
|
describe('IntegrationOverrides', () => {
|
|
let wrapper;
|
|
let mockAxios;
|
|
|
|
const defaultProps = {
|
|
overridesPath: 'mock/overrides',
|
|
};
|
|
|
|
const createComponent = ({ mountFn = shallowMount, stubs } = {}) => {
|
|
wrapper = mountFn(IntegrationOverrides, {
|
|
propsData: defaultProps,
|
|
stubs,
|
|
});
|
|
};
|
|
|
|
beforeEach(() => {
|
|
mockAxios = new MockAdapter(axios);
|
|
mockAxios.onGet(defaultProps.overridesPath).reply(httpStatus.OK, mockOverrides, {
|
|
'X-TOTAL': mockOverrides.length,
|
|
'X-PAGE': 1,
|
|
});
|
|
});
|
|
|
|
afterEach(() => {
|
|
mockAxios.restore();
|
|
wrapper.destroy();
|
|
});
|
|
|
|
const findGlTable = () => wrapper.findComponent(GlTable);
|
|
const findPagination = () => wrapper.findComponent(GlPagination);
|
|
const findRowsAsModel = () =>
|
|
findGlTable()
|
|
.findAllComponents(GlLink)
|
|
.wrappers.map((link) => {
|
|
const avatar = link.findComponent(ProjectAvatar);
|
|
|
|
return {
|
|
href: link.attributes('href'),
|
|
avatarUrl: avatar.props('projectAvatarUrl'),
|
|
avatarName: avatar.props('projectName'),
|
|
text: link.text(),
|
|
};
|
|
});
|
|
const findAlert = () => wrapper.findComponent(GlAlert);
|
|
|
|
describe('while loading', () => {
|
|
it('sets GlTable `busy` attribute to `true`', () => {
|
|
createComponent();
|
|
|
|
const table = findGlTable();
|
|
expect(table.exists()).toBe(true);
|
|
expect(table.attributes('busy')).toBe('true');
|
|
});
|
|
});
|
|
|
|
describe('when initial request is successful', () => {
|
|
it('sets GlTable `busy` attribute to `false`', async () => {
|
|
createComponent();
|
|
await waitForPromises();
|
|
|
|
const table = findGlTable();
|
|
expect(table.exists()).toBe(true);
|
|
expect(table.attributes('busy')).toBeFalsy();
|
|
});
|
|
|
|
describe('table template', () => {
|
|
beforeEach(async () => {
|
|
createComponent({ mountFn: mount });
|
|
await waitForPromises();
|
|
});
|
|
|
|
it('renders overrides as rows in table', () => {
|
|
expect(findRowsAsModel()).toEqual(
|
|
mockOverrides.map((x) => ({
|
|
href: x.full_path,
|
|
avatarUrl: x.avatar_url,
|
|
avatarName: x.name,
|
|
text: expect.stringContaining(x.full_name),
|
|
})),
|
|
);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('when request fails', () => {
|
|
beforeEach(async () => {
|
|
jest.spyOn(Sentry, 'captureException');
|
|
mockAxios.onGet(defaultProps.overridesPath).reply(httpStatus.INTERNAL_SERVER_ERROR);
|
|
|
|
createComponent();
|
|
await waitForPromises();
|
|
});
|
|
|
|
it('displays error alert', () => {
|
|
const alert = findAlert();
|
|
expect(alert.exists()).toBe(true);
|
|
expect(alert.text()).toBe(IntegrationOverrides.i18n.defaultErrorMessage);
|
|
});
|
|
|
|
it('hides overrides table', () => {
|
|
const table = findGlTable();
|
|
expect(table.exists()).toBe(false);
|
|
});
|
|
|
|
it('captures exception in Sentry', () => {
|
|
expect(Sentry.captureException).toHaveBeenCalledWith(expect.any(Error));
|
|
});
|
|
});
|
|
|
|
describe('pagination', () => {
|
|
describe('when total items does not exceed the page limit', () => {
|
|
it('does not render', async () => {
|
|
mockAxios.onGet(defaultProps.overridesPath).reply(httpStatus.OK, [mockOverrides[0]], {
|
|
'X-TOTAL': DEFAULT_PER_PAGE - 1,
|
|
'X-PAGE': 1,
|
|
});
|
|
|
|
createComponent();
|
|
|
|
// wait for initial load
|
|
await waitForPromises();
|
|
|
|
expect(findPagination().exists()).toBe(false);
|
|
});
|
|
});
|
|
|
|
describe('when total items exceeds the page limit', () => {
|
|
const mockPage = 2;
|
|
|
|
beforeEach(async () => {
|
|
createComponent({ stubs: { UrlSync } });
|
|
mockAxios.onGet(defaultProps.overridesPath).reply(httpStatus.OK, [mockOverrides[0]], {
|
|
'X-TOTAL': DEFAULT_PER_PAGE * 2,
|
|
'X-PAGE': mockPage,
|
|
});
|
|
|
|
// wait for initial load
|
|
await waitForPromises();
|
|
});
|
|
|
|
it('renders', () => {
|
|
expect(findPagination().exists()).toBe(true);
|
|
});
|
|
|
|
describe('when navigating to a page', () => {
|
|
beforeEach(async () => {
|
|
jest.spyOn(axios, 'get');
|
|
|
|
// trigger a page change
|
|
await findPagination().vm.$emit('input', mockPage);
|
|
});
|
|
|
|
it('performs GET request with correct params', () => {
|
|
expect(axios.get).toHaveBeenCalledWith(defaultProps.overridesPath, {
|
|
params: { page: mockPage, per_page: DEFAULT_PER_PAGE },
|
|
});
|
|
});
|
|
|
|
it('updates `page` URL parameter', () => {
|
|
expect(window.location.search).toBe(`?page=${mockPage}`);
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|