diff options
Diffstat (limited to 'spec/frontend/ci_variable_list/components/ci_environments_dropdown_spec.js')
-rw-r--r-- | spec/frontend/ci_variable_list/components/ci_environments_dropdown_spec.js | 27 |
1 files changed, 20 insertions, 7 deletions
diff --git a/spec/frontend/ci_variable_list/components/ci_environments_dropdown_spec.js b/spec/frontend/ci_variable_list/components/ci_environments_dropdown_spec.js index 75c6e8e4540..5c5ea102f12 100644 --- a/spec/frontend/ci_variable_list/components/ci_environments_dropdown_spec.js +++ b/spec/frontend/ci_variable_list/components/ci_environments_dropdown_spec.js @@ -1,4 +1,4 @@ -import { GlDropdownItem, GlIcon } from '@gitlab/ui'; +import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui'; import { mount, createLocalVue } from '@vue/test-utils'; import Vuex from 'vuex'; import CiEnvironmentsDropdown from '~/ci_variable_list/components/ci_environments_dropdown.vue'; @@ -10,6 +10,9 @@ describe('Ci environments dropdown', () => { let wrapper; let store; + const enterSearchTerm = (value) => + wrapper.find('[data-testid="ci-environment-search"]').setValue(value); + const createComponent = (term) => { store = new Vuex.Store({ getters: { @@ -24,11 +27,12 @@ describe('Ci environments dropdown', () => { value: term, }, }); + enterSearchTerm(term); }; - const findAllDropdownItems = () => wrapper.findAll(GlDropdownItem); - const findDropdownItemByIndex = (index) => wrapper.findAll(GlDropdownItem).at(index); - const findActiveIconByIndex = (index) => findDropdownItemByIndex(index).find(GlIcon); + const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem); + const findDropdownItemByIndex = (index) => wrapper.findAllComponents(GlDropdownItem).at(index); + const findActiveIconByIndex = (index) => findDropdownItemByIndex(index).findComponent(GlIcon); afterEach(() => { wrapper.destroy(); @@ -68,8 +72,9 @@ describe('Ci environments dropdown', () => { }); describe('Environments found', () => { - beforeEach(() => { + beforeEach(async () => { createComponent('prod'); + await wrapper.vm.$nextTick(); }); it('renders only the environment searched for', () => { @@ -84,21 +89,29 @@ describe('Ci environments dropdown', () => { }); it('should not display empty results message', () => { - expect(wrapper.find({ ref: 'noMatchingResults' }).exists()).toBe(false); + expect(wrapper.findComponent({ ref: 'noMatchingResults' }).exists()).toBe(false); }); it('should display active checkmark if active', () => { expect(findActiveIconByIndex(0).classes('gl-visibility-hidden')).toBe(false); }); + it('should clear the search term when showing the dropdown', () => { + wrapper.findComponent(GlDropdown).trigger('click'); + + expect(wrapper.find('[data-testid="ci-environment-search"]').text()).toBe(''); + }); + describe('Custom events', () => { it('should emit selectEnvironment if an environment is clicked', () => { findDropdownItemByIndex(0).vm.$emit('click'); expect(wrapper.emitted('selectEnvironment')).toEqual([['prod']]); }); - it('should emit createClicked if an environment is clicked', () => { + it('should emit createClicked if an environment is clicked', async () => { createComponent('newscope'); + + await wrapper.vm.$nextTick(); findDropdownItemByIndex(1).vm.$emit('click'); expect(wrapper.emitted('createClicked')).toEqual([['newscope']]); }); |