Fix unit tests and add more tests

test/unit/specs/select.spec.js

@@ -26,8 +26,6 @@ describe('Select.vue', () => {
         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();
       });
     });
@@ -35,25 +33,33 @@ describe('Select.vue', () => {
     it('should create a Select component and take a pre-selected value', done => {
       vm = createVue({
           template: `
-          <Select :value="2">
+              <Select :value="value">
                 <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
               </Select>
            `,
           data() {
               return {
-            value: '',
+                  value: 2,
                   options: [{value: 1, label: 'Foo'}, {value: 2, label: 'Bar'}]
               };
           }
       });
-      vm.$nextTick(() => {
+      waitForIt(
+          () => {
               const selectedValueSpan = vm.$el.querySelector('.ivu-select-selected-value');
+              return 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(vm.$children[0].selectedSingle).to.equal('Bar');
+              expect(label).to.equal('Bar');
-        expect(vm.$children[0].model).to.equal(2);
+              expect(value).to.equal(2);
               done();
-      });
+          }
+      );
     });
 
     it('should accept normal characters', done => {
@@ -112,13 +118,20 @@ describe('Select.vue', () => {
           };
         }
       });
-      vm.$nextTick(() => {
+        waitForIt(
+            () => {
+                const selectedValueSpan = vm.$el.querySelector('.ivu-select-selected-value');
+                return selectedValueSpan.textContent === 'Bar';
+            },
+            () => {
                 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(placeholderSpan).to.equal(null);
-        expect(selectedValueSpan.style.display).to.not.equal('none');
+                expect(!!selectedValueSpan.style.display).to.not.equal('none');
+                expect(selectedValueSpan.textContent).to.equal('Bar');
                 done();
-      });
+            }
+        );
     });
 
     it('should set different classes for different sizes', done => {
@@ -158,12 +171,10 @@ describe('Select.vue', () => {
         }
       });
       const condition = function() {
-        return vm.$children[0].options.length > 0;
+        const componentOptions = vm.$children[0].flatOptions;
+        return componentOptions && componentOptions.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);
 
@@ -207,8 +218,8 @@ describe('Select.vue', () => {
               }
           });
           const [SelectA, SelectB] = vm.$children;
-      SelectA.toggleMenu();
+          SelectA.toggleMenu(null, true);
-      SelectB.toggleMenu();
+          SelectB.toggleMenu(null, true);
 
           new Promise(resolve => {
               const condition = function() {
@@ -247,6 +258,161 @@ describe('Select.vue', () => {
                   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();
           });
       });
@@ -278,7 +444,8 @@ describe('Select.vue', () => {
         }
       });
       const condition = function() {
-        return vm.$children[0].options.length == manyLaterOptions.length;
+        const componentOptions = vm.$children[0].flatOptions;
+        return componentOptions && componentOptions.length === manyLaterOptions.length;
       };
       const callback = function() {
         const end = +new Date();