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', () => {