Merge 961366d into 9ef3c33

compat/test/browser/events.test.js

@@ -15,7 +15,7 @@ describe('preact/compat events', () => {
 	beforeEach(() => {
 		scratch = setupScratch();
 
-		proto = document.createElement('div').constructor.prototype;
+		proto = Element.prototype;
 		sinon.spy(proto, 'addEventListener');
 		sinon.spy(proto, 'removeEventListener');
 	});
@@ -58,12 +58,17 @@ describe('preact/compat events', () => {
 
 	it('should not normalize onChange for range', () => {
 		render(<input type="range" onChange={() => null} />, scratch);
-		expect(scratch.firstChild._listeners).to.haveOwnProperty('change');
-		expect(scratch.firstChild._listeners).to.not.haveOwnProperty('input');
+		expect(proto.addEventListener).to.have.been.calledOnce;
+		expect(proto.addEventListener).to.have.been.calledWithExactly(
+			'change',
+			sinon.match.func,
+			false
+		);
+		expect(proto.addEventListener).not.to.have.been.calledWith('input');
 	});
 
 	it('should support onAnimationEnd', () => {
-		const func = () => {};
+		const func = sinon.spy(() => {});
 		render(<div onAnimationEnd={func} />, scratch);
 
 		expect(
@@ -74,9 +79,8 @@ describe('preact/compat events', () => {
 			false
 		);
 
-		expect(scratch.firstChild._listeners).to.deep.equal({
-			animationend: func
-		});
+		scratch.firstChild.dispatchEvent(createEvent('animationend'));
+		expect(func).to.have.been.calledOnce;
 
 		render(<div />, scratch);
 		expect(
@@ -89,7 +93,7 @@ describe('preact/compat events', () => {
 	});
 
 	it('should support onTransitionEnd', () => {
-		const func = () => {};
+		const func = sinon.spy(() => {});
 		render(<div onTransitionEnd={func} />, scratch);
 
 		expect(
@@ -100,9 +104,8 @@ describe('preact/compat events', () => {
 			false
 		);
 
-		expect(scratch.firstChild._listeners).to.deep.equal({
-			transitionend: func
-		});
+		scratch.firstChild.dispatchEvent(createEvent('transitionend'));
+		expect(func).to.have.been.calledOnce;
 
 		render(<div />, scratch);
 		expect(

compat/test/browser/suspense.test.js

@@ -187,7 +187,7 @@ describe('suspense', () => {
 
 		return resolve().then(() => {
 			rerender();
-			expect(ref.current._vnode.type).to.equal(LazyComp);
+			expect(ref.current.constructor).to.equal(LazyComp);
 		});
 	});
 

test-utils/test/shared/rerender.test.js

@@ -0,0 +1,59 @@
+import { options, createElement, render, Component } from 'preact';
+import { teardown, setupRerender } from 'preact/test-utils';
+
+/** @jsx createElement */
+
+describe('setupRerender & teardown', () => {
+	/** @type {HTMLDivElement} */
+	let scratch;
+
+	beforeEach(() => {
+		scratch = document.createElement('div');
+	});
+
+	it('should restore previous debounce', () => {
+		let spy = (options.debounceRendering = sinon.spy());
+
+		setupRerender();
+		teardown();
+
+		expect(options.debounceRendering).to.equal(spy);
+	});
+
+	it('teardown should flush the queue', () => {
+		/** @type {() => void} */
+		let increment;
+		class Counter extends Component {
+			constructor(props) {
+				super(props);
+
+				this.state = { count: 0 };
+				increment = () => this.setState({ count: this.state.count + 1 });
+			}
+
+			render() {
+				return <div>{this.state.count}</div>;
+			}
+		}
+
+		sinon.spy(Counter.prototype, 'render');
+
+		// Setup rerender
+		setupRerender();
+
+		// Initial render
+		render(<Counter />, scratch);
+		expect(Counter.prototype.render).to.have.been.calledOnce;
+		expect(scratch.innerHTML).to.equal('<div>0</div>');
+
+		// queue rerender
+		increment();
+		expect(Counter.prototype.render).to.have.been.calledOnce;
+		expect(scratch.innerHTML).to.equal('<div>0</div>');
+
+		// Pretend test forgot to call rerender. Teardown should do that
+		teardown();
+		expect(Counter.prototype.render).to.have.been.calledTwice;
+		expect(scratch.innerHTML).to.equal('<div>1</div>');
+	});
+});

test/_util/helpers.js

@@ -1,10 +1,21 @@
 import { createElement, options } from 'preact';
-import { assign } from '../../src/util';
 import { clearLog, getLog } from './logCall';
 import { teardown as testUtilTeardown } from 'preact/test-utils';
 
 /** @jsx createElement */
 
+/**
+ * Assign properties from `props` to `obj`
+ * @template O, P The obj and props types
+ * @param {O} obj The object to copy properties to
+ * @param {P} props The object to copy properties from
+ * @returns {O & P}
+ */
+function assign(obj, props) {
+	for (let i in props) obj[i] = props[i];
+	return /** @type {O & P} */ (obj);
+}
+
 export function supportsPassiveEvents() {
 	let supported = false;
 	try {
@@ -244,6 +255,7 @@ export function sortAttributes(html) {
 
 export const spyAll = obj =>
 	Object.keys(obj).forEach(key => sinon.spy(obj, key));
+
 export const resetAllSpies = obj =>
 	Object.keys(obj).forEach(key => {
 		if (obj[key].args) {

test/browser/components.test.js

@@ -5,15 +5,15 @@ import {
 	teardown,
 	getMixedArray,
 	mixedArrayHTML,
-	serializeHtml
+	serializeHtml,
+	sortAttributes,
+	spyAll
 } from '../_util/helpers';
 import { div, span, p } from '../_util/dom';
 
 /** @jsx createElement */
 const h = createElement;
 
-let spyAll = obj => Object.keys(obj).forEach(key => sinon.spy(obj, key));
-
 function getAttributes(node) {
 	let attrs = {};
 	if (node.attributes) {
@@ -24,20 +24,6 @@ function getAttributes(node) {
 	return attrs;
 }
 
-// hacky normalization of attribute order across browsers.
-function sortAttributes(html) {
-	return html.replace(
-		/<([a-z0-9-]+)((?:\s[a-z0-9:_.-]+=".*?")+)((?:\s*\/)?>)/gi,
-		(s, pre, attrs, after) => {
-			let list = attrs
-				.match(/\s[a-z0-9:_.-]+=".*?"/gi)
-				.sort((a, b) => (a > b ? 1 : -1));
-			if (~after.indexOf('/')) after = '></' + pre + '>';
-			return '<' + pre + list.join('') + after;
-		}
-	);
-}
-
 describe('Components', () => {
 	/** @type {HTMLDivElement} */
 	let scratch;
@@ -1809,24 +1795,6 @@ describe('Components', () => {
 		expect(child._vnode._dom).to.equalNode(child.base);
 	});
 
-	it('should update old dom on forceUpdate in a lifecycle', () => {
-		let i = 0;
-		class App extends Component {
-			componentWillReceiveProps() {
-				this.forceUpdate();
-			}
-			render() {
-				if (i++ == 0) return <div>foo</div>;
-				return <div>bar</div>;
-			}
-		}
-
-		render(<App />, scratch);
-		render(<App />, scratch);
-
-		expect(scratch.innerHTML).to.equal('<div>bar</div>');
-	});
-
 	// preact/#1323
 	it('should handle hoisted component vnodes without DOM', () => {
 		let x = 0;
@@ -2579,5 +2547,23 @@ describe('Components', () => {
 			expect(() => rerender()).to.not.throw();
 			expect(scratch.innerHTML).to.equal('');
 		});
+
+		it('should update old dom on forceUpdate in a lifecycle', () => {
+			let i = 0;
+			class App extends Component {
+				componentWillReceiveProps() {
+					this.forceUpdate();
+				}
+				render() {
+					if (i++ == 0) return <div>foo</div>;
+					return <div>bar</div>;
+				}
+			}
+
+			render(<App />, scratch);
+			render(<App />, scratch);
+
+			expect(scratch.innerHTML).to.equal('<div>bar</div>');
+		});
 	});
 });

test/browser/render.test.js

@@ -712,9 +712,16 @@ describe('render()', () => {
 
 			render(<div onClick={falsyHandler} onOtherClick={fooHandler} />, scratch);
 
-			expect(scratch.childNodes[0]._listeners).to.deep.equal({
-				OtherClick: fooHandler
-			});
+			expect(
+				proto.addEventListener
+			).to.have.been.calledOnce.and.to.have.been.calledWithExactly(
+				'OtherClick',
+				sinon.match.func,
+				false
+			);
+
+			expect(proto.addEventListener).not.to.have.been.calledWith('Click');
+			expect(proto.addEventListener).not.to.have.been.calledWith('click');
 		});
 
 		it('should support native event names', () => {