jfirebaugh/konacha — pull request #63 by joliss (2012-08-25 01:17:49+00:00)
Title: Run tests in an iframe, and drop #konacha div

This change is mostly motivated by usability. When you're testing a JS
MVC application, having an iframe makes it much easier to visually
inspect the state of the application, and select specific elements to
look at in the DOM inspector.

I'm hoping that for my team mates that are getting started with the MVC
framework and Konacha, being able to *see* what's going will lessen the
pain of the initial learning curve.

### DOM resetting

We used to reset the `#konacha` div between tests, but we're not doing
this anymore with the iframe. Here's my reasoning:

The #konacha div was necessary because we didn't have the `

` to
ourselves, so it kept the test suite's DOM manipulations separate from
the #mocha report. If we were creating a #konacha div, it was sensible
to recreate it before *each* test.

But now that the test suite runs in its own iframe, it has an empty
`

` already, so it seems more sensible to leave it up to the test
suite to clear out its fixture data, and have Konacha not muck with the
iframe DOM at all.

### Performance

There seems to be a very slight performance degradation (5-10%) from
painting everything. I feel OK incurring that though, as the iframe
makes Konacha so much more usable.

### Layout

At the moment, if you have a smaller window, it responsively scales the
iframe and the report, but it's all a bit squished for my taste. We have
to leave ample space so error messages don't run behind the iframe. But
perhaps a better way would be to leave a little less space, and add a
"toggle iframe" button to hide it in case an error message runs too
long.

This is perhaps not something that prevents us from merging this, but
I'd like to improve it sooner or later.

----------------------------------------------------

Okay, so check this out. I think it's pretty cool. You can actually see the app being exercised as the test suite runs. Here's a screen shot of an app being tested with it: http://i.imgur.com/b2Anf.png

Would you please take a look and tell me what you think?

This pull request is in a mergeable state (documented, and all tests pass), but I'd still like to let it ruminate over the weekend. Maybe I'll think of some gotchas till Monday, or find something to clean up.

### Running in isolation

Quick brainstorm on this: I think per-file isolation is starting to look feasible now - we could achieve this by instantiating a separate iframe for each test file. There are some challenges to solve - e.g. we'd want the reports for all iframes to be merged, and each iframe would have to insert the next one and destroy itself when it's done. It's enough complexity that I'd suggest we tackle it separately from this pull request, but it's definitely something to look into.