diff options
Diffstat (limited to 'spec/frontend/pages/admin/projects/components/namespace_select_spec.js')
-rw-r--r-- | spec/frontend/pages/admin/projects/components/namespace_select_spec.js | 93 |
1 files changed, 93 insertions, 0 deletions
diff --git a/spec/frontend/pages/admin/projects/components/namespace_select_spec.js b/spec/frontend/pages/admin/projects/components/namespace_select_spec.js new file mode 100644 index 00000000000..c579aa2f2da --- /dev/null +++ b/spec/frontend/pages/admin/projects/components/namespace_select_spec.js @@ -0,0 +1,93 @@ +import { mount } from '@vue/test-utils'; +import Api from '~/api'; +import NamespaceSelect from '~/pages/admin/projects/components/namespace_select.vue'; + +describe('Dropdown select component', () => { + let wrapper; + + const mountDropdown = (propsData) => { + wrapper = mount(NamespaceSelect, { propsData }); + }; + + const findDropdownToggle = () => wrapper.find('button.dropdown-toggle'); + const findNamespaceInput = () => wrapper.find('[data-testid="hidden-input"]'); + const findFilterInput = () => wrapper.find('.namespace-search-box input'); + const findDropdownOption = (match) => { + const buttons = wrapper + .findAll('button.dropdown-item') + .filter((node) => node.text().match(match)); + return buttons.length ? buttons.at(0) : buttons; + }; + + const setFieldValue = async (field, value) => { + await field.setValue(value); + field.trigger('blur'); + }; + + beforeEach(() => { + setFixtures('<div class="test-container"></div>'); + + jest.spyOn(Api, 'namespaces').mockImplementation((_, callback) => + callback([ + { id: 10, kind: 'user', full_path: 'Administrator' }, + { id: 20, kind: 'group', full_path: 'GitLab Org' }, + ]), + ); + }); + + it('creates a hidden input if fieldName is provided', () => { + mountDropdown({ fieldName: 'namespace-input' }); + + expect(findNamespaceInput()).toExist(); + expect(findNamespaceInput().attributes('name')).toBe('namespace-input'); + }); + + describe('clicking dropdown options', () => { + it('retrieves namespaces based on filter query', async () => { + mountDropdown(); + + await setFieldValue(findFilterInput(), 'test'); + + expect(Api.namespaces).toHaveBeenCalledWith('test', expect.anything()); + }); + + it('updates the dropdown value based upon selection', async () => { + mountDropdown({ fieldName: 'namespace-input' }); + + // wait for dropdown options to populate + await wrapper.vm.$nextTick(); + + expect(findDropdownOption('user: Administrator')).toExist(); + expect(findDropdownOption('group: GitLab Org')).toExist(); + expect(findDropdownOption('group: Foobar')).not.toExist(); + + findDropdownOption('user: Administrator').trigger('click'); + await wrapper.vm.$nextTick(); + + expect(findNamespaceInput().attributes('value')).toBe('10'); + expect(findDropdownToggle().text()).toBe('user: Administrator'); + }); + + it('triggers a setNamespace event upon selection', async () => { + mountDropdown(); + + // wait for dropdown options to populate + await wrapper.vm.$nextTick(); + + findDropdownOption('group: GitLab Org').trigger('click'); + + expect(wrapper.emitted('setNamespace')).toHaveLength(1); + expect(wrapper.emitted('setNamespace')[0][0]).toBe(20); + }); + + it('displays "Any Namespace" option when showAny prop provided', () => { + mountDropdown({ showAny: true }); + expect(wrapper.text()).toContain('Any namespace'); + }); + + it('does not display "Any Namespace" option when showAny prop not provided', () => { + mountDropdown(); + expect(wrapper.text()).not.toContain('Any namespace'); + }); + }); +}); |