Add integration mode to html reporter #698

Closed
wants to merge 5 commits into
from

Conversation

Projects
None yet
3 participants

wvl commented Jan 1, 2013

When adding tests to an existing page, we want mocha to be unobtrusive. Adding the css class integration to the mocha div will enable the integration mode of the html reporter. This will:

  • Remove the report from the page flow, and hide it by default.
  • Add a toggle to the stats panel to show/hide the report.
  • Modifies the css to remove some built in assumptions, where the report styles would be inherited from the base page. (and thus unreadable if it is loaded in a page with a white on dark color scheme, for example).
  • Add the css class bottom to the mocha div, and the stats panel will move to the bottom of the page.
  • Adds a test to demonstrate its usage. Run: node test/browser-integration/index.js, and visit http://localhost:3333/

With this, we can write integration tests for our single page app with mocha.

wvl added some commits Jan 1, 2013

@wvl wvl Add integration mode to html reporter
When adding tests to an existing page, we want
mocha to be unobtrusive. Adding the css class
`integration` to the mocha div will enable the
integration mode of the html reporter. This will:

* Remove the report from the page flow, and hide
it by default.
* Add a toggle to the stats panel to show/hide the
report.
* Modifies the css to remove some built in 
assumptions, where the report styles would be
inherited from the base page. (and thus unreadable
if it is loaded in a page with a white on dark
color scheme, for example).
* Add the css class `bottom` to the mocha div, and
the stats panel will move to the bottom of the page.
* Adds a test to demonstrate its usage. Run:
`node test/browser-integration/index.js`, and visit
`http://localhost:3333/`
e8485db
@wvl wvl Separate initialization of mocha with `run`
Motivation: I have written an adapter for testacular
that will load a page with mocha tests inside an
iframe. I need to be able to hook (but not change)
the runner events to report the status of the tests
to testacular. Thus:

```
var mocha = iframe.contentWindow.mocha;
var runner = mocha.init();
runner.on('start', function() {
  tc.info({total: runner.total});
});
runner.on('test end', reportTest);
runner.run();
```
385c698
Contributor

tj commented Jan 1, 2013

woah this diff is madness (huge), might need a rebase. If it diverges quite a bit from the regular HTML reporter keep in mind that you can always make it a third-party thing and add it to https://github.com/visionmedia/mocha/wiki, sounds like that would make more sense for this

wvl commented Jan 1, 2013

Re size of the diff: Most of the size comes from the bundled test/example. I added expect.js and page.js to the repo, which certainly could be pulled out. I figured they were fine since they are used for demonstration / test purposes, and are not added dependencies of the project.

Re rebase: Not sure what you're seeing, it's two commits on top of your master, with the exception of the latest growl version bump.

Re divergence: The functionality fo the html reporter remains exactly the same. It's only if you add the 'integration' class to the mocha div that the (minimal) extra functionality appears. Most of the actual difference in the patch is additions to the css to make the mocha css independent of what may already be on the page.

Re third party: It's your call, and can certainly be done. I figured the functionality would be useful for other people.

Contributor

tj commented Jan 1, 2013

pulled it down to take a look, for now i think i'd prefer to keep this out, i can see it being an endless battle fighting with styles on the user's page etc, need to think on it some more. Personally I find this sort of test runner pretty bad for acceptance tests anyway, selenium or similar is better, most people use an iframe for state

wvl commented Jan 1, 2013

I don't think the styles will be too much of a problem -- the mocha layout and css is already pretty well scoped, and the markup fairly minimal. I added it to a single page app with a white on dark layout which drove most of the changes.

Personally, I think the combination of this with testacular will be pretty powerful. By running the tests directly in the app, there's no barrier getting in the way trying to send events to a browser over websockets, for example. If a test fails, you have your app open in your browser with the state that the failure occurs so that it's easy to debug. You can also hook into your app, so listening for routing events, for example, which keeps the test lightweight and fast. And then you can run them through testacular to drive the browsers for continuous integration.

Contributor

travisjeffery commented Dec 23, 2013

closing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment