diff --git a/test/unit/specs/select.spec.js b/test/unit/specs/select.spec.js
index 4b70a44e..77daf0d6 100644
--- a/test/unit/specs/select.spec.js
+++ b/test/unit/specs/select.spec.js
@@ -1,4 +1,4 @@
-import {createVue, destroyVM, waitForIt} from '../util';
+import {createVue, destroyVM, waitForIt, promissedTick} from '../util';
describe('Select.vue', () => {
let vm;
@@ -155,6 +155,82 @@ describe('Select.vue', () => {
});
});
+ 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: `
+
+
+ {{ item.label }}
+
+
+ {{ item.label }}
+
+
+ `,
+ 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) => {
diff --git a/test/unit/util.js b/test/unit/util.js
index 55da1dbc..d98d53a0 100644
--- a/test/unit/util.js
+++ b/test/unit/util.js
@@ -103,3 +103,13 @@ exports.waitForIt = function waitForIt(condition, callback) {
if (condition()) callback();
else setTimeout(() => waitForIt(condition, callback), 50);
};
+
+/**
+* Call a components .$nextTick in a promissified way
+* @param {Vue Component} the component to work with
+*/
+exports.promissedTick = component => {
+ return new Promise((resolve, reject) => {
+ component.$nextTick(resolve);
+ });
+};