debian-mirror-gitlab/spec/frontend/groups/components/app_spec.js

471 lines
16 KiB
JavaScript
Raw Normal View History

2019-12-04 20:38:33 +05:30
import '~/flash';
2021-01-29 00:20:46 +05:30
import { GlModal, GlLoadingIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
2021-03-11 19:13:27 +05:30
import AxiosMockAdapter from 'axios-mock-adapter';
import Vue from 'vue';
2020-05-24 23:13:21 +05:30
import waitForPromises from 'helpers/wait_for_promises';
2018-03-17 18:26:18 +05:30
import appComponent from '~/groups/components/app.vue';
import groupFolderComponent from '~/groups/components/group_folder.vue';
import groupItemComponent from '~/groups/components/group_item.vue';
import eventHub from '~/groups/event_hub';
import GroupsService from '~/groups/service/groups_service';
2021-03-11 19:13:27 +05:30
import GroupsStore from '~/groups/store/groups_store';
import axios from '~/lib/utils/axios_utils';
2020-05-24 23:13:21 +05:30
import * as urlUtilities from '~/lib/utils/url_utility';
2018-03-17 18:26:18 +05:30
import {
2018-11-20 20:47:30 +05:30
mockEndpoint,
mockGroups,
mockSearchedGroups,
mockRawPageInfo,
mockParentGroupItem,
mockRawChildren,
mockChildren,
mockPageInfo,
2018-03-17 18:26:18 +05:30
} from '../mock_data';
2021-01-29 00:20:46 +05:30
const $toast = {
show: jest.fn(),
2018-03-17 18:26:18 +05:30
};
describe('AppComponent', () => {
2021-01-29 00:20:46 +05:30
let wrapper;
2018-03-17 18:26:18 +05:30
let vm;
2020-05-24 23:13:21 +05:30
let mock;
let getGroupsSpy;
2018-03-17 18:26:18 +05:30
2021-02-22 17:27:13 +05:30
const store = new GroupsStore({ hideProjects: false });
2021-01-29 00:20:46 +05:30
const service = new GroupsService(mockEndpoint);
const createShallowComponent = (hideProjects = false) => {
store.state.pageInfo = mockPageInfo;
wrapper = shallowMount(appComponent, {
propsData: {
store,
service,
hideProjects,
},
mocks: {
$toast,
},
});
vm = wrapper.vm;
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
2020-05-24 23:13:21 +05:30
beforeEach(() => {
mock = new AxiosMockAdapter(axios);
mock.onGet('/dashboard/groups.json').reply(200, mockGroups);
2021-03-11 19:13:27 +05:30
Vue.component('GroupFolder', groupFolderComponent);
Vue.component('GroupItem', groupItemComponent);
2018-03-17 18:26:18 +05:30
2021-01-29 00:20:46 +05:30
createShallowComponent();
2020-05-24 23:13:21 +05:30
getGroupsSpy = jest.spyOn(vm.service, 'getGroups');
return vm.$nextTick();
2018-03-17 18:26:18 +05:30
});
describe('computed', () => {
describe('groups', () => {
it('should return list of groups from store', () => {
2020-05-24 23:13:21 +05:30
jest.spyOn(vm.store, 'getGroups').mockImplementation(() => {});
2018-03-17 18:26:18 +05:30
2018-11-08 19:23:39 +05:30
const { groups } = vm;
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(vm.store.getGroups).toHaveBeenCalled();
expect(groups).not.toBeDefined();
});
});
describe('pageInfo', () => {
it('should return pagination info from store', () => {
2020-05-24 23:13:21 +05:30
jest.spyOn(vm.store, 'getPaginationInfo').mockImplementation(() => {});
2018-03-17 18:26:18 +05:30
2018-11-08 19:23:39 +05:30
const { pageInfo } = vm;
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(vm.store.getPaginationInfo).toHaveBeenCalled();
expect(pageInfo).not.toBeDefined();
});
});
});
describe('methods', () => {
describe('fetchGroups', () => {
2020-05-24 23:13:21 +05:30
it('should call `getGroups` with all the params provided', () => {
return vm
.fetchGroups({
parentId: 1,
page: 2,
filterGroupsBy: 'git',
sortBy: 'created_desc',
archived: true,
})
.then(() => {
expect(getGroupsSpy).toHaveBeenCalledWith(1, 2, 'git', 'created_desc', true);
});
});
it('should set headers to store for building pagination info when called with `updatePagination`', () => {
mock.onGet('/dashboard/groups.json').reply(200, { headers: mockRawPageInfo });
jest.spyOn(vm, 'updatePagination').mockImplementation(() => {});
return vm.fetchGroups({ updatePagination: true }).then(() => {
expect(getGroupsSpy).toHaveBeenCalled();
expect(vm.updatePagination).toHaveBeenCalled();
2018-03-17 18:26:18 +05:30
});
});
2020-05-24 23:13:21 +05:30
it('should show flash error when request fails', () => {
mock.onGet('/dashboard/groups.json').reply(400);
2018-03-17 18:26:18 +05:30
2021-03-08 18:12:59 +05:30
jest.spyOn(window, 'scrollTo').mockImplementation(() => {});
2020-05-24 23:13:21 +05:30
jest.spyOn(window, 'Flash').mockImplementation(() => {});
2018-03-17 18:26:18 +05:30
2020-05-24 23:13:21 +05:30
return vm.fetchGroups({}).then(() => {
2018-03-17 18:26:18 +05:30
expect(vm.isLoading).toBe(false);
2021-03-08 18:12:59 +05:30
expect(window.scrollTo).toHaveBeenCalledWith({ behavior: 'smooth', top: 0 });
2018-03-17 18:26:18 +05:30
expect(window.Flash).toHaveBeenCalledWith('An error occurred. Please try again.');
2020-05-24 23:13:21 +05:30
});
2018-03-17 18:26:18 +05:30
});
});
describe('fetchAllGroups', () => {
2020-05-24 23:13:21 +05:30
beforeEach(() => {
jest.spyOn(vm, 'fetchGroups');
jest.spyOn(vm, 'updateGroups');
});
2018-03-17 18:26:18 +05:30
2020-05-24 23:13:21 +05:30
it('should fetch default set of groups', () => {
jest.spyOn(vm, 'updatePagination');
const fetchPromise = vm.fetchAllGroups();
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(vm.isLoading).toBe(true);
2020-05-24 23:13:21 +05:30
return fetchPromise.then(() => {
2018-03-17 18:26:18 +05:30
expect(vm.isLoading).toBe(false);
expect(vm.updateGroups).toHaveBeenCalled();
2020-05-24 23:13:21 +05:30
});
2018-03-17 18:26:18 +05:30
});
2020-05-24 23:13:21 +05:30
it('should fetch matching set of groups when app is loaded with search query', () => {
mock.onGet('/dashboard/groups.json').reply(200, mockSearchedGroups);
2018-03-17 18:26:18 +05:30
2020-05-24 23:13:21 +05:30
const fetchPromise = vm.fetchAllGroups();
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(vm.fetchGroups).toHaveBeenCalledWith({
page: null,
filterGroupsBy: null,
sortBy: null,
updatePagination: true,
archived: null,
});
2020-05-24 23:13:21 +05:30
return fetchPromise.then(() => {
2018-03-17 18:26:18 +05:30
expect(vm.updateGroups).toHaveBeenCalled();
2020-05-24 23:13:21 +05:30
});
2018-03-17 18:26:18 +05:30
});
});
describe('fetchPage', () => {
2020-05-24 23:13:21 +05:30
beforeEach(() => {
jest.spyOn(vm, 'fetchGroups');
jest.spyOn(vm, 'updateGroups');
});
2018-03-17 18:26:18 +05:30
2020-05-24 23:13:21 +05:30
it('should fetch groups for provided page details and update window state', () => {
jest.spyOn(urlUtilities, 'mergeUrlParams');
jest.spyOn(window.history, 'replaceState').mockImplementation(() => {});
2021-03-08 18:12:59 +05:30
jest.spyOn(window, 'scrollTo').mockImplementation(() => {});
2020-05-24 23:13:21 +05:30
const fetchPagePromise = vm.fetchPage(2, null, null, true);
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(vm.isLoading).toBe(true);
expect(vm.fetchGroups).toHaveBeenCalledWith({
page: 2,
filterGroupsBy: null,
sortBy: null,
updatePagination: true,
archived: true,
});
2020-05-24 23:13:21 +05:30
return fetchPagePromise.then(() => {
2018-03-17 18:26:18 +05:30
expect(vm.isLoading).toBe(false);
2021-03-08 18:12:59 +05:30
expect(window.scrollTo).toHaveBeenCalledWith({ behavior: 'smooth', top: 0 });
2020-05-24 23:13:21 +05:30
expect(urlUtilities.mergeUrlParams).toHaveBeenCalledWith({ page: 2 }, expect.any(String));
2018-11-20 20:47:30 +05:30
expect(window.history.replaceState).toHaveBeenCalledWith(
{
2020-05-24 23:13:21 +05:30
page: expect.any(String),
2018-11-20 20:47:30 +05:30
},
2020-05-24 23:13:21 +05:30
expect.any(String),
expect.any(String),
2018-11-20 20:47:30 +05:30
);
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(vm.updateGroups).toHaveBeenCalled();
2020-05-24 23:13:21 +05:30
});
2018-03-17 18:26:18 +05:30
});
});
describe('toggleChildren', () => {
let groupItem;
beforeEach(() => {
2020-05-24 23:13:21 +05:30
groupItem = { ...mockParentGroupItem };
2018-03-17 18:26:18 +05:30
groupItem.isOpen = false;
groupItem.isChildrenLoading = false;
});
2020-05-24 23:13:21 +05:30
it('should fetch children of given group and expand it if group is collapsed and children are not loaded', () => {
mock.onGet('/dashboard/groups.json').reply(200, mockRawChildren);
jest.spyOn(vm, 'fetchGroups');
jest.spyOn(vm.store, 'setGroupChildren').mockImplementation(() => {});
2018-03-17 18:26:18 +05:30
vm.toggleChildren(groupItem);
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(groupItem.isChildrenLoading).toBe(true);
expect(vm.fetchGroups).toHaveBeenCalledWith({
parentId: groupItem.id,
});
2020-05-24 23:13:21 +05:30
return waitForPromises().then(() => {
2018-03-17 18:26:18 +05:30
expect(vm.store.setGroupChildren).toHaveBeenCalled();
2020-05-24 23:13:21 +05:30
});
2018-03-17 18:26:18 +05:30
});
it('should skip network request while expanding group if children are already loaded', () => {
2020-05-24 23:13:21 +05:30
jest.spyOn(vm, 'fetchGroups');
2018-03-17 18:26:18 +05:30
groupItem.children = mockRawChildren;
vm.toggleChildren(groupItem);
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(vm.fetchGroups).not.toHaveBeenCalled();
expect(groupItem.isOpen).toBe(true);
});
it('should collapse group if it is already expanded', () => {
2020-05-24 23:13:21 +05:30
jest.spyOn(vm, 'fetchGroups');
2018-03-17 18:26:18 +05:30
groupItem.isOpen = true;
vm.toggleChildren(groupItem);
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(vm.fetchGroups).not.toHaveBeenCalled();
expect(groupItem.isOpen).toBe(false);
});
2020-05-24 23:13:21 +05:30
it('should set `isChildrenLoading` back to `false` if load request fails', () => {
mock.onGet('/dashboard/groups.json').reply(400);
2018-03-17 18:26:18 +05:30
vm.toggleChildren(groupItem);
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(groupItem.isChildrenLoading).toBe(true);
2020-05-24 23:13:21 +05:30
return waitForPromises().then(() => {
2018-03-17 18:26:18 +05:30
expect(groupItem.isChildrenLoading).toBe(false);
2020-05-24 23:13:21 +05:30
});
2018-03-17 18:26:18 +05:30
});
});
describe('showLeaveGroupModal', () => {
it('caches candidate group (as props) which is to be left', () => {
2020-05-24 23:13:21 +05:30
const group = { ...mockParentGroupItem };
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(vm.targetGroup).toBe(null);
expect(vm.targetParentGroup).toBe(null);
vm.showLeaveGroupModal(group, mockParentGroupItem);
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(vm.targetGroup).not.toBe(null);
expect(vm.targetParentGroup).not.toBe(null);
});
it('updates props which show modal confirmation dialog', () => {
2020-05-24 23:13:21 +05:30
const group = { ...mockParentGroupItem };
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(vm.groupLeaveConfirmationMessage).toBe('');
vm.showLeaveGroupModal(group, mockParentGroupItem);
2018-12-13 13:39:08 +05:30
2018-11-20 20:47:30 +05:30
expect(vm.groupLeaveConfirmationMessage).toBe(
`Are you sure you want to leave the "${group.fullName}" group?`,
);
2018-03-17 18:26:18 +05:30
});
});
describe('leaveGroup', () => {
let groupItem;
let childGroupItem;
beforeEach(() => {
2020-05-24 23:13:21 +05:30
groupItem = { ...mockParentGroupItem };
2018-03-17 18:26:18 +05:30
groupItem.children = mockChildren;
2018-11-08 19:23:39 +05:30
[childGroupItem] = groupItem.children;
2018-03-17 18:26:18 +05:30
groupItem.isChildrenLoading = false;
vm.targetGroup = childGroupItem;
vm.targetParentGroup = groupItem;
});
2020-05-24 23:13:21 +05:30
it('hides modal confirmation leave group and remove group item from tree', () => {
2018-03-17 18:26:18 +05:30
const notice = `You left the "${childGroupItem.fullName}" group.`;
2020-05-24 23:13:21 +05:30
jest.spyOn(vm.service, 'leaveGroup').mockResolvedValue({ data: { notice } });
jest.spyOn(vm.store, 'removeGroup');
2021-03-08 18:12:59 +05:30
jest.spyOn(window, 'scrollTo').mockImplementation(() => {});
2018-03-17 18:26:18 +05:30
vm.leaveGroup();
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(vm.targetGroup.isBeingRemoved).toBe(true);
expect(vm.service.leaveGroup).toHaveBeenCalledWith(vm.targetGroup.leavePath);
2020-05-24 23:13:21 +05:30
return waitForPromises().then(() => {
2021-03-08 18:12:59 +05:30
expect(window.scrollTo).toHaveBeenCalledWith({ behavior: 'smooth', top: 0 });
2018-03-17 18:26:18 +05:30
expect(vm.store.removeGroup).toHaveBeenCalledWith(vm.targetGroup, vm.targetParentGroup);
2021-01-29 00:20:46 +05:30
expect($toast.show).toHaveBeenCalledWith(notice);
2020-05-24 23:13:21 +05:30
});
2018-03-17 18:26:18 +05:30
});
2020-05-24 23:13:21 +05:30
it('should show error flash message if request failed to leave group', () => {
2018-03-17 18:26:18 +05:30
const message = 'An error occurred. Please try again.';
2020-05-24 23:13:21 +05:30
jest.spyOn(vm.service, 'leaveGroup').mockRejectedValue({ status: 500 });
jest.spyOn(vm.store, 'removeGroup');
jest.spyOn(window, 'Flash').mockImplementation(() => {});
2018-03-17 18:26:18 +05:30
vm.leaveGroup();
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(vm.targetGroup.isBeingRemoved).toBe(true);
expect(vm.service.leaveGroup).toHaveBeenCalledWith(childGroupItem.leavePath);
2020-05-24 23:13:21 +05:30
return waitForPromises().then(() => {
2018-03-17 18:26:18 +05:30
expect(vm.store.removeGroup).not.toHaveBeenCalled();
expect(window.Flash).toHaveBeenCalledWith(message);
expect(vm.targetGroup.isBeingRemoved).toBe(false);
2020-05-24 23:13:21 +05:30
});
2018-03-17 18:26:18 +05:30
});
2020-05-24 23:13:21 +05:30
it('should show appropriate error flash message if request forbids to leave group', () => {
2018-03-17 18:26:18 +05:30
const message = 'Failed to leave the group. Please make sure you are not the only owner.';
2020-05-24 23:13:21 +05:30
jest.spyOn(vm.service, 'leaveGroup').mockRejectedValue({ status: 403 });
jest.spyOn(vm.store, 'removeGroup');
jest.spyOn(window, 'Flash').mockImplementation(() => {});
2018-03-17 18:26:18 +05:30
vm.leaveGroup(childGroupItem, groupItem);
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(vm.targetGroup.isBeingRemoved).toBe(true);
expect(vm.service.leaveGroup).toHaveBeenCalledWith(childGroupItem.leavePath);
2020-05-24 23:13:21 +05:30
return waitForPromises().then(() => {
2018-03-17 18:26:18 +05:30
expect(vm.store.removeGroup).not.toHaveBeenCalled();
expect(window.Flash).toHaveBeenCalledWith(message);
expect(vm.targetGroup.isBeingRemoved).toBe(false);
2020-05-24 23:13:21 +05:30
});
2018-03-17 18:26:18 +05:30
});
});
describe('updatePagination', () => {
it('should set pagination info to store from provided headers', () => {
2020-05-24 23:13:21 +05:30
jest.spyOn(vm.store, 'setPaginationInfo').mockImplementation(() => {});
2018-03-17 18:26:18 +05:30
vm.updatePagination(mockRawPageInfo);
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(vm.store.setPaginationInfo).toHaveBeenCalledWith(mockRawPageInfo);
});
});
describe('updateGroups', () => {
it('should call setGroups on store if method was called directly', () => {
2020-05-24 23:13:21 +05:30
jest.spyOn(vm.store, 'setGroups').mockImplementation(() => {});
2018-03-17 18:26:18 +05:30
vm.updateGroups(mockGroups);
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(vm.store.setGroups).toHaveBeenCalledWith(mockGroups);
});
it('should call setSearchedGroups on store if method was called with fromSearch param', () => {
2020-05-24 23:13:21 +05:30
jest.spyOn(vm.store, 'setSearchedGroups').mockImplementation(() => {});
2018-03-17 18:26:18 +05:30
vm.updateGroups(mockGroups, true);
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(vm.store.setSearchedGroups).toHaveBeenCalledWith(mockGroups);
});
it('should set `isSearchEmpty` prop based on groups count', () => {
vm.updateGroups(mockGroups);
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(vm.isSearchEmpty).toBe(false);
vm.updateGroups([]);
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(vm.isSearchEmpty).toBe(true);
});
});
});
describe('created', () => {
2020-05-24 23:13:21 +05:30
it('should bind event listeners on eventHub', () => {
jest.spyOn(eventHub, '$on').mockImplementation(() => {});
2018-03-17 18:26:18 +05:30
2021-01-29 00:20:46 +05:30
createShallowComponent();
2018-03-17 18:26:18 +05:30
2020-05-24 23:13:21 +05:30
return vm.$nextTick().then(() => {
expect(eventHub.$on).toHaveBeenCalledWith('fetchPage', expect.any(Function));
expect(eventHub.$on).toHaveBeenCalledWith('toggleChildren', expect.any(Function));
expect(eventHub.$on).toHaveBeenCalledWith('showLeaveGroupModal', expect.any(Function));
expect(eventHub.$on).toHaveBeenCalledWith('updatePagination', expect.any(Function));
expect(eventHub.$on).toHaveBeenCalledWith('updateGroups', expect.any(Function));
2018-03-17 18:26:18 +05:30
});
});
2020-05-24 23:13:21 +05:30
it('should initialize `searchEmptyMessage` prop with correct string when `hideProjects` is `false`', () => {
2021-01-29 00:20:46 +05:30
createShallowComponent();
2020-05-24 23:13:21 +05:30
return vm.$nextTick().then(() => {
2021-01-29 00:20:46 +05:30
expect(vm.searchEmptyMessage).toBe('No groups or projects matched your search');
2018-03-17 18:26:18 +05:30
});
});
2020-05-24 23:13:21 +05:30
it('should initialize `searchEmptyMessage` prop with correct string when `hideProjects` is `true`', () => {
2021-01-29 00:20:46 +05:30
createShallowComponent(true);
2020-05-24 23:13:21 +05:30
return vm.$nextTick().then(() => {
2021-01-29 00:20:46 +05:30
expect(vm.searchEmptyMessage).toBe('No groups matched your search');
2018-03-17 18:26:18 +05:30
});
});
});
describe('beforeDestroy', () => {
2020-05-24 23:13:21 +05:30
it('should unbind event listeners on eventHub', () => {
jest.spyOn(eventHub, '$off').mockImplementation(() => {});
2018-03-17 18:26:18 +05:30
2021-01-29 00:20:46 +05:30
createShallowComponent();
wrapper.destroy();
2018-03-17 18:26:18 +05:30
2020-05-24 23:13:21 +05:30
return vm.$nextTick().then(() => {
expect(eventHub.$off).toHaveBeenCalledWith('fetchPage', expect.any(Function));
expect(eventHub.$off).toHaveBeenCalledWith('toggleChildren', expect.any(Function));
expect(eventHub.$off).toHaveBeenCalledWith('showLeaveGroupModal', expect.any(Function));
expect(eventHub.$off).toHaveBeenCalledWith('updatePagination', expect.any(Function));
expect(eventHub.$off).toHaveBeenCalledWith('updateGroups', expect.any(Function));
2018-03-17 18:26:18 +05:30
});
});
});
describe('template', () => {
2020-05-24 23:13:21 +05:30
it('should render loading icon', () => {
2018-03-17 18:26:18 +05:30
vm.isLoading = true;
2020-05-24 23:13:21 +05:30
return vm.$nextTick().then(() => {
2021-01-29 00:20:46 +05:30
expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
2018-03-17 18:26:18 +05:30
});
});
2020-05-24 23:13:21 +05:30
it('should render groups tree', () => {
2018-03-17 18:26:18 +05:30
vm.store.state.groups = [mockParentGroupItem];
vm.isLoading = false;
2020-05-24 23:13:21 +05:30
return vm.$nextTick().then(() => {
2018-03-17 18:26:18 +05:30
expect(vm.$el.querySelector('.groups-list-tree-container')).toBeDefined();
});
});
2020-05-24 23:13:21 +05:30
it('renders modal confirmation dialog', () => {
2021-01-29 00:20:46 +05:30
createShallowComponent();
2018-12-13 13:39:08 +05:30
2021-01-29 00:20:46 +05:30
const findGlModal = wrapper.find(GlModal);
expect(findGlModal.exists()).toBe(true);
expect(findGlModal.attributes('title')).toBe('Are you sure?');
expect(findGlModal.props('actionPrimary').text).toBe('Leave group');
2018-03-17 18:26:18 +05:30
});
});
});