1 files changed, 22 insertions, 11 deletions

diff --git a/spec/frontend/invite_members/components/group_select_spec.js b/spec/frontend/invite_members/components/group_select_spec.js
index 2a6985de136..2ef8fe07650 100644
--- a/spec/frontend/invite_members/components/group_select_spec.js
+++ b/spec/frontend/invite_members/components/group_select_spec.js
@@ -1,22 +1,22 @@
-import { GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
+import { GlAvatarLabeled, GlDropdown, GlSearchBoxByType } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import waitForPromises from 'helpers/wait_for_promises';
-import Api from '~/api';
+import * as groupsApi from '~/api/groups_api';
 import GroupSelect from '~/invite_members/components/group_select.vue';
 
 const createComponent = () => {
   return mount(GroupSelect, {});
 };
 
-const group1 = { id: 1, full_name: 'Group One' };
-const group2 = { id: 2, full_name: 'Group Two' };
+const group1 = { id: 1, full_name: 'Group One', avatar_url: 'test' };
+const group2 = { id: 2, full_name: 'Group Two', avatar_url: 'test' };
 const allGroups = [group1, group2];
 
 describe('GroupSelect', () => {
   let wrapper;
 
   beforeEach(() => {
-    jest.spyOn(Api, 'groups').mockResolvedValue(allGroups);
+    jest.spyOn(groupsApi, 'getGroups').mockResolvedValue(allGroups);
 
     wrapper = createComponent();
   });
@@ -29,10 +29,10 @@ describe('GroupSelect', () => {
   const findSearchBoxByType = () => wrapper.findComponent(GlSearchBoxByType);
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findDropdownToggle = () => findDropdown().find('button[aria-haspopup="true"]');
-  const findDropdownItemByText = (text) =>
+  const findAvatarByLabel = (text) =>
     wrapper
-      .findAllComponents(GlDropdownItem)
-      .wrappers.find((dropdownItemWrapper) => dropdownItemWrapper.text() === text);
+      .findAllComponents(GlAvatarLabeled)
+      .wrappers.find((dropdownItemWrapper) => dropdownItemWrapper.props('label') === text);
 
   it('renders GlSearchBoxByType with default attributes', () => {
     expect(findSearchBoxByType().exists()).toBe(true);
@@ -45,7 +45,7 @@ describe('GroupSelect', () => {
     let resolveApiRequest;
 
     beforeEach(() => {
-      jest.spyOn(Api, 'groups').mockImplementation(
+      jest.spyOn(groupsApi, 'getGroups').mockImplementation(
         () =>
           new Promise((resolve) => {
             resolveApiRequest = resolve;
@@ -58,7 +58,7 @@ describe('GroupSelect', () => {
     it('calls the API', () => {
       resolveApiRequest({ data: allGroups });
 
-      expect(Api.groups).toHaveBeenCalledWith(group1.name, {
+      expect(groupsApi.getGroups).toHaveBeenCalledWith(group1.name, {
         active: true,
         exclude_internal: true,
       });
@@ -74,9 +74,20 @@ describe('GroupSelect', () => {
     });
   });
 
+  describe('avatar label', () => {
+    it('includes the correct attributes with name and avatar_url', () => {
+      expect(findAvatarByLabel(group1.full_name).attributes()).toMatchObject({
+        src: group1.avatar_url,
+        'entity-id': `${group1.id}`,
+        'entity-name': group1.full_name,
+        size: '32',
+      });
+    });
+  });
+
   describe('when group is selected from the dropdown', () => {
     beforeEach(() => {
-      findDropdownItemByText(group1.full_name).vm.$emit('click');
+      findAvatarByLabel(group1.full_name).trigger('click');
     });
 
     it('emits `input` event used by `v-model`', () => {