fix: hide the clear button if the field is disabled (#302)

chronotruck · Jun 20, 2020 · 586635a · 586635a
1 parent 688211a
commit 586635a
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 1 deletion.
diff --git a/src/VueCtkDateTimePicker/_subs/CustomInput/index.vue b/src/VueCtkDateTimePicker/_subs/CustomInput/index.vue
@@ -88,7 +88,7 @@
           : null
       },
       hasClearButton () {
-        return !this.noClearButton && !this.disabled && this.value
+        return !this.noClearButton && !this.isDisabled && this.value
       },
       /**
        * Returns true if the field is disabled

diff --git a/tests/unit/VueCtkDateTimePicker/CustomInput/index.spec.js b/tests/unit/VueCtkDateTimePicker/CustomInput/index.spec.js
@@ -1,6 +1,7 @@
 import { shallowMount } from '@vue/test-utils'
 
 import CustomInput from '@/VueCtkDateTimePicker/_subs/CustomInput'
+import CustomButton from '@/VueCtkDateTimePicker/_subs/CustomButton'
 
 describe('VueCtkDateTimePicker/CustomInput', () => {
   let wrapper
@@ -72,6 +73,64 @@ describe('VueCtkDateTimePicker/CustomInput', () => {
   /**
    * TODO: Add clear button test cases
    */
+  describe('clear button', () => {
+    it('should be defined if the "noClearButton" prop is not defined, the input is not disabled and there is a value', () => {
+      const wrapper = shallowMount(CustomInput, {
+        propsData: {
+          value: '2020-06-20 12:00:00',
+          noClearButton: false
+        },
+        attrs: {
+          disabled: false
+        }
+      })
+
+      const button = wrapper.find(CustomButton)
+      expect(button.exists()).toBeTruthy()
+      expect(button.is(CustomButton)).toBeTruthy()
+    })
+
+    it('should undefined if the "noClearButton" prop is defined or the input is disabled or there is no value', () => {
+      let wrapper = shallowMount(CustomInput, {
+        propsData: {
+          value: '2020-06-20 12:00:00',
+          noClearButton: true
+        },
+        attrs: {
+          disabled: false
+        }
+      })
+
+      let button = wrapper.find('.field-clear-button')
+      expect(button.exists()).toBeFalsy()
+
+      wrapper = shallowMount(CustomInput, {
+        propsData: {
+          value: null,
+          noClearButton: false
+        },
+        attrs: {
+          disabled: false
+        }
+      })
+
+      button = wrapper.find('.field-clear-button')
+      expect(button.exists()).toBeFalsy()
+
+      wrapper = shallowMount(CustomInput, {
+        propsData: {
+          value: '2020-06-20 12:00:00',
+          noClearButton: false
+        },
+        attrs: {
+          disabled: true
+        }
+      })
+
+      button = wrapper.find('.field-clear-button')
+      expect(button.exists()).toBeFalsy()
+    })
+  })
 
   afterEach(() => {
     wrapper.destroy()