1 files changed, 35 insertions, 1 deletions
diff --git a/spec/frontend/header_search/components/header_search_scoped_items_spec.js b/spec/frontend/header_search/components/header_search_scoped_items_spec.js
index f0e5e182ec4..a65b4d8b813 100644
--- a/spec/frontend/header_search/components/header_search_scoped_items_spec.js
+++ b/spec/frontend/header_search/components/header_search_scoped_items_spec.js
@@ -11,7 +11,7 @@ Vue.use(Vuex);
 describe('HeaderSearchScopedItems', () => {
   let wrapper;
 
-  const createComponent = (initialState) => {
+  const createComponent = (initialState, props) => {
     const store = new Vuex.Store({
       state: {
         search: MOCK_SEARCH,
@@ -24,6 +24,9 @@ describe('HeaderSearchScopedItems', () => {
 
     wrapper = shallowMount(HeaderSearchScopedItems, {
       store,
+      propsData: {
+        ...props,
+      },
     });
   };
 
@@ -32,7 +35,10 @@ describe('HeaderSearchScopedItems', () => {
   });
 
   const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findFirstDropdownItem = () => findDropdownItems().at(0);
   const findDropdownItemTitles = () => findDropdownItems().wrappers.map((w) => trimText(w.text()));
+  const findDropdownItemAriaLabels = () =>
+    findDropdownItems().wrappers.map((w) => trimText(w.attributes('aria-label')));
   const findDropdownItemLinks = () => findDropdownItems().wrappers.map((w) => w.attributes('href'));
 
   describe('template', () => {
@@ -52,10 +58,38 @@ describe('HeaderSearchScopedItems', () => {
         expect(findDropdownItemTitles()).toStrictEqual(expectedTitles);
       });
 
+      it('renders aria-labels correctly', () => {
+        const expectedLabels = MOCK_SCOPED_SEARCH_OPTIONS.map((o) =>
+          trimText(`${MOCK_SEARCH} ${o.description} ${o.scope || ''}`),
+        );
+        expect(findDropdownItemAriaLabels()).toStrictEqual(expectedLabels);
+      });
+
       it('renders links correctly', () => {
         const expectedLinks = MOCK_SCOPED_SEARCH_OPTIONS.map((o) => o.url);
         expect(findDropdownItemLinks()).toStrictEqual(expectedLinks);
       });
     });
+
+    describe.each`
+      currentFocusedOption             | isFocused | ariaSelected
+      ${null}                          | ${false}  | ${undefined}
+      ${{ html_id: 'not-a-match' }}    | ${false}  | ${undefined}
+      ${MOCK_SCOPED_SEARCH_OPTIONS[0]} | ${true}   | ${'true'}
+    `('isOptionFocused', ({ currentFocusedOption, isFocused, ariaSelected }) => {
+      describe(`when currentFocusedOption.html_id is ${currentFocusedOption?.html_id}`, () => {
+        beforeEach(() => {
+          createComponent({}, { currentFocusedOption });
+        });
+
+        it(`should${isFocused ? '' : ' not'} have gl-bg-gray-50 applied`, () => {
+          expect(findFirstDropdownItem().classes('gl-bg-gray-50')).toBe(isFocused);
+        });
+
+        it(`sets "aria-selected to ${ariaSelected}`, () => {
+          expect(findFirstDropdownItem().attributes('aria-selected')).toBe(ariaSelected);
+        });
+      });
+    });
   });
 });