Skip to content
Browse files

updated docs to reflect issue #22

  • Loading branch information...
1 parent 8b0f52f commit 3f6a0d6030bf47361e96a6556de17cbb9da4111d @boxed boxed committed Apr 9, 2013
Showing with 37 additions and 37 deletions.
  1. +1 −1 .resources/try.js
  2. +3 −3 examples/examples-2.html
  3. +1 −1 examples/long-running-tests.html
  4. +5 −5 index.html
  5. +10 −10 reference.html
  6. +1 −1 try.html
  7. +16 −16 tutorial.html
View
2 .resources/try.js
@@ -14,7 +14,7 @@ window.addEventListener('load', function () {
$('#editor').focus();
$('#doctest-output').hide();
});
- $('#test-location').addClass('commenttest').text($('#editor').val());
+ $('#test-location').addClass('test').text($('#editor').val());
console.log($('#test-location').text());
var runner = new doctest.Runner();
var parser = new doctest.HTMLParser(runner, $('#display')[0], 'pre#test-location');
View
6 examples/examples-2.html
@@ -28,7 +28,7 @@
Error: whatever
</pre>
-<pre class="commenttest">
+<pre class="test">
print(1+2)
/* =>
3
@@ -44,9 +44,9 @@
/* => hey you! */
</pre>
-<pre class="commenttest" href="./examples-2.js"></pre>
+<pre class="test" href="./examples-2.js"></pre>
-<pre class="commenttest">
+<pre class="test">
function stop() {
throw Abort();
}
View
2 examples/long-running-tests.html
@@ -16,7 +16,7 @@
<li>sections in the tests that will make them run in sequence</li>
</ul>
- <pre class="commenttest" href="long-running-tests.js"></pre>
+ <pre class="test" href="long-running-tests.js"></pre>
</body>
</html>
View
10 index.html
@@ -51,7 +51,7 @@ <h1 class="title"><a href="/">Doctest.js</a>: <!-- TITLE -->A Humane Javascript
<p>An example (note: these are live examples &mdash; you can also try your own via the <a href="try.html">live demo</a>):
-<pre class="commenttest">
+<pre class="test">
function capitalize(words) {
return words.replace(/\b[a-z]/g, function (m) {
return m[0].toUpperCase();
@@ -68,7 +68,7 @@ <h1 class="title"><a href="/">Doctest.js</a>: <!-- TITLE -->A Humane Javascript
<p>This is similar to something like <code>assertEqual(capitalize('some words'), 'Some Words')</code> &mdash; there's a kind of "equal" check every time you print something. Instead of doing stuff then testing every detail of what happened or what was returned, testing almost happens for you &mdash; you print out what you are interested in, and you can even punt: you can start by simply exercising everything that matters, and then inspecting that what happens is what you expect, and copying those results into the test. For instance:
-<pre class="commenttest">
+<pre class="test">
function getProperties(obj) {
var result = [];
for (i in obj) {
@@ -89,7 +89,7 @@ <h1 class="title"><a href="/">Doctest.js</a>: <!-- TITLE -->A Humane Javascript
<p>Look: the first example worked great, <code>["a", "b"]</code>. The second example though wasn't right at all. <code>"0"</code>? Once we have a better idea we can adjust those tests:
-<pre class="commenttest">
+<pre class="test">
function getProperties(obj) {
var result = [];
for (i in obj) {
@@ -120,7 +120,7 @@ <h1 class="title"><a href="/">Doctest.js</a>: <!-- TITLE -->A Humane Javascript
<p>The core feature here is <code>wait()</code> &mdash; this lets you register a callback that will tell the test runner when this block of code is fully finished. An example:
-<pre class="commenttest">
+<pre class="test">
var now = Date.now();
var done = false;
@@ -143,7 +143,7 @@ <h1 class="title"><a href="/">Doctest.js</a>: <!-- TITLE -->A Humane Javascript
<p>In addition there's a simply mocking framework in doctest with Spy. This lets you create a function that records over time it is called &mdash; and each time it is called it prints out how it is called. It also makes it easy to wait on the Spy to be called:
-<pre class="commenttest">
+<pre class="test">
var button = $('&lt;button>&lt;/button>');
$('body').append(button);
button.click(Spy('button.click'));
View
20 reference.html
@@ -59,7 +59,7 @@ <h3 id="html">HTML page</h3>
&lt;/head>
&lt;body class="autodoctest">
- &lt;pre class="commenttest / doctest">
+ &lt;pre class="test / doctest">
test
&lt;/pre>
&lt;/body>
@@ -72,20 +72,20 @@ <h3 id="html">HTML page</h3>
<h4 id="external">External code</h4>
-<p>Often you won't want to write your test code inside the test itself. Instead you'll want to put it in its own <code>.js</code> file. Especially with <a href="#format-commenttest"><code>commenttest</code></a> the code is valid Javascript, and you will probably want syntax highlighting and all that.</p>
+<p>Often you won't want to write your test code inside the test itself. Instead you'll want to put it in its own <code>.js</code> file. Especially with <a href="#format-test"><code>test</code></a> the code is valid Javascript, and you will probably want syntax highlighting and all that.</p>
<p>To do this, use an <code>href</code> attribtue on your <code>&lt;pre></code> element, like:
<pre>
-&lt;pre class="commenttest" href="./tests.js">&lt;/pre>
+&lt;pre class="test" href="./tests.js">&lt;/pre>
</pre>
The contents of the element don't matter. The test will be loaded from that location (which could be a full URL but you'll probably have <a href="http://www.w3.org/TR/cors/">cross-origin</a> errors if you tried that &mdash; this doesn't use <code>&lt;script></code> tags to load those scripts, it uses XMLHttpRequest). Note that the class is still required!</p>
<p>You can also load it from a variable location, using query string parameters to find the file. The most common pattern would be like this:
<pre>
-&lt;pre class="commenttest" data-href-pattern="./{test-name|default.js}">&lt;/pre>
+&lt;pre class="test" data-href-pattern="./{test-name|default.js}">&lt;/pre>
</pre>
Any URL parameters (like <code>{test-name}</code>) get filled in by the query string (<code>?test-name=example.js</code>). By default these values can only contain letters, numbers, <code>_</code>, <code>-</code> and <code>.</code> &mdash; this is to protect against loading scripts from unexpected locations via an implicitly unsafe parameters in the query string.</p>
@@ -98,7 +98,7 @@ <h4 id="external">External code</h4>
<h3 id="format">Format of test</h3>
-<p>There are two formats that a doctest can take. You've probably seen the <code>commenttest</code> format, there is also the more traditional <code>doctest</code> format.</p>
+<p>There are two formats that a doctest can take. You've probably seen the <code>test</code> format, there is also the more traditional <code>doctest</code> format.</p>
<h4 id="format-doctest"><code>doctest</code> format</h4>
@@ -118,12 +118,12 @@ <h4 id="format-doctest"><code>doctest</code> format</h4>
<p>Note you can still have multiple statements using a continuation line. The only difference between two lines with <code>$</code> and one with a <code>$</code> followed by <code>></code> is that in the latter case the two lines are executed <em>together</em> and the output from both is combined into what is expected.</p>
-<h4 id="format-commenttest"><code>commenttest</code> format</h4>
+<h4 id="format-test"><code>test</code> format</h4>
<p>In this format the expected output is in a comment, like:
<pre>
-&lt;pre class="commenttest">
+&lt;pre class="test">
statement_1();
statement_2();
// Some other comment
@@ -142,7 +142,7 @@ <h4 id="format-commenttest"><code>commenttest</code> format</h4>
<h4 id="sections">Test sections</h4>
-<p><em>If</em> you are using <a href="#external">external test code</a> (and <code>commenttest</code>) you can include <em>section headers</em> like:
+<p><em>If</em> you are using <a href="#external">external test code</a> (and <code>test</code>) you can include <em>section headers</em> like:
<pre>
// == SECTION A section header
@@ -157,7 +157,7 @@ <h4 id="compact">Compact <code>&lt;pre></code>'s</h4>
<p>Sometimes you'll have boilerplate code that sets up the test environment, and you'll be uninterested in that code (unless it fails). This might define helper functions, or run some really routine sanity tests. You can use this to make those test blocks small:
<pre>
-&lt;pre class="commenttest expand-on-failure">
+&lt;pre class="test expand-on-failure">
...
&lt;/pre>
</pre>
@@ -303,7 +303,7 @@ <h3 id="spy">Spy, mocking, and watching functions</h3>
<p>The basic use is like this:
-<pre class="commenttest">
+<pre class="test">
func = Spy('func');
func(1, 2, 3);
View
2 try.html
@@ -29,7 +29,7 @@
vertical-align: top;
padding: 1em;
}
-table#layout pre.commenttest {
+table#layout pre.test {
margin-top: 0;
}
#doctest-output {
View
32 tutorial.html
@@ -85,7 +85,7 @@ <h3 id="page-setup">Page Setup</h3>
The structure looks like something you've probably seen before. We add one new function, <code>print()</code>, that works a lot like <code>console.log()</code>. Then we have a comment that shows what we expect to be output. A really simple example:
- <pre class="commenttest">
+ <pre class="test">
function factorial(n) {
if (typeof n != "number") {
throw "You must give a number";
@@ -141,14 +141,14 @@ <h3 id="errors">Testing for error conditions</h3>
You can also test errors:
-<pre class="commenttest">
+<pre class="test">
print(factorial(null));
// => Error: You must give a number
</pre>
When an exception is thrown it will print out <code>Error: (error text)</code> which you can match against. This way you can test for error conditions just like you test how "correct" invocations work. Note that the <code>print()</code> isn't really necessary here, you could do this just as well:
-<pre class="commenttest">
+<pre class="test">
factorial(null);
// => Error: You must give a number
</pre>
@@ -170,7 +170,7 @@ <h3 id="print"><code>print()</code> and output matching</h3>
<code>print()</code> pretty-prints things. This is important, because you have to "expect" the same output that <code>print()</code> produces. You can give multiple arguments, like with <code>console.log</code>.
-<pre class="commenttest">
+<pre class="test">
print({someProperty: 123, something: {a: 1, b: 2}, "foo": 123.1032, "another-property": [1,2,3,4]});
/* =>
{
@@ -184,7 +184,7 @@ <h3 id="print"><code>print()</code> and output matching</h3>
You might notice that the attributes are alphabetized and are quoted only when necessary. If it's a small object it stays on one line:
-<pre class="commenttest">
+<pre class="test">
print({someProperty: 123});
// => {someProperty: 123}
</pre>
@@ -195,7 +195,7 @@ <h3 id="print"><code>print()</code> and output matching</h3>
But sometimes the output is unpredictable; or rather you can predict it will change. When that's the case you can basically put a wildcard in the expected output: <code>...</code> &mdash; that will match anything, including multiple lines. In addition you can use <code>?</code> to match one word-like-thing (a number, symbol, etc; not <code>&quot;</code> or whitespace or other symbols). You can use it like this:
-<pre class="commenttest">
+<pre class="test">
print({
date: new Date(),
timestamp: Date.now()
@@ -210,7 +210,7 @@ <h3 id="print"><code>print()</code> and output matching</h3>
You might notice that it <em>passes</em>, but you still get to see the actual output. This is a great way to show information that you can review, without actually testing. For instance, you might be testing something that connects to a server, in that case you might want to do this:
-<pre class="commenttest">
+<pre class="test">
var server = {url: "http://localhost:8000"} // or some calculated value
print(server.url);
// => ...
@@ -224,7 +224,7 @@ <h3 id="print"><code>print()</code> and output matching</h3>
If you have a variable that is dynamic but you still care about the value, you should do something like this:
-<pre class="commenttest">
+<pre class="test">
var date = Date.now();
print(date == date, date);
// => true ...
@@ -267,7 +267,7 @@ <h3 id="async">Testing async code</h3>
You can use this like: <code>wait(function () {return true when done})</code> or <code>wait(millisecondsToWait)</code>. We'll use the first form, which is almost always better, since it allows the test to continue more quickly. Tests also always time out eventually (by default the timeout is 5000 milliseconds, i.e., 5 seconds &mdash; by convention everything in Javascript is in milliseconds).
-<pre class="commenttest">
+<pre class="test">
var endpoint = location.href;
print(endpoint);
// => ...
@@ -324,7 +324,7 @@ <h3 id="spy">The Spy</h3>
If you use these tools you might end up writing code like this quite a lot:
-<pre class="commenttest">
+<pre class="test">
// We've embedded a button just below this element
var button = $('#example-button');
// Just to highlight what we're working with:
@@ -352,7 +352,7 @@ <h3 id="spy">The Spy</h3>
An example:
-<pre class="commenttest">
+<pre class="test">
var button = $('#example-button2');
button.css({border: '1px dotted #00f'});
button.click(Spy('button.click'));
@@ -387,7 +387,7 @@ <h3 id="spy">The Spy</h3>
Next of course is all the arguments. There's a lot of arguments there. They are... interesting. You'll notice some references to <code>...recursive...</code> which is what you get when you have self-referencing data structures. But maybe you want to test just a little of that structure without testing all of it. You might do something like this:
-<pre class="commenttest">
+<pre class="test">
// Spy('button.click') fetches the same Spy we were using before, which still has all its call information
// .formatCall() shows the way the Spy was last called.
print(Spy('button.click').formatCall());
@@ -480,7 +480,7 @@ <h3 id="console-log">console.log</h3>
When you use <code>console.log</code> (or any of its friends, like <code>console.warn</code>) those messages will be captured (in addition to going to the log as normal), and the output will be shown in the specific test where they happened. A quick example:
-<pre class="commenttest">
+<pre class="test">
function enumProps(object) {
console.log('obj', object);
var result = {}
@@ -556,7 +556,7 @@ <h2 id="html">Setting Up Your HTML</h2>
A test:
-&lt;pre class="commenttest">
+&lt;pre class="test">
test goes here
&lt;/pre>
@@ -573,10 +573,10 @@ <h2 id="html">Setting Up Your HTML</h2>
<p>
-Each test then is in a <code>&lt;pre class="commenttest"></code>. You might not want to actully write your tests <em>inside</em> the HTML, and instead put them in a separate Javascript file. To do that use:
+Each test then is in a <code>&lt;pre class="test"></code>. You might not want to actully write your tests <em>inside</em> the HTML, and instead put them in a separate Javascript file. To do that use:
<pre>
-&lt;pre class="commenttest" href="./my_tests.js">&lt;/pre>
+&lt;pre class="test" href="./my_tests.js">&lt;/pre>
</pre>
This will load the test code from <code>./my_tests.js</code> and inline it into the element. This is how I personally write most of my tests, though when moving between a narrative and tests (as I am doing in this tutorial) it is nice to keep the tests together with the descriptions.

0 comments on commit 3f6a0d6

Please sign in to comment.
Something went wrong with that request. Please try again.