A tool to create a virtual dom to use in your specs
- Add the file after boot.js of jasmine
<script src="../libraries/jasmine-2.3.4/jasmine.js"></script>
<script src="../libraries/jasmine-2.3.4/jasmine-html.js"></script>
<script src="../libraries/jasmine-2.3.4/boot.js"></script>
<script src="../libraries/jasmineVD-1.0.1/virtualDom.js"></script>- install the virtual dom inside of beforeEach or it ( dont forget to uninstall it in the afterEach)
beforeEach(function () {
jasmine.virtualDom.install(body);
});
afterEach(function () {
jasmine.virtualDom.uninstall();
});- use the dom API as usual
Here you have a summary, if you want more details, generate the docs.
The install method has an optional parameter, called body, which is expected to be the initial html state.
beforeEach(function () {
jasmine.virtualDom.install('<head></head><body>' +
'<div id="myContainer" class="container">Hi!</div>' +
'<div class="container">Hi2!</div>' +
'<div id="selector">' +
'<div class="child">Yeeeeepa</div>' +
'<div class="child">Yeeeeepa2</div>' +
'</div>' +
'</body>');
});
afterEach(function () {
jasmine.virtualDom.uninstall();
});
it('Adding a new element into the html', function () {
/// production code
var newEl = document.createElement('div');
newEl.innerText = 'This is a new element';
newEl.id = 'newEl';
document.getElementById('selector').appendChild(newEl);
///
expect(document.getElementById('newEl')).toBeDefined();
});You can trigger native or custom events of any element in the dom
it('triggering events', function () {
var callback = jasmine.createSpy();
/// production code
var el = document.getElementById('selector');
el.addEventListener('click', callback);
///
jasmine.virtualDom.trigger(el, 'click', {
property: 'this property will be added to the event object'
});
expect(callback).toHaveBeenCalled();
});Sometimes you need to reset the dom with a new template. You can do this, uninstalling and installing again, but there is a method which does that
jasmine.virtualDom.resetDom(newHTMLTemplateHere);Sometimes you have a event listener whose default behaviour needs to be prevented ( preventing redirections or submits for instance). You, obviously, need to test this.
For this when calling
jasmine.virtualDom.trigger(el, event);this will return a boolean, so when it is false means that the default behaviour was stopped, true otherwise
element.addEventListener('click', function (e) {
e.preventDefault();
});
var result = jasmine.virtualDom.trigger(element, 'click');
result === false // This assertion is trueelement.addEventListener('click', function (e) {
// do something else
});
var result = jasmine.virtualDom.trigger(element, 'click');
result === true // This assertion is true1. npm install
2. grunt doc
Chrome, Safari, FF, IE > 8.