Rewrite all the tests

eligrey · Jul 30, 2017 · c225d67 · c225d67
1 parent 5bbfee6
commit c225d67
Show file tree

Hide file tree

Showing 13 changed files with 283 additions and 183 deletions.
diff --git a/script/test b/script/test
diff --git a/test/specs/add.html b/test/specs/add.html
@@ -8,17 +8,21 @@
 
  <h1>classList.add</h1>
 
- <div id="native"></div>
+ <div id="native-simple"></div>
+ <div id="native-ab"></div>
  <script>
  try {
- document.getElementById('native').classList.add('supported');
+ document.getElementById('native-simple').classList.add('supported');
+ document.getElementById('native-ab').classList.add('a', 'b');
  } catch(e) {};
  </script>
 
- <div id="polyfilled"></div>
+ <div id="polyfilled-simple"></div>
+ <div id="polyfilled-ab"></div>
  <script src="/classList.js"></script>
  <script>
- document.getElementById('polyfilled').classList.add('all-good');
+ document.getElementById('polyfilled-simple').classList.add('all-good');
+ document.getElementById('polyfilled-ab').classList.add('a', 'b');
  </script>
 
  </body>

diff --git a/test/specs/add.js b/test/specs/add.js
@@ -4,13 +4,24 @@ describe('.classList.add', function() {
 
  before(function() {
  browser.url('test/specs/add.html');
- if(browser.getAttribute('#native', 'class') === 'supported') {
+ const ab = browser.getAttribute('#native-ab', 'class');
+ if(
+ browser.getAttribute('#native-simple', 'class') === 'supported' &&
+ ab.includes('a') && ab.includes('b')
+ ) {
  browser.logger.info(`${agent} skipping .add`);
  this.skip();
  }
  });
 
  it('adds class "all-good"', function() {
- expect(browser.getAttribute('#polyfilled', 'class')).to.equal('all-good');
+ const classStr = browser.getAttribute('#polyfilled-simple', 'class');
+ expect(classStr).to.equal('all-good');
+ });
+
+ it('adds classes "a" and "b"', function() {
+ const ab = browser.getAttribute('#polyfilled-ab', 'class');
+ expect(ab).to.include('a');
+ expect(ab).to.include('b');
  });
 });
diff --git a/test/specs/remove.html b/test/specs/remove.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>classList.remove</title>
+ </head>
+ <body>
+
+ <h1>classList.remove</h1>
+
+ <div id="native-simple" class="hi yo"></div>
+ <div id="native-repeat" class="yo yo yo"></div>
+ <div id="native-list" class="hi yo hello"></div>
+ <script>
+ try {
+ document.getElementById('native-simple').classList.remove('yo');
+ document.getElementById('native-repeat').classList.remove('yo');
+ document.getElementById('native-list').classList.remove('yo');
+ } catch(e) {};
+ </script>
+
+ <div id="polyfilled-simple" class="hi yo"></div>
+ <div id="polyfilled-repeat" class="yo yo yo"></div>
+ <div id="polyfilled-list" class="hi yo hello"></div>
+ <script src="/classList.js"></script>
+ <script>
+ document.getElementById('polyfilled-simple').classList.remove('yo');
+ document.getElementById('polyfilled-repeat').classList.remove('yo');
+ document.getElementById('polyfilled-list').classList.remove('yo');
+ </script>
+
+ </body>
+</html>
diff --git a/test/specs/remove.js b/test/specs/remove.js
@@ -0,0 +1,30 @@
+'use strict';
+
+describe('.classList.remove', function() {
+
+ before(function() {
+ browser.url('test/specs/remove.html');
+ if(
+ browser.getAttribute('#native-simple', 'class') === 'hi' &&
+ browser.getAttribute('#native-repeat', 'class') === '' &&
+ browser.getAttribute('#native-list', 'class').includes('yo') == false
+ ) {
+ browser.logger.info(`${agent} skipping .remove`);
+ this.skip();
+ }
+ });
+
+ it('removes "yo"', function() {
+ expect(browser.getAttribute('#polyfilled-simple', 'class')).to.equal('hi');
+ });
+
+ it('removes all instances of "yo"', function() {
+ expect(browser.getAttribute('#polyfilled-repeat', 'class')).to.equal('');
+ });
+
+ it('removes "yo" from a list of classes', function() {
+ const classStr = browser.getAttribute('#polyfilled-list', 'class');
+ expect(classStr).to.not.include('yo');
+ });
+
+});
diff --git a/test/specs/svg.html b/test/specs/svg.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>svgElement.classList</title>
+ <style>
+ .red {
+ fill: red;
+ }
+ .green {
+ fill: green;
+ }
+ </style>
+ </head>
+ <body>
+
+ <h1>svgElement.classList</h1>
+
+ <svg id="native" class="red" xmlns="http://www.w3.org/2000/svg">
+ <path d="M50,3l12,36h38l-30,22l11,36l-31-21l-31,21l11-36l-30-22h38z">
+ </svg>
+
+ <script>
+ try {
+ document.getElementById('native').classList.remove('red');
+ document.getElementById('native').classList.toggle('green');
+ } catch(e) {};
+ </script>
+
+ <svg id="polyfilled" class="red" xmlns="http://www.w3.org/2000/svg">
+ <path d="M50,3l12,36h38l-30,22l11,36l-31-21l-31,21l11-36l-30-22h38z">
+ </svg>
+
+ <script src="/classList.js"></script>
+ <script>
+ document.getElementById('polyfilled').classList.remove('red');
+ document.getElementById('polyfilled').classList.toggle('green');
+ </script>
+
+ </body>
+</html>
diff --git a/test/specs/svg.js b/test/specs/svg.js
@@ -0,0 +1,18 @@
+'use strict';
+
+describe('svgElement.classList', function() {
+
+ before(function() {
+ browser.url('test/specs/svg.html');
+ if(browser.getAttribute('#native', 'class') == 'green') {
+ browser.logger.info(`${agent} skipping svg .classList`);
+ this.skip();
+ }
+ });
+
+ it('has "red" removed and "green" toggled on', function() {
+ const classStr = browser.getAttribute('#polyfilled', 'class');
+ expect(classStr).to.equal('green');
+ });
+
+});
diff --git a/test/specs/toggle.html b/test/specs/toggle.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>classList.toggle</title>
+ </head>
+ <body>
+
+ <h1>classList.remove</h1>
+
+
+ <div id="native-on"></div>
+ <div id="native-off" class="yo"></div>
+ <div id="native-force-on" class="yo"></div>
+ <div id="native-force-off"></div>
+ <script>
+ try {
+ var el;
+
+ el = document.getElementById('native-on')
+ window.nativeToggleOn = el.classList.toggle('yo');
+
+ el = document.getElementById('native-off')
+ window.nativeToggleOff = el.classList.toggle('yo');
+
+ el = document.getElementById('native-force-on');
+ window.nativeToggleForceOn = el.classList.toggle('yo', true);
+
+ el = document.getElementById('native-force-off');
+ window.nativeToggleForceOff = el.classList.toggle('yo', false);
+
+ } catch(e) {};
+ </script>
+
+
+ <div id="polyfilled-on"></div>
+ <div id="polyfilled-off" class="yo"></div>
+ <div id="polyfilled-force-on" class="yo"></div>
+ <div id="polyfilled-force-off"></div>
+ <script src="/classList.js"></script>
+ <script>
+ var el;
+
+ el = document.getElementById('polyfilled-on')
+ window.polyfilledToggleOn = el.classList.toggle('yo');
+
+ el = document.getElementById('polyfilled-off')
+ window.polyfilledToggleOff = el.classList.toggle('yo');
+
+ el = document.getElementById('polyfilled-force-on');
+ window.polyfilledToggleForceOn = el.classList.toggle('yo', true);
+
+ el = document.getElementById('polyfilled-force-off');
+ window.polyfilledToggleForceOff = el.classList.toggle('yo', false)
+ </script>
+
+
+ </body>
+</html>
diff --git a/test/specs/toggle.js b/test/specs/toggle.js
@@ -0,0 +1,81 @@
+'use strict';
+
+describe('.classList.toggle', function() {
+
+ before(function() {
+ browser.url('test/specs/toggle.html');
+ if(
+ browser.getAttribute('#native-on', 'class') === 'yo' &&
+ browser.getAttribute('#native-off', 'class') === '' &&
+ browser.getAttribute('#native-force-on', 'class') == 'yo' &&
+ browser.getAttribute('#native-force-off', 'class') == ''
+ ) {
+ browser.logger.info(`${agent} skipping .toggle`);
+ this.skip();
+ }
+ });
+
+ it('adds class "yo"', function() {
+ const classStr = browser.getAttribute('#polyfilled-on', 'class');
+ expect(classStr).to.equal('yo');
+ });
+
+ it('removes class "yo"', function() {
+ const classStr = browser.getAttribute('#polyfilled-off', 'class');
+ expect(classStr).to.equal('');
+ });
+
+ it('retains class "yo" when force is `true`', function() {
+ const classStr = browser.getAttribute('#polyfilled-force-on', 'class');
+ expect(classStr).to.equal('yo');
+ });
+
+ it('does not add a class when force is `false`', function() {
+ const classStr = browser.getAttribute('#polyfilled-force-off', 'class');
+ expect(classStr).to.equal('');
+ });
+
+});
+
+
+describe('.classList.toggle return', function() {
+
+ before(function() {
+ browser.url('test/specs/toggle.html');
+ const toggleOn = browser.execute('return window.nativeToggleOn').value;
+ const toggleOff = browser.execute('return window.nativeToggleOff').value;
+ const toggleForceOn = browser.execute('return window.nativeToggleForceOn').value;
+ const toggleForceOff = browser.execute('return window.nativeToggleForceOff').value;
+
+ if(
+ toggleOn === true &&
+ toggleOff === false &&
+ toggleForceOn === true &&
+ toggleForceOff === false
+ ) {
+ browser.logger.info(`${agent} skipping .toggle return`);
+ this.skip();
+ }
+ });
+
+ it('is `true` when class is toggled on', function() {
+ const returnVal = browser.execute('return window.polyfilledToggleOn').value;
+ expect(returnVal).to.equal(true);
+ });
+
+ it('is `false` when class is toggled off', function() {
+ const returnVal = browser.execute('return window.polyfilledToggleOff').value;
+ expect(returnVal).to.equal(false);
+ });
+
+ it('is `true` when force is `true`', function() {
+ const returnVal = browser.execute('return window.polyfilledToggleForceOn').value;
+ expect(returnVal).to.equal(true);
+ });
+
+ it('is `false` when force is `false`', function() {
+ const returnVal = browser.execute('return window.polyfilledToggleForceOff').value;
+ expect(returnVal).to.equal(false);
+ });
+
+});
diff --git a/tests/qunit.html b/tests/qunit.html
diff --git a/tests/remove.js b/tests/remove.js