VueJS 2.4 allows us to access root data from a component using this.$root. An example of this can be seen in the following JSFiddle:
https://jsfiddle.net/bjg2yL1u/1/
By clicking on a button, you will see 'orange' displayed in the console, which is a root data not owned by the triggering todo-item.
I am currently conducting a Jasmine test which is running properly and showing green results.
However, the console.log inside the todo-item component is outputting 'undefined'.
The question arises, how can I inject data into this.$root instance while inside a test?
describe("TodoItem", function() {
var sut;
var message = {text:'word'}
beforeEach(function() {
var Constructor = Vue.extend(TodoItem);
sut = new Constructor({
propsData: {
todo: message,
}
}).$mount();
});
it("Should be able to reverse the given word", function() {
// Given
expect(sut.todo.text).toEqual('word');
expect($(sut.$el).find('li').text()).toEqual('word');
//When
sut.reverseMessage();
// We encounter a problem here with 'undefined' being printed, because there is nothing attached to this.$root when within a test
// Then
expect(sut.todo.text).toEqual('drow');
});
});