summaryrefslogtreecommitdiff
path: root/spec/frontend/boards/components/board_assignee_dropdown_spec.js
diff options
context:
space:
mode:
Diffstat (limited to 'spec/frontend/boards/components/board_assignee_dropdown_spec.js')
-rw-r--r--spec/frontend/boards/components/board_assignee_dropdown_spec.js380
1 files changed, 0 insertions, 380 deletions
diff --git a/spec/frontend/boards/components/board_assignee_dropdown_spec.js b/spec/frontend/boards/components/board_assignee_dropdown_spec.js
deleted file mode 100644
index e52c14f9783..00000000000
--- a/spec/frontend/boards/components/board_assignee_dropdown_spec.js
+++ /dev/null
@@ -1,380 +0,0 @@
-import { mount, createLocalVue } from '@vue/test-utils';
-import {
- GlDropdownItem,
- GlAvatarLink,
- GlAvatarLabeled,
- GlSearchBoxByType,
- GlLoadingIcon,
-} from '@gitlab/ui';
-import createMockApollo from 'helpers/mock_apollo_helper';
-import VueApollo from 'vue-apollo';
-import BoardAssigneeDropdown from '~/boards/components/board_assignee_dropdown.vue';
-import IssuableAssignees from '~/sidebar/components/assignees/issuable_assignees.vue';
-import MultiSelectDropdown from '~/vue_shared/components/sidebar/multiselect_dropdown.vue';
-import BoardEditableItem from '~/boards/components/sidebar/board_editable_item.vue';
-import store from '~/boards/stores';
-import getIssueParticipants from '~/vue_shared/components/sidebar/queries/getIssueParticipants.query.graphql';
-import searchUsers from '~/boards/graphql/users_search.query.graphql';
-import { participants } from '../mock_data';
-
-const localVue = createLocalVue();
-
-localVue.use(VueApollo);
-
-describe('BoardCardAssigneeDropdown', () => {
- let wrapper;
- let fakeApollo;
- let getIssueParticipantsSpy;
- let getSearchUsersSpy;
- let dispatchSpy;
-
- const iid = '111';
- const activeIssueName = 'test';
- const anotherIssueName = 'hello';
-
- const createComponent = (search = '', loading = false) => {
- wrapper = mount(BoardAssigneeDropdown, {
- data() {
- return {
- search,
- selected: [],
- participants,
- };
- },
- store,
- provide: {
- canUpdate: true,
- rootPath: '',
- },
- mocks: {
- $apollo: {
- queries: {
- participants: {
- loading,
- },
- },
- },
- },
- });
- };
-
- const createComponentWithApollo = (search = '') => {
- fakeApollo = createMockApollo([
- [getIssueParticipants, getIssueParticipantsSpy],
- [searchUsers, getSearchUsersSpy],
- ]);
- wrapper = mount(BoardAssigneeDropdown, {
- localVue,
- apolloProvider: fakeApollo,
- data() {
- return {
- search,
- selected: [],
- participants,
- };
- },
- store,
- provide: {
- canUpdate: true,
- rootPath: '',
- },
- });
- };
-
- const unassign = async () => {
- wrapper.find('[data-testid="unassign"]').trigger('click');
-
- await wrapper.vm.$nextTick();
- };
-
- const openDropdown = async () => {
- wrapper.find('[data-testid="edit-button"]').trigger('click');
-
- await wrapper.vm.$nextTick();
- };
-
- const findByText = (text) => {
- return wrapper.findAll(GlDropdownItem).wrappers.find((node) => node.text().indexOf(text) === 0);
- };
-
- const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
-
- beforeEach(() => {
- store.state.activeId = '1';
- store.state.issues = {
- 1: {
- iid,
- assignees: [{ username: activeIssueName, name: activeIssueName, id: activeIssueName }],
- },
- };
-
- dispatchSpy = jest.spyOn(store, 'dispatch').mockResolvedValue();
- });
-
- afterEach(() => {
- window.gon = {};
- jest.restoreAllMocks();
- });
-
- afterEach(() => {
- wrapper.destroy();
- wrapper = null;
- });
-
- describe('when mounted', () => {
- beforeEach(() => {
- createComponent();
- });
-
- it.each`
- text
- ${anotherIssueName}
- ${activeIssueName}
- `('finds item with $text', ({ text }) => {
- const item = findByText(text);
-
- expect(item.exists()).toBe(true);
- });
-
- it('renders gl-avatar-link in gl-dropdown-item', () => {
- const item = findByText('hello');
-
- expect(item.find(GlAvatarLink).exists()).toBe(true);
- });
-
- it('renders gl-avatar-labeled in gl-avatar-link', () => {
- const item = findByText('hello');
-
- expect(item.find(GlAvatarLink).find(GlAvatarLabeled).exists()).toBe(true);
- });
- });
-
- describe('when selected users are present', () => {
- it('renders a divider', () => {
- createComponent();
-
- expect(wrapper.find('[data-testid="selected-user-divider"]').exists()).toBe(true);
- });
- });
-
- describe('when collapsed', () => {
- it('renders IssuableAssignees', () => {
- createComponent();
-
- expect(wrapper.find(IssuableAssignees).isVisible()).toBe(true);
- expect(wrapper.find(MultiSelectDropdown).isVisible()).toBe(false);
- });
- });
-
- describe('when dropdown is open', () => {
- beforeEach(async () => {
- createComponent();
-
- await openDropdown();
- });
-
- it('shows assignees dropdown', async () => {
- expect(wrapper.find(IssuableAssignees).isVisible()).toBe(false);
- expect(wrapper.find(MultiSelectDropdown).isVisible()).toBe(true);
- });
-
- it('shows the issue returned as the activeIssue', async () => {
- expect(findByText(activeIssueName).props('isChecked')).toBe(true);
- });
-
- describe('when "Unassign" is clicked', () => {
- it('unassigns assignees', async () => {
- await unassign();
-
- expect(findByText('Unassign').props('isChecked')).toBe(true);
- });
- });
-
- describe('when an unselected item is clicked', () => {
- beforeEach(async () => {
- await unassign();
- });
-
- it('assigns assignee in the dropdown', async () => {
- wrapper.find('[data-testid="item_test"]').trigger('click');
-
- await wrapper.vm.$nextTick();
-
- expect(findByText(activeIssueName).props('isChecked')).toBe(true);
- });
-
- it('calls setAssignees with username list', async () => {
- wrapper.find('[data-testid="item_test"]').trigger('click');
-
- await wrapper.vm.$nextTick();
-
- document.body.click();
-
- await wrapper.vm.$nextTick();
-
- expect(store.dispatch).toHaveBeenCalledWith('setAssignees', [activeIssueName]);
- });
- });
-
- describe('when the user off clicks', () => {
- beforeEach(async () => {
- await unassign();
-
- document.body.click();
-
- await wrapper.vm.$nextTick();
- });
-
- it('calls setAssignees with username list', async () => {
- expect(store.dispatch).toHaveBeenCalledWith('setAssignees', []);
- });
-
- it('closes the dropdown', async () => {
- expect(wrapper.find(IssuableAssignees).isVisible()).toBe(true);
- });
- });
- });
-
- it('renders divider after unassign', () => {
- createComponent();
-
- expect(wrapper.find('[data-testid="unassign-divider"]').exists()).toBe(true);
- });
-
- it.each`
- assignees | expected
- ${[{ id: 5, username: '', name: '' }]} | ${'Assignee'}
- ${[{ id: 6, username: '', name: '' }, { id: 7, username: '', name: '' }]} | ${'2 Assignees'}
- `(
- 'when assignees have a length of $assignees.length, it renders $expected',
- ({ assignees, expected }) => {
- store.state.issues['1'].assignees = assignees;
-
- createComponent();
-
- expect(wrapper.find(BoardEditableItem).props('title')).toBe(expected);
- },
- );
-
- describe('when participants is loading', () => {
- beforeEach(() => {
- createComponent('', true);
- });
-
- it('finds a loading icon in the dropdown', () => {
- expect(findLoadingIcon().exists()).toBe(true);
- });
- });
-
- describe('when participants is loading is false', () => {
- beforeEach(() => {
- createComponent();
- });
-
- it('does not find GlLoading icon in the dropdown', () => {
- expect(findLoadingIcon().exists()).toBe(false);
- });
-
- it('finds at least 1 GlDropdownItem', () => {
- expect(wrapper.findAll(GlDropdownItem).length).toBeGreaterThan(0);
- });
- });
-
- describe('Apollo', () => {
- beforeEach(() => {
- getIssueParticipantsSpy = jest.fn().mockResolvedValue({
- data: {
- issue: {
- participants: {
- nodes: [
- {
- username: 'participant',
- name: 'participant',
- webUrl: '',
- avatarUrl: '',
- id: '',
- },
- ],
- },
- },
- },
- });
- getSearchUsersSpy = jest.fn().mockResolvedValue({
- data: {
- users: {
- nodes: [{ username: 'root', name: 'root', webUrl: '', avatarUrl: '', id: '' }],
- },
- },
- });
- });
-
- describe('when search is empty', () => {
- beforeEach(() => {
- createComponentWithApollo();
- });
-
- it('calls getIssueParticipants', async () => {
- jest.runOnlyPendingTimers();
- await wrapper.vm.$nextTick();
-
- expect(getIssueParticipantsSpy).toHaveBeenCalledWith({ id: 'gid://gitlab/Issue/111' });
- });
- });
-
- describe('when search is not empty', () => {
- beforeEach(() => {
- createComponentWithApollo('search term');
- });
-
- it('calls searchUsers', async () => {
- jest.runOnlyPendingTimers();
- await wrapper.vm.$nextTick();
-
- expect(getSearchUsersSpy).toHaveBeenCalledWith({ search: 'search term' });
- });
- });
- });
-
- it('finds GlSearchBoxByType', async () => {
- createComponent();
-
- await openDropdown();
-
- expect(wrapper.find(GlSearchBoxByType).exists()).toBe(true);
- });
-
- describe('when assign-self is emitted from IssuableAssignees', () => {
- const currentUser = { username: 'self', name: '', id: '' };
-
- beforeEach(() => {
- window.gon = { current_username: currentUser.username };
-
- dispatchSpy.mockResolvedValue([currentUser]);
- createComponent();
-
- wrapper.find(IssuableAssignees).vm.$emit('assign-self');
- });
-
- it('calls setAssignees with currentUser', () => {
- expect(store.dispatch).toHaveBeenCalledWith('setAssignees', currentUser.username);
- });
-
- it('adds the user to the selected list', async () => {
- expect(findByText(currentUser.username).exists()).toBe(true);
- });
- });
-
- describe('when setting an assignee', () => {
- beforeEach(() => {
- createComponent();
- });
-
- it('passes loading state from Vuex to BoardEditableItem', async () => {
- store.state.isSettingAssignees = true;
-
- await wrapper.vm.$nextTick();
-
- expect(wrapper.find(BoardEditableItem).props('loading')).toBe(true);
- });
- });
-});
View Lorry Controller Status