Merge branch 'dev' into router-next

config/karma.conf.js

@@ -12,7 +12,7 @@ module.exports = function (config) {
 		files: [
 			'./../node_modules/babel-polyfill/dist/polyfill.js',
 			'./../node_modules/sinon/pkg/sinon.js',
-			'./../src/**/__tests__/**'
+			'./../src/mobx/__tests__/**'
 		],
 		// Start these browsers, currently available:
 		// - Chrome
@@ -32,7 +32,7 @@ module.exports = function (config) {
 		// list of files to exclude
 		exclude: [],
 		preprocessors: {
-			'./../src/**/__tests__/**': ['webpack']
+			'./../src/mobx/__tests__/**': ['webpack']
 		},
 		webpack: {
 			module: {

config/mocha.opts

@@ -6,6 +6,6 @@
 --recursive
 --timeout 15000
 
-src/**/*__tests__*/**/*spec.ts
-src/**/*__tests__*/**/*spec.tsx
-src/**/*__tests__*/**/*spec.browser.ts
+src/mobx/*__tests__*/**/*spec.ts
+src/mobx/*__tests__*/**/*spec.tsx
+src/mobx/*__tests__*/**/*spec.browser.ts

src/component/es2015.ts

@@ -39,7 +39,7 @@ export interface Mixin<P, S> extends ComponentLifecycle<P, S> {
 }
 
 export interface ComponentSpec<P, S> extends Mixin<P, S> {
-	render(): any;
+	render(props?, context?): any;
 	[propertyName: string]: any;
 }
 

src/mobx/__tests__/connect.spec.ts

@@ -0,0 +1,114 @@
+import { expect } from 'chai';
+import { render } from '../../DOM/rendering';
+import Component from '../../component/es2015';
+import createElement from '../../factories/createElement';
+import Provider from '../Provider';
+import connect from '../connect';
+import inject from '../inject';
+
+describe('MobX connect()', () => {
+
+	it('should throw if store is invalid', () => {
+		const tryConnect = () => connect('invalidStore', () => 'Test');
+		expect(tryConnect).to.throw(Error, /should be provided as array/);
+	});
+
+	it('should throw if component is invalid', () => {
+		const tryConnect = () => connect(null);
+		expect(tryConnect).to.throw(Error, /Please pass a valid component/);
+	});
+
+	it('should connect without second argument', () => {
+		const tryConnect = () => connect(['invalidStore'])(() => 'Test');
+		expect(tryConnect).to.not.throw(Error);
+	});
+
+});
+
+describe('MobX inject()', () => {
+	let container;
+
+	beforeEach(() => {
+		container = document.createElement('div') as HTMLElement;
+		container.style.display = 'none';
+		document.body.appendChild(container);
+	});
+
+	afterEach(() => {
+		document.body.removeChild(container);
+		render(null, container);
+	});
+
+	class TestComponent extends Component<any, any> {
+		render({ testStore }) {
+			return createElement('span', null, testStore);
+		}
+	};
+
+	/*it('should inject without second argument', () => {
+
+		class TestComponent extends Component<any, any> {
+			static defaultProps = { hello: 'world' };
+			render() {
+				return 'Test';
+			}
+		};
+		const tryInject = () => inject()(TestComponent);
+		console.log(createElement(tryInject));
+		//expect(tryInject).to.not.throw(Error);
+	});*/
+
+	it('should fail if store is not provided', () => {
+
+		function App() {
+			return createElement(Provider, null, createElement(inject('hello')(createElement('span'))));
+		}
+		expect(() => render(App(), container)).to.throw(Error, /is not available!/);
+	});
+
+	it('should inject stores', () => {
+
+		function App() {
+			return createElement(Provider, {
+				testStore: 'works!'
+			}, createElement(inject('testStore')(TestComponent)));
+		}
+
+		render(App(), container);
+		expect(container.innerHTML).to.equal('<span>works!</span>');
+	});
+
+	it('should prefer props over stores', () => {
+
+		function App() {
+			return createElement(Provider, {
+				testStore: 'hello'
+			}, createElement(inject('testStore')(TestComponent), { testStore: 'works!' }));
+		}
+
+		render(App(), container);
+		expect(container.innerHTML).to.equal('<span>works!</span>');
+	});
+
+	it('should create class with injected stores', () => {
+
+		class TestClass extends Component<any, any> {
+			static defaultProps = {
+				world: 'world'
+			};
+			render({ hello, world }) {
+				return createElement('span', null, hello + ' ' + world);
+			}
+		};
+
+		function App() {
+			return createElement(Provider, {
+				hello: 'hello'
+			}, createElement(inject('hello')(TestClass)));
+		}
+
+		render(App(), container);
+		expect(container.innerHTML).to.equal('<span>hello world</span>');
+	});
+
+});

src/mobx/__tests__/observer.spec.tsx

@@ -1,70 +1,77 @@
-// import mobx from 'mobx';
-// import { expect } from 'chai';
-// import connect from '../connect';
-// import { render } from '../../DOM/rendering';
-// import Component from '../../component/es2015';
-// import * as Inferno from '../../testUtils/inferno';
-// Inferno; // suppress ts 'never used' error
-//
-// let container;
-// let store = mobx.observable({
-// 	todos: [{ title: "a", completed: false }]
-// });
-//
-// let todoItemRenderings = 0;
-// let TodoItem = connect(function TodoItemF(props) {
-// 	todoItemRenderings++;
-// 	return <li>|{ props.todo.title }</li>;
-// });
-//
-// let todoListRenderings = 0;
-// let todoListWillReactCount = 0;
-// let TodoList = connect(class extends Component<any, any> {
-// 	renderings = 0;
-//
-// 	componentWillReact() {
-// 		todoListWillReactCount++;
-// 	}
-//
-// 	render() {
-// 		todoListRenderings++;
-// 		let todos = store.todos;
-// 		return (
-// 			<div>
-// 				<h1>{ todos.length }</h1>
-// 				{todos.map(function(todo) {
-// 					return <TodoItem todo={todo}/>;
-// 				})}
-// 			</div>
-// 		);
-// 	}
-// });
-//
-// class App extends Component<any, any> {
-// 	render() {
-// 		return <TodoList/>;
-// 	}
-// }
-//
-// function getDNode(obj, prop) {
-// 	return obj.$mobx.values[prop];
-// }
-//
-// describe('MobX Observer', () => {
-//
-// 	beforeEach(() => {
-// 		container = document.createElement('div') as HTMLElement;
-// 		container.style.display = 'none';
-// 		document.body.appendChild(container);
-// 	});
-//
-// 	afterEach(() => {
-// 		document.body.removeChild(container);
-// 		render(null, container);
-// 	});
-//
-// 	it('should render a component', () => {
-// 		expect(() => render(<App/>, container)).to.not.throw(Error);
-// 	});
-//
-// });
+import { observable, extendObservable, toJS } from 'mobx';
+import { expect } from 'chai';
+import observer from '../observer';
+import { render } from '../../DOM/rendering';
+import Component from '../../component/es2015';
+import * as Inferno from '../../testUtils/inferno';
+Inferno; // suppress ts 'never used' error
+
+describe('MobX Observer', () => {
+	let container;
+	let store = {
+		todos: observable(['one', 'two']),
+		extra: observable({ test: 'observable!' })
+	};
+
+	beforeEach(() => {
+		container = document.createElement('div') as HTMLElement;
+		container.style.display = 'none';
+		document.body.appendChild(container);
+	});
+
+	afterEach(() => {
+		document.body.removeChild(container);
+		render(null, container);
+	});
+
+	const TodoItem = observer(function({ todo }) {
+		return <li>{ todo }</li>;
+	});
+
+	let todoListRenderings = 0;
+	let todoListWillReactCount = 0;
+	const TodoList = observer(class extends Component<any, any> {
+		componentWillReact() {
+			todoListWillReactCount++;
+		}
+
+		render() {
+			todoListRenderings++;
+			let todos = store.todos;
+			return <div>{todos.map(todo => <TodoItem todo={todo}/>)}</div>;
+		}
+	});
+
+	it('should render a component', () => {
+		expect(() => render(<TodoList/>, container)).to.not.throw(Error);
+	});
+
+	it('should render a todo list', () => {
+		render(<TodoList/>, container);
+		expect(container.innerHTML).to.equal('<div><li>one</li><li>two</li></div>');
+	});
+
+	it('should render a todo list with added todo item', () => {
+		store.todos.push('three');
+		render(<TodoList/>, container);
+		expect(container.innerHTML).to.equal('<div><li>one</li><li>two</li><li>three</li></div>');
+	});
+
+	it('should render a todo list with non observale item', () => {
+		const FlatList = observer(class extends Component<any, any> {
+			render({ extra }) {
+				return <div>{store.todos.map(title => <li>{ title }{ extra.test }</li>)}</div>;
+			}
+		});
+
+		render(<FlatList extra={ store.extra }/>, container);
+		store.extra = toJS({ test: 'XXX' });
+		render(<FlatList extra={ store.extra }/>, container);
+		extendObservable(store, {
+			test: 'new entry'
+		});
+		render(<FlatList extra={ store.extra }/>, container);
+		expect(container.innerHTML).to.equal('<div><li>oneXXX</li><li>twoXXX</li><li>threeXXX</li></div>');
+	});
+
+});