Permalink
Browse files

"Refactor Web GUI for better separation of concerns.

  • Loading branch information...
1 parent 7d1a526 commit 16fa654f1321d8a900bbf40f957e5327d3974219 @tobie committed Dec 5, 2009
View
21 src/ui/ascii_view_builder.js
@@ -1,18 +1,24 @@
-function AsciiViewBuilder() {
+function AsciiViewBuilder(result) {
this.prefix = '';
+ this._result = result;
}
AsciiViewBuilder.name = AsciiViewBuilder.displayName = 'AsciiViewBuilder';
(function(p) {
- function build(r) {
- var resultString = r.toString(),
- max = 100 - resultString.length - this.prefix.length,
+
+ function draw() {
+ return this._build(this._result);
+ }
+
+ function _build(r) {
+ var rString = r.toString(),
+ max = 100 - rString.length - this.prefix.length,
str = r.name || 'Anonymous TestSuite';
str = this._truncate(str, max);
str += ' ' + this._times('.', max - str.length) + ' ';
- str += resultString;
+ str += rString;
str += this._displayStatus(r)
str += '\n';
@@ -32,7 +38,7 @@ AsciiViewBuilder.name = AsciiViewBuilder.displayName = 'AsciiViewBuilder';
var str, original = this.prefix;
suffix = suffix || '';
this.prefix += modifier;
- str = original + prefix + this.build(child) + suffix;
+ str = original + prefix + this._build(child) + suffix;
this.prefix = original;
return str;
}
@@ -59,7 +65,8 @@ AsciiViewBuilder.name = AsciiViewBuilder.displayName = 'AsciiViewBuilder';
return '';
}
- p.build = build;
+ p.draw = draw;
+ p._build = _build;
p._buildChild = _buildChild;
p._displayStatus = _displayStatus;
p._times = _times;
View
3 src/ui/web/abstract_widget.js
@@ -18,7 +18,8 @@ AbstractWidget.displayName = 'Widget';
this.element.appendChild(element);
return child;
}
-
+ p.draw = function() { return this; };
+ p.redraw = function() { return this.draw() };
p.appendChild = appendChild;
p.escapeHTML = escapeHTML;
p.toElement = toElement;
View
44 src/ui/web/gui.js
@@ -1,36 +1,45 @@
function WebGUI(doc) {
AbstractWidget.call(this, doc);
+ this._build();
}
chain(WebGUI, AbstractWidget);
WebGUI.displayName = 'WebGUI';
(function(p) {
- function build() {
+ function _build() {
this.element = this.doc.createElement('div');
this.element.id = 'evidence';
- this.appendChild(new LabelledText('User agent string').update(global.navigator.userAgent))
- this.status = this.appendChild(new LabelledText('Status').update('Idle.'));
+ this.appendChild(new LabelledText('User agent string').setContent(global.navigator.userAgent).draw())
+ this.status = this.appendChild(new LabelledText('Status'));
this.progressBar = this.appendChild(new ProgressBar(300));
this.results = this.appendChild(new LabelledText('Results'));
return this;
}
+ function draw() {
+ defer(function() {
+ this.status.draw();
+ this.progressBar.draw();
+ this.results.draw();
+ }, this);
+ }
- function updateResults(txt) {
- txt = this.appendFullStop(txt);
- this.results.update(txt);
+ function setResults(txt) {
+ txt = this._appendFullStop(txt);
+ this.results.setContent(txt);
return this;
}
- function updateStatus(txt) {
- txt = this.appendFullStop(txt);
- this.status.update(txt);
+ function setStatus(txt) {
+ txt = this._appendFullStop(txt);
+ this.status.setContent(txt);
+ this.draw();
return this;
}
- function updateProgressBar(ratio) {
- this.progressBar.update(ratio);
+ function setProgress(ratio) {
+ this.progressBar.setValue(ratio);
return this;
}
@@ -39,14 +48,15 @@ WebGUI.displayName = 'WebGUI';
return this;
}
- function appendFullStop(txt) {
+ function _appendFullStop(txt) {
return (txt + '').replace(/\.?\s*$/, '.');
}
- p.build = build;
- p.updateResults = updateResults;
- p.updateStatus = updateStatus;
- p.updateProgressBar = updateProgressBar;
+ p._build = _build;
+ p.setResults = setResults;
+ p.setStatus = setStatus;
+ p.setProgress = setProgress;
p.setLevel = setLevel;
- p.appendFullStop = appendFullStop;
+ p._appendFullStop = _appendFullStop;
+ p.draw = draw;
})(WebGUI.prototype);
View
15 src/ui/web/labelled_text.js
@@ -8,14 +8,19 @@ chain(LabelledText, AbstractWidget);
LabelledText.displayName = 'LabelledText';
(function(p) {
- function update(content) {
- content = this.escapeHTML(content);
- content = TEMPLATE.replace('{{ label }}', this.label).replace('{{ content }}', content);
- defer(function() { this.element.innerHTML = content; }, this);
+ function setContent(content) {
+ this._content = this.escapeHTML(content);
+ this._content = TEMPLATE.replace('{{ label }}', this.label).replace('{{ content }}', content);
+ return this;
+ }
+
+ function draw() {
+ this.element.innerHTML = this._content;
return this;
}
var TEMPLATE = '<strong>{{ label }}:</strong> {{ content }}';
- p.update = update;
+ p.setContent = setContent;
+ p.draw = draw;
})(LabelledText.prototype);
View
40 src/ui/web/progress_bar.js
@@ -1,47 +1,51 @@
function ProgressBar(width, doc) {
- this.width = width;
- this.level = 0;
+ this._width = width;
+ this._level = 0;
AbstractWidget.call(this, doc);
- this.build();
+ this._build();
}
chain(ProgressBar, AbstractWidget);
ProgressBar.displayName = 'ProgressBar';
(function(p) {
- function build() {
- this.element = this.createDiv(this.width);
+ function _build() {
+ this.element = this._createDiv(this.width);
this.element.id = 'evidence_progress_bar_container';
- this.progressBar = this.createDiv(0);
+ this.progressBar = this._createDiv(0);
this.progressBar.id = 'evidence_progress_bar';
this.element.appendChild(this.progressBar);
return this;
}
- function createDiv(width) {
+ function _createDiv(width) {
var element = this.doc.createElement('div');
element.style.width = width + 'px';
return element;
}
- function update(ratio) {
- var value = Math.floor(ratio * this.width);
- defer(function() {
- this.progressBar.style.width = value + 'px';
- }, this);
+ function draw() {
+ this.progressBar.style.width = this._value + 'px';
+ var className = (Logger.LEVELS[this._level] || '').toLowerCase();
+ this.progressBar.className = className;
+ return this;
+ }
+
+ function setValue(ratio) {
+ this._value = Math.floor(ratio * this._width);
return this;
}
function setLevel(level) {
- if (level > this.level) {
- this.level = level;
- this.progressBar.className = (Logger.LEVELS[level] || '').toLowerCase();
+ if (level > this._level) {
+ this._level = level;
}
return this;
}
- p.build = build;
- p.createDiv = createDiv;
- p.update = update;
+ p._build = _build;
+ p._createDiv = _createDiv;
+ p.draw = draw;
+ p.setValue = setValue;
p.setLevel = setLevel;
})(ProgressBar.prototype);
View
43 src/ui/web/test_result.js
@@ -11,77 +11,77 @@ WebTestResult.displayName = 'WebTestResult';
function addAssertion() {
_super.addAssertion.call(this);
- this.gui.updateResults(this);
+ this.gui.setResults(this);
}
function addSkip(testcase, msg) {
_super.addSkip.call(this, testcase, msg);
var gui = this.gui;
- gui.updateResults(this);
+ gui.setResults(this);
gui.setLevel(Logger.WARN);
- gui.updateStatus('Skipping testcase ' + testcase + ': ' + msg.message);
+ gui.setStatus('Skipping testcase ' + testcase + ': ' + msg.message);
}
function addFailure(testcase, msg) {
_super.addFailure.call(this, testcase, msg);
var gui = this.gui;
- gui.updateResults(this);
+ gui.setResults(this);
gui.setLevel(Logger.ERROR);
- gui.updateStatus(testcase + ': ' + msg.message + ' ' + msg.template, msg.args);
+ gui.setStatus(testcase + ': ' + msg.message + ' ' + msg.template, msg.args);
}
function addError(testcase, error) {
_super.addError.call(this, testcase, error);
var gui = this.gui;
- gui.updateResults(this);
+ gui.setResults(this);
gui.setLevel(Logger.ERROR);
- gui.updateStatus(testcase + ' threw an error. ' + error);
+ gui.setStatus(testcase + ' threw an error. ' + error);
}
function startTest(testcase) {
_super.startTest.call(this, testcase);
- this.gui.updateStatus('Started testcase ' + testcase);
+ this.gui.setStatus('Started testcase ' + testcase);
}
function stopTest(testcase) {
_super.stopTest.call(this, testcase);
var gui = this.gui;
- gui.updateProgressBar(this.getRatio());
- gui.updateStatus('Completed testcase ' + testcase);
+ gui.setProgress(this.getRatio());
+ gui.setStatus('Completed testcase ' + testcase);
}
function pauseTest(testcase) {
- this.gui.updateStatus('Paused testcase ' + testcase + '...');
+ this.gui.setStatus('Paused testcase ' + testcase + '...');
}
function resumeTest(testcase) {
- this.gui.updateStatus('Resumed testcase ' + testcase);
+ this.gui.setStatus('Resumed testcase ' + testcase);
}
function startSuite(suite) {
_super.startSuite.call(this, suite);
if (!this.size) { this.size = suite.size(); }
- this.gui.updateStatus('Started suite ' + suite);
+ this.gui.setStatus('Started suite ' + suite);
}
function stopSuite(suite) {
_super.stopSuite.call(this, suite);
- this.gui.updateStatus('Completed suite ' + suite);
+ this.gui.setStatus('Completed suite ' + suite);
}
function loadPage(page) {
- this.gui.updateStatus('Loading page ' + page.location.pathname + '...');
+ this.gui.setStatus('Loading page ' + page.location.pathname + '...');
}
function startPage(page, suite) {
this.pageSize = suite.size();
this.previousTestCount = this.testCount;
- this.gui.updateStatus('Loaded page ' + page.location.pathname);
+ this.gui.setStatus('Loaded page ' + page.location.pathname);
}
function stopPage(page) {
this.pageCount++;
- this.gui.updateStatus('Finished page ' + page.location.pathname);
+ this.gui.setStatus('Finished page ' + page.location.pathname);
}
function getRatio() {
@@ -96,16 +96,15 @@ WebTestResult.displayName = 'WebTestResult';
_super.start.call(this);
var gui = new WebGUI(document);
this.gui = gui;
- document.body.appendChild(gui.build().toElement());
- gui.updateResults(this);
+ document.body.appendChild(gui.toElement());
+ gui.setResults(this);
}
function stop() {
_super.stop.call(this);
- this.gui.updateStatus('Completed tests in ' + ((this.t1 - this.t0)/1000) + 's');
+ this.gui.setStatus('Completed tests in ' + ((this.t1 - this.t0)/1000) + 's');
- var builder = new AsciiViewBuilder();
- console.log(builder.build(this))
+ console.log(new AsciiViewBuilder(this).draw())
}
p.getRatio = getRatio;

0 comments on commit 16fa654

Please sign in to comment.