test: Improve code, coverage for ProgressBar & Forms (#230)

tests/unit/views/base/Forms.spec.js

@@ -1,16 +1,18 @@
 import Vue from 'vue'
-import { shallowMount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import CoreuiVue from '@coreui/vue'
 import Forms from '@/views/base/Forms'
 
 Vue.use(CoreuiVue)
 
 describe('Forms.vue', () => {
+  // use mount. So the method applied to child components can be tested
+  const wrapper = mount(Forms)
+
   it('has a name', () => {
     expect(Forms.name).toBe('Forms')
   })
   it('is Forms', () => {
-    const wrapper = shallowMount(Forms)
     expect(wrapper.findComponent(Forms)).toBeTruthy()
   })
   // render random chackboxes
@@ -18,4 +20,34 @@ describe('Forms.vue', () => {
   //   const wrapper = shallowMount(Forms)
   //   expect(wrapper.element).toMatchSnapshot()
   // })
+
+  // the test action is in Forms.vue, with valid & invalid input
+  // so just render it, it will executed
+  it('should execute validator() on mount', (done) => {
+    expect(wrapper).toBeDefined()
+    done()
+  })
+
+  // simulate input to make it invalid. This will test <CInput :is-valid="validator" />
+  it('should not pass validator()', (done) => {
+    // need to find best selector for the input, this one from rendered HTML
+    const input = wrapper.findAll('input').at(71)
+    input.setValue('Hai')
+
+    wrapper.vm.$nextTick(() => {
+      expect(input.classes()).toContain('is-invalid')
+      // use callback, because its error when using async await
+      done()
+    })
+  })
+
+  it('should pass validator()', (done) => {
+    const input = wrapper.find('div > div:nth-child(3) > div:nth-child(2) > div > div > form > div:nth-child(2) > input')
+    input.setValue('Hello World')
+
+    wrapper.vm.$nextTick(() => {
+      expect(input.classes()).toContain('is-valid')
+      done()
+    })
+  })
 })