ianribas/test.html

## test.html
<!DOCTYPE html>
<html>
<head>
    <title>Running asynchronous tests on the browser ...</title>
</head>
<body>
    <ul id="alltests">
    </ul>
    <ul id="teststats">
        <li>Passed <span id="passed"></span></li>
        <li>Failed <span id="failed"></span></li>
        <li>Running <span id="running"></span></li>
    </ul>
    <p id="finished" style="display: none;">FINISHED!</p>
    <button id="runtests">Run tests</button>

    <script type="text/javascript">
        function TestRunner(ptests, testsViewer) {
            testsViewer = testsViewer || {};
            // No parameter validation for simplicity
            var tests = [];
            var self = this;

            // Constants
            // Test status
            self.PASSED = 'Passed'
            self.FAILED = 'Failed'
            self.RUNNING = 'Running'
            self.NOT_STARTED = 'Not Started Yet';
            // Stats fields other that status
            self.TOTAL = 'Total';
            self.FINISHED = 'Finished';


            // How long do we wait for the whole test suite to run.
            // Would have to be adjusted to actual usage.
            self.testsTimeout = 30 * 1000;

            self.addTest = function(test) {
                var newTest = {
                    'id': '_test' + tests.length, // simple id generation
                    'description': ptests[i].description,
                    'run': ptests[i].run,
                    'status': self.NOT_STARTED
                };
                tests.push(newTest);
                testsViewer.testAdded && testsViewer.testAdded(self, newTest);
            }

            function registerTestEnd(test, result) {
                if (result === true) {
                    test.status = self.PASSED;
                } else {
                    test.status = self.FAILED;
                }
                testsViewer.testEnded && testsViewer.testEnded(self, test);
            }

            function runTest(test) {
                test.status = self.RUNNING;
                testsViewer.beforeRun && testsViewer.beforeRun(self, test);
                // Create a new closure for each running test.
                try {
                    test.run(function(result) {
                        registerTestEnd(test, result);
                    });
                } catch(e) {
                    console.log('Error on test ', test.description, e);
                    registerTestEnd(test, false);
                }
            }

            function failLongRunningTests() {
                tests.forEach(function(test) {
                    if (test.status === self.RUNNING) {
                        console.log('Timeout on test ', test.description);
                        registerTestEnd(test, false);
                    }
                });
            }

            function calcStats() {
                var stats = {};
                stats[self.TOTAL] = tests.length;
                tests.forEach(function(test) {
                    stats[test.status] = (stats[test.status] || 0) + 1;
                });

                var totalFinished = (stats[self.PASSED] || 0) + (stats[self.FAILED] || 0);

                if (tests.length > 0 && tests.length === totalFinished) {
                    stats[self.FINISHED] = true;
                }
                return stats;
            }

            // This could be optimized by a cache, or calculating just the difference, if this ever gets important.
            self.getStats = calcStats;

            self.runAll = function() {
                console.log('Running all tests');
                setTimeout(failLongRunningTests, self.testsTimeout);
                tests.forEach(runTest);
                console.log('All tests launched.')
            }

            for (var i = 0; i < ptests.length; i++) {
                self.addTest(ptests[i]);
            }
        }

        function HtmlTestViewer(runtestsCallback) {
            var testList = document.getElementById("alltests");
            var statsPassed = document.getElementById("passed");
            var statsFailed = document.getElementById("failed");
            var statsRunning = document.getElementById("running");
            var allFinished = document.getElementById("finished");
            var runtestsButton = document.getElementById("runtests");
            runtestsButton.onclick = function() {
                runtestsButton.disabled = true;
                runtestsCallback();
            };

            function showStats(runner) {
                var stats = runner.getStats();
                statsPassed.innerHTML = stats[runner.PASSED] || '-';
                statsFailed.innerHTML = stats[runner.FAILED] || '-';
                statsRunning.innerHTML = stats[runner.RUNNING] || '-';
                if (stats[runner.FINISHED]) {
                    allFinished.style.display = 'block';
                }
            }

            function showStatus(runner, test) {
                var elmt = document.getElementById(test.id+"_status");
                elmt.innerText = test.status;
                if (test.status === runner.FAILED) {
                    elmt.style.background = "red";
                } else if (test.status === runner.PASSED) {
                    elmt.style.background = "green";
                } else {
                    elmt.style.background = "";
                }
                showStats(runner);
            }

            this.testAdded = function(runner, test) {
                var ttt = document.createElement("LI");
                ttt.innerHTML = test.description + " <span id='" + test.id + "_status'>" + test.status +  "</span>";
                testList.appendChild(ttt);
                showStats(runner);
            };

            this.testEnded = showStatus;

            this.beforeRun = showStatus;
        }

        function runAllTests() {
            testRunner.runAll();
        }

        var htmlTestViewer = new HtmlTestViewer(runAllTests);

        function generateDummyTest() {
          var delay = 7000 + Math.random() * 7000;
          var testPassed = Math.random() > 0.5;

          return function(callback) {
            setTimeout(function() {
              callback(testPassed);
            }, delay);
          };
        }

        var tests = [
          { description: "commas are rotated properly", run: generateDummyTest() },
          { description: "exclamation points stand up straight", run: generateDummyTest() },
          { description: "run-on sentences don't run forever", run: generateDummyTest() },
          { description: "question marks curl down, not up", run: generateDummyTest() },
          { description: "semicolons are adequately waterproof", run: generateDummyTest() },
          { description: "capital letters can do yoga", run: generateDummyTest() }
        ];

        var testRunner = new TestRunner(tests, htmlTestViewer);

    </script>
</body>
</html>

## test_notes.txt
Show, in the process, the state of the notes
Very simple first, make complicated later!

Engine:

done minimal test runner first, with console.log, for quick feedback cycle (code, refresh, )

Have:
done    one passing,
done    one failing,
done    one exception,
done    one never calls done.
done make tests asynchronous
done try catch to get errors when running test, before async

done test timeout, for errors that never call done
done, no return true (not asked for), so only done - test pass only if return === true or done called with === true(?)
done keep (or calculate) stats on runner.
done show stats after each action (add test, run test finish test)
done show finished if all tests ended.

done test engine with supplied tests

(2h work up to here)

UI
done separate UI, extracting all(most) console.logs to be on UI. -> inject viewer on runner.
done actual call backs: add one, run one, finish one, and a method to retrieve stats. call backs for add one, run one, return one, finish all.
experiment UI, get simple one... (divs?)
done UI made to run tests once, so no reset for now.
done show test text, button, state

done jquery? or plain JS locators!
done button disabled if tests running

(1h:15 for the UI)

send in gist, live on firebase ...

future steps:
    call runTest on timeout so one long test doesn't hold the others from starting?
    (not asked for, even if useful ...) show error trace somewhere, if exception? Specially if "done" called with exception.
    setup on cloud9
    detect if test has parameter, meaning it is async
    pass test if it returns true(?) -- no, the real way this is done is with assertions, not return values ...
	<!DOCTYPE html>
	<html>
	<head>
	<title>Running asynchronous tests on the browser ...</title>
	</head>
	<body>
	<ul id="alltests">
	</ul>
	<ul id="teststats">
	<li>Passed <span id="passed"></span></li>
	<li>Failed <span id="failed"></span></li>
	<li>Running <span id="running"></span></li>
	</ul>
	<p id="finished" style="display: none;">FINISHED!</p>
	<button id="runtests">Run tests</button>

	<script type="text/javascript">
	function TestRunner(ptests, testsViewer) {
	testsViewer = testsViewer \|\| {};
	// No parameter validation for simplicity
	var tests = [];
	var self = this;

	// Constants
	// Test status
	self.PASSED = 'Passed'
	self.FAILED = 'Failed'
	self.RUNNING = 'Running'
	self.NOT_STARTED = 'Not Started Yet';
	// Stats fields other that status
	self.TOTAL = 'Total';
	self.FINISHED = 'Finished';


	// How long do we wait for the whole test suite to run.
	// Would have to be adjusted to actual usage.
	self.testsTimeout = 30 * 1000;

	self.addTest = function(test) {
	var newTest = {
	'id': '_test' + tests.length, // simple id generation
	'description': ptests[i].description,
	'run': ptests[i].run,
	'status': self.NOT_STARTED
	};
	tests.push(newTest);
	testsViewer.testAdded && testsViewer.testAdded(self, newTest);
	}

	function registerTestEnd(test, result) {
	if (result === true) {
	test.status = self.PASSED;
	} else {
	test.status = self.FAILED;
	}
	testsViewer.testEnded && testsViewer.testEnded(self, test);
	}

	function runTest(test) {
	test.status = self.RUNNING;
	testsViewer.beforeRun && testsViewer.beforeRun(self, test);
	// Create a new closure for each running test.
	try {
	test.run(function(result) {
	registerTestEnd(test, result);
	});
	} catch(e) {
	console.log('Error on test ', test.description, e);
	registerTestEnd(test, false);
	}
	}

	function failLongRunningTests() {
	tests.forEach(function(test) {
	if (test.status === self.RUNNING) {
	console.log('Timeout on test ', test.description);
	registerTestEnd(test, false);
	}
	});
	}

	function calcStats() {
	var stats = {};
	stats[self.TOTAL] = tests.length;
	tests.forEach(function(test) {
	stats[test.status] = (stats[test.status] \|\| 0) + 1;
	});

	var totalFinished = (stats[self.PASSED] \|\| 0) + (stats[self.FAILED] \|\| 0);

	if (tests.length > 0 && tests.length === totalFinished) {
	stats[self.FINISHED] = true;
	}
	return stats;
	}

	// This could be optimized by a cache, or calculating just the difference, if this ever gets important.
	self.getStats = calcStats;

	self.runAll = function() {
	console.log('Running all tests');
	setTimeout(failLongRunningTests, self.testsTimeout);
	tests.forEach(runTest);
	console.log('All tests launched.')
	}

	for (var i = 0; i < ptests.length; i++) {
	self.addTest(ptests[i]);
	}
	}

	function HtmlTestViewer(runtestsCallback) {
	var testList = document.getElementById("alltests");
	var statsPassed = document.getElementById("passed");
	var statsFailed = document.getElementById("failed");
	var statsRunning = document.getElementById("running");
	var allFinished = document.getElementById("finished");
	var runtestsButton = document.getElementById("runtests");
	runtestsButton.onclick = function() {
	runtestsButton.disabled = true;
	runtestsCallback();
	};

	function showStats(runner) {
	var stats = runner.getStats();
	statsPassed.innerHTML = stats[runner.PASSED] \|\| '-';
	statsFailed.innerHTML = stats[runner.FAILED] \|\| '-';
	statsRunning.innerHTML = stats[runner.RUNNING] \|\| '-';
	if (stats[runner.FINISHED]) {
	allFinished.style.display = 'block';
	}
	}

	function showStatus(runner, test) {
	var elmt = document.getElementById(test.id+"_status");
	elmt.innerText = test.status;
	if (test.status === runner.FAILED) {
	elmt.style.background = "red";
	} else if (test.status === runner.PASSED) {
	elmt.style.background = "green";
	} else {
	elmt.style.background = "";
	}
	showStats(runner);
	}

	this.testAdded = function(runner, test) {
	var ttt = document.createElement("LI");
	ttt.innerHTML = test.description + " <span id='" + test.id + "_status'>" + test.status + "</span>";
	testList.appendChild(ttt);
	showStats(runner);
	};

	this.testEnded = showStatus;

	this.beforeRun = showStatus;
	}

	function runAllTests() {
	testRunner.runAll();
	}

	var htmlTestViewer = new HtmlTestViewer(runAllTests);

	function generateDummyTest() {
	var delay = 7000 + Math.random() * 7000;
	var testPassed = Math.random() > 0.5;

	return function(callback) {
	setTimeout(function() {
	callback(testPassed);
	}, delay);
	};
	}

	var tests = [
	{ description: "commas are rotated properly", run: generateDummyTest() },
	{ description: "exclamation points stand up straight", run: generateDummyTest() },
	{ description: "run-on sentences don't run forever", run: generateDummyTest() },
	{ description: "question marks curl down, not up", run: generateDummyTest() },
	{ description: "semicolons are adequately waterproof", run: generateDummyTest() },
	{ description: "capital letters can do yoga", run: generateDummyTest() }
	];

	var testRunner = new TestRunner(tests, htmlTestViewer);

	</script>
	</body>
	</html>
	Show, in the process, the state of the notes
	Very simple first, make complicated later!

	Engine:

	done minimal test runner first, with console.log, for quick feedback cycle (code, refresh, )

	Have:
	done one passing,
	done one failing,
	done one exception,
	done one never calls done.
	done make tests asynchronous
	done try catch to get errors when running test, before async

	done test timeout, for errors that never call done
	done, no return true (not asked for), so only done - test pass only if return === true or done called with === true(?)
	done keep (or calculate) stats on runner.
	done show stats after each action (add test, run test finish test)
	done show finished if all tests ended.

	done test engine with supplied tests

	(2h work up to here)

	UI
	done separate UI, extracting all(most) console.logs to be on UI. -> inject viewer on runner.
	done actual call backs: add one, run one, finish one, and a method to retrieve stats. call backs for add one, run one, return one, finish all.
	experiment UI, get simple one... (divs?)
	done UI made to run tests once, so no reset for now.
	done show test text, button, state

	done jquery? or plain JS locators!
	done button disabled if tests running

	(1h:15 for the UI)

	send in gist, live on firebase ...

	future steps:
	call runTest on timeout so one long test doesn't hold the others from starting?
	(not asked for, even if useful ...) show error trace somewhere, if exception? Specially if "done" called with exception.
	setup on cloud9
	detect if test has parameter, meaning it is async
	pass test if it returns true(?) -- no, the real way this is done is with assertions, not return values ...