diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-09-19 23:18:09 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-09-19 23:18:09 +0000 |
commit | 6ed4ec3e0b1340f96b7c043ef51d1b33bbe85fde (patch) | |
tree | dc4d20fe6064752c0bd323187252c77e0a89144b /spec/frontend/admin/topics/components/topic_select_spec.js | |
parent | 9868dae7fc0655bd7ce4a6887d4e6d487690eeed (diff) | |
download | gitlab-ce-6ed4ec3e0b1340f96b7c043ef51d1b33bbe85fde.tar.gz |
Add latest changes from gitlab-org/gitlab@15-4-stable-eev15.4.0-rc42
Diffstat (limited to 'spec/frontend/admin/topics/components/topic_select_spec.js')
-rw-r--r-- | spec/frontend/admin/topics/components/topic_select_spec.js | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/spec/frontend/admin/topics/components/topic_select_spec.js b/spec/frontend/admin/topics/components/topic_select_spec.js new file mode 100644 index 00000000000..f61af6203f0 --- /dev/null +++ b/spec/frontend/admin/topics/components/topic_select_spec.js @@ -0,0 +1,91 @@ +import { GlAvatarLabeled, GlDropdown, GlDropdownItem } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import TopicSelect from '~/admin/topics/components/topic_select.vue'; + +const mockTopics = [ + { id: 1, name: 'topic1', title: 'Topic 1', avatarUrl: 'avatar.com/topic1.png' }, + { id: 2, name: 'GitLab', title: 'GitLab', avatarUrl: 'avatar.com/GitLab.png' }, +]; + +describe('TopicSelect', () => { + let wrapper; + + const findDropdown = () => wrapper.findComponent(GlDropdown); + const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem); + + function createComponent(props = {}) { + wrapper = shallowMount(TopicSelect, { + propsData: props, + data() { + return { + topics: mockTopics, + search: '', + }; + }, + mocks: { + $apollo: { + queries: { + topics: { loading: false }, + }, + }, + }, + }); + } + + afterEach(() => { + wrapper.destroy(); + }); + + it('mounts', () => { + createComponent(); + + expect(wrapper.exists()).toBe(true); + }); + + it('`selectedTopic` prop defaults to `{}`', () => { + createComponent(); + + expect(wrapper.props('selectedTopic')).toEqual({}); + }); + + it('`labelText` prop defaults to `null`', () => { + createComponent(); + + expect(wrapper.props('labelText')).toBe(null); + }); + + it('renders default text if no selected topic', () => { + createComponent(); + + expect(findDropdown().props('text')).toBe('Select a topic'); + }); + + it('renders selected topic', () => { + createComponent({ selectedTopic: mockTopics[0] }); + + expect(findDropdown().props('text')).toBe('topic1'); + }); + + it('renders label', () => { + createComponent({ labelText: 'my label' }); + + expect(wrapper.find('label').text()).toBe('my label'); + }); + + it('renders dropdown items', () => { + createComponent(); + + const dropdownItems = findAllDropdownItems(); + + expect(dropdownItems.at(0).findComponent(GlAvatarLabeled).props('label')).toBe('Topic 1'); + expect(dropdownItems.at(1).findComponent(GlAvatarLabeled).props('label')).toBe('GitLab'); + }); + + it('emits `click` event when topic selected', () => { + createComponent(); + + findAllDropdownItems().at(0).vm.$emit('click'); + + expect(wrapper.emitted('click')).toEqual([[mockTopics[0]]]); + }); +}); |