Add simple unit tests for Select component
This commit is contained in:
Sergio Crisostomo
parent
62f5dd0c30
commit
3b9de2499e
2 changed files with 206 additions and 0 deletions
196
test/unit/specs/select.spec.js
Normal file
196
test/unit/specs/select.spec.js
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
import {createVue, destroyVM, waitForIt} 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();
|
||||
});
|
||||
});
|
||||
|
||||
xit('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('Performance tests', () => {
|
||||
xit('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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -83,3 +83,13 @@ exports.triggerEvent = function(elm, name, ...opts) {
|
|||
|
||||
return elm;
|
||||
};
|
||||
|
||||
/**
|
||||
* Wait for components inner async process, when this.$nextTick is not enough
|
||||
* @param {Function} the condition to verify before calling the callback
|
||||
* @param {Function} the callback to call when condition is true
|
||||
*/
|
||||
exports.waitForIt = function waitForIt(condition, callback) {
|
||||
if (condition()) callback();
|
||||
else setTimeout(() => waitForIt(condition, callback), 50);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue