@saooti/octopus-sdk 41.11.1 → 41.12.0-beta2

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

@@ -1,8 +1,9 @@
 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 { describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 const options = [
     { id: 1, name: 'Alpha' },
@@ -10,66 +11,89 @@ const options = [
     { id: 3, name: 'Gamma' },
 ];
 
+// The dropdown is teleported to .octopus-app — helper to query it from the document.
+function getDropdown(): Element | null {
+    return document.body.querySelector('.octopus-multiselect-dropdown');
+}
+
 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.
+    let appElement: HTMLElement;
+
+    beforeEach(() => {
+        appElement = document.createElement('div');
+        appElement.className = 'octopus-app';
+        document.body.appendChild(appElement);
+    });
+
+    // Shared wrapper ref so afterEach can properly unmount it.
+    // Proper unmount lets Vue clean up the teleport target before the next test starts.
+    let wrapper: VueWrapper;
+    afterEach(() => {
+        wrapper?.unmount();
+        appElement.remove();
+    });
+
     it('renders label when provided', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             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(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name' },
         });
         expect(wrapper.find('label.form-label').exists()).toBe(false);
     });
 
     it('opens dropdown on input focus', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name' },
         });
-        expect(wrapper.find('.octopus-multiselect-dropdown').exists()).toBe(false);
+        expect(getDropdown()).toBeNull();
         await wrapper.find('input').trigger('focus');
-        expect(wrapper.find('.octopus-multiselect-dropdown').exists()).toBe(true);
+        expect(getDropdown()).not.toBeNull();
     });
 
     it('shows "All" checkbox and one checkbox per option when open', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name' },
         });
         await wrapper.find('input').trigger('focus');
-        const checkboxes = wrapper.findAll('input[type="checkbox"]');
+        const checkboxes = document.body.querySelectorAll('input[type="checkbox"]');
         // 1 for "All" + 3 for options
         expect(checkboxes).toHaveLength(4);
     });
 
     it('filters options locally by search query', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name' },
         });
         await wrapper.find('input').trigger('focus');
         await wrapper.find('input').setValue('al');
         await wrapper.find('input').trigger('input');
-        const checkboxes = wrapper.findAll('input[type="checkbox"]');
+        const checkboxes = document.body.querySelectorAll('input[type="checkbox"]');
         // 1 for "All" + 1 matching "Alpha"
         expect(checkboxes).toHaveLength(2);
     });
 
     it('shows no-results message when filter matches nothing', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             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);
+        expect(document.body.querySelector('.text-indic')).not.toBeNull();
     });
 
     it('calls onSearch with current query and updates displayed options', async () => {
         const searchResult = [{ id: 4, name: 'Delta' }];
         const onSearch = vi.fn().mockResolvedValue(searchResult);
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name', onSearch },
         });
         await wrapper.find('input').trigger('focus');
@@ -80,83 +104,104 @@ describe('OctopusMultiselect', () => {
     });
 
     it('emits update:selected when toggling a single option', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name', selected: [] },
         });
         await wrapper.find('input').trigger('focus');
-        const optionCheckboxes = wrapper.findAll('.octopus-multiselect-options input[type="checkbox"]');
-        await optionCheckboxes[0].trigger('input');
+        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([[options[0]]]);
     });
 
     it('deselects an already-selected option', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name', selected: [options[0]] },
         });
         await wrapper.find('input').trigger('focus');
-        const optionCheckboxes = wrapper.findAll('.octopus-multiselect-options input[type="checkbox"]');
-        await optionCheckboxes[0].trigger('input');
+        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('toggleAll selects all displayed options', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name', selected: [] },
         });
         await wrapper.find('input').trigger('focus');
-        const allCheckbox = wrapper.find('.octopus-multiselect-dropdown > .octopus-form-item input[type="checkbox"]');
-        await allCheckbox.trigger('input');
+        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 unknown[];
         expect(emitted).toHaveLength(3);
     });
 
     it('toggleAll deselects all displayed options when all are selected', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name', selected: [...options] },
         });
         await wrapper.find('input').trigger('focus');
-        const allCheckbox = wrapper.find('.octopus-multiselect-dropdown > .octopus-form-item input[type="checkbox"]');
-        await allCheckbox.trigger('input');
+        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([[]]);
     });
 
-    it('shows selected items summary in placeholder', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+    it('shows selected items in the selection display', async () => {
+        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 () => {
-        const wrapper = await mount(OctopusMultiselect, {
+    it('shows overflow count badge when more than visible items are selected', async () => {
+        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 () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name', isDisabled: true },
         });
         expect(wrapper.find('input').attributes('disabled')).toBeDefined();
     });
 
     it('does not open dropdown when disabled', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name', isDisabled: true },
         });
         await wrapper.find('input').trigger('focus');
-        expect(wrapper.find('.octopus-multiselect-dropdown').exists()).toBe(false);
+        expect(getDropdown()).toBeNull();
     });
 
     it('uses selectAllText as the "All" checkbox label when provided', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name', selectAllText: 'Tout' },
         });
         await wrapper.find('input').trigger('focus');
-        const allCheckboxLabel = wrapper.find('.octopus-multiselect-dropdown > .octopus-form-item label');
-        expect(allCheckboxLabel.text()).toBe('Tout');
+        const allCheckboxLabel = document.body.querySelector('.octopus-multiselect-dropdown > .octopus-form-item label')!;
+        expect(allCheckboxLabel.textContent?.trim()).toBe('Tout');
+    });
+
+    it('deselects by optionKey even when selected objects are different references', async () => {
+        const selected = [{ id: 1, name: 'Alpha' }];
+        wrapper = await mount(OctopusMultiselect, {
+            props: { options, optionLabel: 'name', optionKey: 'id', 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([[]]);
+    });
+
+    it('toggleAll deselects by optionKey even when selected objects are different references', async () => {
+        const selected = options.map((o) => ({ ...o }));
+        wrapper = await mount(OctopusMultiselect, {
+            props: { options, optionLabel: 'name', optionKey: 'id', 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([[]]);
     });
 });

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

@@ -0,0 +1,168 @@
+import '@tests/mocks/i18n';
+
+import OctopusSelect from '@/components/form/OctopusSelect.vue';
+import { DOMWrapper, type VueWrapper } from '@vue/test-utils';
+import { mount } from '@tests/utils';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+const options = [
+    { id: 1, name: 'Alpha' },
+    { id: 2, name: 'Beta' },
+    { id: 3, name: 'Gamma' },
+];
+
+// The dropdown is teleported to .octopus-app — helper to query it from the document.
+function getDropdown(): Element | null {
+    return document.body.querySelector('.octopus-select-dropdown');
+}
+
+describe('OctopusSelect', () => {
+    // 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.
+    let appElement: HTMLElement;
+
+    beforeEach(() => {
+        appElement = document.createElement('div');
+        appElement.className = 'octopus-app';
+        document.body.appendChild(appElement);
+    });
+
+    // Shared wrapper ref so afterEach can properly unmount it.
+    // Proper unmount lets Vue clean up the teleport target before the next test starts.
+    let wrapper: VueWrapper;
+    afterEach(() => {
+        wrapper?.unmount();
+        appElement.remove();
+    });
+
+    it('renders label when provided', async () => {
+        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 () => {
+        wrapper = await mount(OctopusSelect, {
+            props: { options, optionLabel: 'name' },
+        });
+        expect(wrapper.find('label.form-label').exists()).toBe(false);
+    });
+
+    it('opens dropdown on input focus', async () => {
+        wrapper = await mount(OctopusSelect, {
+            props: { options, optionLabel: 'name' },
+        });
+        expect(getDropdown()).toBeNull();
+        await wrapper.find('input').trigger('focus');
+        expect(getDropdown()).not.toBeNull();
+    });
+
+    it('shows one button per option when open', async () => {
+        wrapper = await mount(OctopusSelect, {
+            props: { options, optionLabel: 'name' },
+        });
+        await wrapper.find('input').trigger('focus');
+        const optionButtons = document.body.querySelectorAll('.octopus-select-option');
+        expect(optionButtons).toHaveLength(3);
+        expect(optionButtons[0].textContent?.trim()).toBe('Alpha');
+    });
+
+    it('filters options locally by search query', async () => {
+        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(document.body.querySelectorAll('.octopus-select-option')).toHaveLength(1);
+    });
+
+    it('shows no-results message when filter matches nothing', async () => {
+        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(document.body.querySelector('.text-indic')).not.toBeNull();
+    });
+
+    it('emits update:value with the clicked option', async () => {
+        wrapper = await mount(OctopusSelect, {
+            props: { options, optionLabel: 'name' },
+        });
+        await wrapper.find('input').trigger('focus');
+        await new DOMWrapper(document.body.querySelectorAll('.octopus-select-option')[1]).trigger('click');
+        expect(wrapper.emitted('update:value')?.[0]).toEqual([options[1]]);
+    });
+
+    it('closes dropdown after selecting an option', async () => {
+        wrapper = await mount(OctopusSelect, {
+            props: { options, optionLabel: 'name' },
+        });
+        await wrapper.find('input').trigger('focus');
+        await new DOMWrapper(document.body.querySelectorAll('.octopus-select-option')[0]).trigger('click');
+        expect(getDropdown()).toBeNull();
+    });
+
+    it('shows selected item label in the field when closed', async () => {
+        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 () => {
+        wrapper = await mount(OctopusSelect, {
+            props: { options, optionLabel: 'name', value: options[0] },
+        });
+        await wrapper.find('.octopus-select-field').trigger('click');
+        const optionButtons = document.body.querySelectorAll('.octopus-select-option');
+        expect(optionButtons[0].classList).toContain('selected');
+        expect(optionButtons[1].classList).not.toContain('selected');
+    });
+
+    it('deselects the current option by default (allowDeselect defaults to true)', async () => {
+        wrapper = await mount(OctopusSelect, {
+            props: { options, optionLabel: 'name', optionKey: 'id', value: options[0] },
+        });
+        await wrapper.find('.octopus-select-field').trigger('click');
+        await new DOMWrapper(document.body.querySelectorAll('.octopus-select-option')[0]).trigger('click');
+        expect(wrapper.emitted('update:value')?.[0]).toEqual([undefined]);
+    });
+
+    it('does not deselect when allowDeselect is false', async () => {
+        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 new DOMWrapper(document.body.querySelectorAll('.octopus-select-option')[0]).trigger('click');
+        expect(wrapper.emitted('update:value')?.[0]).toEqual([options[0]]);
+    });
+
+    it('does not open dropdown when disabled', async () => {
+        wrapper = await mount(OctopusSelect, {
+            props: { options, optionLabel: 'name', isDisabled: true },
+        });
+        await wrapper.find('input').trigger('focus');
+        expect(getDropdown()).toBeNull();
+    });
+
+    it('disables input when isDisabled is true', async () => {
+        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' };
+        wrapper = await mount(OctopusSelect, {
+            props: { options, optionLabel: 'name', optionKey: 'id', value },
+        });
+        await wrapper.find('.octopus-select-field').trigger('click');
+        const optionButtons = document.body.querySelectorAll('.octopus-select-option');
+        expect(optionButtons[0].classList).toContain('selected');
+    });
+});

package/tsconfig.json

@@ -5,15 +5,13 @@
     // "strict": true,
     "jsx": "preserve",
     "importHelpers": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "experimentalDecorators": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
-    "baseUrl": ".",
     "types": [
-      "webpack-env",
       "sockjs-client"
     ],
     "paths": {
@@ -21,7 +19,7 @@
         "./src/*"
       ],
       "@tests/*": [
-        "tests/*"
+        "./tests/*"
       ]
     },
     "lib": [
@@ -34,9 +32,7 @@
   "include": [
     "src/**/*.ts",
     "src/**/*.tsx",
-    "src/**/*.vue",
-    "tests/**/*.ts",
-    "tests/**/*.tsx"
+    "src/**/*.vue"
   ],
   "exclude": [
     "node_modules"

package/tsconfig.test.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": ["sockjs-client", "vitest/globals"]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ]
+}

package/vitest.config.js

@@ -12,7 +12,8 @@ export default defineConfig(env => mergeConfig(viteConfig(env), defineConfig({
         environment: 'happy-dom',
         //setupFiles: ['./tests/setup.ts'],
         typecheck: {
-            enabled: true
+            enabled: true,
+            tsconfig: './tsconfig.test.json'
         }
     }
 })));