@saooti/octopus-sdk 41.11.0 → 41.12.0-beta

package/src/helper/equals.ts

@@ -1,20 +1,32 @@
 export function deepEqual(obj1: any, obj2: any) {
+    // it's just the same object. No need to compare.
+    if(obj1 === obj2)  {
+        return true;
+    }
 
-    if(obj1 === obj2) // it's just the same object. No need to compare.
-        {return true;}
+    // compare primitives
+    if(isPrimitive(obj1) && isPrimitive(obj2)) {
+        return obj1 === obj2;
+    }
 
-    if(isPrimitive(obj1) && isPrimitive(obj2)) // compare primitives
-        {return obj1 === obj2;}
+    // one is a primitive but not the other (for example undefined vs array)
+    if (isPrimitive(obj1) || isPrimitive(obj2)) {
+        return false;
+    }
 
     if(Object.keys(obj1).length !== Object.keys(obj2).length) {
         return false;
     }
 
     // compare objects with same number of keys
-    for(const key in obj1)
-    {
-        if(!(key in obj2)) {return false;} //other object doesn't have this prop
-        if(!deepEqual(obj1[key], obj2[key])) {return false;}
+    for(const key in obj1) {
+        //other object doesn't have this prop
+        if(!(key in obj2)) {
+            return false;
+        }
+        if(!deepEqual(obj1[key], obj2[key])) {
+            return false;
+        }
     }
 
     return true;
@@ -23,4 +35,4 @@ export function deepEqual(obj1: any, obj2: any) {
 //check if value is primitive
 function isPrimitive(obj: unknown) {
     return (obj !== Object(obj));
-}
+}

package/src/stores/class/general/podcast.ts

@@ -129,6 +129,14 @@ export function simplifiedToFull(simplified: SimplifiedPodcast, organisation: Or
   };
 }
 
+export function podcastToSimplified(full: Podcast): SimplifiedPodcast {
+  return {
+    ...full,
+    emissionId: full.emission.emissionId,
+    organisationId: full.organisation.id
+  };
+}
+
 export function emptyPodcastData(): Podcast {
   return {
     podcastId: 0,

package/src/style/_utilities.scss

@@ -297,6 +297,7 @@ $utilities: map.merge(
       class: fw,
       values: (
         normal: 400,
+        600: 600,
         bold: 700,
       )
     ),

package/src/style/bootstrap.scss

@@ -219,6 +219,13 @@ input:not([class^="vs__"]), button:not([class^="vs__"]), select:not([class^="vs_
 		border: 0;
 	}
 
+	.btn-icon {
+		background: transparent;
+		border: 0;
+		border-radius: 100%;
+		height: fit-content;
+	}
+
 	.share-btn {
 		display: inline-flex;
 		align-items: center;

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

@@ -11,14 +11,14 @@ const options = [
 describe('ClassicButtonGroup', () => {
     it('renders one button per option', async () => {
         const wrapper = await mount(ClassicButtonGroup, {
-            props: { options, modelValue: ['PODCAST'] },
+            props: { options, value: ['PODCAST'] },
         });
         expect(wrapper.findAll('button')).toHaveLength(3);
     });
 
     it('applies active class to selected options only', async () => {
         const wrapper = await mount(ClassicButtonGroup, {
-            props: { options, modelValue: ['PODCAST', 'LIVE'] },
+            props: { options, value: ['PODCAST', 'LIVE'] },
         });
         const buttons = wrapper.findAll('button');
         expect(buttons[0].classes()).toContain('active');
@@ -26,27 +26,27 @@ describe('ClassicButtonGroup', () => {
         expect(buttons[2].classes()).toContain('active');
     });
 
-    it('emits update:modelValue with added value when clicking inactive button', async () => {
+    it('emits update:value with added value when clicking inactive button', async () => {
         const wrapper = await mount(ClassicButtonGroup, {
-            props: { options, modelValue: ['PODCAST'] },
+            props: { options, value: ['PODCAST'] },
         });
         await wrapper.findAll('button')[1].trigger('click');
-        expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['PODCAST', 'VIDEO']]);
+        expect(wrapper.emitted('update:value')?.[0]).toEqual([['PODCAST', 'VIDEO']]);
     });
 
-    it('emits update:modelValue without removed value when clicking active button (not last)', async () => {
+    it('emits update:value without removed value when clicking active button (not last)', async () => {
         const wrapper = await mount(ClassicButtonGroup, {
-            props: { options, modelValue: ['PODCAST', 'VIDEO'] },
+            props: { options, value: ['PODCAST', 'VIDEO'] },
         });
         await wrapper.findAll('button')[0].trigger('click');
-        expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['VIDEO']]);
+        expect(wrapper.emitted('update:value')?.[0]).toEqual([['VIDEO']]);
     });
 
     it('does not emit when clicking the only active button', async () => {
         const wrapper = await mount(ClassicButtonGroup, {
-            props: { options, modelValue: ['PODCAST'] },
+            props: { options, value: ['PODCAST'] },
         });
         await wrapper.findAll('button')[0].trigger('click');
-        expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+        expect(wrapper.emitted('update:value')).toBeUndefined();
     });
 });

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

@@ -120,20 +120,19 @@ describe('OctopusMultiselect', () => {
         expect(wrapper.emitted('update:selected')?.[0]).toEqual([[]]);
     });
 
-    it('shows selected items summary in placeholder', async () => {
+    it('shows selected items in the selection display', async () => {
         const wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name', selected: [options[0], options[1]] },
         });
-        const input = wrapper.find('input');
-        expect(input.attributes('placeholder')).toBe('Alpha, Beta');
+        expect(wrapper.find('.octopus-multiselect-selection-text').text()).toBe('Alpha, Beta');
+        expect(wrapper.find('.octopus-multiselect-selection-count').exists()).toBe(false);
     });
 
-    it('shows count in placeholder when more than 2 items selected', async () => {
+    it('shows overflow count badge when more than visible items are selected', async () => {
         const wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name', selected: [...options] },
         });
-        const input = wrapper.find('input');
-        expect(input.attributes('placeholder')).toBe('Alpha, Beta (+1)');
+        expect(wrapper.find('.octopus-multiselect-selection-count').exists()).toBe(true);
     });
 
     it('disables input when isDisabled is true', async () => {
@@ -159,4 +158,26 @@ describe('OctopusMultiselect', () => {
         const allCheckboxLabel = wrapper.find('.octopus-multiselect-dropdown > .octopus-form-item label');
         expect(allCheckboxLabel.text()).toBe('Tout');
     });
+
+    it('deselects by optionKey even when selected objects are different references', async () => {
+        const selected = [{ id: 1, name: 'Alpha' }];
+        const wrapper = await mount(OctopusMultiselect, {
+            props: { options, optionLabel: 'name', optionKey: 'id', selected },
+        });
+        await wrapper.find('input').trigger('focus');
+        const optionCheckboxes = wrapper.findAll('.octopus-multiselect-options input[type="checkbox"]');
+        await optionCheckboxes[0].trigger('input');
+        expect(wrapper.emitted('update:selected')?.[0]).toEqual([[]]);
+    });
+
+    it('toggleAll deselects by optionKey even when selected objects are different references', async () => {
+        const selected = options.map((o) => ({ ...o }));
+        const wrapper = await mount(OctopusMultiselect, {
+            props: { options, optionLabel: 'name', optionKey: 'id', selected },
+        });
+        await wrapper.find('input').trigger('focus');
+        const allCheckbox = wrapper.find('.octopus-multiselect-dropdown > .octopus-form-item input[type="checkbox"]');
+        await allCheckbox.trigger('input');
+        expect(wrapper.emitted('update:selected')?.[0]).toEqual([[]]);
+    });
 });

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

@@ -0,0 +1,143 @@
+import '@tests/mocks/i18n';
+
+import OctopusSelect from '@/components/form/OctopusSelect.vue';
+import { mount } from '@tests/utils';
+import { describe, expect, it } from 'vitest';
+
+const options = [
+    { id: 1, name: 'Alpha' },
+    { id: 2, name: 'Beta' },
+    { id: 3, name: 'Gamma' },
+];
+
+describe('OctopusSelect', () => {
+    it('renders label when provided', async () => {
+        const wrapper = await mount(OctopusSelect, {
+            props: { options, optionLabel: 'name', label: 'My label' },
+        });
+        expect(wrapper.find('label.form-label').text()).toBe('My label');
+    });
+
+    it('does not render label when not provided', async () => {
+        const wrapper = await mount(OctopusSelect, {
+            props: { options, optionLabel: 'name' },
+        });
+        expect(wrapper.find('label.form-label').exists()).toBe(false);
+    });
+
+    it('opens dropdown on input focus', async () => {
+        const wrapper = await mount(OctopusSelect, {
+            props: { options, optionLabel: 'name' },
+        });
+        expect(wrapper.find('.octopus-select-dropdown').exists()).toBe(false);
+        await wrapper.find('input').trigger('focus');
+        expect(wrapper.find('.octopus-select-dropdown').exists()).toBe(true);
+    });
+
+    it('shows one button per option when open', async () => {
+        const wrapper = await mount(OctopusSelect, {
+            props: { options, optionLabel: 'name' },
+        });
+        await wrapper.find('input').trigger('focus');
+        const optionButtons = wrapper.findAll('.octopus-select-option');
+        expect(optionButtons).toHaveLength(3);
+        expect(optionButtons[0].text()).toBe('Alpha');
+    });
+
+    it('filters options locally by search query', async () => {
+        const wrapper = await mount(OctopusSelect, {
+            props: { options, optionLabel: 'name' },
+        });
+        await wrapper.find('input').trigger('focus');
+        await wrapper.find('input').setValue('al');
+        await wrapper.find('input').trigger('input');
+        expect(wrapper.findAll('.octopus-select-option')).toHaveLength(1);
+    });
+
+    it('shows no-results message when filter matches nothing', async () => {
+        const wrapper = await mount(OctopusSelect, {
+            props: { options, optionLabel: 'name' },
+        });
+        await wrapper.find('input').trigger('focus');
+        await wrapper.find('input').setValue('zzz');
+        await wrapper.find('input').trigger('input');
+        expect(wrapper.find('.text-indic').exists()).toBe(true);
+    });
+
+    it('emits update:value with the clicked option', async () => {
+        const wrapper = await mount(OctopusSelect, {
+            props: { options, optionLabel: 'name' },
+        });
+        await wrapper.find('input').trigger('focus');
+        await wrapper.findAll('.octopus-select-option')[1].trigger('click');
+        expect(wrapper.emitted('update:value')?.[0]).toEqual([options[1]]);
+    });
+
+    it('closes dropdown after selecting an option', async () => {
+        const wrapper = await mount(OctopusSelect, {
+            props: { options, optionLabel: 'name' },
+        });
+        await wrapper.find('input').trigger('focus');
+        await wrapper.findAll('.octopus-select-option')[0].trigger('click');
+        expect(wrapper.find('.octopus-select-dropdown').exists()).toBe(false);
+    });
+
+    it('shows selected item label in the field when closed', async () => {
+        const wrapper = await mount(OctopusSelect, {
+            props: { options, optionLabel: 'name', value: options[0] },
+        });
+        expect(wrapper.find('.octopus-select-value').text()).toBe('Alpha');
+    });
+
+    it('marks the selected option with the selected class', async () => {
+        const wrapper = await mount(OctopusSelect, {
+            props: { options, optionLabel: 'name', value: options[0] },
+        });
+        await wrapper.find('.octopus-select-field').trigger('click');
+        const optionButtons = wrapper.findAll('.octopus-select-option');
+        expect(optionButtons[0].classes()).toContain('selected');
+        expect(optionButtons[1].classes()).not.toContain('selected');
+    });
+
+    it('deselects the current option by default (allowDeselect defaults to true)', async () => {
+        const wrapper = await mount(OctopusSelect, {
+            props: { options, optionLabel: 'name', optionKey: 'id', value: options[0] },
+        });
+        await wrapper.find('.octopus-select-field').trigger('click');
+        await wrapper.findAll('.octopus-select-option')[0].trigger('click');
+        expect(wrapper.emitted('update:value')?.[0]).toEqual([undefined]);
+    });
+
+    it('does not deselect when allowDeselect is false', async () => {
+        const wrapper = await mount(OctopusSelect, {
+            props: { options, optionLabel: 'name', optionKey: 'id', value: options[0], allowDeselect: false as boolean },
+        });
+        await wrapper.find('.octopus-select-field').trigger('click');
+        await wrapper.findAll('.octopus-select-option')[0].trigger('click');
+        expect(wrapper.emitted('update:value')?.[0]).toEqual([options[0]]);
+    });
+
+    it('does not open dropdown when disabled', async () => {
+        const wrapper = await mount(OctopusSelect, {
+            props: { options, optionLabel: 'name', isDisabled: true },
+        });
+        await wrapper.find('input').trigger('focus');
+        expect(wrapper.find('.octopus-select-dropdown').exists()).toBe(false);
+    });
+
+    it('disables input when isDisabled is true', async () => {
+        const wrapper = await mount(OctopusSelect, {
+            props: { options, optionLabel: 'name', isDisabled: true },
+        });
+        expect(wrapper.find('input').attributes('disabled')).toBeDefined();
+    });
+
+    it('matches by optionKey when checking selection', async () => {
+        const value = { id: 1, name: 'Alpha' };
+        const wrapper = await mount(OctopusSelect, {
+            props: { options, optionLabel: 'name', optionKey: 'id', value },
+        });
+        await wrapper.find('.octopus-select-field').trigger('click');
+        expect(wrapper.findAll('.octopus-select-option')[0].classes()).toContain('selected');
+    });
+});