diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-02-18 09:45:46 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-02-18 09:45:46 +0000 |
commit | a7b3560714b4d9cc4ab32dffcd1f74a284b93580 (patch) | |
tree | 7452bd5c3545c2fa67a28aa013835fb4fa071baf /spec/frontend/vue_shared/components/namespace_select/namespace_select_spec.js | |
parent | ee9173579ae56a3dbfe5afe9f9410c65bb327ca7 (diff) | |
download | gitlab-ce-a7b3560714b4d9cc4ab32dffcd1f74a284b93580.tar.gz |
Add latest changes from gitlab-org/gitlab@14-8-stable-eev14.8.0-rc42
Diffstat (limited to 'spec/frontend/vue_shared/components/namespace_select/namespace_select_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/namespace_select/namespace_select_spec.js | 151 |
1 files changed, 117 insertions, 34 deletions
diff --git a/spec/frontend/vue_shared/components/namespace_select/namespace_select_spec.js b/spec/frontend/vue_shared/components/namespace_select/namespace_select_spec.js index 8f07f63993d..c11b20a692e 100644 --- a/spec/frontend/vue_shared/components/namespace_select/namespace_select_spec.js +++ b/spec/frontend/vue_shared/components/namespace_select/namespace_select_spec.js @@ -1,9 +1,15 @@ -import { GlDropdown, GlDropdownItem, GlDropdownSectionHeader } from '@gitlab/ui'; +import { nextTick } from 'vue'; +import { GlDropdown, GlDropdownItem, GlDropdownSectionHeader, GlSearchBoxByType } from '@gitlab/ui'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import NamespaceSelect, { i18n, + EMPTY_NAMESPACE_ID, } from '~/vue_shared/components/namespace_select/namespace_select.vue'; -import { user, group, namespaces } from './mock_data'; +import { userNamespaces, groupNamespaces } from './mock_data'; + +const FLAT_NAMESPACES = [...groupNamespaces, ...userNamespaces]; +const EMPTY_NAMESPACE_TITLE = 'Empty namespace TEST'; +const EMPTY_NAMESPACE_ITEM = { id: EMPTY_NAMESPACE_ID, humanName: EMPTY_NAMESPACE_TITLE }; describe('Namespace Select', () => { let wrapper; @@ -11,71 +17,115 @@ describe('Namespace Select', () => { const createComponent = (props = {}) => shallowMountExtended(NamespaceSelect, { propsData: { - data: namespaces, + userNamespaces, + groupNamespaces, ...props, }, + stubs: { + // We have to "full" mount GlDropdown so that slot children will render + GlDropdown, + }, }); const wrappersText = (arr) => arr.wrappers.map((w) => w.text()); - const flatNamespaces = () => [...group, ...user]; const findDropdown = () => wrapper.findComponent(GlDropdown); - const findDropdownAttributes = (attr) => findDropdown().attributes(attr); - const selectedDropdownItemText = () => findDropdownAttributes('text'); + const findDropdownText = () => findDropdown().props('text'); const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem); + const findDropdownItemsTexts = () => findDropdownItems().wrappers.map((x) => x.text()); const findSectionHeaders = () => wrapper.findAllComponents(GlDropdownSectionHeader); - - beforeEach(() => { - wrapper = createComponent(); - }); + const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType); + const search = (term) => findSearchBox().vm.$emit('input', term); afterEach(() => { wrapper.destroy(); }); - it('renders the dropdown', () => { - expect(findDropdown().exists()).toBe(true); - }); + describe('default', () => { + beforeEach(() => { + wrapper = createComponent(); + }); - it('renders each dropdown item', () => { - const items = findDropdownItems().wrappers; - expect(items).toHaveLength(flatNamespaces().length); - }); + it('renders the dropdown', () => { + expect(findDropdown().exists()).toBe(true); + }); - it('renders the human name for each item', () => { - const dropdownItems = wrappersText(findDropdownItems()); - const flatNames = flatNamespaces().map(({ humanName }) => humanName); - expect(dropdownItems).toEqual(flatNames); - }); + it('renders each dropdown item', () => { + expect(findDropdownItemsTexts()).toEqual(FLAT_NAMESPACES.map((x) => x.humanName)); + }); + + it('renders default dropdown text', () => { + expect(findDropdownText()).toBe(i18n.DEFAULT_TEXT); + }); + + it('splits group and user namespaces', () => { + const headers = findSectionHeaders(); + expect(wrappersText(headers)).toEqual([i18n.GROUPS, i18n.USERS]); + }); - it('sets the initial dropdown text', () => { - expect(selectedDropdownItemText()).toBe(i18n.DEFAULT_TEXT); + it('does not render wrapper as full width', () => { + expect(findDropdown().attributes('block')).toBeUndefined(); + }); }); - it('splits group and user namespaces', () => { - const headers = findSectionHeaders(); - expect(headers).toHaveLength(2); - expect(wrappersText(headers)).toEqual([i18n.GROUPS, i18n.USERS]); + it('with defaultText, it overrides dropdown text', () => { + const textOverride = 'Select an option'; + + wrapper = createComponent({ defaultText: textOverride }); + + expect(findDropdownText()).toBe(textOverride); }); - it('sets the dropdown to full width', () => { - expect(findDropdownAttributes('block')).toBeUndefined(); + it('with includeHeaders=false, hides group/user headers', () => { + wrapper = createComponent({ includeHeaders: false }); + + expect(findSectionHeaders()).toHaveLength(0); + }); + it('with fullWidth=true, sets the dropdown to full width', () => { wrapper = createComponent({ fullWidth: true }); - expect(findDropdownAttributes('block')).not.toBeUndefined(); - expect(findDropdownAttributes('block')).toBe('true'); + expect(findDropdown().attributes('block')).toBe('true'); + }); + + describe('with search', () => { + it.each` + term | includeEmptyNamespace | expectedItems + ${''} | ${false} | ${[...groupNamespaces, ...userNamespaces]} + ${'sub'} | ${false} | ${[groupNamespaces[1]]} + ${'User'} | ${false} | ${[...userNamespaces]} + ${'User'} | ${true} | ${[...userNamespaces]} + ${'namespace'} | ${true} | ${[EMPTY_NAMESPACE_ITEM, ...userNamespaces]} + `( + 'with term=$term and includeEmptyNamespace=$includeEmptyNamespace, should show $expectedItems.length', + async ({ term, includeEmptyNamespace, expectedItems }) => { + wrapper = createComponent({ + includeEmptyNamespace, + emptyNamespaceTitle: EMPTY_NAMESPACE_TITLE, + }); + + search(term); + + await nextTick(); + + const expected = expectedItems.map((x) => x.humanName); + + expect(findDropdownItemsTexts()).toEqual(expected); + }, + ); }); describe('with a selected namespace', () => { const selectedGroupIndex = 1; - const selectedItem = group[selectedGroupIndex]; + const selectedItem = groupNamespaces[selectedGroupIndex]; beforeEach(() => { + wrapper = createComponent(); + findDropdownItems().at(selectedGroupIndex).vm.$emit('click'); }); it('sets the dropdown text', () => { - expect(selectedDropdownItemText()).toBe(selectedItem.humanName); + expect(findDropdownText()).toBe(selectedItem.humanName); }); it('emits the `select` event when a namespace is selected', () => { @@ -83,4 +133,37 @@ describe('Namespace Select', () => { expect(wrapper.emitted('select')).toEqual([args]); }); }); + + describe('with an empty namespace option', () => { + beforeEach(() => { + wrapper = createComponent({ + includeEmptyNamespace: true, + emptyNamespaceTitle: EMPTY_NAMESPACE_TITLE, + }); + }); + + it('includes the empty namespace', () => { + const first = findDropdownItems().at(0); + + expect(first.text()).toBe(EMPTY_NAMESPACE_TITLE); + }); + + it('emits the `select` event when a namespace is selected', () => { + findDropdownItems().at(0).vm.$emit('click'); + + expect(wrapper.emitted('select')).toEqual([[EMPTY_NAMESPACE_ITEM]]); + }); + + it.each` + desc | term | shouldShow + ${'should hide empty option'} | ${'group'} | ${false} + ${'should show empty option'} | ${'Empty'} | ${true} + `('when search for $term, $desc', async ({ term, shouldShow }) => { + search(term); + + await nextTick(); + + expect(findDropdownItemsTexts().includes(EMPTY_NAMESPACE_TITLE)).toBe(shouldShow); + }); + }); }); |