Rewrote the whole test suite

edenspiekermann · Mar 15, 2016 · ecc116e · ecc116e
1 parent cad70e1
commit ecc116e
Show file tree

Hide file tree

Showing 4 changed files with 206 additions and 47 deletions.
diff --git a/README.md b/README.md
@@ -56,7 +56,7 @@ Then add this in your stylesheet (feel free to scope or restrict it):
 
 ## Tests
 
-[CasperJS](http://casperjs.org) is being used to run browser tests. CasperJS has some [dependencies](http://docs.casperjs.org/en/latest/installation.html#prerequisites) that have to be installed manually. Be sure to satisfy them before running the tests.
+[Mocha](https://mochajs.org/) and [expect.js](https://github.com/Automattic/expect.js) are used to run browser tests.
 
 ```
 npm test

diff --git a/package.json b/package.json
@@ -25,10 +25,10 @@
     "predeploy": "npm run build",
     "deploy": "git subtree push --prefix example origin gh-pages",
     "lint": "semistandard a11y-toggle.js",
-    "test": "casperjs test tests/index.js"
+    "test": "open tests/index.html"
   },
   "devDependencies": {
-    "casperjs": "^1.1.0-beta5",
+    "mocha": "^2.4.5",
     "semistandard": "^7.0.5",
     "uglify-js": "^2.6.1"
   }

diff --git a/tests/index.html b/tests/index.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <style>.test-suite, [aria-hidden="true"] { display: none; }</style>
+    <meta charset="utf-8">
+    <title>Mocha Tests</title>
+    <link href="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div id="mocha"></div>
+
+    <div class="test-suite">
+      <div class="test test-0">
+        <button data-a11y-toggle="t0" type="button">Toggle</button>
+        <div id="t0">Target</div>
+      </div>
+
+      <div class="test test-1">
+        <button data-a11y-toggle="t1" type="button" id="custom-id-1">Toggle</button>
+        <div id="t1">Target</div>
+      </div>
+
+      <div class="test test-2">
+        <button data-a11y-toggle="t2" type="button">Toggle</button>
+        <div id="t2">Target</div>
+      </div>
+
+      <div class="test test-3">
+        <button data-a11y-toggle="t3" type="button" aria-expanded="false">Toggle</button>
+        <div id="t3">Target</div>
+      </div>
+
+      <div class="test test-4">
+        <button data-a11y-toggle="t4" type="button">Toggle</button>
+        <div id="t4">Target</div>
+      </div>
+
+      <div class="test test-5">
+        <button data-a11y-toggle="t5" type="button">Toggle</button>
+        <div id="t5">Target</div>
+      </div>
+
+      <div class="test test-6">
+        <button data-a11y-toggle="t6" type="button" id="toggle-t6" aria-expanded="false">Toggle</button>
+        <div id="t6" aria-hidden="true">Target</div>
+      </div>
+
+      <div class="test test-7">
+        <button data-a11y-toggle="t7" type="button" id="custom-id-2">Toggle</button>
+        <div id="t7">Target</div>
+      </div>
+
+      <div class="test test-8">
+        <button data-a11y-toggle="t8" type="button" id="custom-id-3">Toggle</button>
+        <button data-a11y-toggle="t8" type="button" id="custom-id-4">Toggle</button>
+        <div id="t8">Target</div>
+      </div>
+
+      <div class="test test-9">
+        <button data-a11y-toggle="t9" type="button" id="custom-id-5">Toggle</button>
+        <div id="t9" aria-labelledby="custom-id-5">Target</div>
+      </div>
+
+      <div class="test test-10">
+        <button data-a11y-toggle="t10" type="button">Toggle</button>
+        <div id="t10">Target</div>
+      </div>
+
+      <div class="test test-11">
+        <button data-a11y-toggle="t11" type="button">Toggle</button>
+        <div id="t11">Target</div>
+      </div>
+
+      <div class="test test-12">
+        <button data-a11y-toggle="t12" type="button">Toggle</button>
+        <button data-a11y-toggle="t12" type="button" id="custom-id-6">Toggle</button>
+        <div id="t12">Target</div>
+      </div>
+
+      <div class="test test-13">
+        <button data-a11y-toggle="t13" type="button"><span>Toggle</span></button>
+        <div id="t13">Target</div>
+      </div>
+    </div>
+
+    <script src="../a11y-toggle.js"></script>
+    <script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script>
+    <script src="https://cdn.rawgit.com/Automattic/expect.js/0.3.1/index.js"></script>
+    <script>mocha.setup('bdd')</script>
+    <script src="./index.js"></script>
+    <script>
+      mocha.checkLeaks();
+      mocha.run();
+    </script>
+  </body>
+
+</html>
diff --git a/tests/index.js b/tests/index.js
@@ -1,46 +1,106 @@
-/* global casper */
-
-casper.test.begin('Toggle test suite', 8, function (test) {
-  casper.start('http://edenspiekermann.github.io/a11y-toggle/', function () {
-    this.page.onConsoleMessage = function (msg, lineNum, sourceId) {
-      console.log('CONSOLE: ' + msg);
-    };
-
-    this.page.injectJs('../a11y-toggle.js');
-    this.emit('page.loaded');
-  });
-
-  casper.on('page.loaded', function () {
-    var toggleA = '[data-a11y-toggle="toggled-1"]';
-    var toggleB = '[data-a11y-toggle="toggled-2"][aria-expanded="true"]';
-    var targetA = '#toggled-1';
-    var targetB = '#toggled-2[aria-hidden="false"]';
-
-    this.then(function () {
-      this.echo('\nTest initial setup');
-      test.assertExist(toggleA);
-      test.assertExist(toggleB);
-      test.assertExist(targetA);
-      test.assertExist(targetB);
-    });
-
-    this.then(function () {
-      this.echo('\nTest expanding content');
-      this.click(toggleA);
-      test.assertExist(toggleA + '[aria-expanded="true"]');
-      test.assertExist(targetA + '[aria-hidden="false"]');
-    });
-
-    this.then(function () {
-      this.echo('\nTest collapsing content');
-      this.click(toggleB);
-      test.assertExist(toggleB.replace('true', 'false'));
-      test.assertExist(targetB.replace('false', 'true'));
-    });
-  });
-
-  casper.run(function () {
-    this.test.done();
-    this.exit();
+describe('Initial setup', function () {
+  var toggle, target;
+  var actual, expected;
+
+  it('should add `id` attribute to toggle if not set', function () {
+    actual = document.querySelector('[data-a11y-toggle="t0"]').id;
+    expected = 'a11y-toggle-0';
+    expect(actual).to.be.equal(expected);
+  });
+
+  it('should not add `id` attribute to toggle if already set', function () {
+    actual = document.querySelector('[data-a11y-toggle="t1"]').id;
+    expected = 'custom-id-1';
+    expect(actual).to.be.equal(expected);
+  });
+
+  it('should add `aria-expanded` attribute to toggle if not set', function () {
+    actual = document.querySelector('[data-a11y-toggle="t2"]').getAttribute('aria-expanded');
+    expected = 'true';
+    expect(actual).to.be.equal(expected);
+  });
+
+  it('should not add `aria-expanded` attribute to toggle if already set', function () {
+    actual = document.querySelector('[data-a11y-toggle="t3"]').getAttribute('aria-expanded');
+    expected = 'false';
+    expect(actual).to.be.equal(expected);
+  });
+
+  it('should transpose `data-a11y-toggle` into `aria-controls` attribute to toggle', function () {
+    actual = document.querySelector('[data-a11y-toggle="t4"]').getAttribute('aria-controls');
+    expected = document.querySelector('[data-a11y-toggle="t4"]').getAttribute('data-a11y-toggle');
+    expect(actual).to.be.equal(expected);
+  });
+
+  it('should add `aria-hidden` attribute to target if not set', function () {
+    actual = document.querySelector('#t5').getAttribute('aria-hidden');
+    expected = 'false';
+    expect(actual).to.be.equal(expected);
+  });
+
+  it('should not add `aria-hidden` attribute to target if already set', function () {
+    actual = document.querySelector('#t6').getAttribute('aria-hidden');
+    expected = 'true';
+    expect(actual).to.be.equal(expected);
+  });
+
+  it('should add `aria-labelledby` attribute to target if not set', function () {
+    actual = document.querySelector('#t7').getAttribute('aria-labelledby');
+    expected = 'custom-id-2';
+    expect(actual).to.be.equal(expected);
+  });
+
+  it('should add `aria-labelledby` attribute to target if not set with multiple toggles', function () {
+    actual = document.querySelector('#t8').getAttribute('aria-labelledby');
+    expected = 'custom-id-3 custom-id-4';
+    expect(actual).to.be.equal(expected);
+  });
+
+  it('should not add `aria-labelledby` attribute to target if already set', function () {
+    actual = document.querySelector('#t9').getAttribute('aria-labelledby');
+    expected = 'custom-id-5';
+    expect(actual).to.be.equal(expected);
+  });
+});
+
+describe('Click events', function () {
+  var actual, expected;
+
+  it('should toggle `aria-hidden` attribute on target when clicked', function () {
+    var toggle = document.querySelector('[data-a11y-toggle="t10"]');
+    var target = document.querySelector('#t10');
+    toggle.click();
+
+    actual = target.getAttribute('aria-hidden');
+    expected = 'true';
+    expect(actual).to.be.equal(expected);
+  });
+
+  it('should toggle `aria-expanded` attribute on toggled when clicked', function () {
+    var toggle = document.querySelector('[data-a11y-toggle="t11"]');
+    toggle.click();
+
+    actual = toggle.getAttribute('aria-expanded');
+    expected = 'false';
+    expect(actual).to.be.equal(expected);
+  });
+
+  it('should toggle `aria-expanded` attribute on related toggles when one clicked', function () {
+    var toggle = document.querySelector('[data-a11y-toggle="t12"]');
+    var toggleB = document.querySelector('#custom-id-6');
+    toggle.click();
+
+    actual = toggleB.getAttribute('aria-expanded');
+    expected = 'false';
+    expect(actual).to.be.equal(expected);
+  });
+
+  it('should work correctly with nested DOM in toggle', function () {
+    var toggle = document.querySelector('[data-a11y-toggle="t13"]');
+    toggle.click();
+
+    actual = toggle.getAttribute('aria-expanded');
+    expected = 'false';
+    expect(actual).to.be.equal(expected);
   });
 });