feat(a11yPlugin): add success/fail tests

angular · Feb 24, 2015 · 486a2e0 · 486a2e0
1 parent 097cbbf
commit 486a2e0
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 36 deletions.
diff --git a/plugins/accessibility/index.js b/plugins/accessibility/index.js
@@ -43,34 +43,48 @@ function teardown(config) {
     return browser.executeScript_(data, 'a11y developer tool rules').then(function(results) {
 
       var audit = results.map(function(result) {
-
         var DOMElements = result.elements;
         if (DOMElements !== undefined) {
+
           DOMElements.forEach(function(elem) {
-            // get elements from WebDriver
+            // get elements from WebDriver, add to promises array
             elementPromises.push(
               elem.getOuterHtml().then(function(text) {
-                return '\n\t\t' + text;
+                return {
+                  code: result.rule.code,
+                  list: text
+                };
               })
             );
           });
+          result.elementCount = DOMElements.length;
         }
-
-        if (result.result === 'FAIL') {
-          result.passed = false;
-          testOut.failedCount++;
-        }
-        else {
-          result.passed = true;
-        }
-
         return result;
       });
 
       // Wait for element names to be fetched
-      return q.all(elementPromises).then(function(message) {
-        audit.forEach(function(result) {
-          result.message = message;
+      return q.all(elementPromises).then(function(elementFailures) {
+
+        audit.forEach(function(result, index) {
+          if (result.result === 'FAIL') {
+            result.passed = false;
+            testOut.failedCount++;
+
+            var label = result.elementCount === 1 ? ' element ' : ' elements ';
+            result.message = '\n\t\t' + result.elementCount + label + 'failed:';
+
+            // match elements returned via promises
+            // by their failure codes
+            elementFailures.forEach(function(element, index) {
+              if (element.code === result.rule.code) {
+                result.message += '\n\t\t' + elementFailures[index].list;
+              }
+            });
+          }
+          else {
+            result.passed = true;
+            result.message = null;
+          }
           result.message += '\n\n\t\t' + result.rule.url;
 
           testOut.specResults.push({

diff --git a/plugins/accessibility/spec/fail_spec.js b/plugins/accessibility/spec/fail_spec.js
@@ -1,6 +1,5 @@
 describe('check if accessibility plugin works on bad apps', function() {
-  it('should have accessibility problems on bad apps', function() {
-    browser.get('accessibility/noContent.html');
-    browser.get('accessibility/unused.html');
+  it('should have accessibility problems on markup', function() {
+    browser.get('accessibility/badMarkup.html');
   });
 });
diff --git a/testapp/accessibility/unused.html → testapp/accessibility/badMarkup.html b/testapp/accessibility/unused.html → testapp/accessibility/badMarkup.html
@@ -16,5 +16,6 @@
     Last name:<input ng-model="lastName" type="text"/>
     <br>
     Hello {{firstName}} {{lastName}}
+    <img src="http://example.com/img.jpg">
   </body>
 </html>
diff --git a/testapp/accessibility/index.html b/testapp/accessibility/index.html
@@ -10,11 +10,14 @@
       angular.module('xApp', []);
     </script>
   </head>
-  <body class="a11y">
-    First name:<input ng-model="firstName" type="text"/>
+  <body>
+    <label for="firstName">First name:</label>
+    <input ng-model="firstName" type="text" id="firstName" />
     <br>
-    Last name:<input ng-model="lastName" type="text"/>
+    <label for="lastName">Last name:</label>
+    <input ng-model="lastName" type="text" id="lastName" />
     <br>
     Hello {{firstName}} {{lastName}}
+    <img src="http://example.com/img.jpg" alt="{{firstName}} {{lastName}}">
   </body>
 </html>
diff --git a/testapp/accessibility/noContent.html b/testapp/accessibility/noContent.html