VAGOV-1326 nightwatch-accessibility implemented with baseline accessibility test and npm install on build.

Author: schiavo

.lando.yml

@@ -13,6 +13,7 @@ events:
   # Runs composer install after app starts
   post-start:
     - appserver: cd $LANDO_MOUNT && composer install
+#    - appserver: cd $LANDO_MOUNT && npm install
 
   # After code changes
   post-update:
@@ -24,10 +25,10 @@ services:
     run_as_root:
       - "apt-get update -y"
       - "apt-get install build-essential chrpath libssl-dev libxft-dev libfreetype6-dev libfreetype6 libfontconfig1-dev libfontconfig1 -y"
-      - "tar xvjf /app/phantomjs-2.1.1-linux-x86_64.tar.bz2 -C /usr/local/share/"
-      - "mv /usr/local/share/phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/bin/"
-      - "cd /usr/bin"
-      - "chmod +x phantomjs"
+#      - "tar xvjf /app/phantomjs-2.1.1-linux-x86_64.tar.bz2 -C /usr/local/share/"
+#      - "mv /usr/local/share/phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/bin/"
+#      - "cd /usr/bin"
+#      - "chmod +x phantomjs"
     # Uncomment the below `xdebug: true` for Xdebug support
     # @todo Change this to pull in a local Lando settings variable and use that boolean variable
     # Run `lando rebuild` after uncommenting
@@ -40,7 +41,8 @@ services:
   node:
     type: node
     build:
-      - "cd $LANDO_MOUNT/docroot/themes/custom/vagov && npm install"
+      - npm install
+#      - "cd $LANDO_MOUNT/docroot/themes/custom/vagov && npm install"
     overrides:
       services:
         environment:
@@ -49,7 +51,6 @@ services:
         - 3000:3000
         - 3001:3001
       image: node:10.13-jessie
-
     globals:
       gulp-cli: "latest"
 tooling:
@@ -69,6 +70,11 @@ tooling:
     service: node
   node:
     service: node
+  nightwatch:
+    service: node
+    description: "Run nightwatch tests locally. Syntax: npm run-script nightwatch."
+    cmd:
+      - ./node_modules/.bin/nightwatch --tags accessibility
   gulp:
     service: node
   db-sync-stg:

Gruntfile.js

@@ -0,0 +1,39 @@
+'use strict';
+module.exports = function ( grunt ) {
+
+	require( 'load-grunt-tasks' )( grunt );
+
+	// Project configuration
+	grunt.initConfig( {
+
+		// Configure ESLint task
+		eslint: {
+			all: [
+				'**/*.js',
+				'!node_modules/**'
+			]
+		},
+
+		// Configure JSONLint task
+		jsonlint: {
+			all: [
+				'**/*.json',
+				'!node_modules/**'
+			]
+		},
+
+		// Configure Nightwatch task
+		nightwatch: {
+			options: {
+				// nightwatch settings
+				src_folders: [ 'tests' ], // eslint-disable-line camelcase
+				output_folder: 'report' // eslint-disable-line camelcase
+			}
+		}
+
+	} );
+
+	// Default tasks
+	grunt.registerTask( 'default', [ 'eslint', 'jsonlint' ] );
+
+};

globalsModule.js

@@ -0,0 +1,16 @@
+'use strict';
+var chromedriver = require( 'chromedriver' );
+module.exports = {
+
+	before: function ( done ) {
+		chromedriver.start();
+
+		done();
+	},
+
+	after: function ( done ) {
+		chromedriver.stop();
+
+		done();
+	}
+};

nightwatch.json

@@ -0,0 +1,46 @@
+{
+    "src_folders" : ["./tests/nightwatch/features"],
+    "output_folder" : "./tests/nightwatch/reports",
+    "custom_commands_path": ["./node_modules/nightwatch-accessibility/commands"],
+    "custom_assertions_path": ["./node_modules/nightwatch-accessibility/assertions"],
+    "page_objects_path" : "./tests/nightwatch/pageobjects",
+    "globals_path" : "globalsModule.js",
+
+    "selenium" : {
+        "start_process" : false,
+        "server_path" : "",
+        "log_path" : "",
+        "port" : 9515,
+        "cli_args" : {
+            "webdriver.chrome.driver" : "/usr/local/bin/chromedriver",
+            "webdriver.gecko.driver" : "",
+            "webdriver.edge.driver" : ""
+        }
+    },
+
+    "test_settings" : {
+        "default" : {
+            "launch_url" : "http://vagovcms.lndo.site/",
+            "selenium_port"  : 9515,
+            "selenium_host"  : "localhost",
+            "default_path_prefix" : "",
+            "silent": true,
+            "screenshots" : {
+                "enabled" : false,
+                "path" : ""
+            }
+        },
+        "desiredCapabilities": {
+            "browserName": "chrome",
+            "chromeOptions" : {
+                "args" : ["headless", "--no-sandbox"]
+            },
+            "acceptSslCerts": true
+        },
+        "chrome" : {
+            "desiredCapabilities": {
+                "browserName": "chrome"
+            }
+        }
+    }
+}

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "vagov",
+  "version": "1.0.0",
+  "description": "This is an Aquia Lightning based implementation of Drupal 8 that uses [Lando](https://docs.devwithlando.io/) for local container management.",
+  "main": "index.js",
+  "scripts": {
+    "nightwatch": "./node_modules/.bin/nightwatch --tag accessibility"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/department-of-veterans-affairs/va.gov-cms.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/department-of-veterans-affairs/va.gov-cms/issues"
+  },
+  "homepage": "https://github.com/department-of-veterans-affairs/va.gov-cms#readme",
+  "devDependencies": {
+    "chromedriver": "^2.46.0",
+    "eslint-config-wikimedia": "^0.10.1",
+    "grunt": "^1.0.3",
+    "grunt-eslint": "^21.0.0",
+    "grunt-jsonlint": "^1.1.0",
+    "grunt-nightwatch": "^0.5.4",
+    "load-grunt-tasks": "^4.0.0",
+    "nightwatch": "^1.0.18",
+    "nightwatch-accessibility": "^1.7.1"
+  }
+}

tests/accessibility/pa11y.js

@@ -0,0 +1,21 @@
+/**
+ * @file Run Axe accessibility tests with Nightwatch.
+ */
+// import "nightwatch-accessibility";
+
+module.exports = {
+    '@tags': ['accessibility'],
+    'Axe Test': function (browser) {
+        browser
+            .url('http://vagovcms.lndo.site') // Navigate to the url
+            .waitForElementVisible('body', 2000) // Wait until you can see the body element.
+            .initAccessibility()
+            .assert.accessibility('body', {
+            verbose: true,
+            rules: {
+                'color-contrast': { enabled: false }
+            }
+        })
+            .end()
+    }
+}