Currently, I am engrossed in a Laracast Episode about Vue Testing with AVA. Everything has been going smoothly so far, but now I have encountered an intriguing bug.
This is my notification.js:
import test from 'ava';
import Notification from '../src/Notification';
test('that it renders a notification', t => {
//V2
let N = Vue.extend(Notification);
let string = 'Foobar';
string.trim();
let vm = new N({propsData:{message: string}}).$mount();
// V1
//let n = new Vue(Notification).$mount();
//t.truthy('unicorn'); // assertation needed, does not have any importance
//console.log(n.$el.innerHTML);
t.is(vm.$el.textContent,'Foobar');
});
This is how the imported Notification.js file looks:
export default{
template:'<div> {{ message }} </div>',
props:['message']
};
The error message I receive is as follows:
that it renders a notification
test/notification.js:18
17:
18: t.is(vm.$el.textContent,'Foobar');
19: });
Difference:
- ' Foobar '
+ 'Foobar'
As evident, AVA detects a discrepancy between the strings due to two whitespaces before and after 'Foobar'. I attempted to trim() the string, yet the issue persists.
Does anyone have insights on where these extra whitespaces are originating from or how to resolve this?