Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Add table of contents to webpage #659

Closed
wants to merge 3 commits into from

3 participants

Jonathan Rajavuori TJ Holowaychuk Travis Jeffery
Jonathan Rajavuori

This may be a rather opinionated pull request, but it's bothered me more than once that the webpage for mocha doesn't have a table of contents. It makes it hard to go back to it and find one specific section again, or to browse the whole thing with a nice, nonlinear section click -- back -- other section click flow.

As a part of this change, I corrected the duplicated exclusive-tests anchor to inclusive-tests and the string diffs anchor to string-diffs.

There are a few considerations to be made:

  • In order to have the list ordering make sense for a table of contents (descend vertically rather than horizontally), but retain the two-column styling, I removed float: left and width: 40% from the ul li style and added column-count: 2 to the ul style. This currently affects all other uls as well. In addition, column-count is not supported in versions of IE below 10.
  • I put the TOC below the feature list to keep the latter above the fold and more front-and-center.
  • I was unsure whether or not to capitalize the section headers. The feature list, which is right above it, is uncapitalized and undecorated, so there's a slight discordance. In the end, I decided to keep them exactly the same as the actual section headers they link to.
  • Similarly, I was unsure whether or not to make "Getting started" the link to "1. 2. 3. Mocha!", and "Usage" the link to "mocha(1)". They look slightly out of place among the other textual headers, and it may not be very clear what they are out of context, despite being fairly important and looked-for sections. Again, though, I decided to keep them the same pending consideration.
TJ Holowaychuk
Owner
tj commented

hmm i dont mind it but i would rather have some sort of fixed menu that follows along with you, more like on http://expressjs.com/api.html

Jonathan Rajavuori

That sounds great! I was going with a more conservative TOC for the "pitch," but I can definitely do something like that. I'll tinker with it tonight, stay tuned.

TJ Holowaychuk
Owner
tj commented

sounds good thanks man

Jonathan Rajavuori

How's this? Could be done on the left too, by changing two lines in the CSS.

Jonathan Rajavuori

By the way, I didn't do all that unescaping and small whitespace changes in index.html. It's possible that I have a different version of markdown (it's 1.0.1).

Jonathan Rajavuori jrajav commented on the diff
style.css
@@ -178,4 +206,5 @@ code .comment { color: #ddd }
code .init { color: #2F6FAD }
code .string { color: #5890AD }
code .keyword { color: #8A6343 }
-code .number { color: #2F6FAD }
Jonathan Rajavuori
jrajav added a note

Not entirely sure what happened here; it stayed changed even if I removed line 210

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

Sooo is this any good? :)

TJ Holowaychuk
Owner
tj commented

hmm it's saying the patch cannot be applied, need to rebase or something

Jonathan Rajavuori

Okay, do you need me to do anything with my branch?

TJ Holowaychuk
Owner
tj commented

oh I see you're working in master, hmm, ill just manually merge this in a minute and look

Jonathan Rajavuori

So, uh, this ever gonna be pulled?

Travis Jeffery

@jrajav make your changes up to date and i can merge it in.

Jonathan Rajavuori

Actually, it looks like TJ might have forgotten about my pull request and done redundant work to add a table of contents a few months later: 314da12

Oh well!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Nov 16, 2012
  1. Jonathan Rajavuori
  2. Jonathan Rajavuori
Commits on Nov 17, 2012
  1. Jonathan Rajavuori
This page is out of date. Refresh to see the latest.
Showing with 232 additions and 169 deletions.
  1. +31 −0 head.html
  2. +131 −165 index.html
  3. +2 −2 index.md
  4. +37 −0 nav.js
  5. +31 −2 style.css
31 head.html
View
@@ -6,6 +6,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js"></script>
<script src="highlight.js"></script>
+ <script src="nav.js"></script>
<script>
setTimeout(function(){
$('body').addClass('onload');
@@ -13,6 +14,36 @@
</script>
</head>
<body>
+ <div id="nav-table">
+ <div id="nav-cell">
+ <div id="nav">
+ <a href="#content"><span style="font-size: 200%">•</span></a><br>
+ <a href="#features">features</a><br>
+ <a href="#installation">installation</a><br>
+ <a href="#getting-started">getting started</a><br>
+ <a href="#assertions">assertions</a><br>
+ <a href="#synchronous-code">synchronous code</a><br>
+ <a href="#asynchronous-code">asynchronous code</a><br>
+ <a href="#pending-tests">pending tests</a><br>
+ <a href="#exclusive-tests">exclusive tests</a><br>
+ <a href="#inclusive-tests">inclusive tests</a><br>
+ <a href="#test-duration">test duration</a><br>
+ <a href="#string-diffs">string diffs</a><br>
+ <a href="#usage">usage</a><br>
+ <a href="#interfaces">interfaces</a><br>
+ <a href="#reporters">reporters</a><br>
+ <a href="#browser-support">browser support</a><br>
+ <a href="#mocha.opts">mocha.opts</a><br>
+ <a href="#suite-specific-timeouts">suite specific timeouts</a><br>
+ <a href="#test-specific-timeouts">test specific timeouts</a><br>
+ <a href="#best-practices">best practices</a><br>
+ <a href="#editors">editors</a><br>
+ <a href="#example-test-suites">example test suites</a><br>
+ <a href="#running-mochas-tests">running mocha's tests</a><br>
+ <a href="#more-information">more information</a><br>
+ </div>
+ </div>
+ </div>
<section id="content">
<h1><a href="http://github.com/visionmedia/mocha">Mocha</a></h1>
<p id="tag"><em>simple</em>, <em>flexible</em>, <em>fun</em></p>
296 index.html
View
@@ -6,6 +6,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js"></script>
<script src="highlight.js"></script>
+ <script src="nav.js"></script>
<script>
setTimeout(function(){
$('body').addClass('onload');
@@ -13,6 +14,36 @@
</script>
</head>
<body>
+ <div id="nav-table">
+ <div id="nav-cell">
+ <div id="nav">
+ <a href="#content"><span style="font-size: 200%">•</span></a><br>
+ <a href="#features">features</a><br>
+ <a href="#installation">installation</a><br>
+ <a href="#getting-started">getting started</a><br>
+ <a href="#assertions">assertions</a><br>
+ <a href="#synchronous-code">synchronous code</a><br>
+ <a href="#asynchronous-code">asynchronous code</a><br>
+ <a href="#pending-tests">pending tests</a><br>
+ <a href="#exclusive-tests">exclusive tests</a><br>
+ <a href="#inclusive-tests">inclusive tests</a><br>
+ <a href="#test-duration">test duration</a><br>
+ <a href="#string-diffs">string diffs</a><br>
+ <a href="#usage">usage</a><br>
+ <a href="#interfaces">interfaces</a><br>
+ <a href="#reporters">reporters</a><br>
+ <a href="#browser-support">browser support</a><br>
+ <a href="#mocha.opts">mocha.opts</a><br>
+ <a href="#suite-specific-timeouts">suite specific timeouts</a><br>
+ <a href="#test-specific-timeouts">test specific timeouts</a><br>
+ <a href="#best-practices">best practices</a><br>
+ <a href="#editors">editors</a><br>
+ <a href="#example-test-suites">example test suites</a><br>
+ <a href="#running-mochas-tests">running mocha's tests</a><br>
+ <a href="#more-information">more information</a><br>
+ </div>
+ </div>
+ </div>
<section id="content">
<h1><a href="http://github.com/visionmedia/mocha">Mocha</a></h1>
<p id="tag"><em>simple</em>, <em>flexible</em>, <em>fun</em></p>
@@ -20,7 +51,6 @@
<h2 id="features">Features</h2>
-
<ul>
<li>browser support</li>
<li>simple async support</li>
@@ -38,7 +68,7 @@ <h2 id="features">Features</h2>
<li>file watcher support</li>
<li>global variable leak detection</li>
<li>optionally run tests that match a regexp</li>
-<li>auto-exit to prevent &ldquo;hanging&rdquo; with an active loop</li>
+<li>auto-exit to prevent "hanging" with an active loop</li>
<li>easily meta-generate suites &amp; test-cases</li>
<li>mocha.opts file support</li>
<li>clickable suite titles to filter test execution</li>
@@ -46,25 +76,22 @@ <h2 id="features">Features</h2>
<li>detects multiple calls to <code>done()</code></li>
<li>use any assertion library you want</li>
<li>extensible reporting, bundled with 9+ reporters</li>
-<li>extensible test DSLs or &ldquo;interfaces&rdquo;</li>
+<li>extensible test DSLs or "interfaces"</li>
<li>before, after, before each, after each hooks</li>
<li>arbitrary transpiler support (coffee-script etc)</li>
<li>TextMate bundle</li>
<li>and more!</li>
</ul>
-
<h2 id="installation">Installation</h2>
-
-<p> Install with <a href="http://npmjs.org">npm</a>:</p>
+<p>Install with <a href="http://npmjs.org">npm</a>:</p>
<pre><code>$ npm install -g mocha
</code></pre>
<h2 id="getting-started">1. 2. 3. Mocha!</h2>
-
<pre><code>$ npm install -g mocha
$ mkdir test
$ $EDITOR test/test.js
@@ -88,8 +115,7 @@ <h2 id="getting-started">1. 2. 3. Mocha!</h2>
<h2 id="assertions">Assertions</h2>
-
-<p>Mocha allows you to use any assertion library you want, if it throws an error, it will work! This means you can utilize libraries such as <a href="http://github.com/visionmedia/should.js">should.js</a>, node&rsquo;s regular <code>assert</code> module, or others. The following is a list of known assertion libraries for node and/or the browser:</p>
+<p>Mocha allows you to use any assertion library you want, if it throws an error, it will work! This means you can utilize libraries such as <a href="http://github.com/visionmedia/should.js">should.js</a>, node's regular <code>assert</code> module, or others. The following is a list of known assertion libraries for node and/or the browser:</p>
<ul>
<li><a href="http://github.com/visionmedia/should.js">should.js</a> BDD style shown throughout these docs</li>
@@ -98,11 +124,9 @@ <h2 id="assertions">Assertions</h2>
<li><a href="https://github.com/visionmedia/better-assert">better-assert</a> c-style self-documenting assert()</li>
</ul>
-
<h2 id="synchronous-code">Synchronous code</h2>
-
-<p> When testing synchronous code, omit the callback and Mocha will automatically continue on to the next test.</p>
+<p>When testing synchronous code, omit the callback and Mocha will automatically continue on to the next test.</p>
<pre><code>describe('Array', function(){
describe('#indexOf()', function(){
@@ -116,7 +140,6 @@ <h2 id="synchronous-code">Synchronous code</h2>
<h2 id="asynchronous-code">Asynchronous code</h2>
-
<p>Testing asynchronous code with Mocha could not be simpler! Simply invoke the callback when your test is complete. By adding a callback (usually named <code>done</code>) to <code>it()</code> Mocha will know that it should wait for completion.</p>
<pre><code>describe('User', function(){
@@ -132,7 +155,7 @@ <h2 id="asynchronous-code">Asynchronous code</h2>
})
</code></pre>
-<p> To make things even easier, the <code>done()</code> callback accepts an error, so we may use this directly:</p>
+<p>To make things even easier, the <code>done()</code> callback accepts an error, so we may use this directly:</p>
<pre><code>describe('User', function(){
describe('#save()', function(){
@@ -144,7 +167,7 @@ <h2 id="asynchronous-code">Asynchronous code</h2>
})
</code></pre>
-<p> All &ldquo;hooks&rdquo;, that is <code>before()</code>, <code>after()</code>, <code>beforeEach()</code>, <code>afterEach()</code> may be sync or async as well, behaving much like a regular test-case. For example you may wish to populate database with dummy content before each test:</p>
+<p>All "hooks", that is <code>before()</code>, <code>after()</code>, <code>beforeEach()</code>, <code>afterEach()</code> may be sync or async as well, behaving much like a regular test-case. For example you may wish to populate database with dummy content before each test:</p>
<pre><code>describe('Connection', function(){
var db = new Connection
@@ -171,7 +194,7 @@ <h2 id="asynchronous-code">Asynchronous code</h2>
})
</code></pre>
-<p> You may also pick any file and add &ldquo;root&rdquo; level hooks, for example add <code>beforeEach()</code> outside of <code>describe()</code>s then the callback will run before any test-case regardless of the file its in. This is because Mocha has a root <code>Suite</code> with no name.</p>
+<p>You may also pick any file and add "root" level hooks, for example add <code>beforeEach()</code> outside of <code>describe()</code>s then the callback will run before any test-case regardless of the file its in. This is because Mocha has a root <code>Suite</code> with no name.</p>
<pre><code>beforeEach(function(){
console.log('before every test')
@@ -180,8 +203,7 @@ <h2 id="asynchronous-code">Asynchronous code</h2>
<h2 id="pending-tests">Pending tests</h2>
-
-<p> Pending test-cases are simply those without a callback:</p>
+<p>Pending test-cases are simply those without a callback:</p>
<pre><code>describe('Array', function(){
describe('#indexOf()', function(){
@@ -192,8 +214,7 @@ <h2 id="pending-tests">Pending tests</h2>
<h2 id="exclusive-tests">Exclusive tests</h2>
-
-<p> The exclusivity feature allows you to run only the specified suite or test-case
+<p>The exclusivity feature allows you to run only the specified suite or test-case
by appending <code>.only()</code> to the call as shown here:</p>
<pre><code>describe('Array', function(){
@@ -203,7 +224,7 @@ <h2 id="exclusive-tests">Exclusive tests</h2>
})
</code></pre>
-<p> Or a specific test-case:</p>
+<p>Or a specific test-case:</p>
<pre><code>describe('Array', function(){
describe('#indexOf()', function(){
@@ -218,13 +239,12 @@ <h2 id="exclusive-tests">Exclusive tests</h2>
})
</code></pre>
-<p> Note that currently only one <code>.only()</code> call is respected, this
+<p>Note that currently only one <code>.only()</code> call is respected, this
effectively turns into a <code>--grep</code>.</p>
-<h2 id="exclusive-tests">Inclusive tests</h2>
-
+<h2 id="inclusive-tests">Inclusive tests</h2>
-<p> This feature is similar to <code>.only()</code>, however by appending <code>.skip()</code>
+<p>This feature is similar to <code>.only()</code>, however by appending <code>.skip()</code>
you may tell Mocha to simply ignore these suite(s) and test-case(s). This
puts them in a pending state, and is favoured over commenting out tests
which you may forget to uncomment.</p>
@@ -236,7 +256,7 @@ <h2 id="exclusive-tests">Inclusive tests</h2>
})
</code></pre>
-<p> Or a specific test-case:</p>
+<p>Or a specific test-case:</p>
<pre><code>describe('Array', function(){
describe('#indexOf()', function(){
@@ -253,26 +273,23 @@ <h2 id="exclusive-tests">Inclusive tests</h2>
<h2 id="test-duration">Test duration</h2>
-
-<p> Most of the reporters support some form of displaying
+<p>Most of the reporters support some form of displaying
test duration, as well as flagging tests that are slow,
- as shown here with the &ldquo;spec&rdquo; reporter:</p>
-
-<p> <img src="images/reporter-spec-duration.png" alt="test duration" /></p>
+ as shown here with the "spec" reporter:</p>
-<h2 id="string diffs">String diffs</h2>
+<p><img src="images/reporter-spec-duration.png" alt="test duration" title="" /></p>
+<h2 id="string-diffs">String diffs</h2>
-<p> Mocha supports the <code>err.expected</code>, and <code>err.actual</code> properties
+<p>Mocha supports the <code>err.expected</code>, and <code>err.actual</code> properties
when available to present expectations to the developer. Currently
Mocha provides string diffs, however in the future object diffs and
others may be provided.</p>
-<p> <img src="http://f.cl.ly/items/3L0T1A0h2N1J3G021i0F/Screen%20Shot%202012-03-01%20at%202.31.31%20PM.png" alt="string diffs" /></p>
+<p><img src="http://f.cl.ly/items/3L0T1A0h2N1J3G021i0F/Screen%20Shot%202012-03-01%20at%202.31.31%20PM.png" alt="string diffs" title="" /></p>
<h2 id="usage">mocha(1)</h2>
-
<pre><code>Usage: mocha [debug] [options] [files]
Commands:
@@ -308,67 +325,55 @@ <h2 id="usage">mocha(1)</h2>
<h3 id="watch-option">-w, --watch</h3>
-
-<p> Executes tests on changes to JavaScript in the CWD, and once initially.</p>
+<p>Executes tests on changes to JavaScript in the CWD, and once initially.</p>
<h3 id="compilers-option">--compilers</h3>
-
-<p> coffee-script is no longer supported out of the box. CS and similar transpilers
- may be used by mapping the file extensions (for use with &ndash;watch) and the module
+<p>coffee-script is no longer supported out of the box. CS and similar transpilers
+ may be used by mapping the file extensions (for use with --watch) and the module
name. For example <code>--compilers coffee:coffee-script</code>.</p>
<h3 id="bail-option">-b, --bail</h3>
-
-<p> Only interested in the first exception? use <code>--bail</code> !</p>
+<p>Only interested in the first exception? use <code>--bail</code> !</p>
<h3 id="debug-option">-d, --debug</h3>
-
-<p> Enables node&rsquo;s debugger support, this executes your script(s) with <code>node debug &lt;file ...&gt;</code> allowing you to step through code and break with the <strong>debugger</strong> statement.</p>
+<p>Enables node's debugger support, this executes your script(s) with <code>node debug &lt;file ...&gt;</code> allowing you to step through code and break with the <strong>debugger</strong> statement.</p>
<h3 id="globals-option">--globals &lt;names&gt;</h3>
-
-<p> Accepts a comma-delimited list of accepted global variable names. For example suppose your app deliberately exposes a global named <code>app</code> and <code>YUI</code>, you may want to add <code>--globals app,YUI</code>.</p>
+<p>Accepts a comma-delimited list of accepted global variable names. For example suppose your app deliberately exposes a global named <code>app</code> and <code>YUI</code>, you may want to add <code>--globals app,YUI</code>.</p>
<h3 id="ignore-leaks-option">--ignore-leaks</h3>
-
-<p> By default Mocha will fail when global variables are introduced, you may use <code>--globals</code> to specify a few, or use <code>--ignore-leaks</code> to disable this functionality.</p>
+<p>By default Mocha will fail when global variables are introduced, you may use <code>--globals</code> to specify a few, or use <code>--ignore-leaks</code> to disable this functionality. </p>
<h3 id="require-option">-r, --require &lt;name&gt;</h3>
-
-<p> The <code>--require</code> option is useful for libraries such as <a href="http://github.com/visionmedia/should.js">should.js</a>, so you may simply <code>--require should</code> instead of manually invoking <code>require('should')</code> within each test file. Note that this works well for <code>should</code> as it augments <code>Object.prototype</code>, however if you wish to access a module&rsquo;s exports you will have to require them, for example <code>var should = require('should')</code>.</p>
+<p>The <code>--require</code> option is useful for libraries such as <a href="http://github.com/visionmedia/should.js">should.js</a>, so you may simply <code>--require should</code> instead of manually invoking <code>require('should')</code> within each test file. Note that this works well for <code>should</code> as it augments <code>Object.prototype</code>, however if you wish to access a module's exports you will have to require them, for example <code>var should = require('should')</code>.</p>
<h3 id="ui-option">-u, --ui &lt;name&gt;</h3>
-
-<p> The <code>--ui</code> option lets you specify the interface to use, defaulting to &ldquo;bdd&rdquo;.</p>
+<p>The <code>--ui</code> option lets you specify the interface to use, defaulting to "bdd".</p>
<h3 id="reporter-option">-R, --reporter &lt;name&gt;</h3>
-
-<p> The <code>--reporter</code> option allows you to specify the reporter that will be used, defaulting to &ldquo;dot&rdquo;. This flag may also be used to utilize third-party reporters. For example if you <code>npm install mocha-lcov-reporter</code> you may then do <code>--reporter mocha-lcov-reporter</code>.</p>
+<p>The <code>--reporter</code> option allows you to specify the reporter that will be used, defaulting to "dot". This flag may also be used to utilize third-party reporters. For example if you <code>npm install mocha-lcov-reporter</code> you may then do <code>--reporter mocha-lcov-reporter</code>.</p>
<h3 id="timeout-option">-t, --timeout &lt;ms&gt;</h3>
-
-<p> Specifies the test-case timeout, defaulting to 2 seconds. To override you may pass the timeout in milliseconds, or a value with the <code>s</code> suffix, ex: <code>--timeout 2s</code> or <code>--timeout 2000</code> would be equivalent.</p>
+<p>Specifies the test-case timeout, defaulting to 2 seconds. To override you may pass the timeout in milliseconds, or a value with the <code>s</code> suffix, ex: <code>--timeout 2s</code> or <code>--timeout 2000</code> would be equivalent.</p>
<h3 id="slow-option">-s, --slow &lt;ms&gt;</h3>
-
-<p> Specify the &ldquo;slow&rdquo; test threshold, defaulting to 75ms. Mocha uses this to highlight test-cases that are taking too long.</p>
+<p>Specify the "slow" test threshold, defaulting to 75ms. Mocha uses this to highlight test-cases that are taking too long.</p>
<h3 id="grep-option">-g, --grep &lt;pattern&gt;</h3>
+<p>The <code>--grep</code> option when specified will trigger mocha to only run tests matching the given <code>pattern</code> which is internally compiled to a <code>RegExp</code>. </p>
-<p> The <code>--grep</code> option when specified will trigger mocha to only run tests matching the given <code>pattern</code> which is internally compiled to a <code>RegExp</code>.</p>
-
-<p> Suppose for example you have &ldquo;api&rdquo; related tests, as well as &ldquo;app&rdquo; related tests, as shown in the following snippet; One could use <code>--grep api</code> or <code>--grep app</code> to run one or the other. The same goes for any other part of a suite or test-case title, <code>--grep users</code> would be valid as well, or even <code>--grep GET</code>.</p>
+<p>Suppose for example you have "api" related tests, as well as "app" related tests, as shown in the following snippet; One could use <code>--grep api</code> or <code>--grep app</code> to run one or the other. The same goes for any other part of a suite or test-case title, <code>--grep users</code> would be valid as well, or even <code>--grep GET</code>.</p>
<pre><code>describe('api', function(){
describe('GET /api/users', function(){
@@ -385,13 +390,11 @@ <h3 id="grep-option">-g, --grep &lt;pattern&gt;</h3>
<h2 id="interfaces">Interfaces</h2>
-
-<p> Mocha &ldquo;interface&rdquo; system allows developers to choose their style of DSL. Shipping with <strong>BDD</strong>, <strong>TDD</strong>, and <strong>exports</strong> flavoured interfaces.</p>
+<p>Mocha "interface" system allows developers to choose their style of DSL. Shipping with <strong>BDD</strong>, <strong>TDD</strong>, and <strong>exports</strong> flavoured interfaces.</p>
<h3 id="bdd-interface">BDD</h3>
-
-<p> The &ldquo;<strong>BDD</strong>&rdquo; interface provides <code>describe()</code>, <code>it()</code>, <code>before()</code>, <code>after()</code>, <code>beforeEach()</code>, and <code>afterEach()</code>:</p>
+<p>The "<strong>BDD</strong>" interface provides <code>describe()</code>, <code>it()</code>, <code>before()</code>, <code>after()</code>, <code>beforeEach()</code>, and <code>afterEach()</code>: </p>
<pre><code>describe('Array', function(){
before(function(){
@@ -408,8 +411,7 @@ <h3 id="bdd-interface">BDD</h3>
<h3 id="tdd-interface">TDD</h3>
-
-<p> The &ldquo;<strong>TDD</strong>&rdquo; interface provides <code>suite()</code>, <code>test()</code>, <code>setup()</code>, and <code>teardown()</code>.</p>
+<p>The "<strong>TDD</strong>" interface provides <code>suite()</code>, <code>test()</code>, <code>setup()</code>, and <code>teardown()</code>.</p>
<pre><code>suite('Array', function(){
setup(function(){
@@ -426,8 +428,7 @@ <h3 id="tdd-interface">TDD</h3>
<h3 id="exports-interface">Exports</h3>
-
-<p> The &ldquo;<strong>exports</strong>&rdquo; interface is much like Mocha&rsquo;s predecessor <a href="http://github.com/visionmedia/expresso">expresso</a>. The keys <code>before</code>, <code>after</code>, <code>beforeEach</code>, and <code>afterEach</code> are special-cased, object values
+<p>The "<strong>exports</strong>" interface is much like Mocha's predecessor <a href="http://github.com/visionmedia/expresso">expresso</a>. The keys <code>before</code>, <code>after</code>, <code>beforeEach</code>, and <code>afterEach</code> are special-cased, object values
are suites, and function values are test-cases.</p>
<pre><code>module.exports = {
@@ -447,8 +448,7 @@ <h3 id="exports-interface">Exports</h3>
<h3 id="qunit-interface">QUnit</h3>
-
-<p> The qunit-inspired interface matches the &ldquo;flat&rdquo; look of QUnit where the test suite title is simply defined before the test-cases.</p>
+<p>The qunit-inspired interface matches the "flat" look of QUnit where the test suite title is simply defined before the test-cases.</p>
<pre><code>function ok(expr, msg) {
if (!expr) throw new Error(msg);
@@ -477,116 +477,102 @@ <h3 id="qunit-interface">QUnit</h3>
<h2 id="reporters">Reporters</h2>
-
-<p> Mocha reporters adjust to the terminal window,
+<p>Mocha reporters adjust to the terminal window,
and always disable ansi-escape colouring when
the stdio streams are not associated with a tty.</p>
<h3 id="dot-matrix-reporter">Dot Matrix</h3>
-
-<p> The &ldquo;dot&rdquo; matrix reporter is simply a series of dots
+<p>The "dot" matrix reporter is simply a series of dots
that represent test cases, failures highlight in red,
pending in blue, slow as yellow.</p>
-<p> <img src="images/reporter-dot.png" alt="dot matrix reporter" /></p>
+<p><img src="images/reporter-dot.png" alt="dot matrix reporter" title="" /></p>
<h3 id="spec-reporter">Spec</h3>
-
-<p> The &ldquo;spec&rdquo; reporter outputs a hierarchical view
+<p>The "spec" reporter outputs a hierarchical view
nested just as the test cases are.</p>
-<p> <img src="images/reporter-spec.png" alt="spec reporter" />
- <img src="images/reporter-spec-fail.png" alt="spec reporter with failure" /></p>
+<p><img src="images/reporter-spec.png" alt="spec reporter" title="" />
+ <img src="images/reporter-spec-fail.png" alt="spec reporter with failure" title="" /></p>
<h3 id="nyan-reporter">Nyan</h3>
+<p>The "nyan" reporter is exactly what you might expect:</p>
-<p> The &ldquo;nyan&rdquo; reporter is exactly what you might expect:</p>
-
-<p> <img src="http://f.cl.ly/items/3f1P1d2U1y1E0K1W1M0m/Screen%20Shot%202012-08-22%20at%203.59.08%20PM.png" alt="js nyan cat reporter" /></p>
+<p><img src="http://f.cl.ly/items/3f1P1d2U1y1E0K1W1M0m/Screen%20Shot%202012-08-22%20at%203.59.08%20PM.png" alt="js nyan cat reporter" title="" /></p>
<h3 id="tap-reporter">TAP</h3>
+<p>The TAP reporter emits lines for a <a href="http://en.wikipedia.org/wiki/Test_Anything_Protocol">Test-Anything-Protocol</a> consumer.</p>
-<p> The TAP reporter emits lines for a <a href="http://en.wikipedia.org/wiki/Test_Anything_Protocol">Test-Anything-Protocol</a> consumer.</p>
-
-<p> <img src="images/reporter-tap.png" alt="test anything protocol" /></p>
+<p><img src="images/reporter-tap.png" alt="test anything protocol" title="" /></p>
<h3 id="landing-strip-reporter">Landing Strip</h3>
-
-<p> The Landing Strip reporter is a gimmicky test reporter simulating
+<p>The Landing Strip reporter is a gimmicky test reporter simulating
a plane landing :) unicode ftw</p>
-<p> <img src="images/reporter-landing.png" alt="landing strip plane reporter" />
- <img src="images/reporter-landing-fail.png" alt="landing strip with failure" /></p>
+<p><img src="images/reporter-landing.png" alt="landing strip plane reporter" title="" />
+ <img src="images/reporter-landing-fail.png" alt="landing strip with failure" title="" /></p>
<h3 id="list-reporter">List</h3>
-
-<p> The &ldquo;List&rdquo; reporter outputs a simple specifications list as
- test cases pass or fail, outputting the failure details at
+<p>The "List" reporter outputs a simple specifications list as
+ test cases pass or fail, outputting the failure details at
the bottom of the output.</p>
-<p> <img src="images/reporter-list.png" alt="list reporter" /></p>
+<p><img src="images/reporter-list.png" alt="list reporter" title="" /></p>
<h3 id="progress-reporter">Progress</h3>
+<p>The progress reporter implements a simple progress-bar:</p>
-<p> The progress reporter implements a simple progress-bar:</p>
-
-<p> <img src="images/reporter-progress.png" alt="progress bar" /></p>
+<p><img src="images/reporter-progress.png" alt="progress bar" title="" /></p>
<h3 id="json-reporter">JSON</h3>
-
-<p> The JSON reporter outputs a single large JSON object when
+<p>The JSON reporter outputs a single large JSON object when
the tests have completed (failures or not).</p>
-<p> <img src="images/reporter-json.png" alt="json reporter" /></p>
+<p><img src="images/reporter-json.png" alt="json reporter" title="" /></p>
<h3 id="json-stream-reporter">JSON Stream</h3>
+<p>The JSON Stream reporter outputs newline-delimited JSON "events" as they occur, beginning with a "start" event, followed by test passes or failures, and then the final "end" event.</p>
-<p> The JSON Stream reporter outputs newline-delimited JSON &ldquo;events&rdquo; as they occur, beginning with a &ldquo;start&rdquo; event, followed by test passes or failures, and then the final &ldquo;end&rdquo; event.</p>
-
-<p> <img src="images/reporter-json-stream.png" alt="json stream reporter" /></p>
+<p><img src="images/reporter-json-stream.png" alt="json stream reporter" title="" /></p>
<h3 id="jsoncov-reporter">JSONCov</h3>
-
-<p> The JSONCov reporter is similar to the JSON reporter, however when run against a library instrumented by <a href="https://github.com/visionmedia/node-jscoverage">node-jscoverage</a> it will produce coverage output.</p>
+<p>The JSONCov reporter is similar to the JSON reporter, however when run against a library instrumented by <a href="https://github.com/visionmedia/node-jscoverage">node-jscoverage</a> it will produce coverage output.</p>
<h3 id="htmlcov-reporter">HTMLCov</h3>
+<p>The HTMLCov reporter extends the JSONCov reporter. The library being tested should first be instrumented by <a href="https://github.com/visionmedia/node-jscoverage">node-jscoverage</a>, this allows Mocha to capture the coverage information necessary to produce a single-page HTML report.</p>
-<p> The HTMLCov reporter extends the JSONCov reporter. The library being tested should first be instrumented by <a href="https://github.com/visionmedia/node-jscoverage">node-jscoverage</a>, this allows Mocha to capture the coverage information necessary to produce a single-page HTML report.</p>
-
-<p> Click to view the current <a href="coverage.html">Express test coverage</a> report. For an integration example view the mcoha test coverage support <a href="https://github.com/visionmedia/express/commit/b6ee5fafd0d6c79cf7df5560cb324ebee4fe3a7f">commit</a> for Express.</p>
+<p>Click to view the current <a href="coverage.html">Express test coverage</a> report. For an integration example view the mcoha test coverage support <a href="https://github.com/visionmedia/express/commit/b6ee5fafd0d6c79cf7df5560cb324ebee4fe3a7f">commit</a> for Express.</p>
-<p> <img src="http://f.cl.ly/items/3T3G1h1d3Z2i3M3Y1Y0Y/Screen%20Shot%202012-02-23%20at%208.37.13%20PM.png" alt="code coverage reporting" /></p>
+<p><img src="http://f.cl.ly/items/3T3G1h1d3Z2i3M3Y1Y0Y/Screen%20Shot%202012-02-23%20at%208.37.13%20PM.png" alt="code coverage reporting" title="" /></p>
<h3 id="min-reporter">Min</h3>
-
-<p> The &ldquo;min&rdquo; reporter displays the summary only, while still outputting errors
+<p>The "min" reporter displays the summary only, while still outputting errors
on failure. This reporter works great with <code>--watch</code> as it clears the terminal
in order to keep your test summary at the top.</p>
-<p> <img src="http://f.cl.ly/items/460B2r3p3M3k2D3J250m/Screen%20Shot%202012-03-24%20at%2010.46.01%20AM.png" alt="" /></p>
+<p><img src="http://f.cl.ly/items/460B2r3p3M3k2D3J250m/Screen%20Shot%202012-03-24%20at%2010.46.01%20AM.png" alt="" title="" /></p>
<h3 id="doc-reporter">Doc</h3>
-
-<p> The &ldquo;doc&rdquo; reporter outputs a hierarchical HTML body representation
+<p>The "doc" reporter outputs a hierarchical HTML body representation
of your tests, wrap it with a header, footer, some styling and you
have some fantastic documentation!</p>
-<p> <img src="images/reporter-doc.png" alt="doc reporter" /></p>
+<p><img src="images/reporter-doc.png" alt="doc reporter" title="" /></p>
-<p> For example suppose you have the following JavaScript:</p>
+<p>For example suppose you have the following JavaScript:</p>
<pre><code>describe('Array', function(){
describe('#indexOf()', function(){
@@ -598,7 +584,7 @@ <h3 id="doc-reporter">Doc</h3>
})
</code></pre>
-<p> The command <code>mocha --reporter doc array</code> would yield:</p>
+<p>The command <code>mocha --reporter doc array</code> would yield:</p>
<pre><code>&lt;section class="suite"&gt;
&lt;h1&gt;Array&lt;/h1&gt;
@@ -615,7 +601,7 @@ <h3 id="doc-reporter">Doc</h3>
&lt;/section&gt;
</code></pre>
-<p> The SuperAgent request library <a href="http://visionmedia.github.com/superagent/docs/test.html">test documentation</a> was generated with Mocha&rsquo;s doc reporter using this simple make target:</p>
+<p>The SuperAgent request library <a href="http://visionmedia.github.com/superagent/docs/test.html">test documentation</a> was generated with Mocha's doc reporter using this simple make target:</p>
<pre><code>test-docs:
make test REPORTER=doc \
@@ -623,38 +609,33 @@ <h3 id="doc-reporter">Doc</h3>
&gt; docs/test.html
</code></pre>
-<p> View the entire <a href="https://github.com/visionmedia/superagent/blob/master/Makefile">Makefile</a> for reference.</p>
+<p>View the entire <a href="https://github.com/visionmedia/superagent/blob/master/Makefile">Makefile</a> for reference.</p>
<h3 id="xunit-reporter">XUnit</h3>
-
-<p> Documentation needed.</p>
+<p>Documentation needed.</p>
<h3 id="teamcity-reporter">TeamCity</h3>
-
-<p> Documentation needed.</p>
+<p>Documentation needed.</p>
<h3 id="markdown-reporter">Markdown</h3>
-
-<p> The &ldquo;markdown&rdquo; reporter generates a markdown TOC and body for your
+<p>The "markdown" reporter generates a markdown TOC and body for your
test suite. This is great if you want to use the tests as documentation
within a Github wiki page, or a markdown file in the repository that
Github can render. For example here is the Connect <a href="https://github.com/senchalabs/connect/blob/90a725343c2945aaee637e799b1cd11e065b2bff/tests.md">test output</a>.</p>
<h3 id="html-reporter">HTML</h3>
-
-<p> The <strong>HTML</strong> reporter is currently the only browser reporter
+<p>The <strong>HTML</strong> reporter is currently the only browser reporter
supported by Mocha, and it looks like this:</p>
-<p> <img src="images/reporter-html.png" alt="HTML test reporter" /></p>
+<p><img src="images/reporter-html.png" alt="HTML test reporter" title="" /></p>
<h2 id="browser-support">Browser support</h2>
-
-<p> Mocha runs in the browser. Every release of Mocha will have new builds of <em>./mocha.js</em> and <em>./mocha.css</em> for use in the browser. To setup Mocha for browser use all you have to do is include the script, stylesheet, tell Mocha which interface you wish to use, and then run the tests. A typical setup might look something like the following, where we call <code>mocha.setup('bdd')</code> to use the <strong>BDD</strong> interface before loading the test scripts, running them <code>onload</code> with <code>mocha.run()</code>.</p>
+<p>Mocha runs in the browser. Every release of Mocha will have new builds of <em>./mocha.js</em> and <em>./mocha.css</em> for use in the browser. To setup Mocha for browser use all you have to do is include the script, stylesheet, tell Mocha which interface you wish to use, and then run the tests. A typical setup might look something like the following, where we call <code>mocha.setup('bdd')</code> to use the <strong>BDD</strong> interface before loading the test scripts, running them <code>onload</code> with <code>mocha.run()</code>.</p>
<pre><code>&lt;html&gt;
&lt;head&gt;
@@ -680,20 +661,18 @@ <h2 id="browser-support">Browser support</h2>
<h3 id="grep-query">grep</h3>
-
-<p> The client-side may utilize <code>--grep</code> as well, however you use the query-string, for example <code>?grep=api</code>.</p>
+<p>The client-side may utilize <code>--grep</code> as well, however you use the query-string, for example <code>?grep=api</code>.</p>
<h2 id="mocha.opts">mocha.opts</h2>
-
-<p> Mocha will attempt to load <code>./test/mocha.opts</code>, these are concatenated with <code>process.argv</code>, though command-line args will take precedence. For example suppose you have the following <em>mocha.opts</em> file:</p>
+<p>Mocha will attempt to load <code>./test/mocha.opts</code>, these are concatenated with <code>process.argv</code>, though command-line args will take precedence. For example suppose you have the following <em>mocha.opts</em> file:</p>
<pre><code>--require should
--reporter dot
--ui bdd
</code></pre>
-<p> This will default the reporter to <code>dot</code>, require the <code>should</code> library,
+<p>This will default the reporter to <code>dot</code>, require the <code>should</code> library,
and use <code>bdd</code> as the interface. With this you may then invoke <code>mocha(1)</code>
with additional arguments, here enabling growl support and changing
the reporter to <code>spec</code>:</p>
@@ -703,8 +682,7 @@ <h2 id="mocha.opts">mocha.opts</h2>
<h2 id="suite-specific-timeouts">Suite specific timeouts</h2>
-
-<p> Suite-level timeouts may be applied to entire test &ldquo;suites&rdquo;, or disabled
+<p>Suite-level timeouts may be applied to entire test "suites", or disabled
via <code>this.timeout(0)</code>. This will be inherited by all nested suites and test-cases
that do not override the value.</p>
@@ -723,8 +701,7 @@ <h2 id="suite-specific-timeouts">Suite specific timeouts</h2>
<h2 id="test-specific-timeouts">Test specific timeouts</h2>
-
-<p> Test-specific timeouts may also be applied, or the use of <code>this.timeout(0)</code>
+<p>Test-specific timeouts may also be applied, or the use of <code>this.timeout(0)</code>
to disable timeouts all together:</p>
<pre><code>it('should take less than 500ms', function(done){
@@ -735,19 +712,14 @@ <h2 id="test-specific-timeouts">Test specific timeouts</h2>
<h2 id="best-practices">Best practices</h2>
-
-
-
<h3 id="test-directory">test/*</h3>
-
-<p> By default <code>mocha(1)</code> will use the pattern <code>./test/*.js</code>, so
- it&rsquo;s usually a good place to put your tests.</p>
+<p>By default <code>mocha(1)</code> will use the pattern <code>./test/*.js</code>, so
+ it's usually a good place to put your tests.</p>
<h3 id="makefiles">Makefiles</h3>
-
-<p> Be kind and don&rsquo;t make developers hunt around in your docs to figure
+<p>Be kind and don't make developers hunt around in your docs to figure
out how to run the tests, add a <code>make test</code> target to your <em>Makefile</em>:</p>
<pre><code> test:
@@ -759,13 +731,11 @@ <h3 id="makefiles">Makefiles</h3>
<h2 id="editors">Editors</h2>
-
-<p> The following editor-related packages are available:</p>
+<p>The following editor-related packages are available:</p>
<h3 id="textmate-bundle">TextMate bundle</h3>
-
-<p> The Mocha TextMate bundle includes snippets to
+<p>The Mocha TextMate bundle includes snippets to
make writing tests quicker and more enjoyable.
To install the bundle run:</p>
@@ -774,41 +744,37 @@ <h3 id="textmate-bundle">TextMate bundle</h3>
<h2 id="example-test-suites">Example test suites</h2>
-
-<p> The following test suites are from real projects putting Mocha to use,
+<p>The following test suites are from real projects putting Mocha to use,
so they serve as good examples:</p>
<ul>
-<li> <a href="https://github.com/visionmedia/express/tree/master/test">Express</a></li>
-<li> <a href="https://github.com/senchalabs/connect/tree/master/test">Connect</a></li>
-<li> <a href="https://github.com/visionmedia/superagent/tree/master/test/node">SuperAgent</a></li>
-<li> <a href="https://github.com/LearnBoost/websocket.io/tree/master/test">WebSocket.io</a></li>
-<li> <a href="https://github.com/visionmedia/mocha/tree/master/test">Mocha</a></li>
+<li><a href="https://github.com/visionmedia/express/tree/master/test">Express</a></li>
+<li><a href="https://github.com/senchalabs/connect/tree/master/test">Connect</a></li>
+<li><a href="https://github.com/visionmedia/superagent/tree/master/test/node">SuperAgent</a></li>
+<li><a href="https://github.com/LearnBoost/websocket.io/tree/master/test">WebSocket.io</a></li>
+<li><a href="https://github.com/visionmedia/mocha/tree/master/test">Mocha</a></li>
</ul>
-
<h2 id="running-mochas-tests">Running mocha's tests</h2>
-
-<p> Run the tests:</p>
+<p>Run the tests:</p>
<pre><code> $ make test
</code></pre>
-<p> Run all tests, including interfaces:</p>
+<p>Run all tests, including interfaces:</p>
<pre><code> $ make test-all
</code></pre>
-<p> Alter the reporter:</p>
+<p>Alter the reporter:</p>
<pre><code> $ make test REPORTER=list
</code></pre>
<h2 id="more-information">More information</h2>
-
-<p> For additional information such as using spies, mocking, and shared behaviours be sure to check out the <a href="https://github.com/visionmedia/mocha/wiki">Mocha Wiki</a> on GitHub. For discussions join the <a href="http://groups.google.com/group/mochajs">Google Group</a>. For a running example of mocha view <a href="example/tests.html">example/tests.html</a>.</p>
+<p>For additional information such as using spies, mocking, and shared behaviours be sure to check out the <a href="https://github.com/visionmedia/mocha/wiki">Mocha Wiki</a> on GitHub. For discussions join the <a href="http://groups.google.com/group/mochajs">Google Group</a>. For a running example of mocha view <a href="example/tests.html">example/tests.html</a>.</p>
</section>
<footer>
<span>© 2011 TJ Holowaychuk. All rights reserved.</span>
4 index.md
View
@@ -182,7 +182,7 @@ Testing asynchronous code with Mocha could not be simpler! Simply invoke the cal
Note that currently only one `.only()` call is respected, this
effectively turns into a `--grep`.
-<h2 id="exclusive-tests">Inclusive tests</h2>
+<h2 id="inclusive-tests">Inclusive tests</h2>
This feature is similar to `.only()`, however by appending `.skip()`
you may tell Mocha to simply ignore these suite(s) and test-case(s). This
@@ -217,7 +217,7 @@ Testing asynchronous code with Mocha could not be simpler! Simply invoke the cal
![test duration](images/reporter-spec-duration.png)
-<h2 id="string diffs">String diffs</h2>
+<h2 id="string-diffs">String diffs</h2>
Mocha supports the `err.expected`, and `err.actual` properties
when available to present expectations to the developer. Currently
37 nav.js
View
@@ -0,0 +1,37 @@
+$(function () {
+ setTimeout(function () {
+ var prev;
+ var headings = $('h2').map(function (i, el) {
+ return {
+ top: $(el).offset().top,
+ id: el.id
+ };
+ }).get();
+
+ headings.unshift({top: 0, id: 'content'});
+
+ function closest() {
+ var mid = $(window).scrollTop() + ($(window).height() / 2);
+ var i = headings.length;
+ while (i--) {
+ if (mid >= headings[i].top) {
+ return headings[i];
+ }
+ }
+ }
+
+ $(document).scroll(function () {
+ var heading = closest();
+ if (heading) {
+ if (prev) {
+ prev.removeClass('active');
+ }
+
+ prev = $('a[href="#' + heading.id + '"]').addClass('active');
+ }
+ });
+
+ $('a[href="#content"]').addClass('active');
+ }, 1000);
+});
+
33 style.css
View
@@ -6,8 +6,36 @@ body {
border-top: 2px solid #ddd;
}
+#nav-table {
+ display: table;
+ position: fixed;
+ top: 0;
+ right: 1.5em;
+ height: 100%;
+ text-align: right;
+ font-size: 80%;
+}
+
+#nav-cell {
+ display: table-cell;
+ vertical-align: middle;
+}
+
+#nav a {
+ transition: 0.5s;
+ transition-property: color;
+ -moz-transition: 0.5s;
+ -moz-transition-property: color;
+ -webkit-transition: 0.5s;
+ -webkit-transition-property: color;
+}
+
+#nav a.active {
+ color: #2C2C2C;
+}
+
#content {
- padding: 140px 110px 60px 110px;
+ padding: 140px 210px 60px 110px;
}
h1 {
@@ -178,4 +206,5 @@ code .comment { color: #ddd }
code .init { color: #2F6FAD }
code .string { color: #5890AD }
code .keyword { color: #8A6343 }
-code .number { color: #2F6FAD }
Jonathan Rajavuori
jrajav added a note

Not entirely sure what happened here; it stayed changed even if I removed line 210

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+code .number { color: #2F6FAD }
+
Something went wrong with that request. Please try again.