it('should not be selected when no explicit `value`, `rawValue` or `selectedIndex` is given', function () {
var select = new Select({ datasource: datasource });
select.appendTo(container);
expect(select.get('selectedIndex')).toBe(1);
expect(select.getValue()).toBe('2');
expect(select.getRawValue()).toBe('2');
});
it('should sync `selectedIndex` after `value` is changed', function () {
var select = new Select({ datasource: datasource, value: '2' });
select.appendTo(container);
select.setProperties({ value: '3' });
expect(select.get('selectedIndex')).toBe(2);
expect(select.getRawValue()).toBe('3');
});
it('should accept runtime changed of `emptyText', function () {
var select = new Select({ datasource: datasource, emptyText: 'test' });
select.appendTo(container);
select.set('emptyText', 'changed');
expect(select.main.firstChild.innerHTML).toBe('changed');
expect(select.main.getElementsByTagName('input')[0].value).toBe('');
});
it('should accept runtime change of `selectedIndex`', function () {
var select = new Select({ datasource: datasource, value: '2' });
select.appendTo(container);
select.setProperties({ selectedIndex: 2 });
expect(select.get('selectedIndex')).toBe(2);
expect(select.getRawValue()).toBe('3');
});
it('should select the first item if `datasource` is changed even value is still in sync', function () {
var select = new Select({ datasource: datasource, value: '2' });
select.appendTo(container);
select.setProperties({ datasource: datasource.slice(0, 3) });
expect(select.get('selectedIndex')).toBe(0);
expect(select.getRawValue()).toBe('1');
});
it('should select the first item if `selectedIndex` is change in runtime and is given an out-of-range value and no `emptyText` is given', function () {
var select = new Select({ datasource: datasource, value: '2' });
select.appendTo(container);
select.setProperties({ selectedIndex: 10 });
expect(select.get('selectedIndex')).toBe(0);
expect(select.getRawValue()).toBe('1');
});
it('should `emptyText` if `selectedIndex` is change in runtime and is given an out-of-range value when `emptyText` is given', function () {
var select = new Select({ datasource: datasource, value: '2', emptyText: 'test' });
select.appendTo(container);
select.setProperties({ selectedIndex: 10 });
expect(select.get('selectedIndex')).toBe(-1);
expect(select.getRawValue()).toBe('');
});
it('should not adjust value related properties if `datasource` is change but value is still in sync', function () {
var select = new Select({ datasource: datasource, value: '2' });
select.appendTo(container);
select.setProperties({ datasource: datasource.slice(0, 3) });
expect(select.get('selectedIndex')).toBe(1);
expect(select.getRawValue()).toBe('2');
});
it('should adjust value related properties if `rawValue` is change in runtime and is given a non-exist value', function () {
var select = new Select({ datasource: datasource, value: '2' });
select.appendTo(container);
select.setProperties({ rawValue: '10' });
expect(select.get('selectedIndex')).toBe(0);
expect(select.getRawValue()).toBe('1');
});
it('should repaint as normal when properties changed', function () {
var select = new Select({ datasource: datasource, readOnly: true });
select.appendTo(container);
select.setProperties({ value: '3' });
expect(select.getValue()).toBe('3');
expect(container.getElementsByTagName('span')[0].innerHTML).toBe('c');
});
it('should select `emptyText` if `datasource` is change in runtime which causes value to be unsynced when `emptyText` is given', function () {
var select = new Select({ datasource: datasource, value: '6', emptyText: 'test' });
select.appendTo(container);
select.setProperties({ datasource: datasource.slice(0, 3) });
expect(select.get('selectedIndex')).toBe(-1);
expect(select.getRawValue()).toBe('');
});
it('should fire if `datasource` is changed even value is still available as previous', function () {
var select = new Select({ datasource: datasource, value: '2' });
var spy = jasmine.createSpy();
select.on('change', spy);
select.appendTo(container);
select.set('datasource', datasource.slice(0, 3));
expect(spy).toHaveBeenCalled();
});
it('should open a layer with className `ui-select-layer` under `body` when clicked', function () {
var select = new Select({ datasource: datasource, value: '2' });
select.appendTo(container);
dispatchEvent(select.main, 'click');
var layer = findLayer();
expect(layer).toBeDefined();
expect(layer.className).not.toMatch(/ui-select-layer-hidden/);
});
it('should fire if `selectedIndex` is changed to an out-of-range value', function () {
var select = new Select({ datasource: datasource, value: '2' });
var spy = jasmine.createSpy();
select.on('change', spy);
select.appendTo(container);
select.set('selectedIndex', -1);
expect(spy).toHaveBeenCalled();
});
it('should fire if `rawValue` is changed to a non-exist value', function () {
var select = new Select({ datasource: datasource, value: '2' });
var spy = jasmine.createSpy();
select.on('change', spy);
select.appendTo(container);
select.set('rawValue', 'abc');
expect(spy).toHaveBeenCalled();
});
it('should fire if `datasource` is changed which causes `emptyText` to be selected', function () {
var select = new Select({ datasource: datasource, value: '2', emptyText: 'test' });
var spy = jasmine.createSpy();
select.on('change', spy);
select.appendTo(container);
select.set('datasource', datasource.slice(3));
expect(spy).toHaveBeenCalled();
});
it('should rerender selection layer when called with a new `datasource` object', function () {
var select = new Select({ datasource: datasource });
select.appendTo(container);
dispatchEvent(select.main, 'click');
select.updateDatasource(datasource.slice(0, 2));
var layer = findLayer();
expect(layer.children.length).toBe(2);
});
it('should select the first item if `datasource` is changed in runtime when no `emptyText` is given', function () {
var select = new Select({ datasource: datasource, value: '6' });
select.appendTo(container);
select.setProperties({ datasource: datasource.slice(0, 3) });
expect(select.get('selectedIndex')).toBe(0);
expect(select.getRawValue()).toBe('1');
expect(select.main.firstChild.innerHTML).toBe('a');
});
it('should not fire if `selectedIndex` is given the same as previous', function () {
var select = new Select({ datasource: datasource, value: '2' });
var spy = jasmine.createSpy();
select.on('change', spy);
select.appendTo(container);
select.setProperties({ selectedIndex: 1 });
expect(spy).not.toHaveBeenCalled();
});
it('should return to normal after enabled again', function () {
var select = new Select({ datasource: datasource, readOnly: true });
select.appendTo(container);
select.enable();
dispatchEvent(select.main, 'click');
var layer = findLayer();
expect(layer).toBeDefined();
});
it('should fire if `selectedIndex` is changed', function () {
var select = new Select({ datasource: datasource, value: '2' });
var spy = jasmine.createSpy();
select.on('change', spy);
select.appendTo(container);
select.setProperties({ selectedIndex: 2 });
expect(spy).toHaveBeenCalled();
});
it('should destroy the layer when disposed', function () {
var select = new Select({ datasource: datasource });
select.appendTo(container);
dispatchEvent(select.main, 'click');
select.dispose();
var layer = findLayer();
expect(layer).toBe(null);
});
it('should use `name` over `text` if both are given', function () {
var datasource = [
{ text: 'a', name: 'b', value: '1' }
];
var select = new Select({ datasource: datasource });
select.appendTo(container);
dispatchEvent(select.main, 'click');
expect(findLayer().children[0].innerText).toBe('b');
});
it('should accept `text` config property and treat it as `name`', function () {
var datasource = [
{ text: 'a', value: '1' }
];
var select = new Select({ datasource: datasource });
select.appendTo(container);
dispatchEvent(select.main, 'click');
expect(findLayer().children[0].innerText).toBe('a');
});
it('must hide the layer even if the layer is previous set to visible', function () {
var select = new Select({ datasource: datasource });
select.appendTo(container);
dispatchEvent(select.main, 'click');
var layer = findLayer();
expect(layer.className).not.toMatch(/ui-select-layer-hidden/);
select.setReadOnly(true);
expect(layer.className).toMatch(/ui-select-layer-hidden/);
});
it('should not open the layer when clicked', function () {
var select = new Select({ datasource: datasource, readOnly: true });
select.appendTo(container);
dispatchEvent(select.main, 'click');
var layer = findLayer();
if (layer) {
expect(layer.className).toMatch(/ui-select-layer-hidden/);
}
});
it('should hide the layer when itself is set to hidden even if the layer is previously shown', function () {
var select = new Select({ datasource: datasource });
select.appendTo(container);
dispatchEvent(select.main, 'click');
var layer = findLayer();
expect(layer.className).not.toMatch(/ui-select-layer-hidden/);
select.hide();
expect(layer.className).toMatch(/ui-select-layer-hidden/);
});
it('should hide the layer when item is clicked', function () {
var select = new Select({ datasource: datasource, value: '2' });
select.appendTo(container);
dispatchEvent(select.main, 'click');
var layer = findLayer();
var option = layer.children[2];
dispatchEvent(option, 'click');
expect(layer.className).toMatch(/ui-select-layer-hidden/);
});
it('should rerender selection layer when same `datasource` is given', function () {
var ds = datasource.slice();
var select = new Select({ datasource: ds });
select.appendTo(container);
dispatchEvent(select.main, 'click');
ds.splice(2, 10);
select.updateDatasource(ds);
var layer = findLayer();
expect(layer.children.length).toBe(2);
});
it('should be able to customize item template by changing the `getItemHTML` function', function () {
var select = new Select({ datasource: datasource });
select.getItemHTML = function () { return '123'; };
select.appendTo(container);
dispatchEvent(select.main, 'click');
var layer = findLayer();
for (var i = 0; i < layer.children.length; i++) {
expect(layer.children[i].innerHTML).toBe('123');
}
});