import { h, render } from '../../src/preact';
/** @jsx h */

describe('keys', () => {
	let scratch;

	before( () => {
		scratch = document.createElement('div');
		(document.body || document.documentElement).appendChild(scratch);
	});

	beforeEach( () => {
		scratch.innerHTML = '';
	});

	after( () => {
		scratch.parentNode.removeChild(scratch);
		scratch = null;
	});

	// See developit/preact-compat#21
	it('should remove orphaned keyed nodes', () => {
		let root = render((
			<div>
				<div>1</div>
				<li key="a">a</li>
			</div>
		), scratch);

		root = render((
			<div>
				<div>2</div>
				<li key="b">b</li>
			</div>
		), scratch, root);

		expect(scratch.innerHTML).to.equal('<div><div>2</div><li>b</li></div>');
	});

	it('should set VNode#key property', () => {
		expect(<div />).to.have.property('key').that.is.empty;
		expect(<div a="a" />).to.have.property('key').that.is.empty;
		expect(<div key="1" />).to.have.property('key', '1');
	});
});

@@ -4,16 +4,27 @@
 ort %7B h,
+ Component,
  render 
@@ -962,13 +962,1233 @@
 ');%0A%09%7D);
+%0A%0A%09it('should remove keyed nodes (#232)', () =%3E %7B%0A%09%09class App extends Component %7B%0A%09%09%09componentDidMount() %7B%0A%09%09%09%09setTimeout(() =%3E this.setState(%7Bopened: true,loading: true%7D), 10);%0A%09%09%09%09setTimeout(() =%3E this.setState(%7Bopened: true,loading: false%7D), 20);%0A%09%09%09%7D%0A%0A%09%09%09render(%7B opened, loading %7D) %7B%0A%09%09%09%09return (%0A%09%09%09%09%09%3CBusyIndicator id=%22app%22 busy=%7Bloading%7D%3E%0A%09%09%09%09%09%09%3Cdiv%3EThis div needs to be here for this to break%3C/div%3E%0A%09%09%09%09%09%09%7B opened && !loading && %3Cdiv%3E%7B%5B%5D%7D%3C/div%3E %7D%0A%09%09%09%09%09%3C/BusyIndicator%3E%0A%09%09%09%09);%0A%09%09%09%7D%0A%09%09%7D%0A%0A%09%09class BusyIndicator extends Component %7B%0A%09%09%09render(%7B children, busy %7D) %7B%0A%09%09%09%09return %3Cdiv class=%7Bbusy ? %22busy%22 : %22%22%7D%3E%0A%09%09%09%09%09%7B children && children.length ? children : %3Cdiv class=%22busy-placeholder%22%3E%3C/div%3E %7D%0A%09%09%09%09%09%3Cdiv class=%22indicator%22%3E%0A%09%09%09%09%09%09%3Cdiv%3Eindicator%3C/div%3E%0A%09%09%09%09%09%09%3Cdiv%3Eindicator%3C/div%3E%0A%09%09%09%09%09%09%3Cdiv%3Eindicator%3C/div%3E%0A%09%09%09%09%09%3C/div%3E%0A%09%09%09%09%3C/div%3E;%0A%09%09%09%7D%0A%09%09%7D%0A%0A%09%09let root;%0A%0A%09%09root = render(%3CApp /%3E, scratch, root);%0A%09%09root = render(%3CApp opened loading /%3E, scratch, root);%0A%09%09root = render(%3CApp opened /%3E, scratch, root);%0A%0A%09%09expect(root).to.have.property('innerHTML', '%3Cdiv%3EThis div needs to be here for this to break%3C/div%3E%3Cdiv class=%22%22%3E%3C/div%3E%3Cdiv class=%22indicator%22%3E%3Cdiv%3Eindicator%3C/div%3E%3Cdiv%3Eindicator%3C/div%3E%3Cdiv%3Eindicator%3C/div%3E%3C/div%3E');%0A%09%7D);
 %0A%7D);%0A

Add test for #232