@zeedhi/common 1.115.0 → 3.0.1

package/tests/unit/components/zd-select-multiple/select-multiple.spec.ts

@@ -0,0 +1,1994 @@
+import {
+  DatasourceFactory,
+  I18n, IDictionary, Loader, SimpleDatasource,
+} from '@zeedhi/core';
+import { SelectMultiple } from '../../../../src';
+import { setBlur, setFocus } from '../../__helpers__/component-event-helper';
+import { mockGetUsingData } from '../../__helpers__/mock-http-get-helper';
+import { flushPromises } from '../../__helpers__/flush-promises-helper';
+
+jest.mock('lodash.debounce', () => jest.fn((fn) => fn));
+
+describe('SelectMultiple', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  })
+
+  describe('constructor()', () => {
+    it('should set default value', async () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        value: ['1'],
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+        disabled: true,
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      await flushPromises();
+      expect(instance.value).toEqual(['1']);
+      expect(instance.showSelectAll).toBeFalsy();
+      expect(instance.limit).toBeNull();
+      expect(instance.disabled).toBeTruthy();
+    });
+
+    it('should set default value using a datasource that is initially empty', async () => {
+      const data = [
+        { text: 'default 1', value: '1' },
+        { text: 'default 2', value: '2' },
+        { text: 'default 3', value: '3' },
+      ];
+      const spy = mockGetUsingData(data);
+
+      const instance = new SelectMultiple({
+        name: 'select',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        autocomplete: true,
+        value: ['2'],
+        datasource: {
+          limit: 3,
+          route: 'zeedhi',
+          type: 'rest',
+          uniqueKey: 'value',
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      await flushPromises();
+
+      expect(instance.datasource.data).toEqual([data[1]]);
+
+      setFocus(instance);
+      await flushPromises();
+      expect(instance.datasource.data).toEqual(data);
+
+      instance.selectValue = [];
+      expect(instance.datasource.data).toEqual(data);
+
+      setBlur(instance);
+      expect(instance.datasource.data).toEqual(data);
+
+      setFocus(instance);
+      await flushPromises();
+      expect(instance.datasource.data).toEqual(data);
+
+      spy.mockClear();
+    });
+
+    it('should set default value using a datasource that is not lazy', async () => {
+      const data = [
+        { text: 'default 1', value: '1' },
+        { text: 'default 2', value: '2' },
+        { text: 'default 3', value: '3' },
+      ];
+      const spy = mockGetUsingData(data);
+
+      const instance = new SelectMultiple({
+        name: 'select',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        autocomplete: true,
+        value: ['2'],
+        preventLoadOnFocus: true,
+        datasource: {
+          limit: 3,
+          route: 'zeedhi',
+          type: 'rest',
+          uniqueKey: 'value',
+          lazyLoad: false,
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      await flushPromises();
+
+      expect(instance.datasource.data).toEqual([
+        {
+          text: "default 2",
+          value: "2",
+        }
+      ]);
+
+      setFocus(instance);
+      await flushPromises();
+      expect(instance.value).toEqual(['2']);
+      expect(instance.datasource.data).toEqual([
+        {
+          text: "default 2",
+          value: "2",
+        }
+      ]);
+
+      instance.selectValue = [];
+      expect(instance.datasource.data).toEqual([
+        {
+          text: "default 2",
+          value: "2",
+        }
+      ]);
+
+      setBlur(instance);
+      expect(instance.datasource.data).toEqual([]);
+
+      setFocus(instance);
+      await flushPromises();
+      expect(instance.datasource.data).toEqual([]);
+
+      expect(spy).toHaveBeenCalledTimes(1);
+      spy.mockClear();
+    });
+
+    it('should not call change event on setDefaultValue', async () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        value: ['1'],
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      const spy = jest.spyOn(instance, 'selectChange');
+      await flushPromises();
+      expect(instance.selectValue).toStrictEqual([
+        {
+          text: "default",
+          value: "1",
+        }
+      ]);
+      expect(instance.value).toEqual(['1']);
+      spy.mockClear();
+    });
+
+    it('should prevent load on focus with not lazy load datasource', async () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+          lazyLoad: false,
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      await flushPromises();
+      expect(instance.preventLoadOnFocus).toBeTruthy();
+    });
+
+    it('should prevent load on focus when property preventLoadOnFocus is set', async () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        preventLoadOnFocus: true,
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      await flushPromises();
+      expect(instance.preventLoadOnFocus).toBeTruthy();
+    });
+  });
+
+  describe('updateSelectValue()', () => {
+    const testData = [
+      { text: 'Item 1', value: '1' },
+      { text: 'Item 2', value: '2' },
+      { text: 'Item 3', value: '3' }
+    ];
+  
+    it('should update selectedValue with valid array input', () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        value: ['1'],
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+        disabled: true,
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      instance.updateSelectValue([testData[0]]);
+      expect(instance.selectValue).toStrictEqual([
+        {
+          text: 'Item 1',
+          value: '1',
+        }
+      ]);
+    });
+  
+    it('should handle empty array input', () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        value: ['1'],
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+        disabled: true,
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      instance.updateSelectValue([]);
+      expect(instance.selectValue).toEqual([]);
+      expect(instance.insertedValues).toEqual([]);
+    });
+  
+    it('should ignore non-array input', () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        value: ['1'],
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+        disabled: true,
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      const originalValue = instance.selectValue;
+      instance.updateSelectValue(null as any);
+      instance.updateSelectValue(undefined as any);
+      instance.updateSelectValue('invalid' as any);
+      expect(instance.selectValue).toEqual(originalValue);
+    });
+  
+    it('should manage insertedValues and insertsRemoved in normal mode', () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        value: ['1'],
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+        disabled: true,
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      instance.updateSelectValue([testData[0], testData[1]]);
+      expect(instance.insertedValues).toEqual([]);
+      
+      const newItem = { text: 'New Item', value: '99' };
+      instance.updateSelectValue([...testData.slice(0, 2), newItem]);
+      
+      expect(instance.insertedValues).toStrictEqual([]);
+      expect(instance.selectValue).toStrictEqual([
+        {
+          text: 'Item 1',
+          value: '1'
+        },
+        {
+          text: 'Item 2',
+          value: '2'
+        },
+        {
+          text: 'New Item',
+          value: '99'
+        }
+      ]);
+      
+      instance.updateSelectValue(testData.slice(0, 2));
+      expect(instance.insertedValues).toEqual([]);
+    });
+  
+    it('should behave differently in manualMode', () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        value: ['1'],
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+        disabled: true,
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      instance.manualMode = true;
+      const newItem = { text: 'Manual Item', value: '100' };
+      
+      instance.updateSelectValue([newItem]);
+      expect(instance.insertedValues).toEqual([]);
+      expect(instance.selectValue).toStrictEqual([newItem]);
+    });
+  
+     it('should call setFieldValue with correct parameters', async () => {
+       const instance = new SelectMultiple({
+         name: 'select-multiple',
+         component: 'ZdSelectMultiple',
+         value: ['1'],
+         dataText: 'text',
+         dataValue: 'value',
+         datasource: {
+           data: [{ text: 'default', value: '1' }],
+         },
+         disabled: true,
+       });
+       instance.onCreated();
+       instance.onMounted({});
+       const spy = jest.spyOn(instance, 'selectChange');
+       await instance.updateSelectValue([testData[0]]);
+       spy.mockRestore();
+     });
+  });
+
+  describe('validation', () => {
+    it('should call validation rules passing value', () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        validations: {
+          required: {},
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+
+      let isValid: boolean | string;
+      isValid = instance.rules[0]();
+      expect(typeof isValid).toBe('string');
+      isValid = instance.rules[0]('teste');
+      expect(isValid).toBeTruthy();
+    });
+
+    it('when using required validation, should check the value of checkboxAll', async () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        value: [],
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+        validations: { required: {} },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      const validateResponse = await instance.validate();
+      const viewValidate = jest.fn<Promise<string[]>, [boolean?]>(() => Promise.resolve([]));
+      instance.setViewValidate(viewValidate);
+
+      expect(validateResponse).toStrictEqual([]);
+
+      instance.checkboxAll = true;
+      expect(instance.validate()).toBeTruthy();
+    });
+
+    it('when using other validations, should not change functionality', () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        value: [],
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+        validations: { minLength: {} },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      const viewValidate = jest.fn<Promise<string[]>, [boolean?]>(() => Promise.resolve([]));
+      instance.setViewValidate(viewValidate);
+
+      instance.validate();
+
+      expect(viewValidate).toHaveBeenCalled();
+    });
+  });
+
+  describe('search', () => {
+    it('should remove inserts when select search is changed to empty', async () => {
+      const data = [
+        { text: 'default 1', value: '1' },
+        { text: 'default 2', value: '2' },
+        { text: 'default 3', value: '3' },
+      ];
+      const instance = new SelectMultiple({
+        name: 'select',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        autocomplete: true,
+        datasource: {
+          limit: 1,
+          data,
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      const spy = jest.spyOn(instance.datasource, 'get');
+
+      expect(instance.datasource.data).toEqual([
+          {
+            text: "default 1",
+            value: "1",
+          }
+        ]);
+
+      setFocus(instance);
+      // pushedValue
+      // como possui search, no setFieldValue o foundInData dará true
+    instance.search = data[2].text;
+    instance.selectValue = [data[2]];
+    setBlur(instance);
+    expect(instance.search).toBe('');
+    expect((instance as any).insertedValues).toEqual([data[2]]);
+    expect(instance.datasource.data).toEqual([data[2], data[0]]);
+
+    setFocus(instance);
+    expect(instance.search).toBe('');
+    expect((instance as any).insertedValues).toEqual([data[2]]);
+    instance.selectValue = [];
+    instance.updateSelectValue([])
+    expect((instance as any).insertedValues).toEqual([]);
+    expect((instance as any).insertsRemoved).toEqual([data[2]]);
+    expect(instance.datasource.data).toEqual([data[2], data[0]]);
+
+    setBlur(instance);
+    expect(instance.datasource.data).toEqual([data[0]]);
+      spy.mockClear();
+    });
+
+    it('when instance search changes, should update datasource search', async () => {
+      const data = [
+        { text: 'default1', value: '1' },
+        { text: 'default2', value: '2' },
+        { text: 'default3', value: '3' },
+        { text: 'default4', value: '4' },
+        { text: 'default5', value: '5' },
+      ];
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        autocomplete: true,
+        preventLoadOnFocus: true,
+        datasource: {
+          limit: 2,
+          data,
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+
+      setFocus(instance);
+
+      instance.search = 'default5';
+      await flushPromises();
+      expect(instance.datasource.search).toBe('default5');
+      expect(instance.datasource.data.length).toBe(1);
+
+      instance.search = '';
+      await flushPromises();
+      expect(instance.datasource.search).toBe('');
+    });
+  });
+
+  describe('AddValidation', () => {
+    beforeEach(() => {
+      const translateFn = function translateFn(message: string | string[], variables?: IDictionary<any>) {
+        const messageVar = variables ? `: vars ${Object.keys(variables).join(', ')}` : '';
+        const messageString = Array.isArray(message) ? message.join(', ') : message;
+        return messageString + messageVar;
+      };
+      jest.spyOn(I18n, 'translate').mockImplementation(translateFn);
+    });
+  
+    it('should add validations and cover non-required key path in updateRules', () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMutiple',
+      });
+  
+      const customValidator = jest.fn().mockReturnValue(true);
+  
+      expect(instance.validations).toEqual({});
+      expect(instance.rules).toEqual([]);
+  
+      instance.addValidation('required', { message: 'required!' });
+  
+      instance['parsedValidations'] = {
+        ...instance['parsedValidations'],
+        custom: customValidator
+      };
+  
+      instance['updateRules']();
+  
+      expect(instance.rules.length).toBe(2);
+  
+      instance.rules[1]('abc');
+      expect(customValidator).toHaveBeenCalledWith('abc');
+    });
+
+    it('should add required validation and use "all" when checkboxAll is true', () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMutiple',
+      });
+  
+      instance.checkboxAll = true;
+
+    const requiredValidator = jest.fn().mockReturnValue(true);
+
+    instance['parsedValidations'] = {
+      required: requiredValidator
+    };
+
+    instance['updateRules']();
+
+    expect(instance.rules.length).toBe(1);
+
+    instance.rules[0]();
+
+    expect(requiredValidator).toHaveBeenCalledWith('all');
+  });
+});
+  
+  describe('updateSearch()', () => {
+    it('should update datasource search', async () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      const spy = jest.spyOn(instance.datasource, 'get');
+
+      await instance.updateSearch('2');
+      expect(instance.datasource.search).toBe('2');
+      await instance.updateSearch('2');
+      expect(spy).toBeCalledTimes(1);
+      spy.mockClear();
+    });
+
+    it('should not remove selected items from datasource when search updates', async () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          limit: 1,
+          data: [
+            { text: 'default', value: '1' },
+            { text: 'updated', value: '2' },
+          ],
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      await instance.setValue(['1']);
+
+      await instance.updateSearch('updated');
+      expect(instance.datasource.data).toEqual([
+        { text: 'default', value: '1' },
+        { text: 'updated', value: '2' },
+      ]);
+    });
+
+    it('should remove unselected inserts from datasource when search updates to empty', async () => {
+      const data = [
+        '1',
+        '2',
+        '3',
+      ];
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        datasource: {
+          type: 'simple',
+          limit: 1,
+          items: data,
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      setFocus(instance);
+
+      if (!(instance.datasource instanceof SimpleDatasource)) {
+        fail('Datasource should be simple');
+      }
+
+      expect(instance.datasource.items).toEqual(['1']);
+
+      instance.search = '2';
+      expect(instance.datasource.items).toEqual(['2']);
+
+      instance.search = '';
+      expect(instance.datasource.items).toEqual(['1']);
+    });
+
+    it('should not remove selected items from datasource when search updates returning object', async () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        returnObject: true,
+        datasource: {
+          limit: 1,
+          data: [
+            { text: 'default', value: '1' },
+            { text: 'updated', value: '2' },
+          ],
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      await instance.setValue([{ text: 'default', value: '1' }]);
+
+      await instance.updateSearch('updated');
+
+      expect(instance.datasource.data).toEqual([
+        { text: 'default', value: '1' },
+        { text: 'updated', value: '2' },
+      ]);
+    });
+
+    it('should not insert selected items in datasource when search updates if they are found', async () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          limit: 2,
+          data: [
+            { text: 'employee 1', value: '1' },
+            { text: 'employee 2', value: '2' },
+            { text: 'employee 10', value: '10' },
+          ],
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      await instance.setValue(['1']);
+
+      await instance.updateSearch('employee 1');
+      expect(instance.datasource.data).toEqual([
+        { text: 'employee 1', value: '1' },
+        { text: 'employee 10', value: '10' },
+      ]);
+    });
+  });
+
+  describe('setValue()', () => {
+    it('should set and get value and selectValue', async () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      instance.setValue(['1']);
+      await flushPromises();
+      expect(instance.selectValue).toEqual([instance.datasource.data[0]])
+      expect(instance.value).toEqual(['1']);
+    });
+
+    it('should set and get empty values', async () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      instance.setValue(null);
+      await flushPromises();
+      expect(instance.selectValue).toEqual([]);
+      expect(instance.value).toEqual([]);
+    });
+
+    it('should set and get value and selectValue using object', async () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        returnObject: true,
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      instance.setValue([{ text: 'default', value: '1' }]);
+      await flushPromises();
+      instance.updateSelectValue([instance.datasource.data[0]]);
+      expect(instance.selectValue).toStrictEqual([instance.datasource.data[0]])
+      expect(instance.value).toStrictEqual([instance.datasource.data[0]]);
+    });
+
+    it('should set normal value in a returnObject', async () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        returnObject: true,
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      instance.setValue(['1']);
+      await flushPromises();
+      instance.updateSelectValue([instance.datasource.data[0]]);
+      expect(instance.selectValue).toStrictEqual([instance.datasource.data[0]])
+      expect(instance.value).toStrictEqual([instance.datasource.data[0]]);
+    });
+
+    it('should set and get value and selectValue when not an autocomplete', async () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        autocomplete: false,
+        returnObject: true,
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      instance.setValue([{ text: 'default', value: '1' }]);
+      await flushPromises();
+      instance.updateSelectValue([instance.datasource.data[0]]);
+      expect(instance.selectValue).toStrictEqual([instance.datasource.data[0]])
+      expect(instance.value).toStrictEqual([instance.datasource.data[0]])
+    });
+
+    it('should add value to datasource.data if found in another page', async () => {
+      const data = [
+        { text: 'default', value: '1' },
+        { text: 'default 2', value: '2' },
+      ];
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data,
+          limit: 1,
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+
+      await instance.setValue(['2']);
+
+      expect(instance.datasource.data).toEqual([
+        {
+          text: "default 2",
+          value: "2"
+        },
+        {
+          text: "default",
+          value: "1",
+        }
+      ]);
+    });
+
+    it('when in manualMode, then it should not request data from another page', async () => {
+      const data = [
+        { text: 'First', value: '1' },
+        { text: 'Second', value: '2' },
+      ];
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        manualMode: true,
+        datasource: {
+          data,
+          limit: 1,
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+
+      await instance.setValue(['2']);
+
+      expect(instance.datasource.data).toEqual([data[0]]);
+      expect(instance.value).toEqual([]);
+    });
+
+    it('should set empty when value is not found', async () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      instance.setValue(['500']);
+      await flushPromises();
+      expect(instance.selectValue).toEqual([]);
+      expect(instance.value).toEqual([]);
+    });
+
+    it('should set value when simple datasource with mask', async () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: [{ name: 'value', mask: '###-#' }],
+        dataValue: 'value',
+        datasource: {
+          type: 'simple',
+          items: [
+            '1231', '4564', '7897',
+          ],
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      const expected = [{ text: '123-1', value: '1231', originalRow: { value: '1231' } }];
+
+      instance.setValue(['1231']);
+      await flushPromises();
+      expect(instance.selectValue).toEqual([{ value: '1231' }]);
+      expect(instance.value).toEqual(['1231']);
+      expect(instance.formatter([{ value: '1231' }])).toEqual(expected);
+    });
+
+    it('when using dynamicFilter as searchParam, should request data from another page using dynamicFilter', async () => {
+      const data = [
+        { text: 'default', value: '1' },
+        { text: 'default 2', value: '2' },
+        { text: 'default 3', value: '3' },
+        { text: 'default 4', value: '4' },
+      ];
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        searchParam: 'DYNAMIC_FILTER',
+        datasource: {
+          data,
+          limit: 1,
+        },
+      });
+      instance.onCreated();
+      const spyFactory = jest.spyOn(DatasourceFactory, 'factory');
+
+      await instance.setValue(['2', '3', '4']);
+
+      expect(spyFactory).toHaveBeenCalledTimes(1);
+      expect(spyFactory).toHaveBeenCalledWith(expect.objectContaining({
+        dynamicFilter: {
+          value: [
+            { operation: 'EQUALS', relation: 'OR', value: '2' },
+            { operation: 'EQUALS', relation: 'OR', value: '3' },
+            { operation: 'EQUALS', relation: 'OR', value: '4' },
+          ],
+        },
+      }));
+    });
+  });
+
+  describe('selectValue', () => {
+    it('should set and get selectValue', async () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      instance.selectValue = [{ text: 'default', value: '1' }];
+      await flushPromises();
+      expect(instance.selectValue).toEqual([{ text: 'default', value: '1' }]);
+      expect(instance.value).toEqual(['1']);
+    });
+
+    it('should set and get selectValue as empty', async () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      instance.selectValue = [];
+      await flushPromises();
+      expect(instance.selectValue).toEqual([]);
+      expect(instance.value).toEqual([]);
+    });
+
+    it('should not remove insertedValues from datasource when they are removed from selectValue', async () => {
+      const data = [
+        { text: 'default', value: '1' },
+        { text: 'default 2', value: '2' },
+      ];
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data,
+          limit: 1,
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      expect(instance.datasource.data).toStrictEqual([
+        {
+          text: "default",
+          value: "1",
+        }
+      ]);
+      await instance.setValue(['2']);
+      expect(instance.datasource.data).toStrictEqual([
+        {
+          text: "default 2",
+          value: "2"
+        },
+        {
+          text: "default",
+          value: "1",
+        }
+      ]);
+
+      instance.selectValue = [];
+
+      expect(instance.datasource.data).toStrictEqual([
+        {
+          text: "default 2",
+          value: "2"
+        },
+        {
+          text: "default",
+          value: "1"
+        }
+      ]);
+    });
+  });
+
+  describe('formatter()', () => {
+    it('should return array of formatted objects', () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: [{ name: 'text', mask: 'a.a.a' }],
+        dataValue: 'value',
+        datasource: {
+          data: [
+            {
+              value: '1', text: 'default',
+            },
+            {
+              value: '2', text: 'test',
+            },
+          ],
+        },
+      });
+      const expected = [
+        {
+          value: '1', text: 'd.e.f', originalRow: { value: '1', text: 'default' },
+        },
+        {
+          value: '2', text: 't.e.s', originalRow: { value: '2', text: 'test' },
+        },
+      ];
+      expect(instance.formatter(instance.datasource.data)).toEqual(expected);
+    });
+
+    it('should format all fields in dataText', () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: [{ name: 'text1', mask: 'a.a.a' }, 'text2'],
+        dataValue: 'value',
+        datasource: {
+          data: [
+            {
+              value: '1', text1: 'default', text2: 'default2',
+            },
+            {
+              value: '2', text1: 'test',
+            },
+          ],
+        },
+      });
+      const expected = [
+        {
+          value: '1', text: 'd.e.f | default2', originalRow: { value: '1', text1: 'default', text2: 'default2' },
+        },
+        {
+          value: '2', text: 't.e.s', originalRow: { value: '2', text1: 'test' },
+        },
+      ];
+      expect(instance.formatter(instance.datasource.data)).toEqual(expected);
+    });
+
+    it('should get formatted value using dataText with dynamic mask', async () => {
+      const data = [
+        { value: '1', name: 'person', cpf_cnpj: '11111111111' },
+        { value: '2', name: 'company', cpf_cnpj: '22222222222222' },
+      ];
+      const instance = new SelectMultiple({
+        name: 'select',
+        component: 'ZdSelectMultiple',
+        dataText: [
+          { name: 'cpf_cnpj', mask: (value: string) => (value.length <= 11 ? '###.###.###-##' : '##.###.###/####-##') },
+          'name',
+        ],
+        dataValue: 'value',
+        datasource: {
+          data,
+        },
+      });
+      expect(instance.formatter(instance.datasource.data))
+        .toEqual([
+          expect.objectContaining({ value: '1', text: '111.111.111-11 | person', originalRow: { ...data[0] } }),
+          expect.objectContaining({ value: '2', text: '22.222.222/2222-22 | company', originalRow: { ...data[1] } }),
+        ]);
+    });
+
+    it('should get formatted value using dataText with dynamic mask and accessors', async () => {
+      jest.spyOn(Loader, 'getInstance').mockImplementation(() => {
+        return {
+          getDynamicMask: (value: string) => {
+            return value.length <= 11 ? '###.###.###-##' : '##.###.###/####-##';
+          }
+        };
+      });
+      const data = [
+        { value: '1', name: 'person', cpf_cnpj: '11111111111' },
+        { value: '2', name: 'company', cpf_cnpj: '22222222222222' },
+      ];
+      const instance = new SelectMultiple({
+        name: 'select',
+        component: 'ZdSelectMultiple',
+        dataText: [
+          { name: 'cpf_cnpj', mask: '{{AppController.getDynamicMask}}' },
+          'name',
+        ],
+        dataValue: 'value',
+        datasource: {
+          data,
+        },
+      });
+      expect(instance.formatter(instance.datasource.data))
+        .toEqual([
+          expect.objectContaining({ value: '1', text: '111.111.111-11 | person', originalRow: { ...data[0] } }),
+          expect.objectContaining({ value: '2', text: '22.222.222/2222-22 | company', originalRow: { ...data[1] } }),
+        ]);
+    });
+
+    it('should return empty array when value is empty', () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+      });
+      expect(instance.formatter([])).toEqual([]);
+    });
+  });
+
+  describe('getMoreChipText()', () => {
+    beforeEach(() => {
+      const translateFn = function translateFn(message: string | string[], variables?: IDictionary<any>) {
+        if (message === 'MORE_ITEM') {
+          return variables?.count === 1 ? `(+${variables?.count} item)` : `(+${variables?.count} items)`;
+        }
+        return '';
+      };
+      jest.spyOn(I18n, 'translate').mockImplementation(translateFn);
+    });
+
+    I18n.init();
+    it('should get translated moreChip text', () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+      });
+      expect(instance.getMoreChipText(0)).toBe('(+0 items)');
+    });
+
+    it('should get singular text when moreChip equals 1', () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+      });
+      expect(instance.getMoreChipText(1)).toBe('(+1 item)');
+    });
+  });
+
+  describe('removeInserts()', () => {
+    it('should remove insertsRemoved from datasource', async () => {
+      const data = [
+        { text: 'default 1', value: '1' },
+        { text: 'default 2', value: '2' },
+        { text: 'default 3', value: '3' },
+      ];
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data,
+          limit: 1,
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      await instance.setValue(['2', '3']);
+      expect(instance.datasource.data.length).toBe(3);
+
+      instance.updateSelectValue([{ text: 'default', value: '1' }, { text: 'default 3', value: '3' }])
+      expect(instance.datasource.data.length).toBe(3);
+      setBlur(instance);
+
+      expect(instance.datasource.data.length).toBe(2);
+    });
+
+    it('should remove insertsRemoved from datasource even with search', async () => {
+      const data = [
+        { text: 'default 1', value: '1' },
+        { text: 'default 2', value: '2' },
+        { text: 'default 3', value: '3' },
+      ];
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data,
+          limit: 1,
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      instance.search = '2';
+      await instance.setValue(['2']);
+      expect(instance.datasource.data.length).toBe(2);
+
+      instance.selectValue = [{ text: 'default', value: '1' }];
+      expect(instance.datasource.data.length).toBe(2);
+      setBlur(instance);
+
+      expect(instance.datasource.data.length).toBe(1);
+    });
+  });
+
+  describe('events', () => {
+    it('should call events', async () => {
+      let changeValue = '';
+      let inputValue = '';
+      const changeFn = jest.fn((args: any) => { changeValue = args.value; });
+      const inputFn = jest.fn((args: any) => { inputValue = args.value; });
+      const selectAllFn = jest.fn((args: any) => { inputValue = args.value; });
+      const instance = new SelectMultiple({
+        name: 'select',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+      });
+      expect(() => { instance.selectChange(null); }).not.toThrow();
+      expect(() => { instance.selectInput(null); }).not.toThrow();
+      expect(changeFn).not.toHaveBeenCalled();
+      expect(inputFn).not.toHaveBeenCalled();
+      expect(selectAllFn).not.toHaveBeenCalled();
+
+      instance.events = {
+        change: changeFn,
+        input: inputFn,
+        onSelectAll: selectAllFn,
+      };
+      instance.selectChange([{ value: 'value' }]);
+      instance.selectInput('1');
+      await flushPromises();
+
+      expect(changeFn).toHaveBeenCalled();
+      expect(changeValue).toEqual(['value']);
+      expect(inputFn).toHaveBeenCalled();
+      expect(inputValue).toBe('1');
+    });
+
+    it('should call datasource get on focus', async () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        preventLoadOnFocus: false,
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+      });
+
+      const spy = jest.spyOn(instance.datasource, 'get');
+
+      await flushPromises();
+
+      setFocus(instance);
+      expect(spy).toBeCalled();
+      spy.mockClear();
+    });
+
+    it('should not call datasource get on focus', async () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+      });
+
+      const spy = jest.spyOn(instance.datasource, 'get');
+
+      await flushPromises();
+
+      setFocus(instance);
+      expect(spy).not.toBeCalled();
+      spy.mockClear();
+    });
+
+    it('should not call datasource get on focus event when preventLoadOnFocus is set outside the constructor', async () => {
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+      });
+      instance.preventLoadOnFocus = true;
+
+      const spy = jest.spyOn(instance.datasource, 'get');
+
+      await flushPromises();
+
+      setFocus(instance);
+      expect(spy).not.toBeCalled();
+      spy.mockClear();
+    });
+
+    it('should call datasource get and focus event', async () => {
+      let focused = false;
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        preventLoadOnFocus: false,
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+        events: {
+          focus: () => { focused = true; },
+        },
+      });
+
+      const spy = jest.spyOn(instance.datasource, 'get');
+
+      await flushPromises();
+
+      setFocus(instance);
+      expect(focused).toBeTruthy();
+      expect(spy).toBeCalled();
+      spy.mockClear();
+    });
+
+    it('focus should cache the current datasource', async () => {
+      const data = [
+        { text: 'First 1', value: '1' },
+        { text: 'Second 2', value: '2' },
+        { text: 'Third 3', value: '3' },
+      ];
+
+      const instance = new SelectMultiple({
+        name: 'select',
+        component: 'ZdSelect',
+        dataText: 'text',
+        dataValue: 'value',
+        autocomplete: true,
+        datasource: {
+          data,
+        },
+      });
+      instance.onCreated();
+
+      await instance.datasource.setFilter({ text: '1' });
+      expect(instance.datasource.data).toEqual([data[0]]);
+      setFocus(instance);
+      expect(instance.datasource.data).toEqual([data[0]]);
+      setBlur(instance);
+      expect(instance.datasource.data).toEqual([data[0]]);
+
+      await instance.datasource.setFilter({ text: '2' });
+      expect(instance.datasource.data).toEqual([data[1]]);
+      setFocus(instance);
+      expect(instance.datasource.data).toEqual([data[1]]);
+      setBlur(instance);
+      expect(instance.datasource.data).toEqual([data[1]]);
+
+      const newData = [
+        { text: 'Third 4', value: '4' },
+        { text: 'Third 5', value: '5' },
+      ];
+      instance.datasource.data = newData;
+
+      expect(instance.datasource.data).toEqual(newData);
+      setFocus(instance);
+      expect(instance.datasource.data).toEqual(newData);
+      setBlur(instance);
+      expect(instance.datasource.data).toEqual(newData);
+    });
+
+    it('focus should not cache the insertedValues', async () => {
+      const data = [
+        { text: 'First 1', value: '1' },
+        { text: 'Second 2', value: '2' },
+        { text: 'Third 3', value: '3' },
+      ];
+
+      const instance = new SelectMultiple({
+        name: 'select',
+        component: 'ZdSelect',
+        dataText: 'text',
+        dataValue: 'value',
+        autocomplete: true,
+        datasource: {
+          limit: 1,
+          data,
+        },
+      });
+
+      setFocus(instance);
+      instance.search = data[1].text;
+      instance.selectValue = [data[1]];
+      setBlur(instance);
+      expect(instance.datasource.data).toStrictEqual([ 
+        {
+          text: 'First 1',
+          value: '1'
+        },
+        {
+          text: 'Second 2',
+          value: '2'
+        },
+        {
+          text: 'Third 3', 
+          value: '3'
+        }
+      ]);
+
+      setBlur(instance);
+      expect(instance.search).toBe('');
+      expect(instance.datasource.data).toStrictEqual([
+        {
+          text: 'First 1',
+          value: '1'
+        },
+        {
+          text: 'Second 2',
+          value: '2'
+        },
+        {
+          text: 'Third 3', 
+          value: '3'
+        }
+      ]);
+
+      setFocus(instance);
+      instance.setValue([]);
+
+      setBlur(instance);
+      expect(instance.datasource.data).toEqual(data);
+
+      setFocus(instance);
+      expect(instance.datasource.data).toEqual(data);
+    });
+
+    it('when in manualMode, then focus should not cache values', async () => {
+      const data = [
+        { text: 'First 1', value: '1' },
+        { text: 'Second 2', value: '2' },
+        { text: 'Third 3', value: '3' },
+      ];
+      const instance = new SelectMultiple({
+        name: 'select',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        autocomplete: true,
+        manualMode: true,
+        datasource: {
+          data,
+        },
+      });
+      instance.onCreated();
+
+      setFocus(instance);
+      await flushPromises();
+      await instance.updateSearch('First');
+      setBlur(instance);
+
+      expect(instance.datasource.data).toEqual([data[0]]);
+    });
+  });
+
+  describe('loadMore()', () => {
+    it('should load more data', async () => {
+      const instance = new SelectMultiple({
+        name: 'select',
+        component: 'ZdSelectMultiple',
+        datasource: {
+          limit: 2,
+          data: [
+            { text: 'default1', value: '1' },
+            { text: 'default2', value: '2' },
+            { text: 'default3', value: '3' },
+            { text: 'default4', value: '4' },
+          ],
+        },
+      });
+      instance.onCreated();
+
+      expect(instance.datasource.limit).toBe(2);
+      expect(instance.showLoadMore()).toBeTruthy();
+
+      await instance.loadMore();
+
+      expect(instance.datasource.limit).toBe(4);
+      expect(instance.showLoadMore()).toBeFalsy();
+
+      setBlur(instance);
+      // should cache
+      expect(instance.datasource.data.length).toBe(4);
+    });
+
+    it('should not cache if searching', async () => {
+      const data = [
+        { text: 'default1', value: '1' },
+        { text: 'default2', value: '2' },
+        { text: 'default3', value: '3' },
+        { text: 'default4', value: '4' },
+        { text: 'default5', value: '5' },
+      ];
+
+      const instance = new SelectMultiple({
+        name: 'select',
+        component: 'ZdSelect',
+        dataValue: 'value',
+        dataText: 'text',
+        value: [data[4].value],
+        datasource: {
+          limit: 2,
+          data,
+        },
+      });
+      instance.onCreated();
+
+      setFocus(instance);
+      await flushPromises();
+      instance.search = 'def';
+      await flushPromises();
+      expect(instance.datasource.limit).toBe(2);
+      expect(instance.showLoadMore()).toBeTruthy();
+      expect(instance.datasource.data.length).toBe(2);
+
+      await instance.loadMore();
+
+      expect(instance.datasource.limit).toBe(4);
+      expect(instance.showLoadMore()).toBeTruthy();
+      expect(instance.datasource.data.length).toBe(4);
+
+      setBlur(instance);
+      // should not cache. Inserted values should not be removed
+      expect(instance.datasource.data.length).toBe(2);
+    });
+
+    it('when select has pushedValue, should remove loadMore after all items are loaded', async () => {
+      const data = [
+        { id: '1', name: 'First' },
+        { id: '2', name: 'Second' },
+        { id: '3', name: 'Third' },
+      ];
+
+      const instance = new SelectMultiple({
+        name: 'select',
+        component: 'ZdSelectMultiple',
+        dataValue: 'id',
+        dataText: 'name',
+        value: ['3'],
+        datasource: {
+          limit: 1,
+          data,
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      await flushPromises();
+
+      setFocus(instance);
+      await flushPromises();
+
+      await instance.loadMore();
+      expect(instance.showLoadMore()).toBeTruthy();
+
+      await instance.loadMore();
+      expect(instance.showLoadMore()).toBeFalsy();
+      expect(instance.datasource.data).toEqual(data);
+    });
+
+    it('when a insertedValue is deselected, should remove it on loadMore', async () => {
+      const data = [
+        { id: '1', name: 'First' },
+        { id: '2', name: 'Second' },
+        { id: '3', name: 'Third' },
+      ];
+      const instance = new SelectMultiple({
+        name: 'select',
+        component: 'ZdSelectMultiple',
+        dataValue: 'id',
+        dataText: 'name',
+        value: ['3'],
+        datasource: {
+          limit: 1,
+          data,
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      await flushPromises();
+
+      setFocus(instance);
+      await flushPromises();
+
+      instance.selectValue = [];
+      instance.updateSelectValue([]);
+
+      await instance.loadMore();
+      expect(instance.showLoadMore()).toBeTruthy();
+
+      await instance.loadMore();
+      expect(instance.showLoadMore()).toBeFalsy();
+      expect(instance.datasource.data).toEqual(data);
+
+      setBlur(instance);
+      expect(instance.datasource.data).toEqual(data);
+    });
+  });
+
+  describe('blur()', () => {
+    it('should clear value no search(value) if autocomplete', async () => {
+      const instance = new SelectMultiple({
+        name: 'select',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+      });
+
+      instance.setValue([]);
+      await flushPromises();
+      setBlur(instance);
+      expect(instance.datasource.search).toBe('');
+      expect(instance.value).toEqual([]);
+    });
+
+    it('should not clear search if not autocomplete', async () => {
+      const instance = new SelectMultiple({
+        name: 'select',
+        component: 'ZdSelectMultiple',
+        autocomplete: false,
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+      });
+      const spy = jest.spyOn(instance.datasource, 'get');
+
+      instance.search = '2';
+      await flushPromises();
+      setTimeout(async () => {
+        expect(instance.datasource.search).toBe('');
+        expect(instance.search).toBe('2');
+
+        setFocus(instance);
+        await flushPromises();
+        expect(instance.datasource.search).toBe('2');
+
+        setBlur(instance);
+        expect(instance.datasource.search).toBe('2');
+
+        spy.mockClear();
+      }, 1000);
+    });
+  });
+
+  describe('onSelectAll', () => {
+    it('if onSelectAll event is called', () => {
+      const selectAllFn = jest.fn();
+      const unSelectAllFn = jest.fn();
+      const instance = new SelectMultiple({
+        name: 'select',
+        component: 'ZdSelectMultiple',
+        datasource: {
+          limit: 2,
+          data: [
+            { text: 'default1', value: '1' },
+            { text: 'default2', value: '2' },
+            { text: 'default3', value: '3' },
+            { text: 'default4', value: '4' },
+          ],
+        },
+        events: {
+          selectedAll: selectAllFn,
+          unselectedAll: unSelectAllFn,
+        },
+      });
+      const event = new MouseEvent('click');
+      const element = document.createElement('div');
+      instance.onSelectAll(true, event, element);
+      expect(selectAllFn).toHaveBeenCalled();
+      instance.onSelectAll(false, event, element);
+      expect(unSelectAllFn).toHaveBeenCalled();
+      instance.onSelectAll(true, { defaultPrevented: true } as Event, element);
+      expect(selectAllFn).toHaveBeenCalled();
+      instance.onSelectAll(false, { defaultPrevented: true } as Event, element);
+      expect(unSelectAllFn).toHaveBeenCalled();
+    });
+
+    it('when selectAllItems is called and select has no search, should cache all items', async () => {
+      const instance = new SelectMultiple({
+        name: 'select',
+        component: 'ZdSelectMultiple',
+        datasource: {
+          limit: 2,
+          data: [
+            { text: 'default1', value: '1' },
+            { text: 'default2', value: '2' },
+            { text: 'default3', value: '3' },
+            { text: 'default4', value: '4' },
+          ],
+        },
+      });
+
+      instance.onCreated();
+      instance.onMounted({});
+      expect(instance.datasource.data.length).toBe(2);
+      instance.selectAllItems();
+
+      await flushPromises();
+
+      instance.updateSelectValue;
+      expect(instance.datasource.data.length).toBe(4);
+      setBlur(instance);
+      expect(instance.datasource.data.length).toBe(4);
+    });
+
+    it('if selectAllItems event is called', () => {
+      const selectAllFn = jest.fn();
+      const instance = new SelectMultiple({
+        name: 'select',
+        component: 'ZdSelectMultiple',
+        datasource: {
+          limit: 4,
+          data: [
+            { text: 'default1', value: '1' },
+            { text: 'default2', value: '2' },
+            { text: 'default3', value: '3' },
+            { text: 'default4', value: '4' },
+          ],
+        },
+        events: {
+          selectedAll: selectAllFn,
+        },
+      });
+      const event = new MouseEvent('click');
+      const element = document.createElement('div');
+      instance.onSelectAll(true, event, element);
+      expect(selectAllFn).toHaveBeenCalled();
+    });
+
+    it('when selectAllItems is called, should not select disabled items', async () => {
+      const instance = new SelectMultiple({
+        name: 'select',
+        component: 'ZdSelectMultiple',
+        dataDisabled: 'disabled',
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          limit: 2,
+          data: [
+            { text: 'default1', value: '1', disabled: true },
+            { text: 'default2', value: '2' },
+            { text: 'default3', value: '3' },
+            { text: 'default4', value: '4' },
+          ],
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+
+      expect(instance.datasource.data.length).toBe(2);
+      await instance.selectAllItems();
+
+      expect(instance.value).toEqual(['2', '3', '4']);
+    });
+
+    it('when selectAllItems is called (using disabledItems), should not select disabled items', async () => {
+      const instance = new SelectMultiple({
+        name: 'select',
+        component: 'ZdSelectMultiple',
+        dataText: 'text',
+        dataValue: 'value',
+        disabledItems: [
+          { text: 'default1', value: '1' },
+          '3',
+        ],
+        datasource: {
+          limit: 2,
+          data: [
+            { text: 'default1', value: '1' },
+            { text: 'default2', value: '2' },
+            { text: 'default3', value: '3' },
+            { text: 'default4', value: '4' },
+          ],
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+
+      expect(instance.datasource.data.length).toBe(2);
+      await instance.selectAllItems();
+
+      expect(instance.value).toEqual(['2', '4']);
+    });
+  });
+
+  describe('Accessor in value', () => {
+    it('when accessor is used in value, should sync controller value and select value', async () => {
+      const controller = {
+        value: ['1'],
+      }
+      jest.spyOn(Loader, 'getInstance').mockImplementation(() => {
+        return controller;
+      });
+      const spy = jest.fn();
+      const instance = new SelectMultiple({
+        name: 'select-multiple',
+        component: 'ZdSelectMultiple',
+        value: '{{AppController.value}}',
+        dataValue: 'id',
+        dataText: 'name',
+        datasource: {
+          data: [{ id: '1', name: 'First' },
+            { id: '2', name: 'Second' },
+            { id: '3', name: 'Third' }],
+        },
+        events: {
+          change: () => spy(),
+        },
+      });
+
+      expect(instance.value).toEqual(['1']);
+      expect(spy).not.toHaveBeenCalled();
+
+      controller.value = ['2'];
+
+      expect(instance.value).toEqual(['2']);
+    });
+  });
+
+  describe('Data change', () => {
+    it('when datasource is updated, should set the previous value as current value', async () => {
+      const data = [
+        { text: 'First', value: '1' },
+        { text: 'Second', value: '2' },
+        { text: 'Third', value: '3' },
+      ];
+      const instance = new SelectMultiple({
+        name: 'select',
+        component: 'ZdSelect',
+        dataText: 'text',
+        dataValue: 'value',
+        value: ['1'],
+        datasource: {
+          data,
+          limit: 1,
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+
+      await instance.datasource.get();
+
+      expect(instance.value).toEqual(['1']);
+      expect(instance.selectValue).toEqual([data[0]]);
+    });
+
+    it('when datasource is updated, should set value as null if not found in any page', async () => {
+      const data = [
+        { text: 'First', value: '1' },
+        { text: 'Second', value: '2' },
+        { text: 'Third', value: '3' },
+      ];
+      const instance = new SelectMultiple({
+        name: 'select',
+        component: 'ZdSelect',
+        dataText: 'text',
+        dataValue: 'value',
+        value: ['1'],
+        datasource: {
+          data,
+        },
+      });
+
+      await instance.datasource.setFilter({ value: '2' });
+
+      expect(instance.value).toEqual([]);
+      expect(instance.selectValue).toEqual([]);
+    });
+
+    it('when datasource search changes, should not change value', async () => {
+      const data = [
+        { text: 'First', value: '1' },
+        { text: 'Second', value: '2' },
+        { text: 'Third', value: '3' },
+      ];
+      const instance = new SelectMultiple({
+        name: 'select',
+        component: 'ZdSelect',
+        dataText: 'text',
+        dataValue: 'value',
+        value: ['1'],
+        datasource: {
+          data,
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+
+      await instance.datasource.setSearch('Second');
+
+      expect(instance.value).toEqual(['1']);
+      expect(instance.selectValue).toEqual([data[0]]);
+    });
+  });
+
+  describe('unSelectAllItems', () => {
+    it('shroud unselect all filtred items', async () => {
+      const data = [
+        { text: 'First', value: '1' },
+        { text: 'Second', value: '2' },
+        { text: 'Third', value: '3' },
+      ];
+      const instance = new SelectMultiple({
+        name: 'select',
+        component: 'ZdSelect',
+        dataText: 'text',
+        dataValue: 'value',
+        autocomplete: true,
+        value: ['1'],
+        datasource: {
+          data,
+        },
+      });
+
+      instance.setValue(data);
+
+      await instance.updateSearch('Second');
+      instance.search = 'Second';
+
+      expect(instance.insertedValues).toEqual([]);
+
+      instance.unSelectAllItems();
+      await flushPromises();
+
+      instance.updateSelectValue([data[0]]);
+      expect(instance.selectValue).toStrictEqual([data[0]]);
+    });
+  });
+
+  describe('showCheckboxAll', () => {
+    it('should change the disabled value when checkboxAll value changes', () => {
+      const instance = new SelectMultiple({
+        name: 'select',
+        component: 'ZdSelectMultiple',
+        showCheckboxAll: true,
+      });
+
+      expect(instance.disabled).toBeFalsy();
+
+      instance.checkboxAll = true;
+
+      expect(instance.disabled).toBeTruthy();
+    });
+  });
+});