choo-test

Choo Test

Easy Choo testing for Choo v5, v6 and v7.

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, emitter) {
  state.text = 'Test';

  emitter.on('change', () => {
    state.text = 'Changed';
    emitter.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 and appends the application to a div tag in the document.body. When calling the returned restore function, the DOM node is removed again.

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

Global window events are captured and unregistered when calling restore().

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

Changelog

1.0.0

BREAKING: The codebase was upgraded to ES5.

Choo v7 was added to the supported versions in peerDependencies. With this release, choo-test is compatible with v5, v6 and v7.

• 📚 7ff4e9d State choo compatibility, update URL and remove badge
• ✨ b85587b Switch to @studio/eslint-config
• ✨ 4914419 Upgrade eslint to v6
• ✨ 4603617 Upgrade Studio Changes
• ✨ 2d7122d Upgrade choo to v7
• ✨ 8289a74 Update mochify

Released by Maximilian Antoni on 2019-09-12.