Merge pull request #368 from andywarren86/clear-button

Add clear button to single select

test/unit/specs/Select.spec.js

@@ -1299,4 +1299,61 @@ describe('Select.vue', () => {
 			})
 		})
 	})
+
+	describe( 'Clear button', () => {
+
+		it( 'should be displayed on single select when value is selected', () => {
+			const VueSelect = Vue.extend( vSelect )
+			const vm = new VueSelect({
+				propsData: {
+					options: ['foo','bar'],
+					value: 'foo'
+				}
+			}).$mount()
+
+			expect(vm.showClearButton).toEqual(true)
+		})
+
+		it( 'should not be displayed on multiple select', () => {
+			const VueSelect = Vue.extend( vSelect )
+			const vm = new VueSelect({
+				propsData: {
+					options: ['foo','bar'],
+					value: 'foo',
+					multiple: true
+				}
+			}).$mount()
+
+			expect(vm.showClearButton).toEqual(false)
+		})
+
+		it( 'should remove selected value when clicked', () => {
+			const VueSelect = Vue.extend( vSelect )
+			const vm = new VueSelect({
+				propsData: {
+					options: ['foo','bar'],
+					value: 'foo'
+				}
+			}).$mount()
+			
+			expect(vm.mutableValue).toEqual('foo')
+			vm.$el.querySelector( 'button.clear' ).click()
+			expect(vm.mutableValue).toEqual(null)
+		})
+
+		it( 'should be disabled when component is disabled', () => {
+			const VueSelect = Vue.extend( vSelect )
+			const vm = new VueSelect({
+				propsData: {
+					options: ['foo','bar'],
+					value: 'foo',
+					disabled: true
+				}
+			}).$mount()
+
+			const buttonEl = vm.$el.querySelector( 'button.clear' )
+			expect(buttonEl.disabled).toEqual(true);
+		})
+	
+	});
 })