2 files changed, 94 insertions, 2 deletions

diff --git a/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js b/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js
index 364f0a2e372..4e0b546b3d2 100644
--- a/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js
+++ b/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js
@@ -153,6 +153,7 @@ describe('ProjectsDropdownFilter component', () => {
       beforeEach(() => {
         createComponent({
           mountFn: mountExtended,
+          props: blockDefaultProps,
         });
       });
 
@@ -168,14 +169,16 @@ describe('ProjectsDropdownFilter component', () => {
         expect(findSelectedProjectsLabel().text()).toBe(projects[0].name);
       });
 
-      it('renders the clear all button', () => {
+      it('renders the clear all button', async () => {
+        await selectDropdownItemAtIndex([0], false);
+
         expect(findClearAllButton().exists()).toBe(true);
       });
 
       it('clears all selected items when the clear all button is clicked', async () => {
         createComponent({
           mountFn: mountExtended,
-          props: { multiSelect: true },
+          props: blockDefaultProps,
         });
         await waitForPromises();
 
diff --git a/spec/frontend/lib/utils/listbox_helpers_spec.js b/spec/frontend/lib/utils/listbox_helpers_spec.js
new file mode 100644
index 00000000000..189aad41ceb
--- /dev/null
+++ b/spec/frontend/lib/utils/listbox_helpers_spec.js
@@ -0,0 +1,89 @@
+import { getSelectedOptionsText } from '~/lib/utils/listbox_helpers';
+
+describe('getSelectedOptionsText', () => {
+  it('returns an empty string per default when no options are selected', () => {
+    const options = [
+      { id: 1, text: 'first' },
+      { id: 2, text: 'second' },
+    ];
+    const selected = [];
+
+    expect(getSelectedOptionsText({ options, selected })).toBe('');
+  });
+
+  it('returns the provided placeholder when no options are selected', () => {
+    const options = [
+      { id: 1, text: 'first' },
+      { id: 2, text: 'second' },
+    ];
+    const selected = [];
+    const placeholder = 'placeholder';
+
+    expect(getSelectedOptionsText({ options, selected, placeholder })).toBe(placeholder);
+  });
+
+  describe('maxOptionsShown is not provided', () => {
+    it('returns the text of the first selected option when only one option is selected', () => {
+      const options = [{ id: 1, text: 'first' }];
+      const selected = [options[0].id];
+
+      expect(getSelectedOptionsText({ options, selected })).toBe('first');
+    });
+
+    it('should also work with the value property', () => {
+      const options = [{ value: 1, text: 'first' }];
+      const selected = [options[0].value];
+
+      expect(getSelectedOptionsText({ options, selected })).toBe('first');
+    });
+
+    it.each`
+      options                                                                            | expectedText
+      ${[{ id: 1, text: 'first' }, { id: 2, text: 'second' }]}                           | ${'first +1 more'}
+      ${[{ id: 1, text: 'first' }, { id: 2, text: 'second' }, { id: 3, text: 'third' }]} | ${'first +2 more'}
+    `(
+      'returns "$expectedText" when more than one option is selected',
+      ({ options, expectedText }) => {
+        const selected = options.map(({ id }) => id);
+
+        expect(getSelectedOptionsText({ options, selected })).toBe(expectedText);
+      },
+    );
+  });
+
+  describe('maxOptionsShown > 1', () => {
+    const options = [
+      { id: 1, text: 'first' },
+      { id: 2, text: 'second' },
+      { id: 3, text: 'third' },
+      { id: 4, text: 'fourth' },
+      { id: 5, text: 'fifth' },
+    ];
+
+    it.each`
+      selected           | maxOptionsShown | expectedText
+      ${[1]}             | ${2}            | ${'first'}
+      ${[1, 2]}          | ${2}            | ${'first, second'}
+      ${[1, 2, 3]}       | ${2}            | ${'first, second +1 more'}
+      ${[1, 2, 3]}       | ${3}            | ${'first, second, third'}
+      ${[1, 2, 3, 4]}    | ${3}            | ${'first, second, third +1 more'}
+      ${[1, 2, 3, 4, 5]} | ${3}            | ${'first, second, third +2 more'}
+    `(
+      'returns "$expectedText" when "$selected.length" options are selected and maxOptionsShown is "$maxOptionsShown"',
+      ({ selected, maxOptionsShown, expectedText }) => {
+        expect(getSelectedOptionsText({ options, selected, maxOptionsShown })).toBe(expectedText);
+      },
+    );
+  });
+
+  it('ignores selected options that are not in the options array', () => {
+    const options = [
+      { id: 1, text: 'first' },
+      { id: 2, text: 'second' },
+    ];
+    const invalidOption = { id: 3, text: 'third' };
+    const selected = [options[0].id, options[1].id, invalidOption.id];
+
+    expect(getSelectedOptionsText({ options, selected })).toBe('first +1 more');
+  });
+});