diff options
Diffstat (limited to 'spec/frontend/projects/commit/components/projects_dropdown_spec.js')
-rw-r--r-- | spec/frontend/projects/commit/components/projects_dropdown_spec.js | 64 |
1 files changed, 60 insertions, 4 deletions
diff --git a/spec/frontend/projects/commit/components/projects_dropdown_spec.js b/spec/frontend/projects/commit/components/projects_dropdown_spec.js index 0e213ff388a..bb20918e0cd 100644 --- a/spec/frontend/projects/commit/components/projects_dropdown_spec.js +++ b/spec/frontend/projects/commit/components/projects_dropdown_spec.js @@ -1,4 +1,4 @@ -import { GlCollapsibleListbox } from '@gitlab/ui'; +import { GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import Vue from 'vue'; import Vuex from 'vuex'; @@ -35,23 +35,78 @@ describe('ProjectsDropdown', () => { ); }; - const findDropdown = () => wrapper.findComponent(GlCollapsibleListbox); + const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem); + const findSearchBoxByType = () => wrapper.findComponent(GlSearchBoxByType); + const findDropdownItemByIndex = (index) => wrapper.findAllComponents(GlDropdownItem).at(index); + const findNoResults = () => wrapper.findByTestId('empty-result-message'); afterEach(() => { wrapper.destroy(); spyFetchProjects.mockReset(); }); + describe('No projects found', () => { + beforeEach(() => { + createComponent('_non_existent_project_'); + }); + + it('renders empty results message', () => { + expect(findNoResults().text()).toBe('No matching results'); + }); + + it('shows GlSearchBoxByType with default attributes', () => { + expect(findSearchBoxByType().exists()).toBe(true); + expect(findSearchBoxByType().vm.$attrs).toMatchObject({ + placeholder: 'Search projects', + }); + }); + }); + + describe('Search term is empty', () => { + beforeEach(() => { + createComponent(''); + }); + + it('renders all projects when search term is empty', () => { + expect(findAllDropdownItems()).toHaveLength(3); + expect(findDropdownItemByIndex(0).text()).toBe('_project_1_'); + expect(findDropdownItemByIndex(1).text()).toBe('_project_2_'); + expect(findDropdownItemByIndex(2).text()).toBe('_project_3_'); + }); + + it('should not be selected on the inactive project', () => { + expect(wrapper.vm.isSelected('_project_1_')).toBe(false); + }); + }); + describe('Projects found', () => { beforeEach(() => { createComponent('_project_1_', { targetProjectId: '1' }); }); + it('renders only the project searched for', () => { + expect(findAllDropdownItems()).toHaveLength(1); + expect(findDropdownItemByIndex(0).text()).toBe('_project_1_'); + }); + + it('should not display empty results message', () => { + expect(findNoResults().exists()).toBe(false); + }); + + it('should signify this project is selected', () => { + expect(findDropdownItemByIndex(0).props('isChecked')).toBe(true); + }); + + it('should signify the project is not selected', () => { + expect(wrapper.vm.isSelected('_not_selected_project_')).toBe(false); + }); + describe('Custom events', () => { it('should emit selectProject if a project is clicked', () => { - findDropdown().vm.$emit('select', '1'); + findDropdownItemByIndex(0).vm.$emit('click'); expect(wrapper.emitted('selectProject')).toEqual([['1']]); + expect(wrapper.vm.filterTerm).toBe('_project_1_'); }); }); }); @@ -62,7 +117,8 @@ describe('ProjectsDropdown', () => { }); it('renders only the project searched for', () => { - expect(findDropdown().props('items')).toEqual([{ text: '_project_1_', value: '1' }]); + expect(findAllDropdownItems()).toHaveLength(1); + expect(findDropdownItemByIndex(0).text()).toBe('_project_1_'); }); }); }); |