eligrey · beck · Jul 30, 2017 · Jul 30, 2017 · Jul 30, 2017 · Jul 30, 2017
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,6 @@
+/user.json
+/wdio.*.js
+classlist.js-*.tgz
+node_modules/
+package-lock.json
+package/
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,6 @@
+.travis.yml
+classlist.js-*.tgz
+package/
+test/
+user.json
+wdio.*.js
diff --git a/.travis.yml b/.travis.yml
@@ -1,4 +1,4 @@
-script: script/test
+script: npm run test:ci
 language: node_js
 node_js:
-- '0.10'
+- 6
diff --git a/README.md b/README.md
@@ -1,18 +1,56 @@
-classList.js is a cross-browser JavaScript shim that fully implements `element.classList`. Refer to [the MDN page on `element.classList`][1] for more information.
+# classList.js
 
-This works in every browser except IE 7 or earlier.
+[![Test Status](https://saucelabs.com/buildstatus/classlist-polyfill)][sauce]
 
-classList.js is available on these public CDN URLs, allowing you to use this already small file at nearly zero size overhead.
+[sauce]: https://saucelabs.com/u/classlist-polyfill
 
-  - <https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.20171210/classList.min.js>
-  - <https://cdn.jsdelivr.net/npm/[email protected]/classList.min.js>
+Cross-browser JavaScript shim that fully implements `element.classList`.
 
-If you would like other versions (such as the current one) hosted there, follow the instructions at 
-https://github.com/jsdelivr/jsdelivr
-and
-https://github.com/cdnjs/cdnjs
-to prepare a pull request.
+Refer to [the MDN page on `element.classList`][MDN] for more information.
 
-![Tracking image](https://in.getclicky.com/212712ns.gif)
+[MDN]: https://developer.mozilla.org/en/DOM/element.classList
 
-  [1]: https://developer.mozilla.org/en/DOM/element.classList "MDN / DOM / element.classList"
+
+## Development
+
+### Getting started
+
+```
+npm install
+```
+
+### Run the tests using a local web driver
+
+```
+npm test
+```
+
+### Run the tests using cloud browsers
+
+Requires a [Sauce Labs][] username and access key.
+
+```
+echo '{"user": "<username>", "key": "<access key>" }' > user.json
+npm test:ci
+```
+
+[Sauce Labs]: https://saucelabs.com/
+
+### Run the tests using custom configuration
+
+The tests use [webdriver.io][].
+
+Create a `wdio.conf.js`:
+
+```
+wdio config
+# or extend an existing config
+cp test/wdio.sample.js wdio.conf.js
+```
+
+Run the tests:
+```
+wdio
+```
+
+[webdriver.io]: http://webdriver.io/
diff --git a/package.json b/package.json
@@ -4,10 +4,11 @@
   "description": "Cross-browser JavaScript shim that fully implements element.classList (referenced on MDN)",
   "main": "classList.js",
   "directories": {
-    "test": "tests"
+    "test": "wdio test/wdio.local.js"
   },
   "scripts": {
-    "test": "bash ./script/test"
+    "test": "wdio test/wdio.standalone.js",
+    "test:ci": "wdio test/wdio.sauce.js"
   },
   "repository": {
     "type": "git",
@@ -20,9 +21,32 @@
     "cross-browser"
   ],
   "author": "[email protected]",
+  "contributors": [
+    "Eli Grey <[email protected]>",
+    "Doug Beck <[email protected]>"
+  ],
   "license": "Unlicense",
   "bugs": {
     "url": "https://github.com/eligrey/classList.js/issues"
   },
-  "homepage": "https://github.com/eligrey/classList.js#readme"
+  "homepage": "https://github.com/eligrey/classList.js#readme",
+  "jshintConfig": {
+    "esnext": true,
+    "node": true,
+    "mocha": true,
+    "globals": {
+      "agent": true,
+      "browser": true,
+      "expect": true
+    }
+  },
+  "devDependencies": {
+    "chai": "^4.1.0",
+    "wdio-mocha-framework": "^0.5.10",
+    "wdio-sauce-service": "^0.4.0",
+    "wdio-selenium-standalone-service": "0.0.9",
+    "wdio-spec-reporter": "^0.1.0",
+    "wdio-static-server-service": "^1.0.1",
+    "webdriverio": "^4.8.0"
+  }
 }
diff --git a/script/test b/script/test
diff --git a/test/specs/add.html b/test/specs/add.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>classList.add</title>
+  </head>
+  <body>
+
+    <h1>classList.add</h1>
+
+    <div id="native-simple"></div>
+    <div id="native-ab"></div>
+    <script>
+      try {
+        document.getElementById('native-simple').classList.add('supported');
+        document.getElementById('native-ab').classList.add('a', 'b');
+      } catch(e) {};
+    </script>
+
+    <div id="polyfilled-simple"></div>
+    <div id="polyfilled-ab"></div>
+    <script src="/classList.js"></script>
+    <script>
+      document.getElementById('polyfilled-simple').classList.add('all-good');
+      document.getElementById('polyfilled-ab').classList.add('a', 'b');
+    </script>
+
+  </body>
+</html>
diff --git a/test/specs/add.js b/test/specs/add.js
@@ -0,0 +1,27 @@
+'use strict';
+
+describe('.classList.add', function() {
+
+  before(function() {
+    browser.url('test/specs/add.html');
+    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() {
+    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');
+  });
+
+});