node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

choo-test

Choo Test

Choo v5 SemVer License

Easy Choo testing.

Install

$ npm install choo-test --save-dev

Usage

Here is an example using Mochify as the test runner:

var assert = require('assert');
var choo = require('choo');
var html = require('choo/html');
var test = require('choo-test');
 
function model(state, bus) {
  state.text = 'Test';
 
  bus.on('change', () => {
    state.text = 'Changed';
    bus.emit('render');
  });
}
 
function view(state, emit) {
  return html`<button onclick=${function () {
    emit('change');
  }}>${state.text}</button>`;
  
}
 
describe('choo-app', function () {
  var restore;
  var app;
 
  beforeEach(function () {
    app = choo();
    app.use(model);
    app.route('/', view);
  });
 
  afterEach(function () {
    restore();
  });
 
  it('changes the button text on click', function (done) {
    restore = test.start(app);
 
    test.fire('button', 'click');
 
    test.onRender(function () {
      assert.equal(test.$('button').innerText, 'Changed');
      done();
    });
  });
 
});

How does it work?

This module is a collection of helper functions. Each of them can be used separately.

When you use the start function to start your Choo app, it wraps the appends the application to a div tag in the document.body. When calling returned restore function, the DOM node is removed.

The onRender function creates a MutationObserver and invokes the given callback if any change in the DOM tree happens.

API

  • $(selector[, scope]): Find a DOM element using querySelector. scope must be a DOM node to search and defaults to document.
  • $$(selector[, scope]): Find all DOM element using querySelectorAll. scope must be a DOM node to search and defaults to document.
  • fire(selector, event[, args]): Fire an event using bean.fire.
  • onRender([nodeOrSelector, ]fn): Register a function to invoke after the next DOM mutation occurred. If only a function is given, the entire document is observed. If no mutation occurs within 1500 ms, a timeout error is thrown.
  • start(app): Creates a div tag and append it to document.body, then starts the given Choo app and attaches the returned tree to the div node. Returns a restore() function which remove the div node from the body.

Testing XHR

Use the Sinon.js fake server for XHR testing. If you're using the xhr library, you have to initialize the XMLHttpRequest implementation like this:

sandbox = sinon.sandbox.create({
  useFakeServer: true
});
sandbox.stub(xhr, 'XMLHttpRequest', sandbox.server.xhr);

License

MIT