Version 2.1.1

I broke this with my incorrect advice :D

CHANGELOG.md

@@ -1,6 +1,20 @@
 
 # Changelog
 
+## 2.1.1 (2016-11-20)
+
+  * Use arrows instead of plus and minus for collapsibles/expanders
+  * Supply more detailed 500 messages
+
+## 2.1.0 (2016-11-07)
+
+  * Allow for configuration files to be JavaScript rather than JSON
+  * Allow setting of HTTP headers for task runs
+  * Allow hiding/ignoring elements for task runs
+  * Update dependencies and devDependencies
+    * pa11y-webservice: ~2.0.1 to ^2.1.2
+    * mocha: ^3 to ^2 (temporary – tests weren't running)
+
 ## 2.0.1 (2016-09-12)
 
   * Update dependencies and devDependencies

README.md

@@ -58,6 +58,8 @@ NODE_ENV=development node index.js
 
 See [development instructions](#development) for more information about running locally (and restarting automatically when files change).
 
+If you run into problems, check the [troubleshooting guide][troubleshooting].
+
 
 Configurations
 --------------
@@ -148,11 +150,12 @@ Copyright © 2013–2016, Springer Nature
 [sidekick-proposal]: https://github.com/pa11y/sidekick/blob/master/PROPOSAL.md
 [travis]: https://travis-ci.org/pa11y/dashboard
 [travis-img]: https://travis-ci.org/pa11y/dashboard.png?branch=master
+[troubleshooting]: https://github.com/pa11y/dashboard/blob/master/TROUBLESHOOTING.md
 
 [info-license]: LICENSE
 [info-node]: package.json
 [info-build]: https://travis-ci.org/pa11y/dashboard
 [shield-license]: https://img.shields.io/badge/license-GPL%203.0-blue.svg
 [shield-node]: https://img.shields.io/badge/node.js%20support-4–6-brightgreen.svg
-[shield-version]: https://img.shields.io/badge/version-2.0.0-blue.svg
+[shield-version]: https://img.shields.io/badge/version-2.1.1-blue.svg
 [shield-build]: https://img.shields.io/travis/pa11y/dashboard/master.svg

TROUBLESHOOTING.md

@@ -0,0 +1,27 @@
+Troubleshooting
+===============
+
+
+Common issues
+-----
+
+* `500` errors or `Could not connect to pa11y-webservice` messages are often related to MongoDB. Ensure that you have the [latest version of MongoDB][mongo-install] installed, and that it's running - it doesn't always start automatically. 
+* Error messages saying that pa11y-webservice isn't running may be due to dependency installation problems. Try deleting your `pa11y-dashboard/node_modules` directory and running `npm install` again. 
+
+
+Check to see if the issue has been reported
+-----
+
+* Check the [issue tracker][issues] for similar issues.
+
+
+Create an issue
+-----
+
+If all else fails, [create an issue][create-issue] and we'll help you. Please include your node.js, Phantom, and MongoDB version numbers, and your operating system. 
+
+
+[issues]: https://github.com/pa11y/dashboard/issues?utf8=%E2%9C%93&q=is%3Aissue
+[mongo-install]: https://docs.mongodb.org/manual/installation/
+[create-issue]: https://github.com/pa11y/dashboard/issues/new
+

config.js

@@ -18,9 +18,12 @@
 const fs = require('fs');
 const environment = (process.env.NODE_ENV || 'development');
 const jsonPath = `./config/${environment}.json`;
+const jsPath = `./config/${environment}.js`;
 
 if (fs.existsSync(jsonPath)) {
 	module.exports = require(jsonPath);
+} else if (fs.existsSync(jsPath)) {
+	module.exports = require(jsPath);
 } else {
 	module.exports = {
 		port: Number(env('PORT', '4000')),

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pa11y-dashboard",
-	"version": "2.0.1",
+	"version": "2.1.1",
 	"private": true,
 
 	"description": "Pa11y Dashboard is a visual web interface to the Pa11y accessibility reporter",
@@ -27,8 +27,9 @@
 		"compression": "~1.6",
 		"express": "~4.14",
 		"express-hbs": "~1.0",
+		"http-headers": "^3.0.1",
 		"moment": "~2.13",
-		"pa11y-webservice": "^2.0.1",
+		"pa11y-webservice": "^2.1.2",
 		"pa11y-webservice-client-node": "^1.2.1",
 		"underscore": "~1.8"
 	},
@@ -38,7 +39,7 @@
 		"jscs": "^2",
 		"jshint": "^2",
 		"less": "~2.7",
-		"mocha": "^3",
+		"mocha": "^2",
 		"proclaim": "^3",
 		"request": "^2.74",
 		"uglify-js": "~2.6"

public/js/site.js

@@ -77,11 +77,11 @@ $(document).ready(function(){
     expandLink.click( function(){
 		$(this).next().slideToggle('slow', function(){});
         if ($(this).hasClass('showing')) {
-            $(this).find('span.expander').html('+');
+            $(this).find('span.expander').html('↓');
             $(this).attr('aria-expanded', false);
         }
         else {
-            $(this).find('span.expander').html('-');
+            $(this).find('span.expander').html('↑');
             $(this).attr('aria-expanded', true);
         }
         $(this).toggleClass('showing');

route/new.js

@@ -13,9 +13,12 @@
 // You should have received a copy of the GNU General Public License
 // along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 
+/*jshint maxcomplexity:10*/
+
 'use strict';
 
 const getStandards = require('../data/standards');
+const httpHeaders = require('http-headers');
 
 module.exports = route;
 
@@ -36,16 +39,26 @@ function route(app) {
 	});
 
 	app.express.post('/new', (req, res) => {
+
+		let parsedHeaders;
+		if (req.body.headers) {
+			parsedHeaders = httpHeaders(req.body.headers, true);
+		}
+		console.log(parsedHeaders);
+
 		const newTask = {
 			name: req.body.name,
 			url: req.body.url,
 			standard: req.body.standard,
 			ignore: req.body.ignore || [],
-			timeout: req.body.timeout,
-			wait: req.body.wait,
-			username: req.body.username,
-			password: req.body.password
+			timeout: req.body.timeout || undefined,
+			wait: req.body.wait || undefined,
+			username: req.body.username || undefined,
+			password: req.body.password || undefined,
+			headers: parsedHeaders,
+			hideElements: req.body.hideElements || undefined
 		};
+
 		app.webservice.tasks.create(newTask, (err, task) => {
 			if (err) {
 				const standards = getStandards().map(standard => {

route/task/edit.js

@@ -13,10 +13,13 @@
 // You should have received a copy of the GNU General Public License
 // along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 
+/*jshint maxcomplexity:10*/
+
 'use strict';
 
 const presentTask = require('../../view/presenter/task');
 const getStandards = require('../../data/standards');
+const httpHeaders = require('http-headers');
 
 module.exports = route;
 
@@ -54,7 +57,14 @@ function route(app) {
 			if (err) {
 				return next();
 			}
+			const originalHeaders = req.body.headers;
 			req.body.ignore = req.body.ignore || [];
+			req.body.timeout = req.body.timeout || undefined;
+			req.body.wait = req.body.wait || undefined;
+			req.body.username = req.body.username || undefined;
+			req.body.password = req.body.password || undefined;
+			req.body.hideElements = req.body.hideElements || undefined;
+			req.body.headers = httpHeaders(req.body.headers || '', true);
 			app.webservice.task(req.params.id).edit(req.body, err => {
 				if (err) {
 					task.name = req.body.name;
@@ -63,6 +73,8 @@ function route(app) {
 					task.wait = req.body.wait;
 					task.username = req.body.username;
 					task.password = req.body.password;
+					task.headers = originalHeaders;
+					task.hideElements = req.body.hideElements;
 					const standards = getStandards().map(standard => {
 						if (standard.title === task.standard) {
 							standard.selected = true;

test/integration/route/new.js

@@ -96,6 +96,18 @@ describe('GET /new', function() {
 			assert.notStrictEqual(fields.length, 0);
 		});
 
+		it('should have a "hideElements" field', function() {
+			const field = this.form.find('input[name=hideElements]').eq(0);
+			assert.isDefined(field);
+			assert.strictEqual(field.attr('type'), 'text');
+			assert.strictEqual(field.attr('value'), '');
+		});
+
+		it('should have a "headers" field', function() {
+			const field = this.form.find('textarea[name=headers]').eq(0);
+			assert.isDefined(field);
+		});
+
 	});
 
 });

test/integration/route/task/edit.js

@@ -91,6 +91,18 @@ describe('GET /<task-id>/edit', function() {
 			assert.strictEqual(field.attr('value'), 'access');
 		});
 
+		it('should have a "hideElements" field', function() {
+			const field = this.form.find('input[name=hideElements]').eq(0);
+			assert.isDefined(field);
+			assert.strictEqual(field.attr('type'), 'text');
+			assert.strictEqual(field.attr('value'), '');
+		});
+
+		it('should have a "headers" field', function() {
+			const field = this.form.find('textarea[name=headers]').eq(0);
+			assert.isDefined(field);
+		});
+
 		it('should have "ignore" fields', function() {
 			const fields = this.form.find('input[name="ignore[]"]');
 			assert.isDefined(fields);

view/500.html

@@ -15,9 +15,13 @@ You should have received a copy of the GNU General Public License
 along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 }}
 <div class="col-md-8">
-	<h1>Eeek! 500 error. This is serious.</h1>
-	<p class="h2">There isn't much you can do about this.</h2>
-	<p class="h4">Give it another go or try the <a href="/">home page</a>.</h4>
+	<h1>Eeek! 500 error.</h1>
+	<p class="h2">Let's see what we can do here:</h2>
+	<ul>
+		<li>Do you have <a href="https://www.mongodb.com/">MongoDB</a> installed and <code>mongod</code> running?</li>
+		<li>Check out the <a href="https://github.com/pa11y/dashboard/blob/master/TROUBLESHOOTING.md">Troubleshooting doc</a> for more information.</li>
+		<li>Search for a related <a href="https://github.com/pa11y/dashboard/issues">Github issue</a>, or open one yourself.</li>
+	</ul>
 	{{#if error}}
 		<h2>Stack-Trace</h2>
 		<pre>{{error.stack}}</pre>

view/new.html

@@ -38,7 +38,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 		<div class="row">
 			<div class="col-md-8 col-sm-8 col-xs-10">
 				<label class="control-label" for="new-task-name">Name</label>
-				<input class="form-control" id="new-task-name" type="text" placeholder="E.g. My Home Page" name="name" value="{{task.name}}"/>
+				<input class="form-control" id="new-task-name" type="text" required placeholder="E.g. My Home Page" name="name" value="{{task.name}}"/>
 			</div>
 		</div>
 	</div>
@@ -47,7 +47,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 		<div class="row">
 			<div class="col-md-8 col-sm-8 col-xs-10">
 				<label class="control-label" for="new-task-url">URL</label>
-				<input class="form-control" id="new-task-url" type="url" placeholder="E.g. http://mysite.com/" name="url" value="{{task.url}}"/>
+				<input class="form-control" id="new-task-url" type="url" required pattern="https?:\/\/.+" placeholder="E.g. http://mysite.com/" name="url" value="{{task.url}}"/>
 			</div>
 		</div>
 	</div>
@@ -102,6 +102,25 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 		</div>
 	</div>
 
+	<div class="form-group clearfix">
+		<div class="row">
+			<div class="col-md-4 col-sm-4 col-xs-6">
+				<label class="control-label" for="new-task-headers">HTTP Headers</label>
+				<textarea class="form-control" id="new-task-headers" name="headers" placeholder="Cookie: foo=bar">{{task.headers}}</textarea>
+				<em>(As key/value pairs, separated by newlines/colons)</em>
+			</div>
+		</div>
+	</div>
+
+	<div class="form-group clearfix">
+		<div class="row">
+			<div class="col-md-4 col-sm-4 col-xs-6">
+				<label class="control-label" for="new-task-hide-elements">Hide Elements</label>
+				<input class="form-control" id="new-task-hide-elements" type="text" name="hideElements" value="{{task.hideElements}}" placeholder=".advert, #modal, div[aria-role=presentation]"/> <em>(CSS selector)</em>
+			</div>
+		</div>
+	</div>
+
 	<p class="control-label"><b>Ignore these rules</b> <a target="_blank" href="https://github.com/pa11y/pa11y/wiki/HTML-CodeSniffer-Rules">(full list of rules here)</a></p>
 
 	<div class="standards-lists">

view/partial/result.html

@@ -73,7 +73,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 <div class="col-md-9" data-role="expandable-results" role="main">
 	{{#if mainResult.count.error}}
 		<div class="heading label-danger pointer showing first" id="errors" data-test="task-errors" data-role="expander" role="button" tabindex="0" aria-expanded="true" aria-controls="errors-list">
-			<span class="pull-right expander"> - <span class="hide">(close panel)</span></span>
+			<span class="pull-right expander"> ↑ <span class="hide">(close panel)</span></span>
 			Errors ( {{mainResult.count.error}} )
 		</div>
 		<div class="task-danger tasks-list collapse clearfix in" id="errors-list">
@@ -109,7 +109,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 
 	{{#if mainResult.count.warning}}
 		<div class="heading label-warning pointer" id="warnings" data-test="task-warnings" data-role="expander" role="button" tabindex="0" aria-expanded="false" aria-controls="warnings-list">
-			<span class="pull-right expander"> + <span class="hide">(open panel)</span></span>
+			<span class="pull-right expander"> ↓ <span class="hide">(open panel)</span></span>
 			Warnings ( {{mainResult.count.warning}} )
 		</div>
 		<div class="task-warning tasks-list collapse clearfix" id="warnings-list">
@@ -145,7 +145,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 
 	{{#if mainResult.count.notice}}
 		<div class="heading label-info pointer" id="notices" data-test="task-notices" data-role="expander" role="button" tabindex="0" aria-expanded="false" aria-controls="notices-list">
-			<span class="pull-right expander"> + <span class="hide">(open panel)</span></span>
+			<span class="pull-right expander"> ↓ <span class="hide">(open panel)</span></span>
 			Notices ( {{mainResult.count.notice}} )
 		</div>
 		<div class="task-info tasks-list collapse clearfix" id="notices-list">
@@ -180,7 +180,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 
 	{{#if mainResult.ignore.length}}
 		<div class="heading label-default pointer" id="ignore" data-role="expander" role="button" tabindex="0" aria-expanded="false" aria-controls="ignore-list">
-			<span class="pull-right expander"> + <span class="hide">(open panel)</span></span>
+			<span class="pull-right expander"> ↓ <span class="hide">(open panel)</span></span>
 			Ignored Rules ( {{mainResult.ignore.length}} )
 		</div>
 		<div class="task-default tasks-list collapse clearfix" id="ignore-list">

view/presenter/task.js

@@ -35,6 +35,13 @@ function presentTask(task) {
 	// Enhance the ignored rules
 	task.ignore = presentIgnoreRules(task.ignore);
 
+	// Change headers to a string format
+	if (task.headers && typeof task.headers === 'object') {
+		task.headers = Object.keys(task.headers).map(header => {
+			return `${header}: ${task.headers[header]}`;
+		}).join('\n');
+	}
+
 	// Present the last result if present
 	if (task.last_result) {
 		task.lastResult = presentResult(task.last_result);

view/task/edit.html

@@ -50,7 +50,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 		<div class="row">
 			<div class="col-md-8 col-sm-8 col-xs-10">
 				<label class="control-label" for="new-task-name">Name</label>
-				<input class="form-control" id="new-task-name" type="text" placeholder="E.g. My Home Page" name="name" value="{{task.name}}"/>
+				<input class="form-control" id="new-task-name" type="text" required placeholder="E.g. My Home Page" name="name" value="{{task.name}}"/>
 			</div>
 		</div>
 	</div>
@@ -59,7 +59,7 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 		<div class="row">
 			<div class="col-md-8 col-sm-8 col-xs-10">
 				<label class="control-label" for="new-task-url">URL</label>
-				<input class="form-control" id="new-task-url" type="url" placeholder="E.g. http://mysite.com/" name="url" value="{{task.url}}" disabled/>
+				<input class="form-control" id="new-task-url" type="url" required pattern="https?:\/\/.+" placeholder="E.g. http://mysite.com/" name="url" value="{{task.url}}" disabled/>
 			</div>
 		</div>
 	</div>
@@ -114,6 +114,25 @@ along with Pa11y Dashboard.  If not, see <http://www.gnu.org/licenses/>.
 		</div>
 	</div>
 
+	<div class="form-group clearfix">
+		<div class="row">
+			<div class="col-md-4 col-sm-4 col-xs-6">
+				<label class="control-label" for="new-task-headers">HTTP Headers</label>
+				<textarea class="form-control" id="new-task-headers" name="headers" placeholder="Cookie: foo=bar">{{task.headers}}</textarea>
+				<em>(As key/value pairs, separated by newlines/colons)</em>
+			</div>
+		</div>
+	</div>
+
+	<div class="form-group clearfix">
+		<div class="row">
+			<div class="col-md-4 col-sm-4 col-xs-6">
+				<label class="control-label" for="new-task-hide-elements">Hide Elements</label>
+				<input class="form-control" id="new-task-hide-elements" type="text" name="hideElements" value="{{task.hideElements}}" placeholder=".advert, #modal, div[aria-role=presentation]"/> <em>(CSS selector)</em>
+			</div>
+		</div>
+	</div>
+
 	<p class="control-label"><b>Ignore these rules</b> <a target="_blank" href="https://github.com/pa11y/pa11y/wiki/HTML-CodeSniffer-Rules">(full list of rules here)</a></p>
 
 	<div class="standards-lists">