Details:
1. All tests now live in `test`. All test dependencies that aren't from npm live
in `test-deps`.
2. The QUnit tests are gone, as well as their dependencies. Half of them
duplicated existing tests, and some of them depended on the real DOM to
properly test.
3. All tests are now using Mocha to run the tests, Chai for assertions, and
Sinon and Sinon Chai for testing some callbacks.
4. Tests are run through mocha-phantomjs. If you want to run just the tests,
run `grunt mocha_phantomjs` or fire up a server in the root and open
`http://localhost:<port>/test/index.html`, e.g. `python3 -m http.server`.
5. The linter I chose is ESLint. It is relatively easy to configure, but with a
lot of flexibility. The rules I chose mostly were in tune to the style the
project was already using. I'm not including a style guide in this commit,
but one will likely come. You can check out the `.eslintrc` in the root and
in `test/` for the two configs. The `.eslintignore` includes a TODO for
`mithril.js` itself targeted at me, in the root.
Other info:
- As a drive-by fix, I fixed line endings on a few of the files.
- I also took care of a few other files and linted them as I went:
- `Gruntfile.js`
- `test/input-cursor.html` (was in `tests/`)
- `test/svg.html` (was in `tests/`)
- `docs/layout/tools/template-converter.html`
- `docs/layout/tools/template-converter.js`
I didn't test the template converter after linting it, because it needs
further scrutiny to ensure it works with the latest version of Mithril. I
know the API has changed a little, which is why I want to be sure.
- I simplified the `.travis.yml` file because none of the tests are run directly
through Node anymore. They are always run in a browser of some kind.
Hopefully, this turned out all right...
It's a common question on Gitter: How do I unmount a component?
Presently this Google Search: `unmount site:http://lhorie.github.io/`
returns one result: `mithril.route.html` -- I have no idea why, there's no "unmount" on the page.
Adding the words unmounting and unmount to this doc page will make them discoverable directly and through Google.
Technically, Bower isn't really a package manager for Node.js, but rather, it's made in Node and built for usage in the frontend, hence why many popular frontend libraries, such as JQuery or Bootstrap have their distributions on there. Bower also has its own package repositories.
It's not completely obvious that `m.route.mode` needs setting before `m.route` is called (or at least it wasn't to me!), otherwise the initial routing from a URL typed in the location bar fails. This PR adds a note in the documentation to make this more clear.
@ArthurClemens pointed out in this gitter comment:
https://gitter.im/lhorie/mithril.js?at=55664ba1d21e5ed02ff06e54
that the Classic MVC example is broken:
https://lhorie.github.io/mithril/components.html#classic-mvc
I wanted to show a working jsfiddle with these changes applied, but I couldn't figure out how to get a POST request working. I do, however, have a jsbin that is working, although there are significant changes in the code to allow for GET and POST.
http://jsbin.com/cokesu/2/edit?js,output
A redraw is called for every character entered in the jsbin but AFAICT, not in this PR. I don't know why. It's as though `oninput` is really `onchange`. It's possible to limit the redraw to once when the "save" button is clicked, but this requires a change in logic:
var ContactForm = {
controller: function(args) {
this.contact = m.prop(new Contact())
this.save = function(contact) {
Observable.trigger("saveContact", {contact: contact})
}
},
view: function(ctrl, args) {
var contact = ctrl.contact()
return m("form", [
m("label", "Name"),
m("input[name=name]"),
m("label", "Email"),
m("input[name=email]"),
m("button[type=button]", {onclick: function(){
contact = {
name: m.prop(this.parentNode.elements.name.value),
email: m.prop(this.parentNode.elements.email.value)
}
ctrl.save(contact)
}}, "Save")
])
}
}
