Refine UX: error is accounted for but not displayed if username is empty

Rija Menage · Rija Menage · commit af0638abcba6 · 2019-12-16T15:25:54.000+08:00
because it will irritate the user to get the error on the onset.

Implementing this exposed the issue fixed in the previous commit where the test for
too short username was picking up the wrong state of the component
(testing against the initial value of username which was empty string instead
of the updated value after setting up the test username).

In the test here we use the Truthy test for the computed property 'error'
because it's not true as in the boolean type, it's a non-empty string which
count as "truthy".

For testing the display of the .error div, we use the absolute boolean test,
because exists() returns either true or false as in the boolean types.
diff --git a/src/components/UserNameComponent.vue b/src/components/UserNameComponent.vue
@@ -2,7 +2,7 @@
     <div>
         <label class="form-label" for="username-field">{{ fullPrompt }}</label>
         <input id="username-field" v-model="username" />
-        <div v-if="error" class="error">
+        <div v-if="error && username!==''" class="error">
             {{ error }}
         </div>
     </div>
diff --git a/test/UserNameComponent.spec.js b/test/UserNameComponent.spec.js
@@ -71,4 +71,14 @@ describe('Username component', function () {
 	      expect(wrapper.find('.error').exists()).toBeFalse()
 	   })
 	})
+
+	it('returns an error but does not display it if username is empty', function() {
+		const wrapper = factory({
+		        prompt: 'foo bar',
+		        username: '',
+		        minLength: 4,
+	    })
+	    expect(wrapper.vm.error).toBeTruthy()
+	    expect(wrapper.find('.error').exists()).toBeFalse()
+	})
 })
