Add ReactTransitionEvents shim, and tests for ReactMount and ReactTra…

…nsitionEvents! 🌈

.eslintignore

@@ -0,0 +1,2 @@
+lib
+karma.conf.js

karma.conf.js

@@ -1,4 +1,4 @@
-var path = require('path');
+let path = require('path');
 
 module.exports = function(config) {
 	config.set({
@@ -41,7 +41,8 @@ module.exports = function(config) {
 			resolve: {
 				modulesDirectories: [__dirname, 'node_modules'],
 				alias: {
-					src: __dirname+'/src'
+					src: path.join(__dirname, 'src'),
+					'preact-compat': path.join(__dirname, 'src')
 				}
 			}
 		},

lib/ReactMount.js

@@ -1,3 +1,3 @@
-var preact = require('preact-compat');
+let preact = require('preact-compat');
 
 exports.unmountComponentAtNode = preact.unmountComponentAtNode;

lib/ReactTransitionEvents.js

@@ -0,0 +1,26 @@
+var supported, prefix;
+
+if (typeof document!=='undefined' && document.createElement) {
+	var d = document.createElement('div');
+	for (var i in d.style) {
+		var m = i.match(/^(moz|webkit|ms|)(transition|animation)$/i);
+		if (m) supported = true;
+		if (m && m[1]) prefix = m[1];
+	}
+}
+
+function each(node, fn, listener, prefix) {
+	node[fn]((prefix || '')+'TransitionEnd', listener);
+	node[fn]((prefix || '')+'AnimationEnd', listener);
+	if (prefix) each(node, fn, listener);
+}
+
+module.exports = {
+	addEndEventListener(el, listener) {
+		if (supported) each(el, 'addEventListener', listener, prefix);
+		else setTimeout(listener, 0);
+	},
+	removeEndEventListener(el, listener) {
+		if (supported) each(node, 'removeEventListener', listener, prefix);
+	}
+};

test/lib/ReactMount.js

@@ -0,0 +1,9 @@
+import ReactMount from '../../lib/ReactMount';
+
+/*global sinon,expect*/
+
+describe('ReactMount', () => {
+	it('should export .unmountComponentAtNode', () => {
+		expect(ReactMount).to.have.property('unmountComponentAtNode').that.is.a.function;
+	});
+});

test/lib/ReactTransitionEvents.js

@@ -0,0 +1,64 @@
+import ReactTransitionEvents from '../../lib/ReactTransitionEvents';
+
+/*global sinon,expect*/
+
+describe('ReactTransitionEvents', () => {
+	it('should export add and remove functions', () => {
+		expect(ReactTransitionEvents).to.have.property('addEndEventListener').that.is.a.function;
+		expect(ReactTransitionEvents).to.have.property('removeEndEventListener').that.is.a.function;
+	});
+
+	it('should support transition events', done => {
+		let div = document.createElement('div');
+		div.style.cssText = 'position:absolute; left:0; top:0; width:100px; height:100px; background:#000; transition:all 50ms ease;';
+		document.body.appendChild(div);
+
+		setTimeout( () => {
+			let onEnd = sinon.spy();
+			ReactTransitionEvents.addEndEventListener(div, onEnd);
+			div.style.left = '100px';
+
+			setTimeout( () => {
+				expect(onEnd).to.have.been.calledOnce;
+
+				document.body.removeChild(div);
+				done();
+			}, 100);
+		});
+	});
+
+	it('should support animation events', done => {
+		let div = document.createElement('div');
+		div.style.cssText = 'position:absolute; left:0; top:0; width:100px; height:100px; background:#000;';
+		div.innerHTML = `
+			<style type="text/css">
+				@keyframes slide {
+					0% { left:-100px; }
+					100% { left:100px; }
+				}
+				@-webkit-keyframes slide {
+					0% { left:-100px; }
+					100% { left:100px; }
+				}
+				.slide {
+					animation: slide 50ms forwards 1 ease;
+					-webkit-animation: slide 50ms forwards 1 ease;
+				}
+			</style>
+		`;
+		document.body.appendChild(div);
+
+		setTimeout( () => {
+			let onEnd = sinon.spy();
+			ReactTransitionEvents.addEndEventListener(div, onEnd);
+			div.className = 'slide';
+
+			setTimeout( () => {
+				expect(onEnd).to.have.been.calledOnce;
+
+				document.body.removeChild(div);
+				done();
+			}, 100);
+		});
+	});
+});