1 files changed, 9 insertions, 21 deletions

diff --git a/spec/frontend/listbox/index_spec.js b/spec/frontend/listbox/index_spec.js
index 07c6cca535a..fd41531796b 100644
--- a/spec/frontend/listbox/index_spec.js
+++ b/spec/frontend/listbox/index_spec.js
@@ -1,6 +1,6 @@
 import { nextTick } from 'vue';
-import { getAllByRole, getByRole } from '@testing-library/dom';
-import { GlDropdown } from '@gitlab/ui';
+import { getAllByRole, getByTestId } from '@testing-library/dom';
+import { GlListbox } from '@gitlab/ui';
 import { createWrapper } from '@vue/test-utils';
 import { initListbox, parseAttributes } from '~/listbox';
 import { getFixture, setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
@@ -28,20 +28,6 @@ describe('initListbox', () => {
     instance = initListbox(...args);
   };
 
-  // TODO: Rewrite these finders to use better semantics once the
-  // implementation is switched to GlListbox
-  // https://gitlab.com/gitlab-org/gitlab/-/issues/348738
-  const findToggleButton = () => document.body.querySelector('.gl-dropdown-toggle');
-  const findItem = (text) => getByRole(document.body, 'menuitem', { name: text });
-  const findItems = () => getAllByRole(document.body, 'menuitem');
-  const findSelectedItems = () =>
-    findItems().filter(
-      (menuitem) =>
-        !menuitem
-          .querySelector('.gl-new-dropdown-item-check-icon')
-          .classList.contains('gl-visibility-hidden'),
-    );
-
   it('returns null given no element', () => {
     setup();
 
@@ -55,6 +41,10 @@ describe('initListbox', () => {
   describe('given a valid element', () => {
     let onChangeSpy;
 
+    const listbox = () => createWrapper(instance).findComponent(GlListbox);
+    const findToggleButton = () => getByTestId(document.body, 'base-dropdown-toggle');
+    const findSelectedItems = () => getAllByRole(document.body, 'option', { selected: true });
+
     beforeEach(async () => {
       setHTMLFixture(fixture);
       onChangeSpy = jest.fn();
@@ -85,10 +75,9 @@ describe('initListbox', () => {
       expect(instance.$el.classList).toContain('test-class-1', 'test-class-2');
     });
 
-    describe.each(parsedAttributes.items)('clicking on an item', (item) => {
+    describe.each(parsedAttributes.items)('selecting an item', (item) => {
       beforeEach(async () => {
-        findItem(item.text).click();
-
+        listbox().vm.$emit('select', item.value);
         await nextTick();
       });
 
@@ -108,8 +97,7 @@ describe('initListbox', () => {
     });
 
     it('passes the "right" prop through to the underlying component', () => {
-      const wrapper = createWrapper(instance).findComponent(GlDropdown);
-      expect(wrapper.props('right')).toBe(parsedAttributes.right);
+      expect(listbox().props('right')).toBe(parsedAttributes.right);
     });
   });
 });