fix(form-state): explicitly handle when state is set to empty string. fixes #2166 (#2167)

tmorehouse · web-flow · commit 805a7fe8d38f · 2018-11-13T13:50:12.000-04:00
* fix(form-state): explicitly handle when state is set to empty string state was inadvertently being flagged as valid (true) when state was set to an empty string. fixes #2166 * test for state="" * Update form-state.js * Update form-state.js * Update form-input.spec.js
diff --git a/src/components/form-input/form-input.spec.js b/src/components/form-input/form-input.spec.js
@@ -124,6 +124,17 @@ describe('form-input', async () => {
     expect(input.classes()).not.toContain('is-invalid')
   })
 
+  it('does not have is-valid or is-invalid classes when state=""', async () => {
+    const wrapper = mount(Input, {
+      propsData: {
+        state: ''
+      }
+    })
+    const input = wrapper.find('input')
+    expect(input.classes()).not.toContain('is-valid')
+    expect(input.classes()).not.toContain('is-invalid')
+  })
+
   it('has class is-valid when state=true', async () => {
     const wrapper = mount(Input, {
       propsData: {
@@ -135,6 +146,17 @@ describe('form-input', async () => {
     expect(input.classes()).not.toContain('is-invalid')
   })
 
+  it('has class is-valid when state="valid"', async () => {
+    const wrapper = mount(Input, {
+      propsData: {
+        state: 'valid'
+      }
+    })
+    const input = wrapper.find('input')
+    expect(input.classes()).toContain('is-valid')
+    expect(input.classes()).not.toContain('is-invalid')
+  })
+
   it('has class is-invalid when state=false', async () => {
     const wrapper = mount(Input, {
       propsData: {
@@ -146,6 +168,17 @@ describe('form-input', async () => {
     expect(input.classes()).not.toContain('is-valid')
   })
 
+  it('has class is-invalid when state="invalid"', async () => {
+    const wrapper = mount(Input, {
+      propsData: {
+        state: 'invalid'
+      }
+    })
+    const input = wrapper.find('input')
+    expect(input.classes()).toContain('is-invalid')
+    expect(input.classes()).not.toContain('is-valid')
+  })
+
   it('does not have aria-invalid attribute by default', async () => {
     const wrapper = mount(Input)
     expect(wrapper.contains('[aria-invalid]')).toBe(false)
diff --git a/src/mixins/form-state.js b/src/mixins/form-state.js
@@ -11,14 +11,17 @@ export default {
   props: {
     state: {
       // true/'valid', false/'invalid', '',null
-      type: [Boolean, String],
+      // The order must be String first, then Boolean!
+      type: [String, Boolean],
       default: null
     }
   },
   computed: {
     computedState () {
       const state = this.state
-      if (state === true || state === 'valid') {
+      if (state === '') {
+        return null
+      } else if (state === true || state === 'valid') {
         return true
       } else if (state === false || state === 'invalid') {
         return false
