Team Sophie!

by Chris Watson

HTML

<!-- Ignore the stuff in here -->
<style type="text/css">body{background:#000}#console{margin:.5em;font-family:monospace;font-size:150%}.line{margin:.5em 0}.err{color:red}.log{color:#09f}.warn{color:#ee0}</style>
<pre id="console"></pre>
<script>!function(a){function d(a,b,c,d){return function(){a.apply(b,arguments),c.apply(d,arguments)}}function e(){var a=Array.prototype.map.call(arguments,String),b=a.shift(),d=a.join(" ");$("<div/>",{text:d,"class":b+" line"}).appendTo(c)}a.onerror=function(a){console.error(a)};var b=a.console,c=$("#console");console.clear(),b.log=d(b.log,b,e.bind(null,"log")),b.warn=d(b.warn,b,e.bind(null,"warn")),b.error=d(b.error,b,e.bind(null,"err")),a.test=function(a,b){try{b(),console.log("\u2713 "+a)}catch(c){console.error("\u2717 "+a),console.error("  "+c.message)}console.log(" ")},a.assert=function(a){if(!a)throw new Error("expected "+a+" to be truthy")}}(this);</script>

CSS

/*
    You might want to read about assertions briefly, but don't worry too much.

    It might be good to read about the red-green-refactor cycle (it's easy).
    Basically:
        red = write a failing test for some desired functionality
        green = make the test pass and ensure no other tests have broken
        refactor = tidy up the code if you fancy, otherwise loop back to red if your tests are still passing
    You'll see this pattern in my example.
    
    The assert function I've created will cause the test to fail if the thing
    you pass to it isn't truthy (i.e. false, null, undefined, NaN or 0).

    If anything inside the test errors before we reach the assertion, the test will
    fail and the error which occurred will be shown in the output, under the test.

*/

JavaScript

test('test name goes here - this one passes', function () {
    assert(true);
});

test('test name goes here - this one fails with an error message below', function () {
    assert(undefined);
});

// A working example of TDD:

// Each new bit of code with a test is an improvement on the last.
// They shouldn't all exist at once, so just uncomment a set of /* */ at a time

// Write a test before anything else
/*
test('should be able to create a person', function () {
    var person = new Person();
    assert(person !== undefined);
});
*/

// The error says "Person is not defined", so we make the test pass by creating the Person constructor
/*
function Person() {}

test('should be able to create a person', function () {
    var person = new Person();
    assert(person !== undefined);
});
*/

// Add a test for some new functionality
/*
function Person() {}

test('should be able to create a person with a name', function () {
    var name = 'Sophiiieeee';
    var person = new Person(name);
    assert(person.name === name);
});
*/

// Implement the functionality
/*
function Person(name) { this.name = name; }

test('should be able to create a person with a name', function () {
    var name = 'Sophiiieeee';
    var person = new Person(name);
    assert(person.name === name);
});
*/