diff options
Diffstat (limited to 'spec/frontend/projects/commit/components/branches_dropdown_spec.js')
-rw-r--r-- | spec/frontend/projects/commit/components/branches_dropdown_spec.js | 133 |
1 files changed, 15 insertions, 118 deletions
diff --git a/spec/frontend/projects/commit/components/branches_dropdown_spec.js b/spec/frontend/projects/commit/components/branches_dropdown_spec.js index a84dd246f5d..6aa5a9a5a3a 100644 --- a/spec/frontend/projects/commit/components/branches_dropdown_spec.js +++ b/spec/frontend/projects/commit/components/branches_dropdown_spec.js @@ -1,9 +1,8 @@ -import { GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui'; +import { GlCollapsibleListbox } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import Vue, { nextTick } from 'vue'; import Vuex from 'vuex'; import { extendedWrapper } from 'helpers/vue_test_utils_helper'; -import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants'; import BranchesDropdown from '~/projects/commit/components/branches_dropdown.vue'; Vue.use(Vuex); @@ -35,11 +34,11 @@ describe('BranchesDropdown', () => { ); }; - 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'); - const findLoading = () => wrapper.findByTestId('dropdown-text-loading-icon'); + const findDropdown = () => wrapper.findComponent(GlCollapsibleListbox); + + beforeEach(() => { + createComponent({ value: '' }); + }); afterEach(() => { wrapper.destroy(); @@ -48,138 +47,36 @@ describe('BranchesDropdown', () => { }); describe('On mount', () => { - beforeEach(() => { - createComponent({ value: '' }); - }); - it('invokes fetchBranches', () => { expect(spyFetchBranches).toHaveBeenCalled(); }); - - describe('with a value but visually blanked', () => { - beforeEach(() => { - createComponent({ value: '_main_', blanked: true }, { branch: '_main_' }); - }); - - it('renders all branches', () => { - expect(findAllDropdownItems()).toHaveLength(3); - expect(findDropdownItemByIndex(0).text()).toBe('_main_'); - expect(findDropdownItemByIndex(1).text()).toBe('_branch_1_'); - expect(findDropdownItemByIndex(2).text()).toBe('_branch_2_'); - }); - - it('selects the active branch', () => { - expect(wrapper.vm.isSelected('_main_')).toBe(true); - }); - }); }); - describe('Loading states', () => { - it('shows loading icon while fetching', () => { - createComponent({ value: '' }, { isFetching: true }); + describe('Value prop changes in parent component', () => { + it('triggers fetchBranches call', async () => { + await wrapper.setProps({ value: 'new value' }); - expect(findLoading().isVisible()).toBe(true); - }); - - it('does not show loading icon', () => { - createComponent({ value: '' }); - - expect(findLoading().isVisible()).toBe(false); - }); - }); - - describe('No branches found', () => { - beforeEach(() => { - createComponent({ value: '_non_existent_branch_' }); - }); - - 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 branches', - debounce: DEFAULT_DEBOUNCE_AND_THROTTLE_MS, - }); + expect(spyFetchBranches).toHaveBeenCalled(); }); }); - describe('Search term is empty', () => { - beforeEach(() => { - createComponent({ value: '' }); - }); + describe('Selecting Dropdown Item', () => { + it('emits event', async () => { + findDropdown().vm.$emit('select', '_anything_'); - it('renders all branches when search term is empty', () => { - expect(findAllDropdownItems()).toHaveLength(3); - expect(findDropdownItemByIndex(0).text()).toBe('_main_'); - expect(findDropdownItemByIndex(1).text()).toBe('_branch_1_'); - expect(findDropdownItemByIndex(2).text()).toBe('_branch_2_'); - }); - - it('should not be selected on the inactive branch', () => { - expect(wrapper.vm.isSelected('_main_')).toBe(false); + expect(wrapper.emitted()).toHaveProperty('input'); }); }); describe('When searching', () => { - beforeEach(() => { - createComponent({ value: '' }); - }); - it('invokes fetchBranches', async () => { const spy = jest.spyOn(wrapper.vm, 'fetchBranches'); - findSearchBoxByType().vm.$emit('input', '_anything_'); + findDropdown().vm.$emit('search', '_anything_'); await nextTick(); expect(spy).toHaveBeenCalledWith('_anything_'); - expect(wrapper.vm.searchTerm).toBe('_anything_'); - }); - }); - - describe('Branches found', () => { - beforeEach(() => { - createComponent({ value: '_branch_1_' }, { branch: '_branch_1_' }); - }); - - it('renders only the branch searched for', () => { - expect(findAllDropdownItems()).toHaveLength(1); - expect(findDropdownItemByIndex(0).text()).toBe('_branch_1_'); - }); - - it('should not display empty results message', () => { - expect(findNoResults().exists()).toBe(false); - }); - - it('should signify this branch is selected', () => { - expect(wrapper.vm.isSelected('_branch_1_')).toBe(true); - }); - - it('should signify the branch is not selected', () => { - expect(wrapper.vm.isSelected('_not_selected_branch_')).toBe(false); - }); - - describe('Custom events', () => { - it('should emit selectBranch if an branch is clicked', () => { - findDropdownItemByIndex(0).vm.$emit('click'); - - expect(wrapper.emitted('selectBranch')).toEqual([['_branch_1_']]); - expect(wrapper.vm.searchTerm).toBe('_branch_1_'); - }); - }); - }); - - describe('Case insensitive for search term', () => { - beforeEach(() => { - createComponent({ value: '_BrAnCh_1_' }); - }); - - it('renders only the branch searched for', () => { - expect(findAllDropdownItems()).toHaveLength(1); - expect(findDropdownItemByIndex(0).text()).toBe('_branch_1_'); }); }); }); |