From 79893024b51f470b5e153d77fa18a3d60037fb7a Mon Sep 17 00:00:00 2001 From: Jeff Date: Sun, 28 Jan 2018 17:41:32 -0800 Subject: [PATCH] - update getOptionLabel to be consistent when using `index` - move index warning from getOptionLabel to `select` method - update isOptionSelected, pull up object comparator to it's own method - add test edge cases --- src/components/Select.vue | 103 ++++++++++++-------- test/unit/specs/Select.spec.js | 166 ++++++++++++++++++++++++++------- 2 files changed, 195 insertions(+), 74 deletions(-) diff --git a/src/components/Select.vue b/src/components/Select.vue index fd15431..33ab63e 100644 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -346,13 +346,13 @@ aria-label="Search for option" > - @@ -512,6 +512,12 @@ /** * Callback to generate the label text. If {option} * is an object, returns option[this.label] by default. + * + * Label text is used for filtering comparison and + * displaying. If you only need to adjust the + * display, you should use the `option` and + * `selected-option` slots. + * * @type {Function} * @param {Object || String} option * @return {String} @@ -519,6 +525,10 @@ getOptionLabel: { type: Function, default(option) { + if( this.index ) { + option = this.findOptionByIndexValue(option) + } + if (typeof option === 'object') { if (!option.hasOwnProperty(this.label)) { return console.warn( @@ -527,28 +537,7 @@ 'http://sagalbot.github.io/vue-select/#ex-labels' ) } - - if(this.index) { - if (!option.hasOwnProperty(this.index)) { - console.warn( - `[vue-select warn]: Index key "option.${this.index}" does not` + - ` exist in options object ${JSON.stringify(option)}.` - ) - } - } - - if (this.label && option[this.label]) { - return option[this.label] - } - } - if(this.index) { - let label = option - this.options.forEach((val) => { - if (val[this.index] == option) { - label = val[this.label] - } - }) - return label + return option[this.label] } return option; } @@ -793,7 +782,13 @@ option = this.createOption(option) } if(this.index) { - option = option[this.index] + if (!option.hasOwnProperty(this.index)) { + return console.warn( + `[vue-select warn]: Index key "option.${this.index}" does not` + + ` exist in options object ${JSON.stringify(option)}.` + ) + } + option = option[this.index] } if (this.multiple && !this.mutableValue) { this.mutableValue = [option] @@ -875,22 +870,50 @@ * @return {Boolean} True when selected | False otherwise */ isOptionSelected(option) { - if (this.multiple && this.mutableValue) { let selected = false - this.mutableValue.forEach(opt => { - if (typeof opt === 'object' && opt[this.label] === option[this.label]) { - selected = true - } else if (typeof opt === 'object' && opt[this.label] === option) { - selected = true - } - else if (opt === option) { + this.valueAsArray.forEach(value => { + if (typeof value === 'object') { + selected = this.optionObjectComparator(value, option) + } else if (value === option || value === option[this.index]) { selected = true } }) return selected - } + }, - return this.mutableValue === option + /** + * Determine if two option objects are matching. + * + * @param value {Object} + * @param option {Object} + * @returns {boolean} + */ + optionObjectComparator(value, option) { + if (this.index && value === option[this.index]) { + return true + } else if ((value[this.label] === option[this.label]) || (value[this.label] === option)) { + return true + } else if (this.index && value[this.index] === option[this.index]) { + return true + } + return false; + }, + + /** + * Finds an option from this.options + * where option[this.index] matches + * the passed in value. + * + * @param value {Object} + * @returns {*} + */ + findOptionByIndexValue(value) { + this.options.forEach(_option => { + if (JSON.stringify(_option[this.index]) === JSON.stringify(value)) { + value = _option + } + }) + return value }, /** @@ -1070,7 +1093,7 @@ * @return {Array} */ valueAsArray() { - if (this.multiple) { + if (this.multiple && this.mutableValue) { return this.mutableValue } else if (this.mutableValue) { return [].concat(this.mutableValue) diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js index 72cab14..fe1cd33 100644 --- a/test/unit/specs/Select.spec.js +++ b/test/unit/specs/Select.spec.js @@ -851,6 +851,45 @@ describe('Select.vue', () => { expect(vm.$children[0].mutableValue).toEqual(vm.value) }) + it('can determine if an object is pre-selected', () => { + const vm = new Vue({ + template: '
', + components: {vSelect}, + data: { + value: 'foo', + options: [{ + id: 'foo', + label: 'This is Foo' + }] + } + }).$mount() + + expect(vm.$children[0].isOptionSelected({ + id: 'foo', + label: 'This is Foo' + })).toEqual(true) + }) + + it('can determine if an object is selected after it has been chosen', () => { + const vm = new Vue({ + template: '
', + components: {vSelect}, + data: { + options: [{id: 'foo', label: 'FooBar'}] + } + }).$mount() + + vm.$children[0].select({id: 'foo', label: 'FooBar'}); + + // Vue.nextTick(() => { + expect(vm.$children[0].isOptionSelected({ + id: 'foo', + label: 'This is Foo' + })).toEqual(true) + // done() + // }) + }) + it('can accept an array of objects and pre-selected values (multiple)', () => { const vm = new Vue({ template: '
', @@ -873,8 +912,9 @@ describe('Select.vue', () => { options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}] } }).$mount() - vm.$children[0].select('foo') + vm.$children[0].deselect('foo') expect(vm.$children[0].mutableValue.length).toEqual(1) + expect(vm.$children[0].mutableValue).toEqual(['bar']) }) it('can deselect an option when multiple is false', () => { @@ -886,7 +926,7 @@ describe('Select.vue', () => { options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}] } }).$mount() - vm.$children[0].select('foo') + vm.$children[0].deselect('foo') expect(vm.$children[0].mutableValue).toEqual(null) }) @@ -925,39 +965,97 @@ describe('Select.vue', () => { expect(vm.$children[0].$refs.toggle.querySelector('.selected-tag').textContent).toContain('Baz') }) - it('will console.warn when options contain objects without a valid index key', (done) => { - spyOn(console, 'warn') - const vm = new Vue({ - template: '
', - data: { - index: 'value', - options: [{label: 'Foo'}] - } - }).$mount() - vm.$children[0].open = true - Vue.nextTick(() => { - expect(console.warn).toHaveBeenCalledWith( - `[vue-select warn]: Index key "option.value" does not exist in options object {"label":"Foo"}.` - ) - done() - }) + it('will console.warn when attempting to select an option with an undefined index', () => { + spyOn(console, 'warn') + + const vm = new Vue({ + template: '
', + data: { + options: [{label: 'Foo'}] + } + }).$mount() + vm.$children[0].select({label: 'Foo'}) + expect(console.warn).toHaveBeenCalledWith( + `[vue-select warn]: Index key "option.value" does not exist in options object {"label":"Foo"}.` + ) + }) + + it('can find the original option within this.options', () => { + const vm = new Vue({ + template: '
', + data: { + options: [{id: 1, label: 'Foo'},{id:2, label: 'Bar'}] + } + }).$mount() + + expect(vm.$children[0].findOptionByIndexValue(1)).toEqual({id: 1, label: 'Foo'}) + expect(vm.$children[0].findOptionByIndexValue({id: 1, label: 'Foo'})).toEqual({id: 1, label: 'Foo'}) }) - it('will not console.warn when options contain objects without an index key', (done) => { - spyOn(console, 'warn') - const vm = new Vue({ - template: '
', - data: { - options: [{label: 'Foo'}] - } - }).$mount() - vm.$children[0].open = true - Vue.nextTick(() => { - expect(console.warn).not.toHaveBeenCalledWith( - `[vue-select warn]: Index key "option.value" does not exist in options object {"label":"Foo"}.` - ) - done() + describe('And when option[index] is a nested object', () => { + it('can determine if an object is pre-selected', () => { + const nestedOption = { + value: { + nested: true + }, + label: 'foo' + }; + const vm = new Vue({ + template: '
', + components: {vSelect}, + data: { + value: { + nested: true + }, + options: [nestedOption] + } + }).$mount() + expect(vm.$children[0].isOptionSelected({ + nested: true + })).toEqual(true) }) + + it('can determine if an object is selected after it is chosen', () => { + const nestedOption = { + value: { + nested: true + }, + label: 'foo' + }; + const vm = new Vue({ + template: '
', + components: {vSelect}, + data: { + options: [nestedOption] + } + }).$mount() + vm.$children[0].select(nestedOption) + expect(vm.$children[0].isOptionSelected(nestedOption)).toEqual(true) + }) + + it('can determine a selected values label', () => { + const nestedOption = { + value: { + nested: true + }, + label: 'foo' + }; + const vm = new Vue({ + template: '
', + components: {vSelect}, + data: { + value: { + nested: true + }, + options: [nestedOption] + } + }).$mount() + + expect(vm.$children[0].getOptionLabel({ + nested: true + })).toEqual('foo') + }) + }) }) @@ -1501,7 +1599,7 @@ describe('Select.vue', () => { value: 'foo' } }).$mount() - + expect(vm.mutableValue).toEqual('foo') vm.$el.querySelector( 'button.clear' ).click() expect(vm.mutableValue).toEqual(null) @@ -1520,6 +1618,6 @@ describe('Select.vue', () => { const buttonEl = vm.$el.querySelector( 'button.clear' ) expect(buttonEl.disabled).toEqual(true); }) - + }); })