1 files changed, 39 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js
index 64bfff3dfa1..8cc5d6775a7 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js
@@ -17,11 +17,14 @@ import RecentSearchesService from '~/filtered_search/services/recent_searches_se
 
 import {
   mockAvailableTokens,
+  mockMembershipToken,
+  mockMembershipTokenOptionsWithoutTitles,
   mockSortOptions,
   mockHistoryItems,
   tokenValueAuthor,
   tokenValueLabel,
   tokenValueMilestone,
+  tokenValueMembership,
 } from './mock_data';
 
 jest.mock('~/vue_shared/components/filtered_search_bar/filtered_search_utils', () => ({
@@ -412,6 +415,42 @@ describe('FilteredSearchBarRoot', () => {
       wrapperFullMount.destroy();
     });
 
+    describe('when token options have `title` attribute defined', () => {
+      it('renders search history items using the provided `title` attribute', async () => {
+        const wrapperFullMount = createComponent({
+          sortOptions: mockSortOptions,
+          tokens: [mockMembershipToken],
+          shallow: false,
+        });
+
+        wrapperFullMount.vm.recentSearchesStore.addRecentSearch([tokenValueMembership]);
+
+        await wrapperFullMount.vm.$nextTick();
+
+        expect(wrapperFullMount.find(GlDropdownItem).text()).toBe('Membership := Direct');
+
+        wrapperFullMount.destroy();
+      });
+    });
+
+    describe('when token options have do not have `title` attribute defined', () => {
+      it('renders search history items using the provided `value` attribute', async () => {
+        const wrapperFullMount = createComponent({
+          sortOptions: mockSortOptions,
+          tokens: [mockMembershipTokenOptionsWithoutTitles],
+          shallow: false,
+        });
+
+        wrapperFullMount.vm.recentSearchesStore.addRecentSearch([tokenValueMembership]);
+
+        await wrapperFullMount.vm.$nextTick();
+
+        expect(wrapperFullMount.find(GlDropdownItem).text()).toBe('Membership := exclude');
+
+        wrapperFullMount.destroy();
+      });
+    });
+
     it('renders sort dropdown component', () => {
       expect(wrapper.find(GlButtonGroup).exists()).toBe(true);
       expect(wrapper.find(GlDropdown).exists()).toBe(true);