I am currently facing some challenges while trying to test a Vue.js component. My main issue lies in setting a property for the component and verifying that it has been set correctly. For context, the module has been loaded with exports and the JavaScript is being output through Webpack.
// sample-component
exports = module.exports = {};
module.exports = {
data: function () {
return {
isActive: false
};
},
methods: {
'toggleActiveState': function () {
console.log(this.isActive); // -> true
this.isActive = !this.isActive;
console.log(this.isActive); // -> false
}
}
};
// test-case
var myComponent = require('../../resources/src/js/components/_sample-component.js');
var assert = require('assert');
describe('toggleActiveState()', function () {
beforeEach(function () {
myComponent.data.isActive = true;
});
it('should toggle the active state of the component', function () {
console.log(myComponent.data.isActive); // -> true
myComponent.methods.toggleActiveState();
console.log(myComponent.data.isActive); // -> false
assert.equal(myComponent.data.isActive, false);
});
});