debian-mirror-gitlab/spec/frontend/groups_projects/components/transfer_locations_spec.js
2023-01-12 18:35:48 +00:00

377 lines
11 KiB
JavaScript

import {
GlDropdown,
GlDropdownItem,
GlAlert,
GlSearchBoxByType,
GlIntersectionObserver,
GlLoadingIcon,
} from '@gitlab/ui';
import Vue, { nextTick } from 'vue';
import VueApollo from 'vue-apollo';
import currentUserNamespaceQueryResponse from 'test_fixtures/graphql/projects/settings/current_user_namespace.query.graphql.json';
import transferLocationsResponsePage1 from 'test_fixtures/api/projects/transfer_locations_page_1.json';
import transferLocationsResponsePage2 from 'test_fixtures/api/projects/transfer_locations_page_2.json';
import { mountExtended } from 'helpers/vue_test_utils_helper';
import waitForPromises from 'helpers/wait_for_promises';
import createMockApollo from 'helpers/mock_apollo_helper';
import { __ } from '~/locale';
import TransferLocations from '~/groups_projects/components/transfer_locations.vue';
import { getTransferLocations } from '~/api/projects_api';
import currentUserNamespaceQuery from '~/projects/settings/graphql/queries/current_user_namespace.query.graphql';
jest.mock('~/api/projects_api', () => ({
getTransferLocations: jest.fn(),
}));
describe('TransferLocations', () => {
let wrapper;
// Default data
const resourceId = '1';
const defaultPropsData = {
groupTransferLocationsApiMethod: getTransferLocations,
value: null,
};
const additionalDropdownItem = {
id: -1,
humanName: __('No parent group'),
};
// Mock requests
const defaultQueryHandler = jest.fn().mockResolvedValue(currentUserNamespaceQueryResponse);
const mockResolvedGetTransferLocations = ({
data = transferLocationsResponsePage1,
page = '1',
nextPage = '2',
total = '4',
totalPages = '2',
prevPage = null,
} = {}) => {
getTransferLocations.mockResolvedValueOnce({
data,
headers: {
'x-per-page': '2',
'x-page': page,
'x-total': total,
'x-total-pages': totalPages,
'x-next-page': nextPage,
'x-prev-page': prevPage,
},
});
};
const mockRejectedGetTransferLocations = () => {
const error = new Error();
getTransferLocations.mockRejectedValueOnce(error);
};
// VTU wrapper helpers
Vue.use(VueApollo);
const createComponent = ({
propsData = {},
requestHandlers = [[currentUserNamespaceQuery, defaultQueryHandler]],
} = {}) => {
wrapper = mountExtended(TransferLocations, {
provide: {
resourceId,
},
propsData: {
...defaultPropsData,
...propsData,
},
apolloProvider: createMockApollo(requestHandlers),
});
};
const findDropdown = () => wrapper.findComponent(GlDropdown);
const showDropdown = async () => {
findDropdown().vm.$emit('show');
await waitForPromises();
};
const findUserTransferLocations = () =>
wrapper
.findByTestId('user-transfer-locations')
.findAllComponents(GlDropdownItem)
.wrappers.map((dropdownItem) => dropdownItem.text());
const findGroupTransferLocations = () =>
wrapper
.findByTestId('group-transfer-locations')
.findAllComponents(GlDropdownItem)
.wrappers.map((dropdownItem) => dropdownItem.text());
const findDropdownItemByText = (text) =>
wrapper
.findAllComponents(GlDropdownItem)
.wrappers.find((dropdownItem) => dropdownItem.text() === text);
const findAlert = () => wrapper.findComponent(GlAlert);
const findSearch = () => wrapper.findComponent(GlSearchBoxByType);
const searchEmitInput = (searchTerm = 'foo') => findSearch().vm.$emit('input', searchTerm);
const findIntersectionObserver = () => wrapper.findComponent(GlIntersectionObserver);
const intersectionObserverEmitAppear = () => findIntersectionObserver().vm.$emit('appear');
const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
afterEach(() => {
wrapper.destroy();
});
describe('when `GlDropdown` is opened', () => {
it('shows loading icon', async () => {
getTransferLocations.mockReturnValueOnce(new Promise(() => {}));
createComponent();
findDropdown().vm.$emit('show');
await nextTick();
expect(findLoadingIcon().exists()).toBe(true);
});
it('fetches and renders user and group transfer locations', async () => {
mockResolvedGetTransferLocations();
createComponent();
await showDropdown();
const { namespace } = currentUserNamespaceQueryResponse.data.currentUser;
expect(findUserTransferLocations()).toEqual([namespace.fullName]);
expect(findGroupTransferLocations()).toEqual(
transferLocationsResponsePage1.map((transferLocation) => transferLocation.full_name),
);
});
describe('when `showUserTransferLocations` prop is `false`', () => {
it('does not fetch user transfer locations', async () => {
mockResolvedGetTransferLocations();
createComponent({
propsData: {
showUserTransferLocations: false,
},
});
await showDropdown();
expect(wrapper.findByTestId('user-transfer-locations').exists()).toBe(false);
});
});
describe('when `additionalDropdownItems` prop is passed', () => {
it('displays additional dropdown items', async () => {
mockResolvedGetTransferLocations();
createComponent({
propsData: {
additionalDropdownItems: [additionalDropdownItem],
},
});
await showDropdown();
expect(findDropdownItemByText(additionalDropdownItem.humanName).exists()).toBe(true);
});
describe('when loading', () => {
it('does not display additional dropdown items', async () => {
getTransferLocations.mockReturnValueOnce(new Promise(() => {}));
createComponent({
propsData: {
additionalDropdownItems: [additionalDropdownItem],
},
});
findDropdown().vm.$emit('show');
await nextTick();
expect(findDropdownItemByText(additionalDropdownItem.humanName)).toBeUndefined();
});
});
});
describe('when transfer locations have already been fetched', () => {
beforeEach(async () => {
mockResolvedGetTransferLocations();
createComponent();
await showDropdown();
});
it('does not fetch transfer locations', async () => {
getTransferLocations.mockClear();
defaultQueryHandler.mockClear();
await showDropdown();
expect(getTransferLocations).not.toHaveBeenCalled();
expect(defaultQueryHandler).not.toHaveBeenCalled();
});
});
describe('when `getTransferLocations` API call fails', () => {
it('displays dismissible error alert', async () => {
mockRejectedGetTransferLocations();
createComponent();
await showDropdown();
const alert = findAlert();
expect(alert.exists()).toBe(true);
alert.vm.$emit('dismiss');
await nextTick();
expect(alert.exists()).toBe(false);
});
});
describe('when `currentUser` GraphQL query fails', () => {
it('displays error alert', async () => {
mockResolvedGetTransferLocations();
const error = new Error();
createComponent({
requestHandlers: [[currentUserNamespaceQuery, jest.fn().mockRejectedValueOnce(error)]],
});
await showDropdown();
expect(findAlert().exists()).toBe(true);
});
});
});
describe('when transfer location is selected', () => {
it('displays transfer location as selected', () => {
const [{ id, full_name: humanName }] = transferLocationsResponsePage1;
createComponent({
propsData: {
value: {
id,
humanName,
},
},
});
expect(findDropdown().props('text')).toBe(humanName);
});
});
describe('when search is typed in', () => {
const transferLocationsResponseSearch = [transferLocationsResponsePage1[0]];
const arrange = async ({ propsData, searchTerm } = {}) => {
mockResolvedGetTransferLocations();
createComponent({ propsData });
await showDropdown();
mockResolvedGetTransferLocations({ data: transferLocationsResponseSearch });
searchEmitInput(searchTerm);
await nextTick();
};
it('sets `isSearchLoading` prop to `true`', async () => {
await arrange();
expect(findSearch().props('isLoading')).toBe(true);
});
it('passes `search` param to API call and updates group transfer locations', async () => {
await arrange();
await waitForPromises();
expect(getTransferLocations).toHaveBeenCalledWith(
resourceId,
expect.objectContaining({ search: 'foo' }),
);
expect(findGroupTransferLocations()).toEqual(
transferLocationsResponseSearch.map((transferLocation) => transferLocation.full_name),
);
});
it('does not display additional dropdown items if they do not match the search', async () => {
await arrange({
propsData: {
additionalDropdownItems: [additionalDropdownItem],
},
});
await waitForPromises();
expect(findDropdownItemByText(additionalDropdownItem.humanName)).toBeUndefined();
});
it('displays additional dropdown items if they match the search', async () => {
await arrange({
propsData: {
additionalDropdownItems: [additionalDropdownItem],
},
searchTerm: 'No par',
});
await waitForPromises();
expect(findDropdownItemByText(additionalDropdownItem.humanName).exists()).toBe(true);
});
});
describe('when there are no more pages', () => {
it('does not show intersection observer', async () => {
mockResolvedGetTransferLocations({
data: transferLocationsResponsePage1,
nextPage: null,
total: '2',
totalPages: '1',
prevPage: null,
});
createComponent();
await showDropdown();
expect(findIntersectionObserver().exists()).toBe(false);
});
});
describe('when intersection observer appears', () => {
const arrange = async () => {
mockResolvedGetTransferLocations();
createComponent();
await showDropdown();
mockResolvedGetTransferLocations({
data: transferLocationsResponsePage2,
page: '2',
nextPage: null,
prevPage: '1',
totalPages: '2',
});
intersectionObserverEmitAppear();
await nextTick();
};
it('shows loading icon', async () => {
await arrange();
expect(findLoadingIcon().exists()).toBe(true);
});
it('passes `page` param to API call', async () => {
await arrange();
await waitForPromises();
expect(getTransferLocations).toHaveBeenCalledWith(
resourceId,
expect.objectContaining({ page: 2 }),
);
});
it('updates dropdown with new group transfer locations', async () => {
await arrange();
await waitForPromises();
expect(findGroupTransferLocations()).toEqual(
[...transferLocationsResponsePage1, ...transferLocationsResponsePage2].map(
({ full_name: fullName }) => fullName,
),
);
});
});
describe('when `label` prop is passed', () => {
it('renders label', () => {
const label = 'Foo bar';
createComponent({ propsData: { label } });
expect(wrapper.findByRole('group', { name: label }).exists()).toBe(true);
});
});
});