diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/dropdown/dropdown_search_input_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/dropdown/dropdown_search_input_spec.js | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/dropdown/dropdown_search_input_spec.js b/spec/frontend/vue_shared/components/dropdown/dropdown_search_input_spec.js new file mode 100644 index 00000000000..0d0e4ae4349 --- /dev/null +++ b/spec/frontend/vue_shared/components/dropdown/dropdown_search_input_spec.js @@ -0,0 +1,55 @@ +import { mount } from '@vue/test-utils'; +import DropdownSearchInputComponent from '~/vue_shared/components/dropdown/dropdown_search_input.vue'; + +describe('DropdownSearchInputComponent', () => { + let wrapper; + + const defaultProps = { + placeholderText: 'Search something', + }; + const buildVM = (propsData = defaultProps) => { + wrapper = mount(DropdownSearchInputComponent, { + propsData, + }); + }; + const findInputEl = () => wrapper.find('.dropdown-input-field'); + + beforeEach(() => { + buildVM(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + describe('template', () => { + it('renders input element with type `search`', () => { + expect(findInputEl().exists()).toBe(true); + expect(findInputEl().attributes('type')).toBe('search'); + }); + + it('renders search icon element', () => { + expect(wrapper.find('.fa-search.dropdown-input-search').exists()).toBe(true); + }); + + it('renders clear search icon element', () => { + expect(wrapper.find('.fa-times.dropdown-input-clear.js-dropdown-input-clear').exists()).toBe( + true, + ); + }); + + it('displays custom placeholder text', () => { + expect(findInputEl().attributes('placeholder')).toBe(defaultProps.placeholderText); + }); + + it('focuses input element when focused property equals true', () => { + const inputEl = findInputEl().element; + + jest.spyOn(inputEl, 'focus'); + + wrapper.setProps({ focused: true }); + + expect(inputEl.focus).toHaveBeenCalled(); + }); + }); +}); |