Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mantoni/choo-test
🚂🚋🚋🚋 Easy choo app unit testing
https://github.com/mantoni/choo-test
choo testing
Last synced: 16 days ago
JSON representation
🚂🚋🚋🚋 Easy choo app unit testing
- Host: GitHub
- URL: https://github.com/mantoni/choo-test
- Owner: mantoni
- License: mit
- Created: 2016-07-17T13:19:37.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-04-17T08:43:09.000Z (over 1 year ago)
- Last Synced: 2024-10-12T15:21:34.555Z (about 1 month ago)
- Topics: choo, testing
- Language: JavaScript
- Homepage:
- Size: 814 KB
- Stars: 23
- Watchers: 3
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGES.md
- License: LICENSE
Awesome Lists containing this project
- awesome-choo - choo-test - Easy choo app unit testing. (Uncategorized / Uncategorized)
README
# Choo Test
[![SemVer]](http://semver.org)
[![License]](https://github.com/mantoni/choo-test/blob/master/LICENSE)
Easy [Choo][] testing for Choo v5, v6 and v7.
## Install
```bash
$ npm install choo-test --save-dev
```
## Usage
Here is an example using [Mochify][] as the test runner:
```js
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`${state.text}`;
}
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][sinon-fake-server] for XHR testing. If you're
using the [xhr][] library, you have to initialize the `XMLHttpRequest`
implementation like this:
```js
sandbox = sinon.sandbox.create({
useFakeServer: true
});
sandbox.stub(xhr, 'XMLHttpRequest', sandbox.server.xhr);
```
## License
MIT
[SemVer]: http://img.shields.io/:semver-%E2%9C%93-brightgreen.svg
[License]: http://img.shields.io/npm/l/choo-test.svg
[Choo]: https://github.com/choojs/choo
[Mochify]: https://github.com/mantoni/mochify.js
[bean.fire]: https://github.com/fat/bean#fireelement-eventtype-args-
[MutationObserver]: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
[sinon-fake-server]: http://sinonjs.org/docs/#fakeServer
[xhr]: https://www.npmjs.com/package/xhr