mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-04 06:32:23 +03:00
Code Activity

add custom label prop

Browse Source
This commit is contained in:
Jeff Sagal
2016-03-14 14:24:38 -07:00
parent eeffc32d07
commit 2bb59891fc
4 changed files with 92 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/unit/Select.spec.js
+33 -35
View File
@@ -5,79 +5,58 @@ import vSelect from '../../src/components/Select.vue'
describe('Select.vue', () => {
// it('sets open to true when search on focus and false on blur', () => {
// const vm = new Vue({
// template: '<div><v-select :value.sync="value"></v-select></div>',
// components: { vSelect },
// data: {
// value: ['one'],
// options: ['one','two','three']
// }
// }).$mount()
//
// vm.$children[0].$els.search.focus()
// expect(vm.$children[0].$get('open')).toEqual(true)
// })
it('can accept an array with pre-selected values', () => {
const vm = new Vue({
template: '<div><v-select :value.sync="value"></v-select></div>',
template: '<div><v-select :options="options" :value.sync="value"></v-select></div>',
components: { vSelect },
data: {
value: ['one'],
options: ['one','two','three']
}
}).$mount()
expect(vm.$children[0].value).toEqual(['one'])
})
it('can accept an array of objects and pre-selected value (single)', () => {
const vm = new Vue({
template: '<div><v-select :value.sync="value"></v-select></div>',
template: '<div><v-select :options="options" :value.sync="value"></v-select></div>',
components: { vSelect },
data: {
value: {label: 'This is Foo', value: 'foo'},
options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}]
}
}).$mount()
expect( vm.$children[0].$get('value').value ).toEqual( 'foo' )
expect( vm.$children[0].$get('value').label ).toEqual( 'This is Foo' )
})
it('can accept an array of objects and pre-selected values (multiple)', () => {
const vm = new Vue({
template: '<div><v-select :value.sync="value" :multiple="true"></v-select></div>',
template: '<div><v-select :options="options" :value.sync="value" :multiple="true"></v-select></div>',
components: { vSelect },
data: {
value: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}],
options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}]
}
}).$mount()
var values = vm.$children[0].$get('value')
var labels = []
labels = values.map( value => value.label )
values = values.map( value => value.value )
expect( values ).toEqual( ['foo', 'bar'] )
expect( labels ).toEqual( ['This is Foo', 'This is Bar'] )
})
it('removes the given tag when its close icon is clicked', (done) => {
const vm = new Vue({
template: '<div><v-select :value.sync="value" :multiple="true"></v-select></div>',
template: '<div><v-select :options="options" :value.sync="value" :multiple="true"></v-select></div>',
components: { vSelect },
data: {
value: ['one'],
options: ['one','two','three']
}
}).$mount()
vm.$children[0].$els.toggle.querySelector('.close').click()
Vue.nextTick(() => {
expect(vm.$children[0].$get('value')).toEqual([])
done()
@@ -87,14 +66,13 @@ describe('Select.vue', () => {
it('removes the last item in the value array on delete keypress when multiple is true', () => {
const vm = new Vue({
template: '<div><v-select :value.sync="value" :multiple="true"></v-select></div>',
template: '<div><v-select :options="options" :value.sync="value" :multiple="true"></v-select></div>',
components: { vSelect },
data: {
value: ['one','two'],
options: ['one','two','three']
}
}).$mount()
vm.$children[0].maybeDeleteValue()
Vue.nextTick(() => {
expect(vm.$children[0].$get('value')).toEqual(['one'])
@@ -103,14 +81,13 @@ describe('Select.vue', () => {
it('sets the value to null on delete keypress when multiple is false', () => {
const vm = new Vue({
template: '<div><v-select :value.sync="value"></v-select></div>',
template: '<div><v-select :options="options" :value.sync="value"></v-select></div>',
components: { vSelect },
data: {
value: 'one',
options: ['one','two','three']
}
}).$mount()
vm.$children[0].maybeDeleteValue()
Vue.nextTick(() => {
expect(vm.$children[0].$get('value')).toEqual(null)
@@ -119,7 +96,7 @@ describe('Select.vue', () => {
it('can determine if the value prop is empty', () => {
const vm = new Vue({
template: '<div><v-select :value.sync="value"></v-select></div>',
template: '<div><v-select :options="options" :value.sync="value"></v-select></div>',
components: { vSelect },
data: {
value: [],
@@ -142,16 +119,14 @@ describe('Select.vue', () => {
it('resets the selected values when the options property changes', (done) => {
const vm = new Vue({
template: '<div><v-select :value.sync="value" :multiple="true"></v-select></div>',
template: '<div><v-select :options="options" :value.sync="value" :multiple="true"></v-select></div>',
components: { vSelect },
data: {
value: ['one'],
options: ['one','two','three']
}
}).$mount()
vm.$children[0].options = ['four','five','six']
Vue.nextTick(() => {
expect(vm.$children[0].$get('value')).toEqual([])
done()
@@ -160,17 +135,40 @@ describe('Select.vue', () => {
it('can retain values present in a new array of options', () => {
const vm = new Vue({
template: '<div><v-select :value.sync="value"></v-select></div>',
template: '<div><v-select :options="options" :value.sync="value"></v-select></div>',
components: { vSelect },
data: {
value: ['one'],
options: ['one','two','three']
}
}).$mount()
vm.$children[0].$set('options', ['one','five','six'])
expect(vm.$children[0].value).toEqual(['one'])
})
it('can generate labels using the default label key', () => {
const vm = new Vue({
template: '<div><v-select :options="options" :value.sync="value" :multiple="true"></v-select></div>',
components: { vSelect },
data: {
value: [{label: 'Baz'}],
options: [{label: 'Foo'}, {label: 'Baz'}]
}
}).$mount()
expect(vm.$children[0].$els.toggle.querySelector('.selected-tag').textContent).toContain('Baz')
})
it('can generate labels using a custom label key', () => {
const vm = new Vue({
template: '<div><v-select label="name" :options="options" :value.sync="value" :multiple="true"></v-select></div>',
components: { vSelect },
data: {
value: [{name: 'Baz'}],
options: [{name: 'Foo'}, {name: 'Baz'}]
}
}).$mount()
expect(vm.$children[0].$els.toggle.querySelector('.selected-tag').textContent).toContain('Baz')
})
})