Add unit test for transitionEnterTimeout and transitionLeaveTimeout

Author: myarcane

tests/index.js

@@ -51,6 +51,38 @@ class TodoList extends Component {
 	}
 }
 
+class TodoListWithTimeout extends Component {
+	state = {
+		items: ['hello', 'world', 'click', 'me']
+	};
+
+	handleAdd(item) {
+		let { items } = this.state;
+		items = items.concat(item);
+		this.setState({ items });
+	}
+
+	handleRemove(i) {
+		let { items } = this.state;
+		items.splice(i, 1);
+		this.setState({ items });
+	}
+
+	render(_, { items }) {
+		return (
+			<div>
+				<CSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={200}>
+					{ items.map( (item, i) => (
+						<Todo key={item} onClick={this.handleRemove.bind(this, i)}>
+							{item}
+						</Todo>
+					)) }
+				</CSSTransitionGroup>
+			</div>
+		);
+	}
+}
+
 class SVGList extends Component {
 	state = {
 		items: ['hello', 'world', 'click', 'me']
@@ -182,6 +214,67 @@ describe('CSSTransitionGroup', () => {
 	});
 });
 
+describe('CSSTransitionGroup: timeout', () => {
+	let container = document.createElement('div'),
+		list, root;
+	document.body.appendChild(container);
+
+	let $ = s => [].slice.call(container.querySelectorAll(s));
+
+	beforeEach( () => {
+		root = render(<div><Nothing /></div>, container, root);
+		root = render(<div><TodoListWithTimeout ref={c => list=c} /></div>, container, root);
+	});
+
+	afterEach( () => {
+		list = null;
+	});
+
+	it('create works', () => {
+		expect($('.item')).to.have.length(4);
+	});
+
+	it('transitionLeave works with the transitionLeaveTimeout', done => {
+		// this.timeout(5999);
+		list.handleRemove(0);
+
+		// make sure -leave class was added
+		setTimeout( () => {
+			expect($('.item')).to.have.length(4);
+
+			expect($('.item')[0].className).to.contain('example-leave');
+			expect($('.item')[0].className).to.contain('example-leave-active');
+		}, 100);
+
+		// then make sure it's gone
+		setTimeout( () => {
+			expect($('.item')).to.have.length(3);
+			done();
+		}, 300);
+	});
+
+	it('transitionEnter works with the transitionEnterTimeout', done => {
+		// this.timeout(5999);
+		list.handleAdd(Date.now());
+
+		setTimeout( () => {
+			expect($('.item')).to.have.length(5);
+
+			expect($('.item')[4].className).to.contain('example-enter');
+			expect($('.item')[4].className).to.contain('example-enter-active');
+		}, 300);
+
+		setTimeout( () => {
+			expect($('.item')).to.have.length(5);
+
+			expect($('.item')[4].className).not.to.contain('example-enter');
+			expect($('.item')[4].className).not.to.contain('example-enter-active');
+
+			done();
+		}, 600);
+	});
+});
+
 describe('CSSTransitionGroup: SVG', () => {
 	let container = document.createElement('div'),
 		list, root;