diff --git a/tests/unit/views/base/Forms.spec.js b/tests/unit/views/base/Forms.spec.js index ac91db72..eeb95981 100644 --- a/tests/unit/views/base/Forms.spec.js +++ b/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 + 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() + }) + }) }) diff --git a/tests/unit/views/base/ProgressBars.spec.js b/tests/unit/views/base/ProgressBars.spec.js index 8cad3c78..6bd87f10 100644 --- a/tests/unit/views/base/ProgressBars.spec.js +++ b/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() + }) })