tests: migrate to mocha-headless-chrome

diff --git a/js/foundation.abide.js b/js/foundation.abide.js
index d6ad376962506222b67b9f66f52f539ec9804d13..2478ab7aae1e68fc8f400f59ba5b4bd35a531899 100644 (file)
--- a/js/foundation.abide.js
+++ b/js/foundation.abide.js
@@ -192,7 +192,66 @@ class Abide extends Plugin {
       $formError.addClass(this.options.formErrorClass);
     }
 
-    $el.addClass(this.options.inputErrorClass).attr('data-invalid', '');
+    $el.addClass(this.options.inputErrorClass).attr({
+      'data-invalid': '',
+      'aria-invalid': true
+    });
+  }
+
+  /**
+   * Adds [for] and [role=alert] attributes to all form error targetting $el,
+   * and [aria-describedby] attribute to $el toward the first form error.
+   * @param {Object} $el - jQuery object
+   */
+  addA11yAttributes($el) {
+    let $errors = this.findFormError($el);
+    let $labels = $errors.filter('label').end();
+    let $error = $errors.first().end();
+    if (!$errors.length) return;
+
+    // Set [aria-describedby] on the input toward the first form error if it is not set
+    if (typeof $el.attr('aria-describedby') === 'undefined') {
+      // Get the first error ID or create one
+      let errorId = $error.attr('id');
+      if (typeof errorId === 'undefined') {
+        errorId = GetYoDigits(6, 'abide-error');
+        $error.attr('id', errorId);
+      };
+
+      $el.attr('aria-describedby', errorId);
+    }
+
+    if ($labels.filter('[for]').length < $labels.length) {
+      // Get the input ID or create one
+      let elemId = $el.attr('id');
+      if (typeof elemId === 'undefined') {
+        elemId = GetYoDigits(6, 'abide-input');
+        $el.attr('id', elemId);
+      };
+
+      // For each label targeting $el, set [for] if it is not set.
+      $labels.each((i, label) => {
+        const $label = $(label);
+        if (typeof $label.attr('for') === 'undefined')
+          $label.attr('for', elemId);
+      }).end();
+    }
+
+    // For each error targeting $el, set [role=alert] if it is not set.
+    $errors.each((i, label) => {
+      const $label = $(label);
+      if (typeof $label.attr('role') === 'undefined')
+        $label.attr('role', 'alert');
+    }).end();
+  }
+
+  /**
+   * Adds [aria-live] attribute to the given global form error $el.
+   * @param {Object} $el - jQuery object to add the attribute to
+   */
+  addGlobalErrorA11yAttributes($el) {
+    if (typeof $el.attr('aria-live') === 'undefined')
+      $el.attr('aria-live', this.options.a11yErrorLevel);
   }
 
   /**

diff --git a/package.json b/package.json
index 9ba56f9a1c687fc525b14af62d06f69c88ba9a34..106e4b23bbb11d7d8ffaf01403028a170c4c140d 100644 (file)
--- a/package.json
+++ b/package.json
@@ -8,13 +8,13 @@
   "homepage": "http://foundation.zurb.com/sites",
   "scripts": {
     "start": "gulp",
-    "test": "npm run test:sass && npm run test:javascript:phantomjs",
+    "test": "npm run test:sass && npm run test:javascript:units",
     "test:ci": "npm run test:sass && npm run test:javascript:ci",
     "test:sass": "mocha test/sass/test_sass.js",
     "test:javascript:transpile": "gulp sass:foundation && gulp test:transpile-js",
-    "test:javascript:phantomjs": "npm run test:javascript:transpile && mocha-phantomjs --ignore-resource-errors test/javascript/index.html",
+    "test:javascript:units": "npm run test:javascript:transpile && mocha-headless-chrome -a ignore-resource-errors -f test/javascript/index.html",
     "test:javascript:browserstack": "npm run test:javascript:transpile && browserstack-runner",
-    "test:javascript:ci": "npm run test:javascript:transpile && mocha-phantomjs --ignore-resource-errors test/javascript/index.html && browserstack-runner",
+    "test:javascript:ci": "npm run test:javascript:transpile && mocha-headless-chrome -a ignore-resource-errors -f test/javascript/index.html && browserstack-runner",
     "test:visual": "gulp test",
     "deploy": "gulp deploy",
     "deploy:prep": "gulp deploy:prep",
@@ -79,7 +79,7 @@
     "is-empty-object": "^1.1.1",
     "js-yaml": "^3.8.4",
     "mocha": "^3.4.2",
-    "mocha-phantomjs": "^4.0.2",
+    "mocha-headless-chrome": "^1.8.2",
     "motion-ui": "^1.1.0",
     "multiline": "^1.0.2",
     "normalize-scss": "6.0.0",

diff --git a/test/javascript/components/offcanvas.js b/test/javascript/components/offcanvas.js
index a031723316844bd91d57625e9ce1eb592cc7f9fc..7938dbaf1726f0109d0bf6b87b8240db57d4e75d 100644 (file)
--- a/test/javascript/components/offcanvas.js
+++ b/test/javascript/components/offcanvas.js
@@ -104,7 +104,7 @@ describe('Off Canvas', function() {
           plugin.$element.should.have.class('is-open');
           $('body').should.have.class('is-off-canvas-open');
           done();
-        }, 1);
+        }, 30);
       });
 
       plugin.open();

diff --git a/test/javascript/util/box.js b/test/javascript/util/box.js
index 0f1073429cfedfc68a73dd6ebad85216d052d710..aedafed562d9a3b38d2b9c3a1af62005fd881e3c 100644 (file)
--- a/test/javascript/util/box.js
+++ b/test/javascript/util/box.js
@@ -33,8 +33,8 @@ describe('Foundation box', function () {
 
       var dims = Foundation.Box.GetDimensions($("#rect-test"));
 
-      dims.width.should.equal(200);
-      dims.height.should.equal(100);
+      Math.round(dims.width).should.equal(200); // Math.round fix for IE 11 (probably because of rem)
+      Math.round(dims.height).should.equal(100); // Math.round fix for IE 11 (probably because of rem)
     });
 
     it('parent height of element', function () {