diff options
Diffstat (limited to 'spec/frontend/search/topbar')
| -rw-r--r-- | spec/frontend/search/topbar/components/searchable_dropdown_item_spec.js | 97 | ||||
| -rw-r--r-- | spec/frontend/search/topbar/components/searchable_dropdown_spec.js | 58 |
2 files changed, 124 insertions, 31 deletions
diff --git a/spec/frontend/search/topbar/components/searchable_dropdown_item_spec.js b/spec/frontend/search/topbar/components/searchable_dropdown_item_spec.js new file mode 100644 index 00000000000..e51fe9a4cf9 --- /dev/null +++ b/spec/frontend/search/topbar/components/searchable_dropdown_item_spec.js @@ -0,0 +1,97 @@ +import { GlDropdownItem, GlAvatar } from '@gitlab/ui'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import { MOCK_GROUPS } from 'jest/search/mock_data'; +import { truncateNamespace } from '~/lib/utils/text_utility'; +import SearchableDropdownItem from '~/search/topbar/components/searchable_dropdown_item.vue'; +import { GROUP_DATA } from '~/search/topbar/constants'; + +describe('Global Search Searchable Dropdown Item', () => { + let wrapper; + + const defaultProps = { + item: MOCK_GROUPS[0], + selectedItem: MOCK_GROUPS[0], + name: GROUP_DATA.name, + fullName: GROUP_DATA.fullName, + }; + + const createComponent = (props) => { + wrapper = shallowMountExtended(SearchableDropdownItem, { + propsData: { + ...defaultProps, + ...props, + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + const findGlDropdownItem = () => wrapper.findComponent(GlDropdownItem); + const findGlAvatar = () => wrapper.findComponent(GlAvatar); + const findDropdownTitle = () => wrapper.findByTestId('item-title'); + const findDropdownSubtitle = () => wrapper.findByTestId('item-namespace'); + + describe('template', () => { + describe('always', () => { + beforeEach(() => { + createComponent(); + }); + + it('renders GlDropdownItem', () => { + expect(findGlDropdownItem().exists()).toBe(true); + }); + + it('renders GlAvatar', () => { + expect(findGlAvatar().exists()).toBe(true); + }); + + it('renders Dropdown Title correctly', () => { + const titleEl = findDropdownTitle(); + + expect(titleEl.exists()).toBe(true); + expect(titleEl.text()).toBe(MOCK_GROUPS[0][GROUP_DATA.name]); + }); + + it('renders Dropdown Subtitle correctly', () => { + const subtitleEl = findDropdownSubtitle(); + + expect(subtitleEl.exists()).toBe(true); + expect(subtitleEl.text()).toBe(truncateNamespace(MOCK_GROUPS[0][GROUP_DATA.fullName])); + }); + }); + + describe('when item === selectedItem', () => { + beforeEach(() => { + createComponent({ item: MOCK_GROUPS[0], selectedItem: MOCK_GROUPS[0] }); + }); + + it('marks the dropdown as checked', () => { + expect(findGlDropdownItem().attributes('ischecked')).toBe('true'); + }); + }); + + describe('when item !== selectedItem', () => { + beforeEach(() => { + createComponent({ item: MOCK_GROUPS[0], selectedItem: MOCK_GROUPS[1] }); + }); + + it('marks the dropdown as not checked', () => { + expect(findGlDropdownItem().attributes('ischecked')).toBeUndefined(); + }); + }); + }); + + describe('actions', () => { + beforeEach(() => { + createComponent(); + }); + + it('clicking the dropdown item $emits change with the item', () => { + findGlDropdownItem().vm.$emit('click'); + + expect(wrapper.emitted('change')[0]).toEqual([MOCK_GROUPS[0]]); + }); + }); +}); diff --git a/spec/frontend/search/topbar/components/searchable_dropdown_spec.js b/spec/frontend/search/topbar/components/searchable_dropdown_spec.js index 5de948592d4..10d779f0f90 100644 --- a/spec/frontend/search/topbar/components/searchable_dropdown_spec.js +++ b/spec/frontend/search/topbar/components/searchable_dropdown_spec.js @@ -1,20 +1,21 @@ import { GlDropdown, GlDropdownItem, GlSearchBoxByType, GlSkeletonLoader } from '@gitlab/ui'; -import { createLocalVue, shallowMount, mount } from '@vue/test-utils'; +import { shallowMount, mount } from '@vue/test-utils'; +import Vue from 'vue'; import Vuex from 'vuex'; import { MOCK_GROUPS, MOCK_GROUP, MOCK_QUERY } from 'jest/search/mock_data'; import SearchableDropdown from '~/search/topbar/components/searchable_dropdown.vue'; +import SearchableDropdownItem from '~/search/topbar/components/searchable_dropdown_item.vue'; import { ANY_OPTION, GROUP_DATA } from '~/search/topbar/constants'; -const localVue = createLocalVue(); -localVue.use(Vuex); +Vue.use(Vuex); describe('Global Search Searchable Dropdown', () => { let wrapper; const defaultProps = { headerText: GROUP_DATA.headerText, - selectedDisplayValue: GROUP_DATA.selectedDisplayValue, - itemsDisplayValue: GROUP_DATA.itemsDisplayValue, + name: GROUP_DATA.name, + fullName: GROUP_DATA.fullName, loading: false, selectedItem: ANY_OPTION, items: [], @@ -29,7 +30,6 @@ describe('Global Search Searchable Dropdown', () => { }); wrapper = mountFn(SearchableDropdown, { - localVue, store, propsData: { ...defaultProps, @@ -40,17 +40,16 @@ describe('Global Search Searchable Dropdown', () => { afterEach(() => { wrapper.destroy(); - wrapper = null; }); - const findGlDropdown = () => wrapper.find(GlDropdown); - const findGlDropdownSearch = () => findGlDropdown().find(GlSearchBoxByType); + const findGlDropdown = () => wrapper.findComponent(GlDropdown); + const findGlDropdownSearch = () => findGlDropdown().findComponent(GlSearchBoxByType); const findDropdownText = () => findGlDropdown().find('.dropdown-toggle-text'); - const findDropdownItems = () => findGlDropdown().findAll(GlDropdownItem); - const findDropdownItemsText = () => findDropdownItems().wrappers.map((w) => w.text()); - const findAnyDropdownItem = () => findDropdownItems().at(0); - const findFirstGroupDropdownItem = () => findDropdownItems().at(1); - const findLoader = () => wrapper.find(GlSkeletonLoader); + const findSearchableDropdownItems = () => + findGlDropdown().findAllComponents(SearchableDropdownItem); + const findAnyDropdownItem = () => findGlDropdown().findComponent(GlDropdownItem); + const findFirstGroupDropdownItem = () => findSearchableDropdownItems().at(0); + const findLoader = () => wrapper.findComponent(GlSkeletonLoader); describe('template', () => { beforeEach(() => { @@ -93,9 +92,12 @@ describe('Global Search Searchable Dropdown', () => { expect(findLoader().exists()).toBe(false); }); - it('renders an instance for each namespace', () => { - const resultsIncludeAny = ['Any'].concat(MOCK_GROUPS.map((n) => n.full_name)); - expect(findDropdownItemsText()).toStrictEqual(resultsIncludeAny); + it('renders the Any Dropdown', () => { + expect(findAnyDropdownItem().exists()).toBe(true); + }); + + it('renders SearchableDropdownItem for each item', () => { + expect(findSearchableDropdownItems()).toHaveLength(MOCK_GROUPS.length); }); }); @@ -108,18 +110,12 @@ describe('Global Search Searchable Dropdown', () => { expect(findLoader().exists()).toBe(true); }); - it('renders only Any in dropdown', () => { - expect(findDropdownItemsText()).toStrictEqual(['Any']); - }); - }); - - describe('when item is selected', () => { - beforeEach(() => { - createComponent({}, { items: MOCK_GROUPS, selectedItem: MOCK_GROUPS[0] }); + it('renders the Any Dropdown', () => { + expect(findAnyDropdownItem().exists()).toBe(true); }); - it('marks the dropdown as checked', () => { - expect(findFirstGroupDropdownItem().attributes('ischecked')).toBe('true'); + it('does not render SearchableDropdownItem', () => { + expect(findSearchableDropdownItems()).toHaveLength(0); }); }); }); @@ -140,8 +136,8 @@ describe('Global Search Searchable Dropdown', () => { createComponent({}, { selectedItem: MOCK_GROUP }, mount); }); - it('sets dropdown text to the selectedItem selectedDisplayValue', () => { - expect(findDropdownText().text()).toBe(MOCK_GROUP[GROUP_DATA.selectedDisplayValue]); + it('sets dropdown text to the selectedItem name', () => { + expect(findDropdownText().text()).toBe(MOCK_GROUP[GROUP_DATA.name]); }); }); }); @@ -158,8 +154,8 @@ describe('Global Search Searchable Dropdown', () => { expect(wrapper.emitted('change')[0]).toEqual([ANY_OPTION]); }); - it('clicking result dropdown item $emits @change with result', () => { - findFirstGroupDropdownItem().vm.$emit('click'); + it('on SearchableDropdownItem @change, the wrapper $emits change with the item', () => { + findFirstGroupDropdownItem().vm.$emit('change', MOCK_GROUPS[0]); expect(wrapper.emitted('change')[0]).toEqual([MOCK_GROUPS[0]]); }); |