@zeedhi/common 1.111.1 → 3.0.0

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

@@ -0,0 +1,1316 @@
+import { DatasourceFactory, FormatterParserProvider, Loader, MemoryDatasource } from "@zeedhi/core";
+import { ISelect, Select } from "../../../../src";
+import { flushPromises } from "../../__helpers__/flush-promises-helper";
+import { mockGetUsingData } from "../../__helpers__/mock-http-get-helper";
+import { setBlur, setFocus } from "../../__helpers__/component-event-helper";
+import { IDictionary } from "packages/core/dist/types";
+
+jest.mock('lodash.debounce', () => jest.fn((fn) => fn));
+
+/**
+ * Creates a new select instance with predefined props
+ * also calls onCreated
+ */
+const instantiateDefaultSelect = (props: Partial<ISelect> = {}) => {
+  const instance = new Select({
+    name: 'select',
+    component: 'ZdSelect',
+    dataText: 'text',
+    dataValue: 'value',
+    datasource: {
+      data: [{ text: 'default', value: '1' }],
+    },
+    ...props,
+  });
+  instance.onCreated();
+  instance.onMounted({});
+
+  return instance;
+};
+
+describe('Select', () => {
+  describe('constructor()', () => {
+    it('should create new select with default values', () => {
+      const instance = new Select({ name: 'select', component: 'ZdSelect' });
+      expect(instance.datasource).toBeInstanceOf(MemoryDatasource);
+      expect(instance.dataText).toBe('');
+      expect(instance.dataValue).toBe('');
+      expect(instance.dataDisabled).toBe('disabled');
+      expect(instance.returnObject).toBeFalsy();
+      expect(instance.autocomplete).toBeTruthy();
+      expect(instance.autoSelection).toBeTruthy();
+      expect(instance.preventLoadOnFocus).toBeTruthy();
+      expect(instance.menuMaxHeight).toBe(304);
+      expect(instance.menuMaxWidth).toBe('auto');
+      expect(instance.itemAfterSlot).toEqual([]);
+      expect(instance.itemBeforeSlot).toEqual([]);
+      expect(instance.disabledItems).toEqual([]);
+      expect(instance.manualMode).toBeFalsy();
+      expect(instance.searchParam).toBe('SEARCH');
+      expect(instance.dataValueOut).toEqual([]);
+      expect(instance.dataValueOutFormName).toBe('');
+    });
+
+    it('should create new select replacing default values', () => {
+      const instance = new Select({
+        name: 'select',
+        component: 'ZdSelect',
+        datasource: { data: [] },
+        dataText: 'text',
+        dataValue: 'value',
+        dataTextDiscrete: 'text',
+        dataDisabled: 'prop',
+        returnObject: true,
+        autocomplete: false,
+        autoSelection: false,
+        preventLoadOnFocus: true,
+        menuMaxHeight: 200,
+        menuMaxWidth: 200,
+        disabledItems: [1, 3],
+        itemAfterSlot: [{ name: 'after_item', component: 'ZdText', text: 'Item After' }],
+        itemBeforeSlot: [{ name: 'before_item', component: 'ZdText', text: 'Item Before' }],
+        manualMode: true,
+        searchParam: 'FILTER',
+        dataValueOut: [
+          {
+            column: 'TEST',
+            columnOnForm: 'TEST',
+          },
+        ],
+        dataValueOutFormName: 'formTest',
+        disabled: true,
+      });
+      expect(instance.datasource).toBeInstanceOf(MemoryDatasource);
+      expect(instance.dataText).toEqual(['text']);
+      expect(instance.dataTextDiscrete).toEqual(['text']);
+      expect(instance.dataValue).toBe('value');
+      expect(instance.dataDisabled).toBe('prop');
+      expect(instance.returnObject).toBeTruthy();
+      expect(instance.autocomplete).toBeFalsy();
+      expect(instance.autoSelection).toBeFalsy();
+      expect(instance.preventLoadOnFocus).toBeTruthy();
+      expect(instance.menuMaxHeight).toBe(200);
+      expect(instance.menuMaxWidth).toBe(200);
+      expect(instance.disabledItems).toEqual([1, 3]);
+      expect(instance.itemAfterSlot).toEqual([
+        { name: 'after_item', component: 'ZdText', text: 'Item After' },
+      ]);
+      expect(instance.itemBeforeSlot).toEqual([
+        { name: 'before_item', component: 'ZdText', text: 'Item Before' },
+      ]);
+      expect(instance.manualMode).toBeTruthy();
+      expect(instance.searchParam).toBe('FILTER');
+      expect(instance.dataValueOut).toEqual([
+        {
+          column: 'TEST',
+          columnOnForm: 'TEST',
+        },
+      ]);
+      expect(instance.dataValueOutFormName).toBe('formTest');
+      expect(instance.disabled).toBeTruthy();
+    });
+
+    it('should prevent load on focus with not lazy load datasource', async () => {
+      const instance = new Select({
+        name: 'select',
+        component: 'ZdSelect',
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+          lazyLoad: false,
+        },
+      });
+      await flushPromises();
+      expect(instance.preventLoadOnFocus).toBeTruthy();
+    });
+  });
+
+  describe('setDefaultValue()', () => {
+    it('should set default value', async () => {
+      const instance = instantiateDefaultSelect({
+        value: '1',
+      });
+      await flushPromises();
+      expect(instance.value).toBe('1');
+    });
+
+    it('should set default value with simple select', async () => {
+      const instance = new Select({
+        name: 'select',
+        component: 'ZdSelect',
+        value: 'first',
+        datasource: {
+          type: 'simple',
+          items: ['first', 'second'],
+        },
+      });
+      instance.onCreated();
+      instance.onMounted({});
+      await flushPromises();
+      expect(instance.value).toBe('first');
+    });
+
+    it('should set no value if value not found in datasource.data', async () => {
+      const instance = instantiateDefaultSelect({
+        value: '2',
+      });
+      await flushPromises();
+      expect(instance.value).toBeNull();
+    });
+  });
+
+  describe('value', () => {
+    it('should call setValue when setting value', async () => {
+      const instance = instantiateDefaultSelect();
+      const spy = jest.spyOn(instance, 'setValue');
+
+      instance.value = '1';
+
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call setValue when setting same value', async () => {
+      const instance = instantiateDefaultSelect({ value: '1' });
+      await flushPromises();
+      const spy = jest.spyOn(instance, 'setValue');
+
+      instance.value = '1';
+
+      expect(spy).toHaveBeenCalledTimes(0);
+      spy.mockClear();
+    });
+  });
+
+  describe('setValue()', () => {
+    it('should set and get datasource current row', async () => {
+      const instance = instantiateDefaultSelect();
+
+      await instance.setValue('1');
+
+      expect(instance.datasource.currentRow).toEqual({ text: 'default', value: '1' });
+      expect(instance.value).toBe('1');
+
+      await instance.setValue(null);
+
+      expect(instance.datasource.currentRow).toBeNull();
+      expect(instance.value).toBeNull();
+    });
+
+    it('should set and get datasource current row using object', async () => {
+      const instance = instantiateDefaultSelect({ returnObject: true });
+
+      await instance.setValue({ text: 'default', value: '1' });
+
+      expect(instance.datasource.currentRow).toEqual({ text: 'default', value: '1' });
+      expect(instance.value).toEqual({ text: 'default', value: '1' });
+    });
+
+    it('should set in a returnObject select using normal value', async () => {
+      const instance = instantiateDefaultSelect({ returnObject: true });
+
+      await instance.setValue('1');
+      
+      expect(instance.datasource.currentRow).toEqual({ text: 'default', value: '1' });
+      expect(instance.value).toEqual({ text: 'default', value: '1' });
+    });
+
+    it('while value is being searched in another page, should set datasource loading', async () => {
+      const data = [
+        { text: 'default', value: '1' },
+        { text: 'default 2', value: '2' },
+      ];
+      const instance = instantiateDefaultSelect({ datasource: { data, limit: 1 }});
+
+      expect(instance.datasource.loading).toBeFalsy();
+
+      const promise = instance.setValue('2');
+      expect(instance.datasource.loading).toBeTruthy();
+      await promise;
+
+      expect(instance.datasource.loading).toBeFalsy();
+    });
+
+    it('when searchParam is SEARCH and setting a value that is not in datasource, should factory a datasource with search',
+      async () => {
+        const spyGet = mockGetUsingData([
+          { value: '1' }, { value: '2' }, { value: '3' },
+        ]);
+        const instance = instantiateDefaultSelect({ dataText: 'value', dataValue: 'value', searchParam: 'SEARCH', datasource: {
+          type: 'rest',
+          uniqueKey: 'value',
+          route: 'employees',
+        }});
+        const spyFactory = jest.spyOn(DatasourceFactory, 'factory');
+
+        await instance.setValue(4);
+
+        expect(spyFactory).toHaveBeenCalledWith(expect.objectContaining({
+          searchIn: ['value'],
+          search: '4',
+        }));
+
+        spyFactory.mockClear();
+        spyGet.mockClear();
+      });
+
+    it('when searchParam is FILTER and setting a value that is not in datasource, should factory a datasource with filter',
+      async () => {
+        const spyGet = mockGetUsingData([
+          { value: '1' }, { value: '2' }, { value: '3' },
+        ]);
+        const instance = instantiateDefaultSelect({ dataText: 'value', dataValue: 'value', searchParam: 'FILTER', datasource: {
+          type: 'rest',
+          uniqueKey: 'value',
+          route: 'employees',
+        }});
+        const spyFactory = jest.spyOn(DatasourceFactory, 'factory');
+
+        await instance.setValue(4);
+
+        expect(spyFactory).toHaveBeenCalledWith(expect.objectContaining({
+          filter: {
+            value: 4,
+          },
+        }));
+
+        spyFactory.mockClear();
+        spyGet.mockClear();
+      });
+
+    it('when searchParam is DYNAMIC_FILTER and set a value not in datasource, should factory datasource with dynamicFilter',
+      async () => {
+        const spyGet = mockGetUsingData([
+          { value: '1' }, { value: '2' }, { value: '3' },
+        ]);
+        const instance = instantiateDefaultSelect({ dataText: 'value', dataValue: 'value', searchParam: 'DYNAMIC_FILTER', datasource: {
+          type: 'rest',
+          uniqueKey: 'value',
+          route: 'employees',
+        }});
+        const spyFactory = jest.spyOn(DatasourceFactory, 'factory');
+
+        await instance.setValue('4');
+
+        expect(spyFactory).toHaveBeenCalledWith(expect.objectContaining({
+          dynamicFilter: {
+            value: [
+              { operation: 'EQUALS', relation: 'OR', value: '4' },
+            ],
+          },
+        }));
+
+        spyFactory.mockClear();
+        spyGet.mockClear();
+      });
+
+    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 = instantiateDefaultSelect({ manualMode: true, searchParam: 'DYNAMIC_FILTER', value: '1',
+        datasource: {
+          data,
+          limit: 1,
+      }});
+      await flushPromises();
+
+      await instance.setValue('2');
+
+      expect(instance.datasource.data).toEqual([data[0]]);
+      expect(instance.value).toBeNull();
+    });
+
+    it('should request value from another page using dynamic datasource properties', async () => {
+      const data = [
+        { text: 'default 1', value: '1' },
+        { text: 'default 2', value: '2' },
+        { text: 'default 3', value: '3' },
+      ];
+      const instance = instantiateDefaultSelect({ value: '1', datasource: {
+        data,
+        limit: 1,
+        lazyLoad: true,
+      }});
+
+      instance.datasource.filter = { text: '2' };
+      setFocus(instance);
+      await flushPromises();
+
+      expect(instance.datasource.data).toEqual([data[1]]);
+
+      await instance.setValue('3');
+
+      expect(instance.datasource.data).toEqual([data[1]]);
+      expect(instance.value).toBeNull();
+    });
+  });
+
+  describe('formatter()', () => {
+    const mockLoaderDynamicMask = () => {
+      return jest.spyOn(Loader, 'getInstance').mockImplementation(() => {
+        return {
+          getDynamicMask: (value: string) => {
+            return value.length <= 11 ? '###.###.###-##' : '##.###.###/####-##';
+          }
+        };
+      });
+    };
+
+    it('should get formatted value', async () => {
+      const instance = instantiateDefaultSelect();
+
+      expect(instance.formatter(undefined)).toBeNull();
+      expect(instance.formatter('1')).toBe('1');
+      expect(instance.formatter({ text: 'default', value: '1' })).toBe('default');
+      expect(instance.formatter({ value: '1' })).toBe('');
+    });
+
+    it('should get formatted value with dataTextDiscrete', async () => {
+      const instance = new Select({
+        name: 'select',
+        component: 'ZdSelect',
+        dataTextDiscrete: ['value', 'text'],
+        dataText: 'text',
+        dataValue: 'value',
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+      });
+      const formatterProps = { dataText: instance.dataTextDiscrete, dataTextSeparator: instance.dataTextSeparator };
+      instance.search = '1';
+      expect(instance.formatter(instance.search)).toBe('1');
+      expect(instance.formatter(undefined)).toBeNull();
+      expect(instance.formatter('1')).toBe('1');
+      expect(instance.formatter({ text: 'default', value: '1' }, formatterProps)).toBe('1 | default');
+      expect(instance.formatter({ text: 'default', value: '1' })).toBe('default');
+    });
+
+    it('should get formatted value using multiple dataText values', async () => {
+      const instance = new Select({
+        name: 'select',
+        component: 'ZdSelect',
+        dataText: ['value', 'text', 'code'],
+        dataValue: 'value',
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+      });
+      expect(instance.formatter(undefined)).toBeNull();
+      expect(instance.formatter('1')).toBe('1');
+      expect(instance.formatter({ text: 'default', value: '1' })).toBe('1 | default');
+    });
+
+    it('should get formatted value using dataText with mask', async () => {
+      const instance = new Select({
+        name: 'select',
+        component: 'ZdSelect',
+        dataText: ['value', { name: 'text', mask: 'a.a.a' }],
+        dataValue: 'value',
+        datasource: {
+          data: [{ text: 'default', value: '1' }],
+        },
+      });
+      expect(instance.formatter({ text: 'default', value: '1' })).toBe('1 | d.e.f');
+    });
+
+    it('should get formatted value using dataText with dynamic mask', async () => {
+      const instance = new Select({
+        name: 'select',
+        component: 'ZdSelect',
+        dataText: [
+          { name: 'cpf_cnpj', mask: (value: string) => (value.length <= 11 ? '###.###.###-##' : '##.###.###/####-##') },
+          'name',
+        ],
+        dataValue: 'value',
+        datasource: {
+          data: [
+            { name: 'person', cpf_cnpj: '11111111111' },
+            { name: 'company', cpf_cnpj: '22222222222222' },
+          ],
+        },
+      });
+      expect(instance.formatter({ name: 'person', cpf_cnpj: '11111111111' })).toBe('111.111.111-11 | person');
+      expect(instance.formatter({ name: 'company', cpf_cnpj: '22222222222222' })).toBe('22.222.222/2222-22 | company');
+    });
+
+    it('should get formatted value using dataText with dynamic mask and accessors', async () => {
+      const spy = mockLoaderDynamicMask();
+
+      const instance = new Select({
+        name: 'select',
+        component: 'ZdSelect',
+        dataText: [
+          { name: 'cpf_cnpj', mask: '{{AppController.getDynamicMask}}' },
+          'name',
+        ],
+        dataValue: 'value',
+        datasource: {
+          data: [
+            { name: 'person', cpf_cnpj: '11111111111' },
+            { name: 'company', cpf_cnpj: '22222222222222' },
+          ],
+        },
+      });
+
+      expect(instance.formatter({ name: 'person', cpf_cnpj: '11111111111' })).toBe('111.111.111-11 | person');
+      expect(instance.formatter({ name: 'company', cpf_cnpj: '22222222222222' })).toBe('22.222.222/2222-22 | company');
+
+      spy.mockReset();
+    });
+
+    it('should use default dataTextSeparator when it isnt defined', async () => {
+      const formatterFn = FormatterParserProvider.getFormatter('ZdSelect');
+      const value = { text: 'default', value: '1' };
+
+      expect(formatterFn(value, { dataText: ['value', 'text'] })).toBe('1 | default');
+    });
+
+    it('should transform dataText to array if its string', async () => {
+      const formatterFn = FormatterParserProvider.getFormatter('ZdSelect');
+      const value = { text: 'default', value: '1' };
+
+      expect(formatterFn(value, { dataText: 'text' })).toBe('default');
+    });
+  });
+
+  describe('search', () => {
+    it('should not update datasource if component does not have focus', async () => {
+      const instance = instantiateDefaultSelect();
+      const spy = jest.spyOn(instance.datasource, 'get');
+
+      instance.search = '2';
+      await flushPromises();
+
+      expect(instance.datasource.search).toBe('');
+      expect(instance.search).toBe('2');
+      expect(spy).not.toHaveBeenCalled();
+
+      setFocus(instance);
+      await flushPromises();
+
+      expect(instance.datasource.search).toBe('2');
+      expect(spy).toHaveBeenCalled();
+
+      setBlur(instance);
+
+      expect(instance.datasource.search).toBe('');
+
+      spy.mockClear();
+    });
+
+    it('should update datasource search', async () => {
+      const instance = instantiateDefaultSelect();
+      const spy = jest.spyOn(instance.datasource, 'get');
+
+      setFocus(instance);
+
+      instance.search = '2';
+      await flushPromises();
+      
+      expect(instance.datasource.search).toBe('2');
+      expect(instance.search).toBe('2');
+      expect(spy).toHaveBeenCalled();
+
+      instance.search = '2';
+      await flushPromises();
+
+      expect(spy).toHaveBeenCalledTimes(1);
+      
+      spy.mockClear();
+    });
+
+    it('when in manualMode, then search should not use cache', async () => {
+      const instance = instantiateDefaultSelect({
+        manualMode: true,
+        value: '1',
+        datasource: {
+          search: 'def',
+          data: [{ text: 'default', value: '1' }],
+        },
+      });
+
+      setFocus(instance);
+      await flushPromises();
+      
+      const spy = jest.spyOn(instance, 'updateSearch');
+
+      // on search
+      instance.search = '2';
+      await flushPromises();
+
+      expect(spy).toHaveBeenCalledTimes(1);
+
+      // on empty search
+      instance.search = '';
+      await flushPromises();
+
+      expect(spy).toHaveBeenCalledTimes(2);
+    });
+
+    it('should clear datasource search when select search is changed to empty', async () => {
+      const instance = instantiateDefaultSelect({ value: '1' });
+      const spy = jest.spyOn(instance.datasource, 'get');
+
+      setFocus(instance);
+      instance.search = '2';
+      
+      expect(instance.search).toBe('2');
+      expect(instance.datasource.search).toBe('2');
+      expect(spy).toHaveBeenCalledTimes(2);
+
+      instance.search = '';
+      expect(instance.search).toBe('');
+      expect(instance.datasource.search).toBe('');
+      expect(spy).toHaveBeenCalledTimes(2);
+      spy.mockClear();
+    });
+
+    it('should clear pushedValue 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 = instantiateDefaultSelect({
+        autocomplete: true,
+        datasource: {
+          limit: 1,
+          data,
+        },
+      });
+      const spy = jest.spyOn(instance.datasource, 'get');
+
+      expect(instance.datasource.data).toEqual([data[0]]);
+
+      setFocus(instance);
+      // pushedValue
+      instance.search = 'default 3';
+      await instance.setValue('3');
+      setBlur(instance);
+      expect(instance.pushedValue).toEqual(data[2]);
+      expect(instance.items).toEqual([data[2], data[0]]);
+
+      setFocus(instance);
+      instance.search = '';
+      expect(instance.search).toBe('');
+      expect(instance.pushedValue).toBeNull();
+      expect(instance.items).toEqual([data[0]]);
+
+      spy.mockClear();
+    });
+
+    it('should not call doSearch if search value is same of selected value', async () => {
+      const instance = instantiateDefaultSelect();
+      const spy = jest.spyOn(instance, 'updateSearch');
+
+      setFocus(instance);
+      await instance.setValue('1');
+
+      instance.search = 'default';
+      expect(spy).toHaveBeenCalledTimes(1);
+
+      spy.mockClear();
+    });
+
+    it('should not call doSearch if search value is same of selected value using dataTextDiscrete', async () => {
+      const instance = instantiateDefaultSelect({
+        dataText: ['value', 'text'],
+        dataTextDiscrete: ['text'],
+      });
+      const spy = jest.spyOn(instance, 'updateSearch');
+
+      setFocus(instance);
+      await instance.setValue('1');
+
+      instance.search = 'default';
+      expect(spy).toHaveBeenCalledTimes(1);
+
+      instance.search = '1 | default';
+      expect(spy).toHaveBeenCalledTimes(1);
+      spy.mockClear();
+    });
+  });
+
+  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 instance = instantiateDefaultSelect();
+
+      expect(() => { instance.selectChange(null); }).not.toThrow();
+      expect(() => { instance.selectInput(null); }).not.toThrow();
+      expect(changeFn).not.toHaveBeenCalled();
+      expect(inputFn).not.toHaveBeenCalled();
+
+      instance.events = {
+        change: changeFn,
+        input: inputFn,
+      };
+      instance.selectChange({ value: 'value' });
+      instance.selectInput('1');
+      await flushPromises();
+
+      expect(changeFn).toHaveBeenCalled();
+      expect(changeValue).toBe('value');
+      expect(inputFn).toHaveBeenCalled();
+      expect(inputValue).toBe('1');
+
+      instance.selectChange(undefined);
+      await flushPromises();
+
+      expect(changeValue).toBeNull();
+    });
+
+    it('should call datasource get on focus event when preventLoadOnFocus is false', async () => {
+      const instance = instantiateDefaultSelect({ preventLoadOnFocus: false, });
+
+      const spy = jest.spyOn(instance.datasource, 'get');
+
+      await flushPromises();
+      setFocus(instance);
+      expect(spy).toHaveBeenCalled();
+      spy.mockClear();
+    });
+
+    it('should not call datasource get on focus event when preventLoadOnFocus is true', async () => {
+      const instance = instantiateDefaultSelect();
+
+      const spy = jest.spyOn(instance.datasource, 'get');
+
+      await flushPromises();
+      setFocus(instance);
+      expect(spy).not.toHaveBeenCalled();
+      spy.mockClear();
+    });
+
+    it('should not call datasource get on focus event when preventLoadOnFocus is set outside the constructor', async () => {
+      const instance = instantiateDefaultSelect();
+      instance.preventLoadOnFocus = true;
+
+      const spy = jest.spyOn(instance.datasource, 'get');
+
+      setFocus(instance);
+      expect(spy).not.toHaveBeenCalled();
+      spy.mockClear();
+    });
+
+    it('should call datasource get and focus event', async () => {
+      let focused = false;
+      const instance = instantiateDefaultSelect({ preventLoadOnFocus: false, events: {
+        focus: () => { focused = true; },
+      }, });
+
+      const spy = jest.spyOn(instance.datasource, 'get');
+
+      await flushPromises();
+      setFocus(instance);
+      expect(focused).toBeTruthy();
+      expect(spy).toHaveBeenCalled();
+      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 = instantiateDefaultSelect({ autocomplete: true, datasource: {
+        data,
+      } });
+
+      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('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 = instantiateDefaultSelect({ autocomplete: true, manualMode: true, datasource: { data }});
+      await flushPromises();
+
+      expect(instance.datasource.data).toEqual(data);
+
+      setFocus(instance);
+      await instance.updateSearch('First');
+      setBlur(instance);
+
+      expect(instance.datasource.data).toEqual([data[0]]);
+    });
+
+    it('should call change event when select has default value and it changes to null', async () => {
+      const instance = instantiateDefaultSelect({ value: '1', events: { change: () => {} }});
+
+      const spy = jest.spyOn(instance.events as any, 'change');
+
+      await flushPromises();
+
+      expect(spy).toHaveBeenCalledTimes(0);
+
+      await instance.setValue(null, true);
+      expect(spy).toHaveBeenCalledTimes(1);
+      spy.mockClear();
+    });
+
+    it('when inputting the same value twice, should call input event only once', () => {
+      const spy = jest.fn();
+      const instance = instantiateDefaultSelect({ events: { input: spy }});
+
+      instance.selectInput('1');
+      instance.selectInput('1');
+
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('updateData()', () => {
+    it('should update datasource data', async () => {
+      const instance = instantiateDefaultSelect();
+
+      expect(instance.datasource.data).toEqual([{ text: 'default', value: '1' }]);
+      await instance.updateData([{ text: 'default2', value: '2' }]);
+      expect(instance.datasource.data).toEqual([{ text: 'default2', value: '2' }]);
+    });
+
+    it('should update data even if simple datasource', async () => {
+      const instance = instantiateDefaultSelect({ datasource: { type: 'simple', items: ['1', '2', '3']} });
+
+      expect(instance.datasource.data).toEqual([{ value: '1' }, { value: '2' }, { value: '3' }]);
+      await instance.updateData([{ value: '4' }]);
+      expect(instance.datasource.data).toEqual([{ value: '4' }]);
+    });
+
+    it('should update data even if using rest datasource', async () => {
+      const spy = mockGetUsingData([
+        { value: '1' }, { value: '2' }, { value: '3' },
+        { value: '4' }, { value: '5' }, { value: '6' },
+      ]);
+
+      const instance = instantiateDefaultSelect({ dataText: 'value', dataValue: 'value', datasource: { type: 'rest', route: '/zeedhi', lazyLoad: false }})
+
+      await instance.datasource.get();
+      expect(instance.datasource.data.length).toBe(6);
+      await instance.updateData([{ value: '4' }]);
+      expect(instance.datasource.data.length).toBe(1);
+      spy.mockClear();
+    });
+  });
+
+  describe('updateItems()', () => {
+    it('should update datasource items', async () => {
+      const instance = instantiateDefaultSelect({ datasource: { type: 'simple', items: ['1', '2', '3']} });
+
+      expect(instance.datasource.data).toEqual([{ value: '1' }, { value: '2' }, { value: '3' }]);
+      await instance.updateItems(['4']);
+      expect(instance.datasource.data).toEqual([{ value: '4' }]);
+    });
+
+    it('should update data even if not simple datasource', async () => {
+      const instance = instantiateDefaultSelect();
+
+      expect(instance.datasource.data).toEqual([{ text: 'default', value: '1' }]);
+      await instance.updateItems(['2']);
+      expect(instance.datasource.data).toEqual([{ value: '2' }]);
+    });
+  });
+
+  describe('loadMore()', () => {
+    it('should load more data', async () => {
+      const data = [
+        { text: 'default1', value: '1' },
+        { text: 'default2', value: '2' },
+        { text: 'default3', value: '3' },
+        { text: 'default4', value: '4' },
+      ];
+      const instance = instantiateDefaultSelect({ datasource: { limit: 2, data }});
+
+      expect(instance.datasource.limit).toBe(2);
+      expect(instance.showLoadMore()).toBeTruthy();
+
+      await instance.loadMore();
+
+      expect(instance.datasource.limit).toBe(4);
+      expect(instance.showLoadMore()).toBeFalsy();
+    });
+
+    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 = instantiateDefaultSelect({ value: '5', datasource: { limit: 2, data }});
+
+      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);
+      expect(instance.datasource.data.length).toBe(2);
+    });
+
+    it('when select has pushedValue, should remove loadMore after all items are loaded', async () => {
+      const data = [
+        { value: '1', text: 'First' },
+        { value: '2', text: 'Second' },
+        { value: '3', text: 'Third' },
+      ];
+      const instance = instantiateDefaultSelect({ value: '3', datasource: { limit: 1, data }});
+
+      await flushPromises();
+
+      setFocus(instance);
+      await flushPromises();
+
+      await instance.loadMore();
+      expect(instance.pushedValue).toEqual(data[2]);
+      expect(instance.datasource.data).toEqual([data[0], data[1]]);
+
+      await instance.loadMore();
+      expect(instance.showLoadMore()).toBeFalsy();
+      expect(instance.pushedValue).toBeNull();
+      expect(instance.datasource.data).toEqual(data);
+    });
+  });
+
+  describe('blur()', () => {
+    it('should clear search and value on blur if autocomplete', async () => {
+      const instance = instantiateDefaultSelect();
+  
+      await instance.setValue('1');
+      setBlur(instance);
+      expect(instance.datasource.search).toBe('');
+      expect(instance.value).toBeNull();
+      expect(instance.datasource.data).toEqual([
+        { text: 'default', value: '1' },
+      ]);
+    });
+  
+    it('blur should not add value in datasource if it is already there', async () => {
+      const data = [{ text: 'First', value: '1' }];
+      const instance = instantiateDefaultSelect({
+        datasource: {
+          data,
+        },
+      });
+  
+      instance.search = data[0].text;
+      instance.selectValue = data[0];
+      await flushPromises();
+      setBlur(instance);
+      expect(instance.datasource.data).toEqual(data);
+    });
+  
+    it('blur should not clear search if not autocomplete', async () => {
+      const instance = instantiateDefaultSelect({
+        autocomplete: false,
+      });
+      const spy = jest.spyOn(instance.datasource, 'get');
+  
+      instance.search = '2';
+      expect(instance.datasource.search).toBe('');
+      expect(instance.search).toBe('2');
+      expect(spy).not.toHaveBeenCalled();
+  
+      setFocus(instance);
+      await flushPromises();
+      expect(instance.datasource.search).toBe('2');
+      expect(spy).toHaveBeenCalled();
+  
+      setBlur(instance);
+      expect(instance.datasource.search).toBe('2');
+  
+      spy.mockClear();
+    });
+  
+    it('when select has pushedValue and another value is pushed, should remove the first push on blur', async () => {
+      const data = [
+        { value: '1', text: 'First' },
+        { value: '2', text: 'Second' },
+        { value: '3', text: 'Third' },
+      ];
+      const instance = instantiateDefaultSelect({
+        value: '3',
+        datasource: {
+          data,
+          limit: 1,
+        },
+      });
+      await flushPromises();
+  
+      setFocus(instance);
+      await flushPromises();
+  
+      instance.search = '2';
+      await flushPromises();
+      instance.selectValue = data[1];
+  
+      setBlur(instance);
+  
+      expect(instance.pushedValue).toEqual(data[1]);
+      expect(instance.items).toEqual([data[1], data[0]]);
+    });
+  });
+
+  describe('destroy()', () => {
+    it('should destroy the component', () => {
+      const method = jest.fn();
+      const instance = new Select({
+        name: 'select',
+        component: 'ZdSelect',
+        events: { onBeforeDestroy: method },
+      });
+      instance.onBeforeDestroy();
+      expect(method).toHaveBeenCalled();
+    });
+  });
+
+  describe('indexOf()', () => {
+    it('should find the index of an item', () => {
+      const data = [
+        { text: 'First', value: '1' },
+        { text: 'Second', value: '2' },
+        { text: 'Third', value: '3' },
+      ];
+      const instance = instantiateDefaultSelect({
+        datasource: {
+          data,
+        },
+      });
+
+      const index = instance.indexOf(data[1]);
+
+      expect(index).toBe(1);
+    });
+
+    it('should find the index of an item by item value', () => {
+      const data = [
+        { text: 'First', value: '1' },
+        { text: 'Second', value: '2' },
+        { text: 'Third', value: '3' },
+      ];
+      const instance = instantiateDefaultSelect({
+        datasource: {
+          data,
+        },
+      });
+
+      const index = instance.indexOf(data[2].value);
+
+      expect(index).toBe(2);
+    });
+  });
+
+  describe('Accessor in value', () => {
+    const mockLoaderValueAccessor = (controller: IDictionary) => {
+      return jest.spyOn(Loader, 'getInstance').mockImplementation(() => {
+        return controller;
+      });
+    };
+
+    it('when accessor is used in value, should sync controller value and select value', () => {
+      const controller = { value: '1' };
+      mockLoaderValueAccessor(controller);
+      const spy = jest.fn();
+
+      const data = [
+        { text: 'First', value: '1' },
+        { text: 'Second', value: '2' },
+        { text: 'Third', value: '3' },
+      ];
+      const instance = instantiateDefaultSelect({
+        value: '{{AppController.value}}',
+        datasource: {
+          data,
+        },
+        events: {
+          change: () => spy(),
+        },
+      });
+
+      expect(instance.value).toBe('1');
+      expect(spy).not.toHaveBeenCalled();
+
+      controller.value = '2';
+
+      expect(instance.value).toBe('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 = instantiateDefaultSelect({
+        value: '1',
+        datasource: {
+          data,
+          limit: 1,
+        },
+      });
+
+      await instance.datasource.get();
+
+      expect(instance.value).toBe('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 = instantiateDefaultSelect({
+        value: '1',
+        datasource: {
+          data,
+        },
+      });
+
+      await instance.datasource.setFilter({ value: '2' });
+
+      expect(instance.value).toBeNull();
+      expect(instance.selectValue).toBeNull();
+    });
+
+    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 = instantiateDefaultSelect({
+        value: '1',
+        datasource: {
+          data,
+        },
+      });
+
+      await instance.datasource.setSearch('Second');
+
+      expect(instance.value).toBe('1');
+      expect(instance.selectValue).toEqual(data[0]);
+    });
+
+    it('when datasource is updated, if the value cannot be found should set value as null', async () => {
+      const data = [
+        { text: 'First', value: '1' },
+        { text: 'Second', value: '2' },
+        { text: 'Third', value: '3' },
+      ];
+      const instance = new Select({
+        name: 'select',
+        component: 'ZdSelect',
+        dataText: 'text',
+        dataValue: 'value',
+        value: '2',
+        datasource: {
+          data,
+          limit: 1,
+        },
+      });
+      instance.onCreated();
+      await flushPromises();
+
+      await instance.datasource.setFilter({ value: '3' });
+
+      expect(instance.value).toBeNull();
+      expect(instance.selectValue).toBeNull();
+      expect(instance.datasource.data).toEqual([{ text: 'Third', value: '3' }]);
+    });
+  });
+
+  describe('pushed value', () => {
+    it('should push the value if it is from another page', async () => {
+      const data = [
+        { text: 'default', value: '1' },
+        { text: 'default 2', value: '2' },
+      ];
+      const instance = instantiateDefaultSelect({ datasource: { data, limit: 1 }});
+
+      await instance.setValue('2');
+
+      expect(instance.items).toEqual([data[1], data[0]]);
+      expect(instance.pushedValue).toEqual(data[1]);
+    });
+
+    it('should push the value on blur if it isnt part of the cache', async () => {
+      const data = [
+        { text: 'default', value: '1' },
+        { text: 'default 2', value: '2' },
+      ];
+      const instance = instantiateDefaultSelect({ datasource: { data, limit: 1 }});
+      
+      setFocus(instance);
+
+      instance.search = '2';
+      await flushPromises();
+
+      await instance.setValue('2');
+
+      setBlur(instance);
+
+      expect(instance.items).toEqual([data[1], data[0]]);
+      expect(instance.pushedValue).toEqual(data[1]);
+    });
+
+    it('should push value when datasource reloads if found in another page', async () => {
+      const data = [
+        { text: 'default', value: '1' },
+        { text: 'default 2', value: '2' },
+      ];
+      const instance = instantiateDefaultSelect({ datasource: { data, limit: 1 }});
+
+      await instance.setValue('2');
+
+      await instance.datasource.get();
+
+      expect(instance.pushedValue).toEqual(data[1]);
+    });
+
+    it('should clear pushed value when datasource reloads if not found in another page', async () => {
+      const data = [
+        { text: 'First', value: '1' },
+        { text: 'Second', value: '2' },
+        { text: 'Third', value: '3' },
+      ];
+      const instance = instantiateDefaultSelect({ datasource: { data, limit: 1 }});
+
+      await instance.setValue('2');
+
+      // sets a filter, so the value '2' cannot be found in other pages
+      await instance.datasource.setFilter({ value: '3' });
+
+      expect(instance.pushedValue).toBeNull();
+    });
+
+    it('should clear pushed value when datasource reloads and the current value is part of the new data', async () => {
+      const data = [
+        { text: 'First', value: '1' },
+        { text: 'Second', value: '2' },
+        { text: 'Third', value: '3' },
+      ];
+      const instance = instantiateDefaultSelect({ datasource: { data, limit: 1 }});
+
+      await instance.setValue('2');
+
+      await instance.datasource.setLimit(2);
+
+      expect(instance.pushedValue).toBeNull();
+    });
+    
+    it('should clear pushedValue 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 = instantiateDefaultSelect({
+        autocomplete: true,
+        datasource: {
+          limit: 1,
+          data,
+        },
+      });
+      const spy = jest.spyOn(instance.datasource, 'get');
+
+      expect(instance.items).toEqual([data[0]]);
+
+      setFocus(instance);
+      // pushedValue
+      instance.search = 'default 3';
+      await instance.setValue('3');
+      setBlur(instance);
+      expect(instance.pushedValue).toEqual(data[2]);
+      expect(instance.items).toEqual([data[2], data[0]]);
+
+      setFocus(instance);
+      instance.search = '';
+      expect(instance.search).toBe('');
+      expect(instance.pushedValue).toBeNull();
+      expect(instance.items).toEqual([data[0]]);
+
+      spy.mockClear();
+    });
+
+    it('should clear pushed value on blur if select value is null', async () => {
+      const data = [
+        { text: 'default', value: '1' },
+        { text: 'default 2', value: '2' },
+      ];
+      const instance = instantiateDefaultSelect({ value: '2', datasource: { data, limit: 1 }});
+      await flushPromises();
+      expect(instance.pushedValue).toEqual(data[1]);
+
+      setFocus(instance);
+
+      instance.setValue(null);
+
+      setBlur(instance);
+      expect(instance.pushedValue).toBeNull();
+    });
+  });
+
+  describe('showSkeletonLoaders', () => {
+    it('should return true when datasource is loading and has no data', () => {
+      const instance = instantiateDefaultSelect({ datasource: { loading: true }});
+
+      expect(instance.showSkeletonLoaders()).toBeTruthy();
+    });
+
+    it('should return true when datasource is loading and is less than total', () => {
+      const instance = instantiateDefaultSelect({ datasource: { loading: true, data: [{}] }});
+      instance.datasource.total = 10;
+
+      expect(instance.showSkeletonLoaders()).toBeTruthy();
+    });
+  });
+});