Write tests for task pages (and related actions)

test/functional/helper/webservice.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var createClient = require('pa11y-webservice-client-node');
+
+module.exports = createWebserviceClient;
+
+// Create a webservice client
+function createWebserviceClient (config) {
+	var webserviceUrl = config.webservice;
+	if (typeof webserviceUrl == 'object') {
+		webserviceUrl = 'http://' + webserviceUrl.host + ':' + webserviceUrl.port + '/';
+	}
+	return createClient(webserviceUrl);
+}

test/functional/route/index.js

@@ -6,8 +6,6 @@ var assert = require('proclaim');
 
 describe('GET /', function () {
 
-	describe('with no query', function () {
-
 	beforeEach(function (done) {
 		var req = {
 			method: 'GET',
@@ -20,7 +18,7 @@ describe('GET /', function () {
 		assert.strictEqual(this.last.status, 200);
 	});
 
-		it('should have an "Add new URL" button', function () {
+	it('should display an "Add new URL" button', function () {
 		var elem = this.last.dom.querySelectorAll('[data-test=add-task]');
 		assert.strictEqual(elem.length, 1);
 		assert.strictEqual(elem[0].getAttribute('href'), '/new');
@@ -64,6 +62,4 @@ describe('GET /', function () {
 		assert.strictEqual(this.last.dom.querySelectorAll('[data-test=alert]').length, 0);
 	});
 
-	});
-
 });

test/functional/route/new.js

@@ -6,8 +6,6 @@ var assert = require('proclaim');
 
 describe('GET /new', function () {
 
-	describe('with no query', function () {
-
 	beforeEach(function (done) {
 		var req = {
 			method: 'GET',
@@ -65,8 +63,6 @@ describe('GET /new', function () {
 
 	});
 
-	});
-
 });
 
 describe('POST /new', function () {
@@ -114,11 +110,15 @@ describe('POST /new', function () {
 			assert.strictEqual(this.last.status, 200);
 		});
 
+		it('should create the task', function (done) {
+			this.webservice.tasks.get({}, function (err, tasks) {
+				assert.strictEqual(tasks.length, 4);
+				done();
+			});
+		});
+
 		it('should redirect me to the new URL page', function () {
-			var title = this.last.dom.querySelectorAll('title')[0];
+			assert.match(this.last.request.uri.pathname, /^\/[a-z0-9]{24}$/i);
-			assert.isDefined(title);
-			assert.match(title.textContent, /example.com/i);
-			assert.match(title.textContent, /wcag2aa/i);
 		});
 
 		it('should not display an error message', function () {

test/functional/route/task/delete.js

@@ -0,0 +1,61 @@
+/* global beforeEach, describe, it */
+/* jshint maxlen: false, maxstatements: false */
+'use strict';
+
+var assert = require('proclaim');
+
+describe('GET /<task-id>/delete', function () {
+
+	beforeEach(function (done) {
+		var req = {
+			method: 'GET',
+			endpoint: '/abc000000000000000000001/delete'
+		};
+		this.navigate(req, done);
+	});
+
+	it('should send a 200 status', function () {
+		assert.strictEqual(this.last.status, 200);
+	});
+
+	it('should have a "Delete URL" form', function () {
+		var form = this.last.dom.querySelectorAll('[data-test=delete-url-form]')[0];
+		assert.isDefined(form);
+		assert.strictEqual(form.getAttribute('action'), '/abc000000000000000000001/delete');
+		assert.strictEqual(form.getAttribute('method'), 'post');
+	});
+
+});
+
+describe('POST /<task-id>/delete', function () {
+
+	beforeEach(function (done) {
+		var req = {
+			method: 'POST',
+			endpoint: '/abc000000000000000000001/delete'
+		};
+		this.navigate(req, done);
+	});
+
+	it('should send a 200 status', function () {
+		assert.strictEqual(this.last.status, 200);
+	});
+
+	it('should delete the task', function (done) {
+		this.webservice.task('abc000000000000000000001').get({}, function (err) {
+			assert.strictEqual(err.message, 'Error 404');
+			done();
+		});
+	});
+
+	it('should redirect me to the home page', function () {
+		assert.strictEqual(this.last.request.uri.pathname, '/');
+	});
+
+	it('should display a success message', function () {
+		var alert = this.last.dom.querySelectorAll('[data-test=alert]')[0];
+		assert.isDefined(alert);
+		assert.match(alert.textContent, /been deleted/i);
+	});
+
+});

test/functional/route/task/index.js

@@ -0,0 +1,94 @@
+/* global beforeEach, describe, it */
+/* jshint maxlen: false, maxstatements: false */
+'use strict';
+
+var assert = require('proclaim');
+
+describe('GET /<task-id>', function () {
+
+	describe('when task has results', function () {
+
+		beforeEach(function (done) {
+			var req = {
+				method: 'GET',
+				endpoint: '/abc000000000000000000001'
+			};
+			this.navigate(req, done);
+		});
+
+		it('should send a 200 status', function () {
+			assert.strictEqual(this.last.status, 200);
+		});
+
+		it('should display a "Run" button', function () {
+			var elem = this.last.dom.querySelectorAll('[data-test=run-task]');
+			assert.strictEqual(elem.length, 1);
+			assert.strictEqual(elem[0].getAttribute('href'), '/abc000000000000000000001/run');
+		});
+
+		it('should display a "Download CSV" button for the latest result', function () {
+			var elem = this.last.dom.querySelectorAll('[data-test=download-csv]');
+			assert.strictEqual(elem.length, 1);
+			assert.strictEqual(elem[0].getAttribute('href'), '/abc000000000000000000001/def000000000000000000001.csv');
+		});
+
+		it('should display a "Download JSON" button for the latest result', function () {
+			var elem = this.last.dom.querySelectorAll('[data-test=download-json]');
+			assert.strictEqual(elem.length, 1);
+			assert.strictEqual(elem[0].getAttribute('href'), '/abc000000000000000000001/def000000000000000000001.json');
+		});
+
+		it('should display links to all results', function () {
+			assert.isDefined(this.last.dom.querySelectorAll('[href="/abc000000000000000000001/def000000000000000000001"]')[0]);
+			assert.isDefined(this.last.dom.querySelectorAll('[href="/abc000000000000000000001/def000000000000000000003"]')[0]);
+		});
+
+		it('should display errors', function () {
+			var elem = this.last.dom.querySelectorAll('[data-test=task-errors]')[0];
+			assert.isDefined(elem);
+			assert.match(elem.textContent, /errors \( 1 \)/i);
+		});
+
+		it('should display warnings', function () {
+			var elem = this.last.dom.querySelectorAll('[data-test=task-warnings]')[0];
+			assert.isDefined(elem);
+			assert.match(elem.textContent, /warnings \( 2 \)/i);
+		});
+
+		it('should display notices', function () {
+			var elem = this.last.dom.querySelectorAll('[data-test=task-notices]')[0];
+			assert.isDefined(elem);
+			assert.match(elem.textContent, /notices \( 3 \)/i);
+		});
+
+	});
+
+	describe('when task has no results', function () {
+
+		beforeEach(function (done) {
+			var req = {
+				method: 'GET',
+				endpoint: '/abc000000000000000000003'
+			};
+			this.navigate(req, done);
+		});
+
+		it('should send a 200 status', function () {
+			assert.strictEqual(this.last.status, 200);
+		});
+
+		it('should display a "Run" button', function () {
+			var elem = this.last.dom.querySelectorAll('[data-test=run-task]');
+			assert.strictEqual(elem.length, 1);
+			assert.strictEqual(elem[0].getAttribute('href'), '/abc000000000000000000003/run');
+		});
+
+		it('should display a message indicating that there are no results', function () {
+			var alert = this.last.dom.querySelectorAll('[data-test=alert]')[0];
+			assert.isDefined(alert);
+			assert.match(alert.textContent, /there are no results to show/i);
+		});
+
+	});
+
+});

test/functional/route/task/run.js

@@ -0,0 +1,31 @@
+/* global beforeEach, describe, it */
+/* jshint maxlen: false, maxstatements: false */
+'use strict';
+
+var assert = require('proclaim');
+
+describe('GET /<task-id>/run', function () {
+
+	beforeEach(function (done) {
+		var req = {
+			method: 'GET',
+			endpoint: '/abc000000000000000000001/run'
+		};
+		this.navigate(req, done);
+	});
+
+	it('should send a 200 status', function () {
+		assert.strictEqual(this.last.status, 200);
+	});
+
+	it('should redirect me to the task page', function () {
+		assert.strictEqual(this.last.request.uri.pathname, '/abc000000000000000000001');
+	});
+
+	it('should display a success message', function () {
+		var alert = this.last.dom.querySelectorAll('[data-test=alert]')[0];
+		assert.isDefined(alert);
+		assert.match(alert.textContent, /new results are being generated/i);
+	});
+
+});

test/functional/setup.js

@@ -4,6 +4,7 @@
 
 var config = require('../../config/test.json');
 var createNavigator = require('./helper/navigate');
+var createWebserviceClient = require('./helper/webservice');
 var loadFixtures = require('pa11y-webservice/data/fixture/load');
 var request = require('request');
 
@@ -12,6 +13,7 @@ before(function (done) {
 	this.baseUrl = 'http://localhost:' + config.port;
 	this.last = {};
 	this.navigate = createNavigator(this.baseUrl, this.last);
+	this.webservice = createWebserviceClient(config);
 	assertTestAppIsRunning(this.baseUrl, function () {
 		loadFixtures('test', config.webservice, done);
 	});

view/partial/result.html

@@ -12,10 +12,14 @@
 		<div class="action-buttons col-md-12 col-sm-6 clearfix">
 			<div class="row">
 				<div class="col-md-12 col-sm-6 col-xs-12">
-			        <a href="{{mainResult.hrefCsv}}" class="btn-full-width btn btn-default">Download CSV <span class="glyphicon glyphicon-download"></span></a>
+			        <a href="{{mainResult.hrefCsv}}" class="btn-full-width btn btn-default" data-test="download-csv">
+			        	Download CSV <span class="glyphicon glyphicon-download"></span>
+			        </a>
 				</div>
 				<div class="col-md-12 col-sm-6 col-xs-12">
-			        <a href="{{mainResult.hrefJson}}" class="btn-full-width btn btn-default">Download JSON <span class="glyphicon glyphicon-download"></span></a>
+			        <a href="{{mainResult.hrefJson}}" class="btn-full-width btn btn-default" data-test="download-json">
+			        	Download JSON <span class="glyphicon glyphicon-download"></span>
+			        </a>
 				</div>
 			</div>
 	    </div>
@@ -37,7 +41,7 @@
 
 <div class="col-md-9">
 	{{#if mainResult.count.error}}
-		<div class="heading label-danger showing first" id="errors">
+		<div class="heading label-danger showing first" id="errors" data-test="task-errors">
 			<span data-role="expander" class="pull-right expander"> - </span>
 			Errors ( {{mainResult.count.error}} )
 		</div>
@@ -58,7 +62,7 @@
 	{{/if}}
 
 	{{#if mainResult.count.warning}}
-		<div class="heading label-warning" id="warnings">
+		<div class="heading label-warning" id="warnings" data-test="task-warnings">
 			<span data-role="expander" class="pull-right expander"> + </span>
 			Warnings ( {{mainResult.count.warning}} )
 		</div>
@@ -79,7 +83,7 @@
 	{{/if}}
 
 	{{#if mainResult.count.notice}}
-		<div class="heading label-info" id="notices">
+		<div class="heading label-info" id="notices" data-test="task-notices">
 			<span data-role="expander" class="pull-right expander"> + </span>
 			Notices ( {{mainResult.count.notice}} )
 		</div>

view/partial/task-header.html

@@ -7,7 +7,9 @@
 			</div>
 			<div class="col-md-3 col-sm-3 text-right run-details">
 				{{#unless readonly}}
-					<a href="{{task.hrefRun}}" class="btn btn-success">Run <span class="glyphicon glyphicon-play"></span></a>
+					<a href="{{task.hrefRun}}" class="btn btn-success" data-test="run-task">
+						Run <span class="glyphicon glyphicon-play"></span>
+					</a>
 				{{/unless}}
 				{{#if mainResult}}
 					<div class="date">Last run : {{date-format mainResult.date format="DD MMM YYYY"}}</div>

view/task/delete.html

@@ -3,7 +3,7 @@
     Delete {{task.url}} ({{task.standard}})
 {{/content}}
 
-<form class="col-md-12" action="{{task.hrefDelete}}" method="post">
+<form class="col-md-12" action="{{task.hrefDelete}}" method="post" data-test="delete-url-form">
 	<div class="legend">
 		<legend>Delete URL ({{simplify-url task.url}})</legend>
 	</div>

view/task/index.html

@@ -41,7 +41,7 @@
 {{#if mainResult}}
 	{{> result}}
 {{else}}
-	<div class="col-md-12">
+	<div class="col-md-12" data-test="alert">
 		<div class="alert alert-info">
 			<h4>There are no results to show</h4>
 			<p>pa11y has not been run against this URL yet so there are no results to show.</p>