diff options
Diffstat (limited to 'spec/frontend/jira_connect/branches/components/project_dropdown_spec.js')
-rw-r--r-- | spec/frontend/jira_connect/branches/components/project_dropdown_spec.js | 74 |
1 files changed, 34 insertions, 40 deletions
diff --git a/spec/frontend/jira_connect/branches/components/project_dropdown_spec.js b/spec/frontend/jira_connect/branches/components/project_dropdown_spec.js index ec4cb2739f8..136a5967ee4 100644 --- a/spec/frontend/jira_connect/branches/components/project_dropdown_spec.js +++ b/spec/frontend/jira_connect/branches/components/project_dropdown_spec.js @@ -1,5 +1,12 @@ -import { GlDropdown, GlDropdownItem, GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui'; -import { mount, shallowMount, createLocalVue } from '@vue/test-utils'; +import { + GlAvatarLabeled, + GlDropdown, + GlDropdownItem, + GlLoadingIcon, + GlSearchBoxByType, +} from '@gitlab/ui'; +import { mount, shallowMount } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; @@ -7,32 +14,7 @@ import ProjectDropdown from '~/jira_connect/branches/components/project_dropdown import { PROJECTS_PER_PAGE } from '~/jira_connect/branches/constants'; import getProjectsQuery from '~/jira_connect/branches/graphql/queries/get_projects.query.graphql'; -const localVue = createLocalVue(); - -const mockProjects = [ - { - id: 'test', - name: 'test', - nameWithNamespace: 'test', - avatarUrl: 'https://gitlab.com', - path: 'test-path', - fullPath: 'test-path', - repository: { - empty: false, - }, - }, - { - id: 'gitlab', - name: 'GitLab', - nameWithNamespace: 'gitlab-org/gitlab', - avatarUrl: 'https://gitlab.com', - path: 'gitlab', - fullPath: 'gitlab-org/gitlab', - repository: { - empty: false, - }, - }, -]; +import { mockProjects } from '../mock_data'; const mockProjectsQueryResponse = { data: { @@ -57,12 +39,12 @@ describe('ProjectDropdown', () => { const findDropdown = () => wrapper.findComponent(GlDropdown); const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem); const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon); - const findDropdownItemByText = (text) => - findAllDropdownItems().wrappers.find((item) => item.text() === text); + const findDropdownItemByProjectId = (projectId) => + wrapper.find(`[data-testid="test-project-${projectId}"]`); const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType); function createMockApolloProvider({ mockGetProjectsQuery = mockGetProjectsQuerySuccess } = {}) { - localVue.use(VueApollo); + Vue.use(VueApollo); const mockApollo = createMockApollo([[getProjectsQuery, mockGetProjectsQuery]]); @@ -71,7 +53,6 @@ describe('ProjectDropdown', () => { function createComponent({ mockApollo, props, mountFn = shallowMount } = {}) { wrapper = mountFn(ProjectDropdown, { - localVue, apolloProvider: mockApollo || createMockApolloProvider(), propsData: props, }); @@ -101,25 +82,38 @@ describe('ProjectDropdown', () => { beforeEach(async () => { createComponent(); await waitForPromises(); - await wrapper.vm.$nextTick(); + await nextTick(); }); it('sets dropdown `loading` prop to `false`', () => { expect(findDropdown().props('loading')).toBe(false); }); - it('renders dropdown items', () => { + it('renders dropdown items with correct props', () => { const dropdownItems = findAllDropdownItems(); + const avatars = dropdownItems.wrappers.map((item) => item.findComponent(GlAvatarLabeled)); + const avatarAttributes = avatars.map((avatar) => avatar.attributes()); + const avatarProps = avatars.map((avatar) => avatar.props()); + expect(dropdownItems.wrappers).toHaveLength(mockProjects.length); - expect(dropdownItems.wrappers.map((item) => item.text())).toEqual( - mockProjects.map((project) => project.nameWithNamespace), + expect(avatarProps).toMatchObject( + mockProjects.map((project) => ({ + label: project.name, + subLabel: project.nameWithNamespace, + })), + ); + expect(avatarAttributes).toMatchObject( + mockProjects.map((project) => ({ + src: project.avatarUrl, + 'entity-name': project.name, + })), ); }); describe('when selecting a dropdown item', () => { - it('emits `change` event with the selected project name', async () => { + it('emits `change` event with the selected project', async () => { const mockProject = mockProjects[0]; - const itemToSelect = findDropdownItemByText(mockProject.nameWithNamespace); + const itemToSelect = findDropdownItemByProjectId(mockProject.id); await itemToSelect.vm.$emit('click'); expect(wrapper.emitted('change')[0]).toEqual([mockProject]); @@ -129,14 +123,14 @@ describe('ProjectDropdown', () => { describe('when `selectedProject` prop is specified', () => { const mockProject = mockProjects[0]; - beforeEach(async () => { + beforeEach(() => { wrapper.setProps({ selectedProject: mockProject, }); }); it('sets `isChecked` prop of the corresponding dropdown item to `true`', () => { - expect(findDropdownItemByText(mockProject.nameWithNamespace).props('isChecked')).toBe(true); + expect(findDropdownItemByProjectId(mockProject.id).props('isChecked')).toBe(true); }); it('sets dropdown text to `selectedBranchName` value', () => { |