2 files changed, 18 insertions, 4 deletions
diff --git a/spec/frontend/projects/settings/access_dropdown_spec.js b/spec/frontend/projects/settings/access_dropdown_spec.js
index 236968a3736..65b01172e7e 100644
--- a/spec/frontend/projects/settings/access_dropdown_spec.js
+++ b/spec/frontend/projects/settings/access_dropdown_spec.js
@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import AccessDropdown from '~/projects/settings/access_dropdown';
 import { LEVEL_TYPES } from '~/projects/settings/constants';
 
@@ -7,7 +8,7 @@ describe('AccessDropdown', () => {
   let dropdown;
 
   beforeEach(() => {
-    setFixtures(`
+    setHTMLFixture(`
       <div id="dummy-dropdown">
         <span class="dropdown-toggle-text"></span>
       </div>
@@ -28,6 +29,10 @@ describe('AccessDropdown', () => {
     dropdown = new AccessDropdown(options);
   });
 
+  afterEach(() => {
+    resetHTMLFixture();
+  });
+
   describe('toggleLabel', () => {
     let $dropdownToggleText;
     const dummyItems = [
diff --git a/spec/frontend/projects/settings/topics/components/topics_token_selector_spec.js b/spec/frontend/projects/settings/topics/components/topics_token_selector_spec.js
index dbea94cbd53..8b8e7d1454d 100644
--- a/spec/frontend/projects/settings/topics/components/topics_token_selector_spec.js
+++ b/spec/frontend/projects/settings/topics/components/topics_token_selector_spec.js
@@ -1,11 +1,11 @@
-import { GlTokenSelector, GlToken } from '@gitlab/ui';
+import { GlAvatarLabeled, GlTokenSelector, GlToken } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import TopicsTokenSelector from '~/projects/settings/topics/components/topics_token_selector.vue';
 
 const mockTopics = [
-  { id: 1, name: 'topic1', avatarUrl: 'avatar.com/topic1.png' },
-  { id: 2, name: 'GitLab', avatarUrl: 'avatar.com/GitLab.png' },
+  { id: 1, name: 'topic1', title: 'Topic 1', avatarUrl: 'avatar.com/topic1.png' },
+  { id: 2, name: 'GitLab', title: 'GitLab', avatarUrl: 'avatar.com/GitLab.png' },
 ];
 
 describe('TopicsTokenSelector', () => {
@@ -38,6 +38,8 @@ describe('TopicsTokenSelector', () => {
 
   const findTokenSelectorInput = () => findTokenSelector().find('input[type="text"]');
 
+  const findAllAvatars = () => wrapper.findAllComponents(GlAvatarLabeled).wrappers;
+
   const setTokenSelectorInputValue = (value) => {
     const tokenSelectorInput = findTokenSelectorInput();
 
@@ -81,6 +83,13 @@ describe('TopicsTokenSelector', () => {
         expect(tokenWrapper.text()).toBe(selected[index].name);
       });
     });
+
+    it('passes topic title to the avatar', async () => {
+      createComponent();
+      const avatars = findAllAvatars();
+
+      mockTopics.map((topic, index) => expect(avatars[index].text()).toBe(topic.title));
+    });
   });
 
   describe('when enter key is pressed', () => {