Merge pull request #122 from wordpress-mobile/feature/test-focused-block

Test a focused block

package.json

@@ -36,7 +36,7 @@
     "prettier-eslint-cli": "^4.7.1",
     "react-dom": "^16.2.0",
     "react-native-sass-transformer": "^1.1.1",
-    "react-test-renderer": "16.2.0",
+    "react-test-renderer": "16.3.1",
     "remote-redux-devtools": "^0.5.12",
     "sprintf-js": "^1.1.1"
   },

src/app/App.js

@@ -7,12 +7,22 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { setupStore } from '../store';
 import AppContainer from './AppContainer';
+import { Store } from 'redux';
 
-const store = setupStore();
+type PropsType = {
+	store: Store,
+};
+type StateType = {};
+
+export class AppProvider extends React.Component<PropsType, StateType> {
+	render() {
+		return (
+			<Provider store={ this.props.store }>
+				<AppContainer />
+			</Provider>
+		);
+	}
+}
 
 // eslint-disable-next-line react/display-name
-export default () => (
-	<Provider store={ store }>
-		<AppContainer />
-	</Provider>
-);
+export default () => <AppProvider store={ setupStore() } />;

src/app/App.test.js

@@ -2,12 +2,32 @@
 
 import renderer from 'react-test-renderer';
 
-import App from './App';
+import App, { AppProvider } from './App';
+import { initialState, setupStore } from '../store';
 import BlockHolder from '../block-management/block-holder';
 
 describe( 'App', () => {
 	it( 'renders without crashing', () => {
-		const rendered = renderer.create( <App /> ).toJSON();
+		const app = renderer.create( <App /> );
+		const rendered = app.toJSON();
+		expect( rendered ).toBeTruthy();
+	} );
+
+	it( 'renders without crashing with a block focused', () => {
+		// construct a state object with the first block focused
+		const state = { ...initialState };
+		const block0 = { ...state.blocks[ 0 ] };
+		block0.focused = true;
+		state.blocks[ 0 ] = block0;
+
+		// create a Store with the state object
+		const store = setupStore( state );
+
+		// render an App using the specified Store
+		const app = renderer.create( <AppProvider store={ store } /> );
+		const rendered = app.toJSON();
+
+		// App should be rendered OK
 		expect( rendered ).toBeTruthy();
 	} );
 

src/store/index.js

@@ -55,7 +55,7 @@ const headingBlockInstance = parse( initialHeadingBlockHtml )[ 0 ];
 const paragraphBlockInstance = parse( initialParagraphBlockHtml )[ 0 ];
 const paragraphBlockInstance2 = parse( initialParagraphBlockHtml2 )[ 0 ];
 
-const initialState: StateType = {
+export const initialState: StateType = {
 	// TODO: get blocks list block state should be externalized (shared with Gutenberg at some point?).
 	// If not it should be created from a string parsing (commented HTML to json).
 	blocks: [

yarn.lock

@@ -6308,6 +6308,10 @@ react-dom@^16.2.0, react-dom@^16.4.1:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+react-is@^16.3.1:
+  version "16.4.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.2.tgz#84891b56c2b6d9efdee577cc83501dfc5ecead88"
+
 react-native-crypto@^2.0.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/react-native-crypto/-/react-native-crypto-2.1.2.tgz#cfe68cad51cd1f73a4202b7ac164f96c1144cb2a"
@@ -6425,13 +6429,14 @@ react-redux@^5.0.7:
     loose-envify "^1.1.0"
     prop-types "^15.6.0"
 
-react-test-renderer@16.2.0:
-  version "16.2.0"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.2.0.tgz#bddf259a6b8fcd8555f012afc8eacc238872a211"
+react-test-renderer@16.3.1:
+  version "16.3.1"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.3.1.tgz#d9257936d8535bd40f57f3d5a84e7b0452fb17f2"
   dependencies:
     fbjs "^0.8.16"
     object-assign "^4.1.1"
     prop-types "^15.6.0"
+    react-is "^16.3.1"
 
 react-timer-mixin@^0.13.2:
   version "0.13.4"