Tests are passing on IE

Author: artemave

lib/elementMatches.js

@@ -1,3 +1,15 @@
+function matchesPolyfill (s) {
+  var matches = (this.document || this.ownerDocument).querySelectorAll(s)
+
+  var i = matches.length
+  while (--i >= 0 && matches.item(i) !== this) {}
+  return i > -1
+}
+
 module.exports = function elementMatches (element, selector) {
-  return element.matches(selector)
+  if (element.matches) {
+    return element.matches(selector)
+  } else {
+    return matchesPolyfill.call(element, selector)
+  }
 }

lib/elementTriggerEvent.js

@@ -1,23 +1,16 @@
-/* global Event KeyboardEvent MouseEvent */
-
-module.exports = function (element, eventType, value) {
-  var creator = eventCreatorsByType[eventType]
-
-  if (!creator) {
-    throw new Error('event type ' + JSON.stringify(eventType) + ' not recognised')
-  }
-
-  var event = creator(value)
-
-  element.dispatchEvent(event)
-}
+var MouseEvent = require('./polyfills').MouseEvent
+var KeyboardEvent = require('./polyfills').KeyboardEvent
 
 function createMouseEvent (type) {
   return new MouseEvent(type, { bubbles: true, cancelable: true })
 }
 
-function createEvent (type) {
-  return new Event(type, { bubbles: true, cancelable: false })
+function createEvent (type, params) {
+  params = params || { bubbles: true, cancelable: false }
+  // IE compatible old school way of creating events.
+  var event = document.createEvent('Event')
+  event.initEvent(type, params.bubbles, params.cancelable)
+  return event
 }
 
 function createKeyboardEvent (type, key) {
@@ -47,6 +40,18 @@ var eventCreatorsByType = {
     return createKeyboardEvent('keypress', key)
   },
   submit: function () {
-    return new Event('submit', { bubbles: true, cancelable: true })
+    return createEvent('submit', { bubbles: true, cancelable: true })
   }
 }
+
+module.exports = function (element, eventType, value) {
+  var creator = eventCreatorsByType[eventType]
+
+  if (!creator) {
+    throw new Error('event type ' + JSON.stringify(eventType) + ' not recognised')
+  }
+
+  var event = creator(value)
+
+  element.dispatchEvent(event)
+}

lib/polyfills.js

@@ -0,0 +1,61 @@
+module.exports.MouseEvent = (function () {
+  try {
+    new MouseEvent('click') // eslint-disable-line
+    return MouseEvent // eslint-disable-line
+  } catch (e) {
+    // Need to polyfill - fall through
+  }
+
+  var MouseEvent = function (eventType, params) {
+    params = params || { bubbles: false, cancelable: false }
+    var mouseEvent = document.createEvent('MouseEvent')
+    mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, window, 0, params.screenX || 0, params.screenY || 0, params.clientX || 0, params.clientY || 0, false, false, false, false, 0, null)
+
+    return mouseEvent
+  }
+
+  MouseEvent.prototype = Event.prototype
+
+  return MouseEvent
+})()
+
+// based on https://github.com/lifaon74/events-polyfill/blob/5ccca4002aa07f16ed1c298145f20c06d3544a29/src/constructors/KeyboardEvent.js
+module.exports.KeyboardEvent = (function () {
+  try {
+    new KeyboardEvent('keyup') // eslint-disable-line
+    return KeyboardEvent // eslint-disable-line
+  } catch (e) {
+    // Need to polyfill - fall through
+  }
+
+  var KeyboardEvent = function (eventType, params) {
+    params = params || { bubbles: false, cancelable: false }
+
+    var modKeys = [
+      params.ctrlKey ? 'Control' : '',
+      params.shiftKey ? 'Shift' : '',
+      params.altKey ? 'Alt' : '',
+      params.altGrKey ? 'AltGr' : '',
+      params.metaKey ? 'Meta' : ''
+    ].join(' ')
+
+    var keyEvent = document.createEvent('KeyboardEvent')
+    keyEvent.initKeyboardEvent(
+      eventType,
+      !!params.bubbles,
+      !!params.cancelable,
+      window,
+      '',
+      params.key,
+      0,
+      modKeys,
+      !!params.repeat
+    )
+
+    return keyEvent
+  }
+
+  KeyboardEvent.prototype = Event.prototype
+
+  return KeyboardEvent
+})()

package.json

@@ -53,7 +53,7 @@
   "dependencies": {
     "array.prototype.find": "^2.0.4",
     "chai": "4.2.0",
-    "debug": "https://github.com/artemave/debug",
+    "debug-es5": "^4.1.0",
     "deep-equal": "1.0.1",
     "error-stack-parser": "2.0.2",
     "global": "^4.3.2",
@@ -65,7 +65,8 @@
   },
   "standard": {
     "env": [
-      "mocha"
+      "mocha",
+      "browser"
     ],
     "ignore": [
       "docs/codesandbox/**/*"

test/eventsSpec.js

@@ -1,6 +1,7 @@
 var describeAssemblies = require('./describeAssemblies')
 const DomAssembly = require('./assemblies/DomAssembly')
 var demand = require('must')
+var retry = require('trytryagain')
 
 describe('events', function () {
   describeAssemblies([DomAssembly], function (Assembly) {
@@ -49,7 +50,7 @@ describe('events', function () {
       demand(document.hasFocus(), 'the browser must be in focus for this test!').to.equal(true)
     }
 
-    it('typeIn element should fire change and then blur event on input', function () {
+    it('typeIn element should fire change and then blur event on input', async function () {
       var firedEvents = []
 
       assertBrowserHasFocus()
@@ -64,17 +65,17 @@ describe('events', function () {
         firedEvents.push('change')
       })
 
-      return browser.find('.input').typeIn('first').then(function () {
-        return browser.find('.change').typeIn('second')
-      }).then(function () {
+      await browser.find('.input').typeIn('first')
+      await browser.find('.change').typeIn('second')
+      await retry(() => {
         demand(firedEvents).to.eql([
           'change',
           'blur'
         ])
       })
     })
 
-    it('click element should fire blur event on input', function () {
+    it('click element should fire blur event on input', async function () {
       var blurred = false
 
       assertBrowserHasFocus()
@@ -86,14 +87,14 @@ describe('events', function () {
         blurred = true
       })
 
-      return browser.find('.input').typeIn('first').then(function () {
-        return browser.find('button').click()
-      }).then(function () {
+      await browser.find('.input').typeIn('first')
+      await browser.find('button').click()
+      await retry(function () {
         demand(blurred).to.eql(true)
       })
     })
 
-    it('select element should fire blur event on input', function () {
+    it('select element should fire blur event on input', async function () {
       var blurred = false
 
       assertBrowserHasFocus()
@@ -104,9 +105,9 @@ describe('events', function () {
         blurred = true
       })
 
-      return browser.find('.input').typeIn('first').then(function () {
-        return browser.find('select').select({ text: 'one' })
-      }).then(function () {
+      await browser.find('.input').typeIn('first')
+      await browser.find('select').select({ text: 'one' })
+      await retry(function () {
         demand(blurred).to.eql(true)
       })
     })

yarn.lock

@@ -2110,6 +2110,13 @@ date-now@^0.1.4:
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
   integrity sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=
 
+debug-es5@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/debug-es5/-/debug-es5-4.1.0.tgz#4725be9293b570a8893279a5c15de4c85b95be6c"
+  integrity sha512-oHIsjV5nHcnukI9N+w8zS+GpYZ2TaEXml8LUND8F5uDNqUoDqxQZBr05EPlFhSkerH/Irvp3nHAjwobWFPJDEg==
+  dependencies:
+    ms "^2.1.1"
+
 debug-log@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debug-log/-/debug-log-1.0.1.tgz#2307632d4c04382b8df8a32f70b895046d52745f"
@@ -2143,12 +2150,6 @@ debug@^4.1.0:
   dependencies:
     ms "^2.1.1"
 
-"debug@https://github.com/artemave/debug":
-  version "4.1.0"
-  resolved "https://github.com/artemave/debug#26920e6d13e5e77183c33c65c17e5040639b0daf"
-  dependencies:
-    ms "^2.1.1"
-
 debug@~0.7.2:
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-0.7.4.tgz#06e1ea8082c2cb14e39806e22e2f6f757f92af39"