Add latest changes from gitlab-org/gitlab@master

1 files changed, 115 insertions, 51 deletions

diff --git a/spec/frontend/listbox/index_spec.js b/spec/frontend/listbox/index_spec.js
index 07c6cca535a..c973960e683 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, getByRole, getByTestId } from '@testing-library/dom';
+import { GlDropdown, 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();
 
@@ -53,63 +39,141 @@ describe('initListbox', () => {
   });
 
   describe('given a valid element', () => {
-    let onChangeSpy;
+    describe('when `glListboxForSortDropdowns` FF is enabled', () => {
+      let onChangeSpy;
 
-    beforeEach(async () => {
-      setHTMLFixture(fixture);
-      onChangeSpy = jest.fn();
-      setup(document.querySelector('.js-redirect-listbox'), { onChange: onChangeSpy });
+      const listbox = () => createWrapper(instance).findComponent(GlListbox);
+      const findToggleButton = () => getByTestId(document.body, 'base-dropdown-toggle');
+      const findSelectedItems = () => getAllByRole(document.body, 'option', { selected: true });
 
-      await nextTick();
-    });
+      beforeEach(async () => {
+        window.gon.features = { glListboxForSortDropdowns: true };
+        setHTMLFixture(fixture);
+        onChangeSpy = jest.fn();
+        setup(document.querySelector('.js-redirect-listbox'), { onChange: onChangeSpy });
 
-    afterEach(() => {
-      resetHTMLFixture();
-    });
+        await nextTick();
+      });
 
-    it('returns an instance', () => {
-      expect(instance).not.toBe(null);
-    });
+      afterEach(() => {
+        resetHTMLFixture();
+      });
 
-    it('renders button with selected item text', () => {
-      expect(findToggleButton().textContent.trim()).toBe('Bar');
-    });
+      it('returns an instance', () => {
+        expect(instance).not.toBe(null);
+      });
 
-    it('has the correct item selected', () => {
-      const selectedItems = findSelectedItems();
-      expect(selectedItems).toHaveLength(1);
-      expect(selectedItems[0].textContent.trim()).toBe('Bar');
-    });
+      it('renders button with selected item text', () => {
+        expect(findToggleButton().textContent.trim()).toBe('Bar');
+      });
 
-    it('applies additional classes from the original element', () => {
-      expect(instance.$el.classList).toContain('test-class-1', 'test-class-2');
+      it('has the correct item selected', () => {
+        const selectedItems = findSelectedItems();
+        expect(selectedItems).toHaveLength(1);
+        expect(selectedItems[0].textContent.trim()).toBe('Bar');
+      });
+
+      it('applies additional classes from the original element', () => {
+        expect(instance.$el.classList).toContain('test-class-1', 'test-class-2');
+      });
+
+      describe.each(parsedAttributes.items)('selecting an item', (item) => {
+        beforeEach(async () => {
+          listbox().vm.$emit('select', item.value);
+          await nextTick();
+        });
+
+        it('calls the onChange callback with the item', () => {
+          expect(onChangeSpy).toHaveBeenCalledWith(item);
+        });
+
+        it('updates the toggle button text', () => {
+          expect(findToggleButton().textContent.trim()).toBe(item.text);
+        });
+
+        it('marks the item as selected', () => {
+          const selectedItems = findSelectedItems();
+          expect(selectedItems).toHaveLength(1);
+          expect(selectedItems[0].textContent.trim()).toBe(item.text);
+        });
+      });
+
+      it('passes the "right" prop through to the underlying component', () => {
+        expect(listbox().props('right')).toBe(parsedAttributes.right);
+      });
     });
 
-    describe.each(parsedAttributes.items)('clicking on an item', (item) => {
+    describe('when `glListboxForSortDropdowns` FF is disabled', () => {
+      let onChangeSpy;
+
+      const ITEM_ROLE = 'menuitem';
+      const dropdown = () => createWrapper(instance).findComponent(GlDropdown);
+
+      const findToggleButton = () => document.body.querySelector('.gl-dropdown-toggle');
+      const findItem = (text) => getByRole(document.body, ITEM_ROLE, { name: text });
+      const findItems = () => getAllByRole(document.body, ITEM_ROLE);
+      const findSelectedItems = () =>
+        findItems().filter(
+          (item) =>
+            !item
+              .querySelector('.gl-new-dropdown-item-check-icon')
+              .classList.contains('gl-visibility-hidden'),
+        );
       beforeEach(async () => {
-        findItem(item.text).click();
+        window.gon.features = { glListboxForSortDropdowns: false };
+        setHTMLFixture(fixture);
+        onChangeSpy = jest.fn();
+        setup(document.querySelector('.js-redirect-listbox'), { onChange: onChangeSpy });
 
         await nextTick();
       });
 
-      it('calls the onChange callback with the item', () => {
-        expect(onChangeSpy).toHaveBeenCalledWith(item);
+      afterEach(() => {
+        resetHTMLFixture();
+      });
+
+      it('returns an instance', () => {
+        expect(instance).not.toBe(null);
       });
 
-      it('updates the toggle button text', () => {
-        expect(findToggleButton().textContent.trim()).toBe(item.text);
+      it('renders button with selected item text', () => {
+        expect(findToggleButton().textContent.trim()).toBe('Bar');
       });
 
-      it('marks the item as selected', () => {
+      it('has the correct item selected', () => {
         const selectedItems = findSelectedItems();
         expect(selectedItems).toHaveLength(1);
-        expect(selectedItems[0].textContent.trim()).toBe(item.text);
+        expect(selectedItems[0].textContent.trim()).toBe('Bar');
+      });
+
+      it('applies additional classes from the original element', () => {
+        expect(instance.$el.classList).toContain('test-class-1', 'test-class-2');
       });
-    });
 
-    it('passes the "right" prop through to the underlying component', () => {
-      const wrapper = createWrapper(instance).findComponent(GlDropdown);
-      expect(wrapper.props('right')).toBe(parsedAttributes.right);
+      describe.each(parsedAttributes.items)('selecting an item', (item) => {
+        beforeEach(async () => {
+          findItem(item.text).click();
+          await nextTick();
+        });
+
+        it('calls the onChange callback with the item', () => {
+          expect(onChangeSpy).toHaveBeenCalledWith(item);
+        });
+
+        it('updates the toggle button text', () => {
+          expect(findToggleButton().textContent.trim()).toBe(item.text);
+        });
+
+        it('marks the item as selected', () => {
+          const selectedItems = findSelectedItems();
+          expect(selectedItems).toHaveLength(1);
+          expect(selectedItems[0].textContent.trim()).toBe(item.text);
+        });
+      });
+
+      it('passes the "right" prop through to the underlying component', () => {
+        expect(dropdown().props('right')).toBe(parsedAttributes.right);
+      });
     });
   });
 });