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');
+ });
+
+});