Skip to content

Commit

Permalink
v2 Refactor (#94)
Browse files Browse the repository at this point in the history
- Broke the tests up so they are separated by category instead of being in one big file. Test browsers are now run using Karma. I also improved the Sauce setup so it works more predictably. The [full matrix of browsers to test on Sauce can be found in karma.conf.js. We may want to slim this list down for most PRs because Sauce itself is quite flaky, particularly for things like connecting to test iOS devices.

- Removed all bundled polyfills for things like Node.contains, and Element.prototype.matches. Instead, we ask folks who need these polyfills to load them with polyfill.io. I updated the Readme to include the script they need to include to make this happen.

- Removed usage of for...of and replaced with forEach. I needed to do this because Babel transpiles for...of using Symbol (meaning we need yet another polyfill) and the Symbol polyfill was causing issues in IE11.

- Replaced Promise.resolve().then in async tests with a simple setTimeout(fn, 0). For whatever reason done() was never being called in IE11 in these async tests. Swapping out Promise with setTimeout did the trick.

- Added a workaround to inert.js to handle an IE11 blur() quirk.
  • Loading branch information
robdodson committed May 30, 2018
1 parent 14d31ed commit 60a96c5
Show file tree
Hide file tree
Showing 28 changed files with 5,825 additions and 2,403 deletions.
13 changes: 5 additions & 8 deletions .babelrc
@@ -1,13 +1,10 @@
{
"presets": [
[
"es2015",
{
"modules": false
["env", {
"modules": false,
"targets": {
"browsers": ["last 2 versions", "ie 9"]
}
]
],
"plugins": [
"external-helpers"
}]
]
}
2 changes: 0 additions & 2 deletions .eslintignore
@@ -1,3 +1 @@
rollup.config.js
dist/**/*.js
node_modules/**/*.js
3 changes: 2 additions & 1 deletion .gitignore
@@ -1,3 +1,4 @@
node_modules
.vscode
npm-debug.log
dist
.vscode
7 changes: 1 addition & 6 deletions .travis.yml
@@ -1,9 +1,4 @@
---
language: node_js
node_js:
- "6"

env:
global:
- SAUCE_USERNAME=robdodson_inert
- SAUCE_ACCESS_KEY=a844aee9-d3ec-4566-94e3-dba3d0c30248
- "8"
14 changes: 11 additions & 3 deletions README.md
Expand Up @@ -55,8 +55,8 @@ If you want to use `inert` with an older browser you'll need to include
additional polyfills for
[Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map),
[Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set),
and
[Element.prototype.matches](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches).
[Element.prototype.matches](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches),
and [Node.prototype.contains](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains).

In accordance with the W3C's new [polyfill
guidance](https://www.w3.org/2001/tag/doc/polyfills/#don-t-serve-unnecessary-polyfills),
Expand All @@ -67,7 +67,7 @@ to download only the polyfills needed by the current browser. Just add the
following line to the start of your page:

```html
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Map,Set,Element.prototype.matches"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Map,Set,Element.prototype.matches,Node.prototype.contains"></script>
```

### Performance and gotchas
Expand Down Expand Up @@ -102,3 +102,11 @@ Promise.resolve().then(() => {
complete, or consider using
[requestIdleCallback](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback)
to set `inert`.

# Testing

Tests are written using ES5 syntax. This is to avoid needing to transpile them
for older browsers. There are a few modern features they rely upon, e.g.
`Array.from` and `Promises`. These are polyfilled for the tests using
[Polyfill.io](http://polyfill.io/). For a list of polyfilled features, check out
the `polyfill` section in `karma.conf.js`.
2 changes: 1 addition & 1 deletion demo/index.html
Expand Up @@ -132,7 +132,7 @@ <h3>This inner section is <span class="inner-not">not</span> marked inert</h3>
</div>
</section>

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Map,Set,Element.prototype.matches"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Map,Set,Element.prototype.matches,Node.prototype.contains"></script>
<script src="https://unpkg.com/wicg-inert"></script>
<script>
var toggler = document.querySelector('#toggle');
Expand Down
151 changes: 151 additions & 0 deletions karma.conf.js
@@ -0,0 +1,151 @@
const path = require('path');

module.exports = function(config) {
config.set({
plugins: [
'karma-chrome-launcher',
'karma-firefox-launcher',
'karma-mocha',
'karma-chai',
'karma-polyfill',
'karma-spec-reporter',
'karma-sourcemap-loader',
'karma-fixture',
'karma-html2js-preprocessor',
'karma-sauce-launcher',
],
// Change this to 'Chrome' if you would like to debug.
// Can also add additional local browsers like 'Firefox'.
browsers: ['ChromeHeadless'],
// Set this to false to leave the browser open for debugging.
// You'll probably also need to remove the afterEach block in your tests
// so the content is not removed from the page you're trying to debug.
// To isolate a test, use `it.only`.
// https://mochajs.org/#exclusive-tests
singleRun: true,
// Use the mocha test framework with chai assertions.
// Use polyfills loaded from Polyfill.io.
// Use an html fixture loader.
frameworks: ['mocha', 'chai', 'polyfill', 'fixture'],
// List of polyfills to load from Polyfill.io.
polyfill: [
'Array.from', // Used in tests.
'Promise',
'Map',
'Set',
'Element.prototype.matches',
'Node.prototype.contains',
],
preprocessors: {
'**/*.html': ['html2js'],
},
// The root path location that will be used to resolve all relative paths
// defined in files and exclude.
basePath: path.resolve(__dirname),
// Things in the files array will be injected into the page.
files: [
'dist/inert.js',
'test/fixtures/**/*',
'test/specs/helpers/**/*',
'test/specs/**/*.spec.js',
],
// Report output to console.
reporters: ['spec'],
});

// If we're on Travis, override config settings and run tests on SauceLabs.
if (process.env.TRAVIS || process.env.SAUCE) {
// List of browsers to test on SauceLabs.
// To add more browsers, use:
// https://wiki.saucelabs.com/display/DOCS/Platform+Configurator#/
// This set of browsers was copied from:
// https://github.com/angular/angular.js/blob/master/karma-shared.conf.js#L42-L116
const customLaunchers = {
'SL_Chrome': {
base: 'SauceLabs',
browserName: 'chrome',
version: 'latest',
},
'SL_Chrome-1': {
base: 'SauceLabs',
browserName: 'chrome',
version: 'latest-1',
},
'SL_Firefox': {
base: 'SauceLabs',
browserName: 'firefox',
version: 'latest',
},
'SL_Firefox-1': {
base: 'SauceLabs',
browserName: 'firefox',
version: 'latest-1',
},
'SL_Safari-1': {
base: 'SauceLabs',
browserName: 'safari',
platform: 'OS X 10.12',
version: 'latest-1',
},
'SL_Safari': {
base: 'SauceLabs',
browserName: 'safari',
platform: 'OS X 10.13',
version: 'latest',
},
// 'SL_IE_9': {
// base: 'SauceLabs',
// browserName: 'internet explorer',
// platform: 'Windows 2008',
// version: '9',
// },
// 'SL_IE_10': {
// base: 'SauceLabs',
// browserName: 'internet explorer',
// platform: 'Windows 2012',
// version: '10',
// },
'SL_IE_11': {
base: 'SauceLabs',
browserName: 'internet explorer',
platform: 'Windows 8.1',
version: '11',
},
'SL_EDGE': {
base: 'SauceLabs',
browserName: 'microsoftedge',
platform: 'Windows 10',
version: 'latest',
},
'SL_EDGE-1': {
base: 'SauceLabs',
browserName: 'microsoftedge',
platform: 'Windows 10',
version: 'latest-1',
},
// 'SL_iOS_10': {
// base: 'SauceLabs',
// browserName: 'iphone',
// version: '10.3',
// },
// 'SL_iOS_11': {
// base: 'SauceLabs',
// browserName: 'iphone',
// version: '11',
// },
};

config.set({
sauceLabs: {
testName: 'Inert Polyfill Tests',
username: 'robdodson_inert',
accessKey: 'a844aee9-d3ec-4566-94e3-dba3d0c30248',
},
// Increase timeout in case connection in CI is slow
captureTimeout: 120000,
customLaunchers: customLaunchers,
browsers: Object.keys(customLaunchers),
reporters: ['spec', 'saucelabs'],
});
}
};

0 comments on commit 60a96c5

Please sign in to comment.