Currently, I am in the process of writing unit tests for Vue components within our new project.
For testing, I am utilizing Karma with Mocha + Chai, and PhantomJS as the browser.
The test command being used is
cross-env BABEL_ENV=test karma start client/test/unit/karma.conf.js --single-runIf you require access to the karma conf or the component code itself, feel free to ask. (I omitted it due to its length and complexity; also, I'm fairly confident that the issue does not lie within the component).
This is my current test code:
import Vue from 'vue'
import SendEmail from '@/components/SendEmail'
describe('SendEmail.vue', () => {
it('should render correct contents', (done) => {
const Constructor = Vue.extend(SendEmail)
const vm = new Constructor({
propsData: {
email: '{{test}}',
template: {},
}
}).$mount()
expect(vm.$el.querySelector('.section h5').textContent)
.to.equal('Template Variables')
done()
})
it('should create inputs based off context in input', (done) => {
const Constructor = Vue.extend(SendEmail)
const vm = new Constructor({
propsData: {
email: '<p> hello bob {{test}} </p>',
template: {},
}
}).$mount()
vm._watcher.run()
Vue.nextTick(()=>{
expect(vm.$el.querySelector('.input-field #test')).to.be.null;
done()
})
})
})
The issue at hand is that regardless of whether the "it should create inputs based off context in input" test has expect...to.be.null or expect...to.not.be.null, the test shows up as "passed" in Karma.
Expect...To.Be.Null
cross-env BABEL_ENV=test karma start client/test/unit/karma.conf.js --single-run
03 01 2018 16:15:50.637:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
03 01 2018 16:15:50.639:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
03 01 2018 16:15:50.665:INFO [launcher]: Starting browser PhantomJS
03 01 2018 16:15:50.949:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket SD3YIlvnm7q7SpXMAAAA with id 69225830
SendEmail.vue
✓ should render correct contents
✓ should create inputs based off context in input
PhantomJS 2.1.1 (Linux 0.0.0): Executed 2 of 2 SUCCESS (0.053 secs / 0.012 secs)
TOTAL: 2 SUCCESS
Expect...To.Be.Not.Null
cross-env BABEL_ENV=test karma start client/test/unit/karma.conf.js --single-run
03 01 2018 16:15:29.471:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
03 01 2018 16:15:29.473:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
03 01 2018 16:15:29.509:INFO [launcher]: Starting browser PhantomJS
03 01 2018 16:15:30.105:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket AIFlufSWBVUaXMD7AAAA with id 50204600
SendEmail.vue
✓ should render correct contents
✓ should create inputs based off context in input
PhantomJS 2.1.1 (Linux 0.0.0): Executed 2 of 2 SUCCESS (0.03 secs / 0.019 secs)
TOTAL: 2 SUCCESS
An odd occurrence arises when Vue seems to be triggering an error for the failed assertion, which is then reflected as an error log within Vue for the expect...to.be.null test (since that aligns with the actual outcome).
ERROR LOG: '[Vue warn]: Error in nextTick: "AssertionError: expected <input placeholder="" id="test" type="text"> to be null"'
ERROR LOG: AssertionError{message: 'expected <input placeholder="" id="test" type="text"> to be null', showDiff: false, actual: <input placeholder="" id="test" type="text">, expected: undefined, stack: 'AssertionError@http://localhost:9876/absolute/home/calebjay/Documents/internal-admin/node_modules/chai/chai.js?40e7aa72e9665366bfd82579520de4fb0754dfae:9320:24
assert@http://localhost:9876/absolute/home/calebjay/Documents/internal-admin/node_modules/chai/chai.js?40e7aa72e9665366bfd82579520de4fb0754dfae:239:31
http://localhost:9876/absolute/home/calebjay/Documents/internal-admin/node_modules/chai/chai.js?40e7aa72e9665366bfd82579520de4fb0754dfae:1087:16
propertyGetter@http://localhost:9876/absolute/home/calebjay/Documents/internal-admin/node_modules/chai/chai.js?40e7aa72e9665366bfd82579520de4fb0754dfae:7784:33
http://localhost:9876/base/index.js?a3d01b46a2e8d6dea408b15b7f752ca119ad7183:23805:63
http://localhost:9876/base/index.js?a3d01b46a2e8d6dea408b15b7f752ca119ad7183:5405:16
flushCallbacks@http://localhost:9876/base/index.js?a3d01b46a2e8d6dea408b15b7f752ca119ad7183:5326:14', line: 243, sourceURL: 'http://localhost:9876/absolute/home/calebjay/Documents/internal-admin/node_modules/chai/chai.js?40e7aa72e9665366bfd82579520de4fb0754dfae'}
Is there a method by which Karma can capture these unsuccessful assertions and present them as failed tests rather than having them surface as Vue error logs?