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

Author: Ganjar Setia M

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

@@ -1,21 +1,53 @@
 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
   // test('renders correctly', () => {
   //   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()
+    })
+  })
 })

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

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { mount, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import CoreuiVue from '@coreui/vue'
 import ProgressBars from '@/views/base/ProgressBars'
 
@@ -8,6 +8,9 @@ Vue.use(CoreuiVue)
 jest.useFakeTimers()
 
 describe('ProgressBars.vue', () => {
+  // mount it once, to make test efficient & faster
+  const wrapper = shallowMount(ProgressBars)
+
   it('has a name', () => {
     expect(ProgressBars.name).toBe('ProgressBars')
   })
@@ -18,23 +21,34 @@ describe('ProgressBars.vue', () => {
     expect(typeof ProgressBars.data).toMatch('function')
   })
   it('is Vue instance', () => {
-    const wrapper = mount(ProgressBars)
     expect(wrapper.vm).toBeTruthy()
   })
   it('is ProgressBars', () => {
-    const wrapper = mount(ProgressBars)
     expect(wrapper.findComponent(ProgressBars)).toBeTruthy()
   })
   test('renders correctly', () => {
-    const wrapper = shallowMount(ProgressBars)
+    // mock Math.random() to always return 1
+    jest.spyOn(global.Math, 'random').mockReturnValue(1)
+
     expect(wrapper.element).toMatchSnapshot()
-  })
-  it('should be destroyed', () => {
-    const wrapper = mount(ProgressBars)
-    wrapper.destroy()
+
+    // restore Math.random()
+    jest.spyOn(global.Math, 'random').mockRestore()
   })
   it('should have methods', () => {
     expect(typeof ProgressBars.methods.clicked  ).toEqual('function')
     expect(ProgressBars.methods.clicked()).toBeUndefined()
   })
+  it('should execute mounted', () => {
+    // mock interval 2000 ms
+    jest.advanceTimersByTime(2000);
+
+    expect(setInterval).toHaveBeenCalled();
+    expect(setInterval).toHaveBeenLastCalledWith(expect.any(Function), 2000)
+  })
+
+  // this test should be the last
+  it('should be destroyed', () => {
+    wrapper.destroy()
+  })
 })