272 lines
9.4 KiB
JavaScript
272 lines
9.4 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');
|
|
|
|
expect(vm.$children[0].showPlaceholder).to.equal(true);
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('should create a Select component and take a pre-selected value', 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: 'Foo'}, {value: 2, label: 'Bar'}]
|
|
};
|
|
}
|
|
});
|
|
vm.$nextTick(() => {
|
|
const selectedValueSpan = vm.$el.querySelector('.ivu-select-selected-value');
|
|
expect(selectedValueSpan.textContent).to.equal('Bar');
|
|
expect(selectedValueSpan.style.display).to.not.equal('none');
|
|
expect(vm.$children[0].selectedSingle).to.equal('Bar');
|
|
expect(vm.$children[0].model).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 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'}]
|
|
};
|
|
}
|
|
});
|
|
vm.$nextTick(() => {
|
|
const placeholderSpan = vm.$el.querySelector('.ivu-select-placeholder');
|
|
const selectedValueSpan = vm.$el.querySelector('.ivu-select-selected-value');
|
|
expect(placeholderSpan.style.display).to.equal('none');
|
|
expect(selectedValueSpan.style.display).to.not.equal('none');
|
|
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');
|
|
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() {
|
|
return vm.$children[0].options.length > 0;
|
|
};
|
|
const callback = function() {
|
|
if (vm.$children[0].options == 0) return setTimeout(waitForIt.bind(null, done), 50);
|
|
expect(JSON.stringify(vm.$children[0].options)).to.equal(JSON.stringify(laterOptions));
|
|
|
|
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();
|
|
SelectB.toggleMenu();
|
|
|
|
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();
|
|
});
|
|
});
|
|
});
|
|
|
|
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() {
|
|
return vm.$children[0].options.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);
|
|
});
|
|
});
|
|
});
|