Use GlAvatar in `group_item.vue`

app/assets/javascripts/groups/components/group_item.vue

 <script>
 import {
+  GlAvatar,
   GlLoadingIcon,
   GlBadge,
   GlIcon,
@@ -7,7 +8,6 @@ import {
   GlSafeHtmlDirective,
 } from '@gitlab/ui';
 import { visitUrl } from '~/lib/utils/url_utility';
-import identicon from '~/vue_shared/components/identicon.vue';
 import UserAccessRoleBadge from '~/vue_shared/components/user_access_role_badge.vue';
 import { VISIBILITY_TYPE_ICON, GROUP_VISIBILITY_TYPE } from '../constants';
 import eventHub from '../event_hub';
@@ -23,11 +23,11 @@ export default {
     SafeHtml: GlSafeHtmlDirective,
   },
   components: {
+    GlAvatar,
     GlBadge,
     GlLoadingIcon,
     GlIcon,
     UserAccessRoleBadge,
-    identicon,
     itemCaret,
     itemTypeIcon,
     itemStats,
@@ -125,21 +125,21 @@ export default {
         size="lg"
         class="d-none d-sm-inline-flex flex-shrink-0 gl-mr-3"
       />
-      <div
-        :class="{ 'd-sm-flex': !group.isChildrenLoading }"
-        class="avatar-container rect-avatar s32 d-none flex-grow-0 flex-shrink-0"
+      <a
+        :class="{ 'gl-sm-display-flex': !group.isChildrenLoading }"
+        class="gl-display-none gl-text-decoration-none! gl-mr-3"
+        :href="group.relativePath"
+        :aria-label="group.name"
       >
-        <a :href="group.relativePath" class="no-expand">
-          <img
-            v-if="hasAvatar"
-            :src="group.avatarUrl"
-            data-testid="group-avatar"
-            class="avatar s40"
-            :itemprop="microdata.imageItemprop"
-          />
-          <identicon v-else :entity-id="group.id" :entity-name="group.name" size-class="s40" />
-        </a>
-      </div>
+        <gl-avatar
+          shape="rect"
+          :entity-name="group.name"
+          :src="group.avatarUrl"
+          :alt="group.name"
+          :size="32"
+          :itemprop="microdata.imageItemprop"
+        />
+      </a>
       <div class="group-text-container d-flex flex-fill align-items-center">
         <div class="group-text flex-grow-1 flex-shrink-1">
           <div class="d-flex align-items-center flex-wrap title namespace-title gl-mr-3">

spec/features/groups/show_spec.rb

@@ -208,13 +208,13 @@ RSpec.describe 'Group show page' do
         expect(page).to have_selector('.content[itemscope][itemtype="https://schema.org/Organization"]')
 
         page.within('.group-home-panel') do
-          expect(page).to have_selector('img.avatar[itemprop="logo"]')
+          expect(page).to have_selector('[itemprop="logo"]')
           expect(page).to have_selector('[itemprop="name"]', text: group.name)
           expect(page).to have_selector('[itemprop="description"]', text: group.description)
         end
 
         page.within('[itemprop="owns"][itemtype="https://schema.org/SoftwareSourceCode"]') do
-          expect(page).to have_selector('img.avatar[itemprop="image"]')
+          expect(page).to have_selector('[itemprop="image"]')
           expect(page).to have_selector('[itemprop="name"]', text: project.name)
           expect(page).to have_selector('[itemprop="description"]', text: project.description)
         end
@@ -224,12 +224,12 @@ RSpec.describe 'Group show page' do
         el.click
         wait_for_all_requests
         page.within(el) do
-          expect(page).to have_selector('img.avatar[itemprop="logo"]')
+          expect(page).to have_selector('[itemprop="logo"]')
           expect(page).to have_selector('[itemprop="name"]', text: subgroup.name)
           expect(page).to have_selector('[itemprop="description"]', text: subgroup.description)
 
           page.within('[itemprop="owns"][itemtype="https://schema.org/SoftwareSourceCode"]') do
-            expect(page).to have_selector('img.avatar[itemprop="image"]')
+            expect(page).to have_selector('[itemprop="image"]')
             expect(page).to have_selector('[itemprop="name"]', text: subproject.name)
             expect(page).to have_selector('[itemprop="description"]', text: subproject.description)
           end

spec/frontend/groups/components/group_item_spec.js

@@ -236,13 +236,13 @@ describe('GroupItemComponent', () => {
   describe('schema.org props', () => {
     describe('when showSchemaMarkup is disabled on the group', () => {
       it.each(['itemprop', 'itemtype', 'itemscope'], 'it does not set %s', (attr) => {
-        expect(wrapper.vm.$el.getAttribute(attr)).toBeNull();
+        expect(wrapper.attributes(attr)).toBeUndefined();
       });
       it.each(
         ['.js-group-avatar', '.js-group-name', '.js-group-description'],
         'it does not set `itemprop` on sub-nodes',
         (selector) => {
-          expect(wrapper.vm.$el.querySelector(selector).getAttribute('itemprop')).toBeNull();
+          expect(wrapper.find(selector).attributes('itemprop')).toBeUndefined();
         },
       );
     });
@@ -263,16 +263,16 @@ describe('GroupItemComponent', () => {
         ${'itemtype'}  | ${'https://schema.org/Organization'}
         ${'itemprop'}  | ${'subOrganization'}
       `('it does set correct $attr', ({ attr, value } = {}) => {
-        expect(wrapper.vm.$el.getAttribute(attr)).toBe(value);
+        expect(wrapper.attributes(attr)).toBe(value);
       });
 
       it.each`
         selector                               | propValue
-        ${'[data-testid="group-avatar"]'}      | ${'logo'}
+        ${'img'}                               | ${'logo'}
         ${'[data-testid="group-name"]'}        | ${'name'}
         ${'[data-testid="group-description"]'} | ${'description'}
       `('it does set correct $selector', ({ selector, propValue } = {}) => {
-        expect(wrapper.vm.$el.querySelector(selector).getAttribute('itemprop')).toBe(propValue);
+        expect(wrapper.find(selector).attributes('itemprop')).toBe(propValue);
       });
     });
   });