2016-02-08 2 views
7

Я хотел бы протестировать компонент Vue.js, и я не могу этого сделать. Проще говоря, я устанавливаю свойство компонента, и я хочу утверждать, что он установлен правильно. Если это имеет значение, модуль загружается с экспортом, а JS выводится с использованием Webpack.Тестирование Vue.js Компонент

// component 
exports = module.exports = {}; 

module.exports = { 
    data: function() { 
    return { 
     active: false 
    }; 
    }, 
    methods: { 
    'close': function() { 
     console.log(this.active); // -> true 
     this.active = false; 
     console.log(this.active); // -> false 
    } 
    } 
}; 

// component-test 
var modal = require('../../resources/src/js/components/_component.js'); 
var assert = require('assert'); 

describe('close()', function() { 
    beforeEach(function() { 
    modal.data.active = true; 
    }); 
    it('should set modal to inactive', function() { 
    console.log(modal.data.active); // -> true 
    modal.methods.close(); 
    console.log(modal.data.active); // -> true 
    assert.equal(modal.data.active, false); 
    }); 
}); 
+0

так, что на самом деле провал? каков результат ваших тестов? вы проверяете [vue js guide] (http://vuejs.org/guide/application.html#Unit_Testing) о тестировании? –

+0

также проверьте [пример веб-пакета] (https://github.com/vuejs/vue-loader-example) на github, там определен определенный тест, с кармой + жасмин + phantomjs –

ответ

6

Это должно дать вам подсказку о том, как загрузить компоненты VUE при тестировании;

var modalComponent = require('../../resources/src/js/components/_component.js'); 
var assert = require('assert');   

//load the component with a vue instance 
vm = new Vue({ 
    template: '<div><test v-ref:test-component></test></div>', 
    components: { 
     'test': modalComponent 
    } 
}).$mount(); 

var modal = vm.$refs.testComponent; 

describe('close()', function() { 
    beforeEach(function() { 
     modal.active = true; 
    }); 

    it('should set modal to inactive', function() { 
     console.log(modal.active); // -> true 
     modal.close(); 
     console.log(modal.active); // -> false 
     assert.equal(modal.active, false); 
    }); 
}); 
+0

по какой-то причине, запущенные методы, подобные этому делает тайм-аут PhantomJS. 'PhantomJS 2.1.1 (Mac OS X 0.0.0): Выполнено 0 из 4 DISCONNECTED (10.003 secs/0 secs)' –

Смежные вопросы