460 lines
17 KiB
JavaScript
460 lines
17 KiB
JavaScript
import {createVue, destroyVM, waitForIt, promissedTick} from '../util';
|
|
|
|
describe('Select.vue', () => {
|
|
let vm;
|
|
afterEach(() => {
|
|
destroyVM(vm);
|
|
});
|
|
|
|
describe('Props tests', () => {
|
|
it('should create a Select component with passed placeholder', done => {
|
|
const placeholder = 'Hi! Select something!';
|
|
vm = createVue({
|
|
template: `
|
|
<Select placeholder="${placeholder}">
|
|
<Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
|
</Select>
|
|
`,
|
|
data() {
|
|
return {
|
|
value: '',
|
|
options: [{value: 1, label: 'Foo'}, {value: 2, label: 'Bar'}]
|
|
};
|
|
}
|
|
});
|
|
vm.$nextTick(() => {
|
|
const placeholderSpan = vm.$el.querySelector('.ivu-select-placeholder');
|
|
expect(placeholderSpan.textContent).to.equal(placeholder);
|
|
expect(placeholderSpan.style.display).to.not.equal('none');
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('should create a Select component and take a pre-selected value', done => {
|
|
vm = createVue({
|
|
template: `
|
|
<Select :value="value">
|
|
<Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
|
</Select>
|
|
`,
|
|
data() {
|
|
return {
|
|
value: 2,
|
|
options: [{value: 1, label: 'Foo'}, {value: 2, label: 'Bar'}]
|
|
};
|
|
}
|
|
});
|
|
waitForIt(
|
|
() => {
|
|
const selectedValueSpan = vm.$el.querySelector('.ivu-select-selected-value');
|
|
return selectedValueSpan && selectedValueSpan.textContent === 'Bar';
|
|
},
|
|
() => {
|
|
const selectedValueSpan = vm.$el.querySelector('.ivu-select-selected-value');
|
|
const {label, value} = vm.$children[0].values[0];
|
|
|
|
expect(selectedValueSpan.textContent).to.equal('Bar');
|
|
expect(selectedValueSpan.style.display).to.not.equal('none');
|
|
expect(label).to.equal('Bar');
|
|
expect(value).to.equal(2);
|
|
done();
|
|
}
|
|
);
|
|
});
|
|
|
|
it('should accept normal characters', done => {
|
|
vm = createVue({
|
|
template: `
|
|
<Select :value="2">
|
|
<Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
|
</Select>
|
|
`,
|
|
data() {
|
|
return {
|
|
value: '',
|
|
options: [{value: 1, label: '> 100$'}, {value: 2, label: '< 100$'}]
|
|
};
|
|
}
|
|
});
|
|
vm.$nextTick(() => {
|
|
const selectedValueSpan = vm.$el.querySelector('.ivu-select-selected-value');
|
|
expect(selectedValueSpan.textContent).to.equal('< 100$');
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('should display normal characters in input when in filterable mode', done => {
|
|
vm = createVue({
|
|
template: `
|
|
<Select v-model="value" filterable>
|
|
<Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
|
</Select>
|
|
`,
|
|
data() {
|
|
return {
|
|
value: 2,
|
|
options: [{value: 1, label: '> 100$'}, {value: 2, label: '< 100$'}]
|
|
};
|
|
}
|
|
});
|
|
vm.$nextTick(() => {
|
|
const input = vm.$el.querySelector('.ivu-select-input');
|
|
expect(input.value).to.equal('< 100$');
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('should use the value\'s label instead of placeholder when both are set', done => {
|
|
vm = createVue({
|
|
template: `
|
|
<Select placeholder="Choose anything!" :value="2">
|
|
<Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
|
</Select>
|
|
`,
|
|
data() {
|
|
return {
|
|
value: '',
|
|
options: [{value: 1, label: 'Foo'}, {value: 2, label: 'Bar'}]
|
|
};
|
|
}
|
|
});
|
|
waitForIt(
|
|
() => {
|
|
const selectedValueSpan = vm.$el.querySelector('.ivu-select-selected-value');
|
|
return selectedValueSpan && selectedValueSpan.textContent === 'Bar';
|
|
},
|
|
() => {
|
|
const placeholderSpan = vm.$el.querySelector('.ivu-select-placeholder');
|
|
const selectedValueSpan = vm.$el.querySelector('.ivu-select-selected-value');
|
|
expect(placeholderSpan).to.equal(null);
|
|
expect(!!selectedValueSpan.style.display).to.not.equal('none');
|
|
expect(selectedValueSpan.textContent).to.equal('Bar');
|
|
done();
|
|
}
|
|
);
|
|
});
|
|
|
|
it('should set different classes for different sizes', done => {
|
|
vm = createVue(`
|
|
<div>
|
|
<Select placeholder="Choose anything!"><Option v-for="item in []" :value="item" :key="item">{{item}}</Option></Select>
|
|
<Select placeholder="Choose anything!" size="large"><Option v-for="item in []" :value="item" :key="item">{{item}}</Option></Select>
|
|
<Select placeholder="Choose anything!" size="small"><Option v-for="item in []" :value="item" :key="item">{{item}}</Option></Select>
|
|
</div>
|
|
`);
|
|
vm.$nextTick(() => {
|
|
const [defaultSelect, largeSelect, smallSelect] = [...vm.$el.querySelectorAll('.ivu-select')];
|
|
expect(defaultSelect.className).to.equal('ivu-select ivu-select-single ivu-select-default');
|
|
expect(largeSelect.classList.contains('ivu-select-large')).to.equal(true);
|
|
expect(smallSelect.classList.contains('ivu-select-small')).to.equal(true);
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('should set new options', done => {
|
|
const laterOptions = [{value: 1, label: 'Foo'}, {value: 2, label: 'Bar'}];
|
|
|
|
vm = createVue({
|
|
template: `
|
|
<Select>
|
|
<Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
|
</Select>
|
|
`,
|
|
data() {
|
|
return {
|
|
value: '',
|
|
options: []
|
|
};
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => (this.options = laterOptions));
|
|
}
|
|
});
|
|
const condition = function() {
|
|
const componentOptions = vm.$children[0].flatOptions;
|
|
return componentOptions && componentOptions.length > 0;
|
|
};
|
|
const callback = function() {
|
|
const renderedOptions = vm.$el.querySelectorAll('.ivu-select-dropdown-list li');
|
|
expect(renderedOptions.length).to.equal(laterOptions.length);
|
|
|
|
const labels = [...renderedOptions].map(el => el.textContent).join('<>');
|
|
const expected = laterOptions.map(o => o.label).join('<>');
|
|
expect(labels).to.equal(expected);
|
|
done();
|
|
};
|
|
waitForIt(condition, callback);
|
|
});
|
|
});
|
|
|
|
describe('Behavior tests', () => {
|
|
it('should create different and independent instances', done => {
|
|
const options = [
|
|
{value: 'beijing', label: 'Beijing'},
|
|
{value: 'stockholm', label: 'Stockholm'},
|
|
{value: 'lisboa', label: 'Lisboa'}
|
|
];
|
|
|
|
vm = createVue({
|
|
template: `
|
|
<div>
|
|
<i-select v-model="modelA" multiple style="width:260px">
|
|
<i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
|
|
</i-select>
|
|
<i-select v-model="modelB" multiple style="width:260px">
|
|
<i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
|
|
</i-select>
|
|
</div>
|
|
`,
|
|
data() {
|
|
return {
|
|
cityList: [],
|
|
modelA: [],
|
|
modelB: []
|
|
};
|
|
},
|
|
mounted() {
|
|
setTimeout(() => (this.cityList = options), 200);
|
|
}
|
|
});
|
|
const [SelectA, SelectB] = vm.$children;
|
|
SelectA.toggleMenu(null, true);
|
|
SelectB.toggleMenu(null, true);
|
|
|
|
new Promise(resolve => {
|
|
const condition = function() {
|
|
const optionsA = SelectA.$el.querySelectorAll('.ivu-select-item');
|
|
const optionsB = SelectB.$el.querySelectorAll('.ivu-select-item');
|
|
return optionsA.length > 0 && optionsB.length > 0;
|
|
};
|
|
waitForIt(condition, resolve);
|
|
})
|
|
.then(() => {
|
|
// click in A options
|
|
const optionsA = SelectA.$el.querySelectorAll('.ivu-select-item');
|
|
optionsA[0].click();
|
|
return promissedTick(SelectA);
|
|
})
|
|
.then(() => {
|
|
expect(SelectA.value[0]).to.equal(options[0].value);
|
|
expect(SelectA.value.length).to.equal(1);
|
|
expect(SelectB.value.length).to.equal(0);
|
|
|
|
// click in B options
|
|
const optionsB = SelectB.$el.querySelectorAll('.ivu-select-item');
|
|
optionsB[1].click();
|
|
optionsB[2].click();
|
|
return promissedTick(SelectB);
|
|
})
|
|
.then(() => {
|
|
// lets check the values!
|
|
const getSelections = component => {
|
|
const tags = component.$el.querySelectorAll('.ivu-select-selection .ivu-tag');
|
|
return [...tags].map(el => el.textContent.trim()).join(',');
|
|
};
|
|
const selectAValue = getSelections(SelectA);
|
|
const selectBValue = getSelections(SelectB);
|
|
|
|
expect(selectAValue).to.equal(options[0].label);
|
|
expect(selectBValue).to.equal(options.slice(1, 3).map(obj => obj.label.trim()).join(','));
|
|
|
|
done();
|
|
}).catch(err => {
|
|
console.log(err);
|
|
done(false);
|
|
});
|
|
});
|
|
|
|
it('should create update model with value, and label when asked', done => {
|
|
const options = [
|
|
{value: 'beijing', label: 'Beijing'},
|
|
{value: 'stockholm', label: 'Stockholm'},
|
|
{value: 'lisboa', label: 'Lisboa'}
|
|
];
|
|
let onChangeValueA, onChangeValueB;
|
|
|
|
|
|
vm = createVue({
|
|
template: `
|
|
<div>
|
|
<i-select v-model="modelA" style="width:260px" @on-change="onChangeA">
|
|
<i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
|
|
</i-select>
|
|
<i-select v-model="modelB" label-in-value style="width:260px" @on-change="onChangeB">
|
|
<i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
|
|
</i-select>
|
|
</div>
|
|
`,
|
|
data() {
|
|
return {
|
|
cityList: options,
|
|
modelA: [],
|
|
modelB: []
|
|
};
|
|
},
|
|
methods: {
|
|
onChangeA(val){
|
|
onChangeValueA = val;
|
|
},
|
|
onChangeB(val){
|
|
onChangeValueB = val;
|
|
}
|
|
}
|
|
});
|
|
const [SelectA, SelectB] = vm.$children;
|
|
SelectA.toggleMenu(null, true);
|
|
SelectB.toggleMenu(null, true);
|
|
|
|
|
|
new Promise(resolve => {
|
|
const condition = function() {
|
|
const optionsA = SelectA.$el.querySelectorAll('.ivu-select-item');
|
|
const optionsB = SelectB.$el.querySelectorAll('.ivu-select-item');
|
|
return optionsA.length > 0 && optionsB.length > 0;
|
|
};
|
|
waitForIt(condition, resolve);
|
|
})
|
|
.then(() => {
|
|
// click in A options
|
|
const optionsA = SelectA.$el.querySelectorAll('.ivu-select-item');
|
|
optionsA[0].click();
|
|
return promissedTick(SelectA);
|
|
})
|
|
.then(() => {
|
|
expect(vm.modelA).to.equal(options[0].value);
|
|
expect(onChangeValueA).to.equal(options[0].value);
|
|
|
|
// click in B options
|
|
const optionsB = SelectB.$el.querySelectorAll('.ivu-select-item');
|
|
optionsB[2].click();
|
|
return promissedTick(SelectB);
|
|
})
|
|
.then(() => {
|
|
expect(vm.modelB).to.equal(options[2].value);
|
|
expect(JSON.stringify(onChangeValueB)).to.equal(JSON.stringify(options[2]));
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('Public API', () => {
|
|
it('The "setQuery" method should behave as expected', (done) => {
|
|
|
|
const options = [
|
|
{value: 'beijing', label: 'Beijing'},
|
|
{value: 'stockholm', label: 'Stockholm'},
|
|
{value: 'lisboa', label: 'Lisboa'}
|
|
];
|
|
|
|
vm = createVue({
|
|
template: `
|
|
<Select v-model="value" filterable>
|
|
<Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
|
</Select>
|
|
`,
|
|
data() {
|
|
return {
|
|
value: '',
|
|
options: options
|
|
};
|
|
}
|
|
});
|
|
const [Select] = vm.$children;
|
|
Select.setQuery('i');
|
|
vm.$nextTick(() => {
|
|
const query = 'i';
|
|
const input = vm.$el.querySelector('.ivu-select-input');
|
|
expect(input.value).to.equal(query);
|
|
|
|
const renderedOptions = [...vm.$el.querySelectorAll('.ivu-select-item')].map(el => el.textContent);
|
|
const filteredOptions = options.filter(option => JSON.stringify(option).includes(query)).map(({label}) => label);
|
|
expect(JSON.stringify(renderedOptions)).to.equal(JSON.stringify(filteredOptions));
|
|
|
|
// reset query
|
|
// setQuery(null) should clear the select
|
|
Select.setQuery(null);
|
|
vm.$nextTick(() => {
|
|
const input = vm.$el.querySelector('.ivu-select-input');
|
|
expect(input.value).to.equal('');
|
|
|
|
const renderedOptions = [...vm.$el.querySelectorAll('.ivu-select-item')].map(el => el.textContent);
|
|
expect(JSON.stringify(renderedOptions)).to.equal(JSON.stringify(options.map(({label}) => label)));
|
|
done();
|
|
});
|
|
});
|
|
|
|
});
|
|
|
|
it('The "clearSingleSelect" method should behave as expected', (done) => {
|
|
|
|
// clearSingleSelect
|
|
const options = [
|
|
{value: 'beijing', label: 'Beijing'},
|
|
{value: 'stockholm', label: 'Stockholm'},
|
|
{value: 'lisboa', label: 'Lisboa'}
|
|
];
|
|
const preSelected = 'lisboa';
|
|
|
|
vm = createVue({
|
|
template: `
|
|
<Select v-model="value" clearable>
|
|
<Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
|
</Select>
|
|
`,
|
|
data() {
|
|
return {
|
|
value: preSelected,
|
|
options: options
|
|
};
|
|
}
|
|
});
|
|
const [Select] = vm.$children;
|
|
vm.$nextTick(() => {
|
|
expect(Select.publicValue).to.equal(preSelected);
|
|
Select.clearSingleSelect();
|
|
expect(typeof Select.publicValue).to.equal('undefined');
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('Performance tests', () => {
|
|
it('should handle big numbers of options', done => {
|
|
const manyLaterOptions = Array.apply(null, Array(200)).map((_, i) => {
|
|
return {
|
|
value: i + 1,
|
|
label: Math.random().toString(36).slice(2).toUpperCase()
|
|
};
|
|
});
|
|
const start = +new Date();
|
|
vm = createVue({
|
|
template: `
|
|
<Select>
|
|
<Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
|
</Select>
|
|
`,
|
|
data() {
|
|
return {
|
|
value: '',
|
|
options: []
|
|
};
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => (this.options = manyLaterOptions));
|
|
}
|
|
});
|
|
const condition = function() {
|
|
const componentOptions = vm.$children[0].flatOptions;
|
|
return componentOptions && componentOptions.length === manyLaterOptions.length;
|
|
};
|
|
const callback = function() {
|
|
const end = +new Date();
|
|
const renderedOptions = vm.$el.querySelectorAll('.ivu-select-dropdown-list li');
|
|
expect(renderedOptions.length).to.equal(manyLaterOptions.length);
|
|
expect(end - start).to.be.not.above(1000);
|
|
done();
|
|
};
|
|
waitForIt(condition, callback);
|
|
});
|
|
});
|
|
});
|