diff options
Diffstat (limited to 'spec/frontend/invite_members/components/project_select_spec.js')
-rw-r--r-- | spec/frontend/invite_members/components/project_select_spec.js | 56 |
1 files changed, 34 insertions, 22 deletions
diff --git a/spec/frontend/invite_members/components/project_select_spec.js b/spec/frontend/invite_members/components/project_select_spec.js index acc062b5fff..6fbf95362fa 100644 --- a/spec/frontend/invite_members/components/project_select_spec.js +++ b/spec/frontend/invite_members/components/project_select_spec.js @@ -1,4 +1,4 @@ -import { GlSearchBoxByType, GlAvatarLabeled, GlDropdownItem } from '@gitlab/ui'; +import { GlAvatarLabeled, GlCollapsibleListbox } from '@gitlab/ui'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import waitForPromises from 'helpers/wait_for_promises'; import * as projectsApi from '~/api/projects_api'; @@ -9,7 +9,12 @@ describe('ProjectSelect', () => { let wrapper; const createComponent = () => { - wrapper = shallowMountExtended(ProjectSelect, {}); + wrapper = shallowMountExtended(ProjectSelect, { + stubs: { + GlCollapsibleListbox, + GlAvatarLabeled, + }, + }); }; beforeEach(() => { @@ -22,16 +27,24 @@ describe('ProjectSelect', () => { wrapper.destroy(); }); - const findSearchBoxByType = () => wrapper.findComponent(GlSearchBoxByType); - const findDropdownItem = (index) => wrapper.findAllComponents(GlDropdownItem).at(index); - const findAvatarLabeled = (index) => findDropdownItem(index).findComponent(GlAvatarLabeled); - const findEmptyResultMessage = () => wrapper.findByTestId('empty-result-message'); - const findErrorMessage = () => wrapper.findByTestId('error-message'); - - it('renders GlSearchBoxByType with default attributes', () => { - expect(findSearchBoxByType().exists()).toBe(true); - expect(findSearchBoxByType().vm.$attrs).toMatchObject({ - placeholder: 'Search projects', + const findGlCollapsibleListbox = () => wrapper.findComponent(GlCollapsibleListbox); + const findAvatarLabeled = (index) => wrapper.findAllComponents(GlAvatarLabeled).at(index); + + it('renders GlCollapsibleListbox with default props', () => { + expect(findGlCollapsibleListbox().exists()).toBe(true); + expect(findGlCollapsibleListbox().props()).toMatchObject({ + items: [], + loading: false, + multiple: false, + noResultsText: 'No matching results', + placement: 'left', + searchPlaceholder: 'Search projects', + searchable: true, + searching: false, + size: 'medium', + toggleText: 'Select a project', + totalItems: null, + variant: 'default', }); }); @@ -48,7 +61,7 @@ describe('ProjectSelect', () => { }), ); - findSearchBoxByType().vm.$emit('input', project1.name); + findGlCollapsibleListbox().vm.$emit('search', project1.name); }); it('calls the API', () => { @@ -61,14 +74,12 @@ describe('ProjectSelect', () => { }); it('displays loading icon while waiting for API call to resolve and then sets loading false', async () => { - expect(findSearchBoxByType().props('isLoading')).toBe(true); + expect(findGlCollapsibleListbox().props('searching')).toBe(true); resolveApiRequest({ data: allProjects }); await waitForPromises(); - expect(findSearchBoxByType().props('isLoading')).toBe(false); - expect(findEmptyResultMessage().exists()).toBe(false); - expect(findErrorMessage().exists()).toBe(false); + expect(findGlCollapsibleListbox().props('searching')).toBe(false); }); it('displays a dropdown item and avatar for each project fetched', async () => { @@ -76,11 +87,11 @@ describe('ProjectSelect', () => { await waitForPromises(); allProjects.forEach((project, index) => { - expect(findDropdownItem(index).attributes('name')).toBe(project.name_with_namespace); expect(findAvatarLabeled(index).attributes()).toMatchObject({ src: project.avatar_url, 'entity-id': String(project.id), 'entity-name': project.name_with_namespace, + size: '32', }); expect(findAvatarLabeled(index).props('label')).toBe(project.name_with_namespace); }); @@ -90,16 +101,17 @@ describe('ProjectSelect', () => { resolveApiRequest({ data: [] }); await waitForPromises(); - expect(findEmptyResultMessage().text()).toBe('No matching results'); + expect(findGlCollapsibleListbox().text()).toBe('No matching results'); }); it('displays the error message when the fetch fails', async () => { rejectApiRequest(); await waitForPromises(); - expect(findErrorMessage().text()).toBe( - 'There was an error fetching the projects. Please try again.', - ); + // To be displayed in GlCollapsibleListbox once we implement + // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2132 + // https://gitlab.com/gitlab-org/gitlab/-/issues/389974 + expect(findGlCollapsibleListbox().text()).toBe('No matching results'); }); }); }); |