feat(cmf): react-router v4 integration

output/cmf.eslint.txt

@@ -4,6 +4,9 @@
 
 The react/require-extension rule is deprecated. Please use the import/extensions rule from eslint-plugin-import instead.
 
+/home/travis/build/Talend/ui/packages/cmf/src/App.js
+  20:1  error  'history' should be listed in the project's dependencies. Run 'npm i -S history' to add it  import/no-extraneous-dependencies
+
 /home/travis/build/Talend/ui/packages/cmf/src/componentState.js
   88:3  warning  Unexpected console statement  no-console
 
@@ -21,5 +24,8 @@ The react/require-extension rule is deprecated. Please use the import/extensions
 /home/travis/build/Talend/ui/packages/cmf/src/sagas/collection.js
   10:1  error  Prefer default export  import/prefer-default-export
 
-✖ 7 problems (3 errors, 4 warnings)
+/home/travis/build/Talend/ui/packages/cmf/src/store.js
+  10:1  error  'history' should be listed in the project's dependencies. Run 'npm i -S history' to add it  import/no-extraneous-dependencies
+
+✖ 9 problems (5 errors, 4 warnings)
 

output/components.eslint.txt

@@ -29,5 +29,8 @@ The react/require-extension rule is deprecated. Please use the import/extensions
 /home/travis/build/Talend/ui/packages/components/src/VirtualizedList/utils/tablerow.js
   33:3  warning  Unexpected console statement  no-console
 
-✖ 11 problems (10 errors, 1 warning)
+/home/travis/build/Talend/ui/packages/components/src/WithDrawer/withDrawer.test.js
+  5:8  error  'Drawer' is defined but never used  no-unused-vars
+
+✖ 12 problems (11 errors, 1 warning)
 

output/components.sasslint.txt

@@ -4,7 +4,7 @@
 
 
 src/Drawer/Drawer.scss
-  14:4  warning  Statement must begin on a new line  brace-style
+  12:4  warning  Statement must begin on a new line  brace-style
 
 src/FilterBar/FilterBar.scss
   47:6  warning  Vendor prefixes should not be used  no-vendor-prefixes

packages/cmf-cqrs/package.json

@@ -66,8 +66,8 @@
     "react": "^15.6.2",
     "react-dom": "^15.6.2",
     "react-redux": "5.0.5",
-    "react-router": "3.2.0",
-    "react-router-redux": "4.0.8",
+    "react-router": "4.2.0",
+    "react-router-redux": "5.0.0-alpha.9",
     "react-test-renderer": "^15.6.2",
     "redux": "3.6.0",
     "redux-batched-actions": "0.2.0",
@@ -90,8 +90,8 @@
     "react": "^15.6.2",
     "react-dom": "^15.6.2",
     "react-redux": "5.0.5",
-    "react-router": "3.2.0",
-    "react-router-redux": "4.0.8",
+    "react-router": "4.2.0",
+    "react-router-redux": "5.0.0-alpha.9",
     "redux": "3.6.0",
     "redux-batched-actions": "0.2.0",
     "redux-storage": "^4.1.2",

packages/cmf/__tests__/App.test.js

@@ -4,7 +4,7 @@ import { Provider } from 'react-redux';
 
 import App from '../src/App';
 import RegistryProvider from '../src/RegistryProvider';
-import UIRouter from '../src/UIRouter';
+import CMFRouter from '../src/route/CMFRouter';
 
 describe('CMF App', () => {
 	it('App should init stuff', () => {
@@ -20,7 +20,7 @@ describe('CMF App', () => {
 		expect(wrapper.contains(
 			<Provider store={store}>
 				<RegistryProvider>
-					<UIRouter history={history} />
+					<CMFRouter history={history} />
 				</RegistryProvider>
 			</Provider>)
 		).toEqual(true);

packages/cmf/__tests__/route.test.js

@@ -1,9 +1,6 @@
 /* eslint no-underscore-dangle: ["error", {"allow": ["_registry", "_isLocked"] }] */
-import React from 'react';
-import { shallow } from 'enzyme';
 import route from '../src/route';
 import registry from '../src/registry';
-import mock from '../src/mock';
 
 describe('CMF route', () => {
 	it('registerComponent should be an alias to component.get', () => {
@@ -14,76 +11,3 @@ describe('CMF route', () => {
 		expect(emptyRegistry['_.route.component:C1']).toBe(C1);
 	});
 });
-
-describe('loadComponent behavior', () => {
-	it('should inject dispatch into component properties from context.store', () => {
-		const mockItem = {
-			component: 'component',
-			view: 'something',
-		};
-		route.loadComponents(mock.context(), mockItem);
-		const wrapper = shallow(React.createElement(mockItem.component), { context: mock.context() });
-		expect(wrapper.props().dispatch()).toBe('dispatch');
-	});
-
-	it('should replace component by regitry one', () => {
-		const mockItem = {
-			component: 'TestContainer',
-			view: 'appmenu',
-		};
-		const obj = { fn: jest.fn() };
-		const component = obj.fn;
-		component.CMFContainer = true;
-		const mockContext = mock.context();
-		mockContext.registry = {
-			'_.route.component:TestContainer': component,
-		};
-		route.loadComponents(mockContext, mockItem);
-		component();
-		expect(obj.fn).toHaveBeenCalled();
-		expect(mockItem.component.displayName).toBe('WithView');
-	});
-
-	it('should replace onEnter/onLeave hooks', () => {
-		// given
-		const mockItem = {
-			component: 'TestContainer',
-			view: 'appmenu',
-			onEnter: 'onEnterId',
-			onLeave: 'onLeaveId',
-		};
-		const dispatch = jest.fn();
-		const component = jest.fn();
-		component.CMFContainer = true;
-		const onEnter = jest.fn();
-		const onLeave = jest.fn();
-		const nextState = { params: {} };
-		const replace = jest.fn();
-
-		const mockContext = mock.context();
-		mockContext.registry = {
-			'_.route.hook:onEnterId': onEnter,
-			'_.route.hook:onLeaveId': onLeave,
-			'_.route.component:TestContainer': component,
-		};
-
-		// when
-		route.loadComponents(mockContext, mockItem, dispatch);
-
-
-		// then
-		expect(onEnter).not.toBeCalled();
-		mockItem.onEnter(nextState, replace);
-		expect(onEnter).toBeCalledWith({
-			router: { nextState, replace },
-			dispatch,
-		});
-
-		expect(onLeave).not.toBeCalled();
-		mockItem.onLeave(nextState, replace);
-		expect(onLeave).toBeCalledWith({
-			router: { nextState, replace },
-			dispatch,
-		});
-	});
-});

packages/cmf/__tests__/route/CMFRoute.test.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { shallow } from 'enzyme';
+import CMFRoute from '../../src/route/CMFRoute';
+
+const routes = {
+	path: '/',
+	component: 'App',
+	indexRoute: {
+		component: 'Redirect',
+		view: 'indexRouteRedirect',
+	},
+	childRoutes: [
+		{
+			path: 'preparations/:folderId?',
+			component: 'HomeListView',
+			view: 'preparations',
+			onEnter: 'preparation:fetch',
+		},
+		{
+			path: 'datasets',
+			component: 'HomeListView',
+			view: 'datasets',
+		},
+		{
+			path: 'datastores',
+			component: 'HomeListView',
+			view: 'datastores',
+		},
+	],
+};
+
+const App = props => (<div>{props.children}</div>);
+App.propTypes = { children: PropTypes.element };
+const HomeListView = props => (<div>{props.children}</div>);
+HomeListView.propTypes = { children: PropTypes.element };
+const Redirect = () => (<div />);
+function createContext() {
+	return {
+		registry: {
+			'_.route.component:App': App,
+			'_.route.component:HomeListView': HomeListView,
+			'_.route.component:Redirect': Redirect,
+		},
+	};
+}
+
+describe('CMFRoute', () => {
+	it('should instantiate Route component', () => {
+		// given
+		const context = createContext();
+
+		// when
+		const wrapper = shallow(
+			(
+				<CMFRoute {...routes}>
+					<div />
+				</CMFRoute>
+			),
+			{ context },
+		);
+
+		// then
+		expect(wrapper.getElement()).toMatchSnapshot();
+	});
+
+	it('should instantiate nested Route component', () => {
+		// given
+		const context = createContext();
+		const match = { params: {}, url: '/', path: '/' };
+
+		// when
+		const wrapper = shallow(
+			(
+				<CMFRoute {...routes}>
+					<div />
+				</CMFRoute>
+			),
+			{ context },
+		);
+		const Component = wrapper.props().component;
+		const componentWrapper = shallow(<Component match={match} />);
+
+		// then
+		expect(componentWrapper.getElement()).toMatchSnapshot();
+	});
+});

packages/cmf/__tests__/route/CMFRouteHook.test.js

@@ -0,0 +1,119 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { CMFRouteHookComponent } from '../../src/route/CMFRouteHook';
+
+const onEnter = 'myComponent:onEnter';
+const onLeave = 'myComponent:onLeave';
+function createContext(onEnterFn, onLeaveFn) {
+	return {
+		registry: {
+			[`_.route.hook:${onEnter}`]: onEnterFn,
+			[`_.route.hook:${onLeave}`]: onLeaveFn,
+		},
+	};
+}
+
+describe('CMFRouteHook', () => {
+	it('should render its children', () => {
+		// given
+		const MyComponent = () => (<div>My component</div>);
+
+		// when
+		const wrapper = shallow(
+			<CMFRouteHookComponent>
+				<MyComponent />
+			</CMFRouteHookComponent>
+		);
+
+		// then
+		expect(wrapper.getElement()).toMatchSnapshot();
+	});
+
+	it('should create onEnter/onLeave function', () => {
+		// given
+		const onEnterFn = jest.fn();
+		const onLeaveFn = jest.fn();
+		const context = createContext(onEnterFn, onLeaveFn);
+
+		// when
+		const wrapper = shallow(
+			(
+				<CMFRouteHookComponent
+					dispatch={jest.fn()}
+					onEnter={onEnter}
+					onLeave={onLeave}
+				>
+					<div />
+				</CMFRouteHookComponent>
+			),
+			{ context },
+		);
+
+		// then
+		expect(wrapper.instance().onEnter).toBe(onEnterFn);
+		expect(wrapper.instance().onLeave).toBe(onLeaveFn);
+	});
+
+	it('should call onEnter when componentDidMount', () => {
+		// given
+		const onEnterFn = jest.fn();
+		const onLeaveFn = jest.fn();
+		const context = createContext(onEnterFn, onLeaveFn);
+		const dispatch = jest.fn();
+		const match = { params: {} };
+
+		// when
+		shallow(
+			(
+				<CMFRouteHookComponent
+					dispatch={dispatch}
+					onEnter={onEnter}
+					onLeave={onLeave}
+					match={match}
+				>
+					<div />
+				</CMFRouteHookComponent>
+			),
+			{ context },
+		);
+
+		// then
+		expect(onEnterFn).toBeCalledWith({
+			router: { match },
+			dispatch,
+		});
+	});
+
+	it('should call onLeave when componentWillUnmount', () => {
+		// given
+		const onEnterFn = jest.fn();
+		const onLeaveFn = jest.fn();
+		const context = createContext(onEnterFn, onLeaveFn);
+		const dispatch = jest.fn();
+		const match = { params: {} };
+
+		const wrapper = shallow(
+			(
+				<CMFRouteHookComponent
+					dispatch={dispatch}
+					onEnter={onEnter}
+					onLeave={onLeave}
+					match={match}
+				>
+					<div />
+				</CMFRouteHookComponent>
+			),
+			{ context },
+		);
+		expect(onLeaveFn).not.toBeCalled();
+
+		// when
+		wrapper.unmount();
+
+		// then
+		expect(onLeaveFn).toBeCalledWith({
+			router: { match },
+			dispatch,
+		});
+	});
+});