@saooti/octopus-sdk 41.12.0-beta2 → 41.12.0

package/tests/components/composable/usePresentationItem.spec.ts

@@ -0,0 +1,163 @@
+import '@tests/mocks/i18n';
+
+vi.mock('@/api', () => ({
+    rubriquesApi: { getCachedRubrique: vi.fn() },
+}));
+
+import { rubriquesApi } from '@/api';
+import { usePresentationItem } from '@/components/composable/usePresentationItem';
+import { emptyEmissionData, Emission } from '@/stores/class/general/emission';
+import { emptyPodcastData, Podcast } from '@/stores/class/general/podcast';
+import { Rubrique } from '@/stores/class/rubrique/rubrique';
+import { useGeneralStore } from '@/stores/GeneralStore';
+import { state } from '@/stores/ParamSdkStore';
+import { setupPinia } from '@tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+function rubrique(rubriqueId: number, name: string, rubriquageId?: number): Rubrique {
+    return { rubriqueId, name, rubriquageId };
+}
+
+beforeEach(() => {
+    setupPinia();
+    state.presentationItems = { tags: 'none' };
+    vi.mocked(rubriquesApi.getCachedRubrique).mockReset();
+});
+
+describe('usePresentationItem', () => {
+    describe('tagsFor', () => {
+        it('returns undefined when tags type is none', async () => {
+            const { tagsFor } = usePresentationItem();
+            expect(await tagsFor(emptyEmissionData())).toBeUndefined();
+        });
+
+        describe('iab type', () => {
+            beforeEach(() => {
+                state.presentationItems.tags = 'iab';
+                useGeneralStore().storedUpdateCategories([
+                    { id: 1, name: 'News' },
+                    { id: 2, name: 'Sport' },
+                ]);
+            });
+
+            it('returns the names of categories matching the emission iabIds', async () => {
+                const { tagsFor } = usePresentationItem();
+                const emission: Emission = { ...emptyEmissionData(), iabIds: [2] };
+                expect(await tagsFor(emission)).toEqual(['Sport']);
+            });
+
+            it('reads iabIds from the podcast emission', async () => {
+                const { tagsFor } = usePresentationItem();
+                const podcast: Podcast = emptyPodcastData();
+                podcast.emission = { ...emptyEmissionData(), iabIds: [1, 2] };
+                expect(await tagsFor(podcast)).toEqual(['News', 'Sport']);
+            });
+        });
+
+        describe('rubrique type', () => {
+            beforeEach(() => {
+                state.presentationItems.tags = 'rubrique';
+            });
+
+            it('fetches tags for an emission rubriqueIds', async () => {
+                vi.mocked(rubriquesApi.getCachedRubrique).mockImplementation(
+                    (id) => Promise.resolve(rubrique(id, `Rubrique ${id}`))
+                );
+                const { tagsFor } = usePresentationItem();
+                const emission: Emission = { ...emptyEmissionData(), rubriqueIds: [1, 2] };
+                expect(await tagsFor(emission)).toEqual(['Rubrique 1', 'Rubrique 2']);
+            });
+
+            it('combines a podcast rubriqueIds with its emission rubriqueIds', async () => {
+                vi.mocked(rubriquesApi.getCachedRubrique).mockImplementation(
+                    (id) => Promise.resolve(rubrique(id, `Rubrique ${id}`))
+                );
+                const { tagsFor } = usePresentationItem();
+                const podcast: Podcast = emptyPodcastData();
+                podcast.rubriqueIds = [1];
+                podcast.emission = { ...emptyEmissionData(), rubriqueIds: [2] };
+                expect(await tagsFor(podcast)).toEqual(['Rubrique 1', 'Rubrique 2']);
+            });
+
+            it('filters rubriques by tagsRubriquageId when set', async () => {
+                vi.mocked(rubriquesApi.getCachedRubrique).mockImplementation((id) => {
+                    if (id === 1) { return Promise.resolve(rubrique(1, 'Kept', 10)); }
+                    return Promise.resolve(rubrique(2, 'Discarded', 20));
+                });
+                state.presentationItems.tagsRubriquageId = 10;
+                const { tagsFor } = usePresentationItem();
+                const emission: Emission = { ...emptyEmissionData(), rubriqueIds: [1, 2] };
+                expect(await tagsFor(emission)).toEqual(['Kept']);
+            });
+        });
+
+        it('limits the number of tags when tagsLimit is set', async () => {
+            state.presentationItems.tags = 'iab';
+            state.presentationItems.tagsLimit = 1;
+            useGeneralStore().storedUpdateCategories([
+                { id: 1, name: 'News' },
+                { id: 2, name: 'Sport' },
+            ]);
+            const { tagsFor } = usePresentationItem();
+            const emission: Emission = { ...emptyEmissionData(), iabIds: [1, 2] };
+            expect(await tagsFor(emission)).toEqual(['News']);
+        });
+    });
+
+    describe('additionalInfoFor', () => {
+        it('returns undefined when additionalInfo is not configured', () => {
+            const { additionalInfoFor } = usePresentationItem();
+            expect(additionalInfoFor(emptyEmissionData())).toBeUndefined();
+        });
+
+        it('returns undefined when additionalInfo is empty', () => {
+            state.presentationItems.additionalInfo = [];
+            const { additionalInfoFor } = usePresentationItem();
+            expect(additionalInfoFor(emptyEmissionData())).toBeUndefined();
+        });
+
+        it('resolves productor from the emission organisation name for an emission', () => {
+            state.presentationItems.additionalInfo = ['productor'];
+            const { additionalInfoFor } = usePresentationItem();
+            const emission: Emission = { ...emptyEmissionData(), orga: { id: '1', name: 'Saooti', imageUrl: '' } };
+            expect(additionalInfoFor(emission)).toEqual(['Saooti']);
+        });
+
+        it('resolves productor from the podcast emission organisation name', () => {
+            state.presentationItems.additionalInfo = ['productor'];
+            const { additionalInfoFor } = usePresentationItem();
+            const podcast: Podcast = emptyPodcastData();
+            podcast.emission = { ...emptyEmissionData(), orga: { id: '1', name: 'Saooti', imageUrl: '' } };
+            expect(additionalInfoFor(podcast)).toEqual(['Saooti']);
+        });
+
+        it('formats the podcast pubDate for the date info', () => {
+            state.presentationItems.additionalInfo = ['date'];
+            const { additionalInfoFor } = usePresentationItem();
+            const podcast: Podcast = emptyPodcastData();
+            podcast.pubDate = '2025-12-01T10:21:31.000+00:00';
+            expect(additionalInfoFor(podcast)).toEqual(['1 décembre 2025']);
+        });
+
+        it('omits the date info for an emission (no pubDate)', () => {
+            state.presentationItems.additionalInfo = ['date'];
+            const { additionalInfoFor } = usePresentationItem();
+            expect(additionalInfoFor(emptyEmissionData())).toEqual([]);
+        });
+
+        it('omits the date info for a podcast without a pubDate', () => {
+            state.presentationItems.additionalInfo = ['date'];
+            const { additionalInfoFor } = usePresentationItem();
+            expect(additionalInfoFor(emptyPodcastData())).toEqual([]);
+        });
+
+        it('combines multiple info entries in order', () => {
+            state.presentationItems.additionalInfo = ['date', 'productor'];
+            const { additionalInfoFor } = usePresentationItem();
+            const podcast: Podcast = emptyPodcastData();
+            podcast.pubDate = '2025-12-01T10:21:31.000+00:00';
+            podcast.emission = { ...emptyEmissionData(), orga: { id: '1', name: 'Saooti', imageUrl: '' } };
+            expect(additionalInfoFor(podcast)).toEqual(['1 décembre 2025', 'Saooti']);
+        });
+    });
+});

package/tests/components/display/emission/EmissionPresentationItem.spec.ts

@@ -0,0 +1,45 @@
+import '@tests/mocks/i18n';
+
+const tagsFor = vi.fn();
+const additionalInfoFor = vi.fn();
+
+vi.mock('@/components/composable/usePresentationItem', () => ({
+    usePresentationItem: () => ({ tagsFor, additionalInfoFor }),
+}));
+
+import EmissionPresentationItem from '@/components/display/emission/EmissionPresentationItem.vue';
+import { emptyEmissionData } from '@/stores/class/general/emission';
+import { mount as testMount } from '@tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { nextTick } from 'vue';
+
+const mount = (props: Record<string, unknown>) => testMount(EmissionPresentationItem, { shallow: true, props });
+
+beforeEach(() => {
+    tagsFor.mockReset().mockResolvedValue([]);
+    additionalInfoFor.mockReset().mockReturnValue(undefined);
+});
+
+describe('EmissionPresentationItem', () => {
+    it('calls tagsFor with the emission prop', async () => {
+        const emission = { ...emptyEmissionData(), emissionId: 42 };
+        await mount({ emission });
+        expect(tagsFor).toHaveBeenCalledWith(emission);
+    });
+
+    it('resolves tagsFor asynchronously and forwards the result as the tags prop', async () => {
+        tagsFor.mockResolvedValue(['News']);
+        const wrapper = await mount({ emission: emptyEmissionData() });
+        await nextTick();
+        await nextTick();
+        const presentationItem = wrapper.findComponent({ name: 'PresentationItem' });
+        expect(presentationItem.props('tags')).toEqual(['News']);
+    });
+
+    it('forwards additionalInfoFor result as the additional-info prop', async () => {
+        additionalInfoFor.mockReturnValue(['Saooti']);
+        const wrapper = await mount({ emission: emptyEmissionData() });
+        const presentationItem = wrapper.findComponent({ name: 'PresentationItem' });
+        expect(presentationItem.props('additionalInfo')).toEqual(['Saooti']);
+    });
+});

package/tests/components/display/podcasts/PodcastPresentationList.spec.ts

@@ -0,0 +1,107 @@
+import '@tests/mocks/i18n';
+import '@tests/mocks/useRouter';
+
+vi.mock('@/api/classicApi', () => ({
+    default: { fetchData: vi.fn() },
+}));
+vi.mock('@/api/podcastApi', () => ({
+    podcastApi: { search: vi.fn() },
+    PodcastSort: { DATE: 'DATE' },
+}));
+
+const tagsFor = vi.fn();
+const additionalInfoFor = vi.fn();
+vi.mock('@/components/composable/usePresentationItem', () => ({
+    usePresentationItem: () => ({ tagsFor, additionalInfoFor }),
+}));
+
+import classicApi from '@/api/classicApi';
+import { podcastApi } from '@/api/podcastApi';
+import PodcastPresentationList from '@/components/display/podcasts/PodcastPresentationList.vue';
+import { emptyEmissionData, Emission } from '@/stores/class/general/emission';
+import { PodcastType, SimplifiedPodcast } from '@/stores/class/general/podcast';
+import { mount as testMount } from '@tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { flushPromises } from '@vue/test-utils';
+
+function makeEmission(emissionId: number): Emission {
+    return { ...emptyEmissionData(), emissionId, name: `Emission ${emissionId}`, orga: { id: 'org-1', name: 'Orga', imageUrl: '' } };
+}
+
+function makeSimplifiedPodcast(emissionId: number, podcastId: number, pubDate: string): SimplifiedPodcast {
+    return {
+        podcastId,
+        emissionId,
+        organisationId: 'org-1',
+        audioUrl: '',
+        audioStorageUrl: '',
+        article: '',
+        imageUrl: '',
+        title: `Podcast ${podcastId}`,
+        description: undefined,
+        tags: [],
+        beneficiaries: [],
+        availability: { visibility: true, date: undefined },
+        monetisable: 'UNDEFINED',
+        pubDate,
+        conferenceId: undefined,
+        duration: 0,
+        seasonEpisodeType: PodcastType.FULL,
+    };
+}
+
+const mount = (props: Record<string, unknown> = {}) => testMount(PodcastPresentationList, {
+    props,
+    stubs: ['PresentationItem', 'PodcastPlayButton'],
+});
+
+beforeEach(() => {
+    tagsFor.mockReset();
+    additionalInfoFor.mockReset().mockReturnValue(undefined);
+});
+
+describe('PodcastPresentationList', () => {
+    it('populates the tags prop of each item once tagsFor resolves', async () => {
+        vi.mocked(classicApi.fetchData).mockResolvedValue({ count: 1, sort: '', result: [makeEmission(1)] });
+        vi.mocked(podcastApi.search).mockResolvedValue({
+            count: 1, sort: '', result: [makeSimplifiedPodcast(1, 10, '2025-01-01T00:00:00.000Z')],
+        });
+        tagsFor.mockResolvedValue(['News']);
+
+        const wrapper = await mount();
+        await flushPromises();
+
+        const items = wrapper.findAllComponents({ name: 'PresentationItem' });
+        expect(items).toHaveLength(1);
+        expect(items[0].props('tags')).toEqual(['News']);
+    });
+
+    it('fetches tags only once per podcast', async () => {
+        vi.mocked(classicApi.fetchData).mockResolvedValue({ count: 1, sort: '', result: [makeEmission(1)] });
+        vi.mocked(podcastApi.search).mockResolvedValue({
+            count: 1, sort: '', result: [makeSimplifiedPodcast(1, 10, '2025-01-01T00:00:00.000Z')],
+        });
+        tagsFor.mockResolvedValue(['News']);
+
+        await mount();
+        await flushPromises();
+        await flushPromises();
+
+        expect(tagsFor).toHaveBeenCalledTimes(1);
+    });
+
+    it('forwards additionalInfoFor result as the additional-info prop of each item', async () => {
+        vi.mocked(classicApi.fetchData).mockResolvedValue({ count: 1, sort: '', result: [makeEmission(1)] });
+        vi.mocked(podcastApi.search).mockResolvedValue({
+            count: 1, sort: '', result: [makeSimplifiedPodcast(1, 10, '2025-01-01T00:00:00.000Z')],
+        });
+        tagsFor.mockResolvedValue([]);
+        additionalInfoFor.mockReturnValue(['Orga']);
+
+        const wrapper = await mount();
+        await flushPromises();
+
+        const items = wrapper.findAllComponents({ name: 'PresentationItem' });
+        expect(items[0].props('additionalInfo')).toEqual(['Orga']);
+    });
+});

package/tests/components/form/ClassicButtonGroup.spec.ts

@@ -49,4 +49,30 @@ describe('ClassicButtonGroup', () => {
         await wrapper.findAll('button')[0].trigger('click');
         expect(wrapper.emitted('update:value')).toBeUndefined();
     });
+
+    describe('solo prop', () => {
+        it('emits only the clicked value when clicking an inactive button', async () => {
+            const wrapper = await mount(ClassicButtonGroup, {
+                props: { options, value: ['PODCAST'], solo: true },
+            });
+            await wrapper.findAll('button')[1].trigger('click');
+            expect(wrapper.emitted('update:value')?.[0]).toEqual([['VIDEO']]);
+        });
+
+        it('emits only the clicked value when clicking the already active button', async () => {
+            const wrapper = await mount(ClassicButtonGroup, {
+                props: { options, value: ['PODCAST'], solo: true },
+            });
+            await wrapper.findAll('button')[0].trigger('click');
+            expect(wrapper.emitted('update:value')?.[0]).toEqual([['PODCAST']]);
+        });
+
+        it('replaces multiple active values with the clicked one', async () => {
+            const wrapper = await mount(ClassicButtonGroup, {
+                props: { options, value: ['PODCAST', 'VIDEO'], solo: true },
+            });
+            await wrapper.findAll('button')[2].trigger('click');
+            expect(wrapper.emitted('update:value')?.[0]).toEqual([['LIVE']]);
+        });
+    });
 });

package/tests/components/form/OctopusMultiselect.spec.ts

@@ -3,6 +3,7 @@ import '@tests/mocks/i18n';
 import OctopusMultiselect from '@/components/form/OctopusMultiselect.vue';
 import { DOMWrapper, type VueWrapper } from '@vue/test-utils';
 import { mount } from '@tests/utils';
+import { nextTick } from 'vue';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 const options = [
@@ -16,6 +17,20 @@ function getDropdown(): Element | null {
     return document.body.querySelector('.octopus-multiselect-dropdown');
 }
 
+function getOptionLabels(): (string | undefined)[] {
+    return Array.from(document.body.querySelectorAll('.octopus-multiselect-options label'))
+        .map((l) => l.textContent?.trim());
+}
+
+// Simulates a click outside the component to trigger onClickOutside's closeDropdown.
+async function clickOutside(): Promise<void> {
+    const outsideElement = document.createElement('div');
+    document.body.appendChild(outsideElement);
+    outsideElement.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+    await nextTick();
+    document.body.removeChild(outsideElement);
+}
+
 describe('OctopusMultiselect', () => {
     // The dropdown teleports to .octopus-app, which is normally the app root (see App.vue).
     // It doesn't exist in the test DOM, so it must be created before mount.
@@ -204,4 +219,287 @@ describe('OctopusMultiselect', () => {
         await new DOMWrapper(allCheckbox).trigger('input');
         expect(wrapper.emitted('update:selected')?.[0]).toEqual([[]]);
     });
+
+    describe('pullSelectedToTop', () => {
+        it('does not reorder options when pullSelectedToTop is not set', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options, optionLabel: 'name', selected: [options[1]] },
+            });
+            await wrapper.find('input').trigger('focus');
+            expect(getOptionLabels()).toEqual(['Alpha', 'Beta', 'Gamma']);
+        });
+
+        it('moves the selected option to the top when pullSelectedToTop is true', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options, optionLabel: 'name', selected: [options[1]], pullSelectedToTop: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            expect(getOptionLabels()).toEqual(['Beta', 'Alpha', 'Gamma']);
+        });
+
+        it('preserves relative order within pinned and unpinned groups', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options, optionLabel: 'name', selected: [options[2], options[0]], pullSelectedToTop: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            expect(getOptionLabels()).toEqual(['Alpha', 'Gamma', 'Beta']);
+        });
+
+        it('does not reorder while the dropdown stays open as selection changes', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options, optionLabel: 'name', selected: [], pullSelectedToTop: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            const optionCheckboxes = document.body.querySelectorAll('.octopus-multiselect-options input[type="checkbox"]');
+            await new DOMWrapper(optionCheckboxes[2] as Element).trigger('input');
+            await wrapper.setProps({ selected: [options[2]] });
+            expect(getOptionLabels()).toEqual(['Alpha', 'Beta', 'Gamma']);
+        });
+
+        it('re-pins using the latest selection after closing and reopening', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options, optionLabel: 'name', selected: [options[2]], pullSelectedToTop: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            await clickOutside();
+            await wrapper.find('input').trigger('focus');
+            expect(getOptionLabels()).toEqual(['Gamma', 'Alpha', 'Beta']);
+        });
+
+        it('pins by optionKey even when selected objects are different references', async () => {
+            const selected = [{ id: 2, name: 'Beta' }];
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options, optionLabel: 'name', optionKey: 'id', selected, pullSelectedToTop: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            expect(getOptionLabels()).toEqual(['Beta', 'Alpha', 'Gamma']);
+        });
+
+        it('still respects the active search filter when pinning', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options, optionLabel: 'name', selected: [options[2]], pullSelectedToTop: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            await wrapper.find('input').setValue('be');
+            await wrapper.find('input').trigger('input');
+            expect(getOptionLabels()).toEqual(['Beta']);
+        });
+
+        it('keeps a selected custom value pinned alongside allowCustomValue', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: {
+                    options: ['Alpha', 'Beta', 'Gamma'],
+                    selected: ['Delta'],
+                    allowCustomValue: true,
+                    pullSelectedToTop: true,
+                },
+            });
+            await wrapper.find('input').trigger('focus');
+            expect(getOptionLabels()).toEqual(['Delta', 'Alpha', 'Beta', 'Gamma']);
+        });
+    });
+
+    describe('with string options', () => {
+        const stringOptions = ['Alpha', 'Beta', 'Gamma'];
+
+        it('uses each string as its own label without optionLabel', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions },
+            });
+            await wrapper.find('input').trigger('focus');
+            const labels = document.body.querySelectorAll('.octopus-multiselect-options label');
+            expect(Array.from(labels).map((l) => l.textContent?.trim())).toEqual(stringOptions);
+        });
+
+        it('emits update:selected when toggling a string option', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: [] },
+            });
+            await wrapper.find('input').trigger('focus');
+            const optionCheckboxes = document.body.querySelectorAll('.octopus-multiselect-options input[type="checkbox"]');
+            await new DOMWrapper(optionCheckboxes[0] as Element).trigger('input');
+            expect(wrapper.emitted('update:selected')?.[0]).toEqual([['Alpha']]);
+        });
+
+        it('deselects an already-selected string option', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: ['Alpha'] },
+            });
+            await wrapper.find('input').trigger('focus');
+            const optionCheckboxes = document.body.querySelectorAll('.octopus-multiselect-options input[type="checkbox"]');
+            await new DOMWrapper(optionCheckboxes[0] as Element).trigger('input');
+            expect(wrapper.emitted('update:selected')?.[0]).toEqual([[]]);
+        });
+
+        it('filters string options locally by search query', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions },
+            });
+            await wrapper.find('input').trigger('focus');
+            await wrapper.find('input').setValue('al');
+            await wrapper.find('input').trigger('input');
+            const checkboxes = document.body.querySelectorAll('.octopus-multiselect-options input[type="checkbox"]');
+            expect(checkboxes).toHaveLength(1);
+        });
+
+        it('toggleAll selects all displayed string options', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: [] },
+            });
+            await wrapper.find('input').trigger('focus');
+            const allCheckbox = document.body.querySelector('.octopus-multiselect-dropdown > .octopus-form-item input[type="checkbox"]')!;
+            await new DOMWrapper(allCheckbox).trigger('input');
+            expect(wrapper.emitted('update:selected')?.[0]).toEqual([stringOptions]);
+        });
+
+        it('shows selected strings in the selection display', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: ['Alpha', 'Beta'] },
+            });
+            expect(wrapper.find('.octopus-multiselect-selection-text').text()).toBe('Alpha, Beta');
+        });
+
+        it('adds typed value as a new selection on Enter when allowCustomValue is true', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: [], allowCustomValue: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            await wrapper.find('input').setValue('Delta');
+            await wrapper.find('input').trigger('keydown.enter');
+            expect(wrapper.emitted('update:selected')?.[0]).toEqual([['Delta']]);
+        });
+
+        it('does not add typed value on Enter when allowCustomValue is not set', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: [] },
+            });
+            await wrapper.find('input').trigger('focus');
+            await wrapper.find('input').setValue('Delta');
+            await wrapper.find('input').trigger('keydown.enter');
+            expect(wrapper.emitted('update:selected')).toBeUndefined();
+        });
+
+        it('does not add an empty or whitespace-only value on Enter', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: [], allowCustomValue: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            await wrapper.find('input').setValue('   ');
+            await wrapper.find('input').trigger('keydown.enter');
+            expect(wrapper.emitted('update:selected')).toBeUndefined();
+        });
+
+        it('does not duplicate an already-selected value on Enter', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: ['Alpha'], allowCustomValue: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            await wrapper.find('input').setValue('Alpha');
+            await wrapper.find('input').trigger('keydown.enter');
+            expect(wrapper.emitted('update:selected')).toBeUndefined();
+        });
+
+        it('clears the search input after adding a custom value on Enter', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: [], allowCustomValue: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            await wrapper.find('input').setValue('Delta');
+            await wrapper.find('input').trigger('keydown.enter');
+            expect((wrapper.find('input').element as HTMLInputElement).value).toBe('');
+        });
+
+        it('shows a previously added custom value as a checked option in the dropdown', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: ['Delta'], allowCustomValue: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            const labels = Array.from(document.body.querySelectorAll('.octopus-multiselect-options label'))
+                .map((l) => l.textContent?.trim());
+            expect(labels).toContain('Delta');
+            const checkboxes = document.body.querySelectorAll('.octopus-multiselect-options input[type="checkbox"]');
+            expect((checkboxes[labels.indexOf('Delta')] as HTMLInputElement).checked).toBe(true);
+        });
+
+        it('shows the checkbox for a value right after it is added via Enter', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: [], allowCustomValue: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            await wrapper.find('input').setValue('Delta');
+            await wrapper.find('input').trigger('keydown.enter');
+            const emittedSelected = wrapper.emitted('update:selected')?.[0]?.[0] as string[];
+            await wrapper.setProps({ selected: emittedSelected });
+            const labels = Array.from(document.body.querySelectorAll('.octopus-multiselect-options label'))
+                .map((l) => l.textContent?.trim());
+            expect(labels).toContain('Delta');
+        });
+
+        it('does not show out-of-options selected values in the dropdown when allowCustomValue is not set', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: ['Delta'] },
+            });
+            await wrapper.find('input').trigger('focus');
+            const labels = Array.from(document.body.querySelectorAll('.octopus-multiselect-options label'))
+                .map((l) => l.textContent?.trim());
+            expect(labels).not.toContain('Delta');
+        });
+
+        it('deselects a custom value when its checkbox in the dropdown is toggled off', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: ['Alpha', 'Delta'], allowCustomValue: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            const checkboxes = document.body.querySelectorAll('.octopus-multiselect-options input[type="checkbox"]');
+            // visibleOptions = [Alpha, Beta, Gamma, Delta] — Delta is the appended custom entry
+            await new DOMWrapper(checkboxes[3] as Element).trigger('input');
+            expect(wrapper.emitted('update:selected')?.[0]).toEqual([['Alpha']]);
+        });
+
+        it('toggleAll includes an already-selected custom value shown in the dropdown', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: ['Delta'], allowCustomValue: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            const allCheckbox = document.body.querySelector('.octopus-multiselect-dropdown > .octopus-form-item input[type="checkbox"]')!;
+            await new DOMWrapper(allCheckbox).trigger('input');
+            const emitted = wrapper.emitted('update:selected')?.[0]?.[0] as string[];
+            expect(emitted).toHaveLength(4);
+            expect(emitted).toEqual(expect.arrayContaining(['Alpha', 'Beta', 'Gamma', 'Delta']));
+        });
+
+        it('shows a hint to press Enter when allowCustomValue is true and text is typed', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, allowCustomValue: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            await wrapper.find('input').setValue('Delta');
+            await wrapper.find('input').trigger('input');
+            const hints = Array.from(document.body.querySelectorAll('.octopus-multiselect-options .text-indic'))
+                .map((el) => el.textContent?.trim());
+            expect(hints).toContain('Press Enter to add this value');
+        });
+
+        it('does not show the Enter hint when allowCustomValue is not set', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions },
+            });
+            await wrapper.find('input').trigger('focus');
+            await wrapper.find('input').setValue('Delta');
+            await wrapper.find('input').trigger('input');
+            const hints = Array.from(document.body.querySelectorAll('.octopus-multiselect-options .text-indic'))
+                .map((el) => el.textContent?.trim());
+            expect(hints).not.toContain('Press Enter to add this value');
+        });
+
+        it('does not show the Enter hint when the search input is empty', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, allowCustomValue: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            const hints = Array.from(document.body.querySelectorAll('.octopus-multiselect-options .text-indic'))
+                .map((el) => el.textContent?.trim());
+            expect(hints).not.toContain('Press Enter to add this value');
+        });
+    });
 });