samedi 12 août 2017

How to access this.$root from VueJS component when inside a test

In VueJS 2.4, we can access root data from component thanks to this.$root, like in this JSFiddle:

http://ift.tt/2uxSzbl

If you click on a button, you can see 'orange' displayed in the console, which is a root data, not owned by the todo-item who triggered it.

Now I am inside a Jasmine test. This test works/run/is green properly.

But the console.log inside todo-item component outputs 'undefined'.

How can I inject data to this.$root instance when 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();

    // Bang !! problem here. 'undefined' is printed, because there is nothing attached to this.$root when inside a test        

    // Then
    expect(sut.todo.text).toEqual('drow');

  });
});

Aucun commentaire:

Enregistrer un commentaire