@wordpress/block-editor 8.0.17 → 8.1.2-next.f435e9e01b.0

package/src/components/block-media-update-progress/test/index.native.js

@@ -1,12 +1,17 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render } from 'test/helpers';
 
 /**
  * WordPress dependencies
  */
-import { sendMediaUpload, sendMediaSave } from '@wordpress/react-native-bridge';
+import {
+	sendMediaSave,
+	sendMediaUpload,
+	subscribeMediaSave,
+	subscribeMediaUpload,
+} from '@wordpress/react-native-bridge';
 
 /**
  * Internal dependencies
@@ -25,31 +30,19 @@ import {
 	MEDIA_SAVE_MEDIAID_CHANGED,
 } from '../';
 
-jest.mock( '@wordpress/react-native-bridge', () => {
-	const callUploadCallback = ( payload ) => {
-		this.uploadCallBack( payload );
-	};
-	const callSaveCallback = ( payload ) => {
-		this.saveCallBack( payload );
-	};
-	const subscribeMediaUpload = ( callback ) => {
-		this.uploadCallBack = callback;
-	};
-	const subscribeMediaSave = ( callback ) => {
-		this.saveCallBack = callback;
-	};
-	const mediaSources = {
-		deviceCamera: 'DEVICE_CAMERA',
-		deviceLibrary: 'DEVICE_MEDIA_LIBRARY',
-		siteMediaLibrary: 'SITE_MEDIA_LIBRARY',
-	};
-	return {
-		subscribeMediaUpload,
-		subscribeMediaSave,
-		sendMediaUpload: callUploadCallback,
-		sendMediaSave: callSaveCallback,
-		mediaSources,
-	};
+let uploadCallBack;
+subscribeMediaUpload.mockImplementation( ( callback ) => {
+	uploadCallBack = callback;
+} );
+let saveCallBack;
+subscribeMediaSave.mockImplementation( ( callback ) => {
+	saveCallBack = callback;
+} );
+sendMediaUpload.mockImplementation( ( payload ) => {
+	uploadCallBack( payload );
+} );
+sendMediaSave.mockImplementation( ( payload ) => {
+	saveCallBack( payload );
 } );
 
 const MEDIAID_LOCAL = 2;
@@ -99,14 +92,15 @@ const localMediaFiles = [
 
 describe( 'BlockMediaUpdateProgress component', () => {
 	it( 'renders without crashing', () => {
-		const wrapper = shallow(
+		const wrapper = render(
 			<BlockMediaUpdateProgress renderContent={ () => {} } />
 		);
 		expect( wrapper ).toBeTruthy();
 	} );
 
 	it( 'upload: onUpdateMediaUploadProgress is called when a progress update payload is received', () => {
-		const progress = 10;
+		const renderContentMock = jest.fn();
+		const progress = 0.1;
 		const payload = {
 			state: MEDIA_UPLOAD_STATE_UPLOADING,
 			mediaId: MEDIAID_LOCAL,
@@ -115,19 +109,23 @@ describe( 'BlockMediaUpdateProgress component', () => {
 
 		const onUpdateMediaUploadProgress = jest.fn();
 
-		const wrapper = shallow(
+		const wrapper = render(
 			<BlockMediaUpdateProgress
 				onUpdateMediaUploadProgress={ onUpdateMediaUploadProgress }
 				mediaFiles={ localMediaFiles }
-				renderContent={ () => {} }
+				renderContent={ renderContentMock }
 			/>
 		);
 
 		sendMediaUpload( payload );
 
-		expect( wrapper.instance().state.progress ).toEqual( progress );
-		expect( wrapper.instance().state.isUploadInProgress ).toEqual( true );
-		expect( wrapper.instance().state.isUploadFailed ).toEqual( false );
+		expect( wrapper.getByTestId( 'spinner' ) ).toBeTruthy();
+		expect( renderContentMock ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				isUploadInProgress: true,
+				isUploadFailed: false,
+			} )
+		);
 		expect( onUpdateMediaUploadProgress ).toHaveBeenCalledTimes( 1 );
 		expect( onUpdateMediaUploadProgress ).toHaveBeenCalledWith( payload );
 	} );
@@ -137,10 +135,10 @@ describe( 'BlockMediaUpdateProgress component', () => {
 		const payload = {
 			state: MEDIA_UPLOAD_STATE_UPLOADING,
 			mediaId: 432, // id not belonging to assigned mediaFiles collection in test
-			progress: 20,
+			progress: 0.2,
 		};
 		const onUpdateMediaUploadProgress = jest.fn();
-		const wrapper = shallow(
+		const wrapper = render(
 			<BlockMediaUpdateProgress
 				onUpdateMediaUploadProgress={ onUpdateMediaUploadProgress }
 				mediaFiles={ localMediaFiles }
@@ -150,12 +148,13 @@ describe( 'BlockMediaUpdateProgress component', () => {
 
 		sendMediaUpload( payload );
 
-		expect( wrapper.instance().state.progress ).toEqual( 0 );
+		expect( wrapper.queryByTestId( 'spinner' ) ).toBeNull();
 		expect( onUpdateMediaUploadProgress ).toHaveBeenCalledTimes( 0 );
 	} );
 
 	it( 'upload: onFinishMediaUploadWithSuccess is called when a success payload is received', () => {
-		const progress = 10;
+		const renderContentMock = jest.fn();
+		const progress = 0.1;
 		const payloadSuccess = {
 			state: MEDIA_UPLOAD_STATE_SUCCEEDED,
 			mediaId: MEDIAID_LOCAL,
@@ -168,23 +167,27 @@ describe( 'BlockMediaUpdateProgress component', () => {
 
 		const onFinishMediaUploadWithSuccess = jest.fn();
 
-		const wrapper = shallow(
+		const wrapper = render(
 			<BlockMediaUpdateProgress
 				onFinishMediaUploadWithSuccess={
 					onFinishMediaUploadWithSuccess
 				}
 				mediaFiles={ localMediaFiles }
-				renderContent={ () => {} }
+				renderContent={ renderContentMock }
 			/>
 		);
 
 		sendMediaUpload( payloadUploading );
 
-		expect( wrapper.instance().state.progress ).toEqual( progress );
+		expect( wrapper.getByTestId( 'spinner' ) ).toBeTruthy();
 
 		sendMediaUpload( payloadSuccess );
 
-		expect( wrapper.instance().state.isUploadInProgress ).toEqual( false );
+		expect( renderContentMock ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				isUploadInProgress: false,
+			} )
+		);
 		expect( onFinishMediaUploadWithSuccess ).toHaveBeenCalledTimes( 1 );
 		expect( onFinishMediaUploadWithSuccess ).toHaveBeenCalledWith(
 			payloadSuccess
@@ -192,7 +195,8 @@ describe( 'BlockMediaUpdateProgress component', () => {
 	} );
 
 	it( 'upload: onFinishMediaUploadWithFailure is called when a failed payload is received', () => {
-		const progress = 10;
+		const renderContentMock = jest.fn();
+		const progress = 0.1;
 		const payloadFail = {
 			state: MEDIA_UPLOAD_STATE_FAILED,
 			mediaId: MEDIAID_LOCAL,
@@ -205,24 +209,28 @@ describe( 'BlockMediaUpdateProgress component', () => {
 
 		const onFinishMediaUploadWithFailure = jest.fn();
 
-		const wrapper = shallow(
+		const wrapper = render(
 			<BlockMediaUpdateProgress
 				onFinishMediaUploadWithFailure={
 					onFinishMediaUploadWithFailure
 				}
 				mediaFiles={ localMediaFiles }
-				renderContent={ () => {} }
+				renderContent={ renderContentMock }
 			/>
 		);
 
 		sendMediaUpload( payloadUploading );
 
-		expect( wrapper.instance().state.progress ).toEqual( progress );
+		expect( wrapper.getByTestId( 'spinner' ) ).toBeTruthy();
 
 		sendMediaUpload( payloadFail );
 
-		expect( wrapper.instance().state.isUploadInProgress ).toEqual( false );
-		expect( wrapper.instance().state.isUploadFailed ).toEqual( true );
+		expect( renderContentMock ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				isUploadInProgress: false,
+				isUploadFailed: true,
+			} )
+		);
 		expect( onFinishMediaUploadWithFailure ).toHaveBeenCalledTimes( 1 );
 		expect( onFinishMediaUploadWithFailure ).toHaveBeenCalledWith(
 			payloadFail
@@ -230,7 +238,8 @@ describe( 'BlockMediaUpdateProgress component', () => {
 	} );
 
 	it( 'upload: onMediaUploadStateReset is called when a reset payload is received', () => {
-		const progress = 10;
+		const renderContentMock = jest.fn();
+		const progress = 0.1;
 		const payloadReset = {
 			state: MEDIA_UPLOAD_STATE_RESET,
 			mediaId: MEDIAID_LOCAL,
@@ -243,22 +252,26 @@ describe( 'BlockMediaUpdateProgress component', () => {
 
 		const onMediaUploadStateReset = jest.fn();
 
-		const wrapper = shallow(
+		const wrapper = render(
 			<BlockMediaUpdateProgress
 				onMediaUploadStateReset={ onMediaUploadStateReset }
 				mediaFiles={ localMediaFiles }
-				renderContent={ () => {} }
+				renderContent={ renderContentMock }
 			/>
 		);
 
 		sendMediaUpload( payloadUploading );
 
-		expect( wrapper.instance().state.progress ).toEqual( progress );
+		expect( wrapper.getByTestId( 'spinner' ) ).toBeTruthy();
 
 		sendMediaUpload( payloadReset );
 
-		expect( wrapper.instance().state.isUploadInProgress ).toEqual( false );
-		expect( wrapper.instance().state.isUploadFailed ).toEqual( false );
+		expect( renderContentMock ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				isUploadInProgress: false,
+				isUploadFailed: false,
+			} )
+		);
 		expect( onMediaUploadStateReset ).toHaveBeenCalledTimes( 1 );
 		expect( onMediaUploadStateReset ).toHaveBeenCalledWith( payloadReset );
 	} );
@@ -268,10 +281,10 @@ describe( 'BlockMediaUpdateProgress component', () => {
 		const payload = {
 			state: MEDIA_SAVE_STATE_SAVING,
 			mediaId: 'tempid-432', // id not belonging to assigned mediaFiles collection in test
-			progress: 20,
+			progress: 0.2,
 		};
 		const onUpdateMediaSaveProgress = jest.fn();
-		const wrapper = shallow(
+		const wrapper = render(
 			<BlockMediaUpdateProgress
 				onUpdateMediaSaveProgress={ onUpdateMediaSaveProgress }
 				mediaFiles={ tempMediaFiles }
@@ -281,12 +294,12 @@ describe( 'BlockMediaUpdateProgress component', () => {
 
 		sendMediaSave( payload );
 
-		expect( wrapper.instance().state.progress ).toEqual( 0 );
+		expect( wrapper.queryByTestId( 'spinner' ) ).toBeNull();
 		expect( onUpdateMediaSaveProgress ).toHaveBeenCalledTimes( 0 );
 	} );
 
 	it( 'save: onFinishMediaSaveWithSuccess is called when a success payload is received', () => {
-		const progress = 10;
+		const progress = 0.1;
 		const payloadSuccess = {
 			state: MEDIA_SAVE_STATE_SUCCEEDED,
 			mediaId: MEDIAID_TEMP, // while saving, we have a tempid key
@@ -299,7 +312,7 @@ describe( 'BlockMediaUpdateProgress component', () => {
 
 		const onFinishMediaSaveWithSuccess = jest.fn();
 
-		const wrapper = shallow(
+		const wrapper = render(
 			<BlockMediaUpdateProgress
 				onFinishMediaSaveWithSuccess={ onFinishMediaSaveWithSuccess }
 				mediaFiles={ tempMediaFiles }
@@ -309,11 +322,11 @@ describe( 'BlockMediaUpdateProgress component', () => {
 
 		sendMediaSave( payloadSaving );
 
-		expect( wrapper.instance().state.progress ).toEqual( progress );
+		expect( wrapper.getByTestId( 'spinner' ) ).toBeTruthy();
 
 		sendMediaSave( payloadSuccess );
 
-		expect( wrapper.instance().state.isSaveInProgress ).toEqual( false );
+		expect( wrapper.queryByTestId( 'spinner' ) ).toBeNull();
 		expect( onFinishMediaSaveWithSuccess ).toHaveBeenCalledTimes( 1 );
 		expect( onFinishMediaSaveWithSuccess ).toHaveBeenCalledWith(
 			payloadSuccess
@@ -321,7 +334,8 @@ describe( 'BlockMediaUpdateProgress component', () => {
 	} );
 
 	it( 'save: onFinishMediaSaveWithFailure is called when a failed payload is received', () => {
-		const progress = 10;
+		const renderContentMock = jest.fn();
+		const progress = 0.1;
 		const payloadFail = {
 			state: MEDIA_SAVE_STATE_FAILED,
 			mediaId: MEDIAID_TEMP, // while saving, we have a tempid key
@@ -334,22 +348,27 @@ describe( 'BlockMediaUpdateProgress component', () => {
 
 		const onFinishMediaSaveWithFailure = jest.fn();
 
-		const wrapper = shallow(
+		const wrapper = render(
 			<BlockMediaUpdateProgress
 				onFinishMediaSaveWithFailure={ onFinishMediaSaveWithFailure }
 				mediaFiles={ tempMediaFiles }
-				renderContent={ () => {} }
+				renderContent={ renderContentMock }
 			/>
 		);
 
 		sendMediaSave( payloadSaving );
 
-		expect( wrapper.instance().state.progress ).toEqual( progress );
+		expect( wrapper.getByTestId( 'spinner' ) ).toBeTruthy();
 
 		sendMediaSave( payloadFail );
 
-		expect( wrapper.instance().state.isSaveInProgress ).toEqual( false );
-		expect( wrapper.instance().state.isSaveFailed ).toEqual( true );
+		expect( wrapper.queryByTestId( 'spinner' ) ).toBeNull();
+		expect( renderContentMock ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				isSaveInProgress: false,
+				isSaveFailed: true,
+			} )
+		);
 		expect( onFinishMediaSaveWithFailure ).toHaveBeenCalledTimes( 1 );
 		expect( onFinishMediaSaveWithFailure ).toHaveBeenCalledWith(
 			payloadFail
@@ -357,7 +376,8 @@ describe( 'BlockMediaUpdateProgress component', () => {
 	} );
 
 	it( 'save: onMediaSaveStateReset is called when a reset payload is received', () => {
-		const progress = 10;
+		const renderContentMock = jest.fn();
+		const progress = 0.1;
 		const payloadReset = {
 			state: MEDIA_SAVE_STATE_RESET,
 			mediaId: MEDIAID_TEMP, // while saving, we have a tempid key
@@ -370,28 +390,34 @@ describe( 'BlockMediaUpdateProgress component', () => {
 
 		const onMediaSaveStateReset = jest.fn();
 
-		const wrapper = shallow(
+		const wrapper = render(
 			<BlockMediaUpdateProgress
 				onMediaSaveStateReset={ onMediaSaveStateReset }
 				mediaFiles={ tempMediaFiles }
-				renderContent={ () => {} }
+				renderContent={ renderContentMock }
 			/>
 		);
 
 		sendMediaSave( payloadSaving );
 
-		expect( wrapper.instance().state.progress ).toEqual( progress );
+		expect( wrapper.getByTestId( 'spinner' ) ).toBeTruthy();
 
 		sendMediaSave( payloadReset );
 
-		expect( wrapper.instance().state.isSaveInProgress ).toEqual( false );
-		expect( wrapper.instance().state.isSaveFailed ).toEqual( false );
+		expect( wrapper.queryByTestId( 'spinner' ) ).toBeNull();
+		expect( renderContentMock ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				isSaveFailed: false,
+				isSaveInProgress: false,
+			} )
+		);
 		expect( onMediaSaveStateReset ).toHaveBeenCalledTimes( 1 );
 		expect( onMediaSaveStateReset ).toHaveBeenCalledWith( payloadReset );
 	} );
 
 	it( 'save: onFinalSaveResult is called with fail result when fail result is received', () => {
-		const progress = 10;
+		const renderContentMock = jest.fn();
+		const progress = 0.1;
 		const payloadFail = {
 			state: MEDIA_SAVE_FINAL_STATE_RESULT,
 			mediaId: MEDIAID_TEMP, // while saving, we have a tempid key
@@ -405,28 +431,34 @@ describe( 'BlockMediaUpdateProgress component', () => {
 
 		const onFinalSaveResult = jest.fn();
 
-		const wrapper = shallow(
+		const wrapper = render(
 			<BlockMediaUpdateProgress
 				onFinalSaveResult={ onFinalSaveResult }
 				mediaFiles={ tempMediaFiles }
-				renderContent={ () => {} }
+				renderContent={ renderContentMock }
 			/>
 		);
 
 		sendMediaSave( payloadSaving );
 
-		expect( wrapper.instance().state.progress ).toEqual( progress );
+		expect( wrapper.getByTestId( 'spinner' ) ).toBeTruthy();
 
 		sendMediaSave( payloadFail );
 
-		expect( wrapper.instance().state.isSaveInProgress ).toEqual( false );
-		expect( wrapper.instance().state.isSaveFailed ).toEqual( true );
+		expect( wrapper.queryByTestId( 'spinner' ) ).toBeNull();
+		expect( renderContentMock ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				isSaveFailed: true,
+				isSaveInProgress: false,
+			} )
+		);
 		expect( onFinalSaveResult ).toHaveBeenCalledTimes( 1 );
 		expect( onFinalSaveResult ).toHaveBeenCalledWith( payloadFail );
 	} );
 
 	it( 'save: onFinalSaveResult is called with success result when success result is received', () => {
-		const progress = 10;
+		const renderContentMock = jest.fn();
+		const progress = 0.1;
 		const payloadSuccess = {
 			state: MEDIA_SAVE_FINAL_STATE_RESULT,
 			mediaId: MEDIAID_TEMP, // while saving, we have a tempid key
@@ -440,28 +472,34 @@ describe( 'BlockMediaUpdateProgress component', () => {
 
 		const onFinalSaveResult = jest.fn();
 
-		const wrapper = shallow(
+		const wrapper = render(
 			<BlockMediaUpdateProgress
 				onFinalSaveResult={ onFinalSaveResult }
 				mediaFiles={ tempMediaFiles }
-				renderContent={ () => {} }
+				renderContent={ renderContentMock }
 			/>
 		);
 
 		sendMediaSave( payloadSaving );
 
-		expect( wrapper.instance().state.progress ).toEqual( progress );
+		expect( wrapper.getByTestId( 'spinner' ) ).toBeTruthy();
 
 		sendMediaSave( payloadSuccess );
 
-		expect( wrapper.instance().state.isSaveInProgress ).toEqual( false );
-		expect( wrapper.instance().state.isSaveFailed ).toEqual( false );
+		expect( wrapper.queryByTestId( 'spinner' ) ).toBeNull();
+		expect( renderContentMock ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				isSaveFailed: false,
+				isSaveInProgress: false,
+			} )
+		);
 		expect( onFinalSaveResult ).toHaveBeenCalledTimes( 1 );
 		expect( onFinalSaveResult ).toHaveBeenCalledWith( payloadSuccess );
 	} );
 
 	it( 'save: listens to mediaId change and passes it up', () => {
-		const progress = 10;
+		const renderContentMock = jest.fn();
+		const progress = 0.1;
 		const payloadMediaIdChange = {
 			state: MEDIA_SAVE_MEDIAID_CHANGED,
 			mediaId: MEDIAID_TEMP, // while saving, we have a tempid key
@@ -476,24 +514,29 @@ describe( 'BlockMediaUpdateProgress component', () => {
 
 		const onMediaIdChanged = jest.fn();
 
-		const wrapper = shallow(
+		const wrapper = render(
 			<BlockMediaUpdateProgress
 				onMediaIdChanged={ onMediaIdChanged }
 				mediaFiles={ tempMediaFiles }
-				renderContent={ () => {} }
+				renderContent={ renderContentMock }
 			/>
 		);
 
 		sendMediaSave( payloadSaving );
 
-		expect( wrapper.instance().state.progress ).toEqual( progress );
+		expect( wrapper.getByTestId( 'spinner' ) ).toBeTruthy();
 
 		sendMediaSave( payloadMediaIdChange );
 
-		expect( wrapper.instance().state.isSaveInProgress ).toEqual( false );
-		expect( wrapper.instance().state.isSaveFailed ).toEqual( false );
-		expect( wrapper.instance().state.isUploadInProgress ).toEqual( false );
-		expect( wrapper.instance().state.isUploadFailed ).toEqual( false );
+		expect( wrapper.queryByTestId( 'spinner' ) ).toBeNull();
+		expect( renderContentMock ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				isSaveFailed: false,
+				isSaveInProgress: false,
+				isUploadInProgress: false,
+				isUploadFailed: false,
+			} )
+		);
 		expect( onMediaIdChanged ).toHaveBeenCalledTimes( 1 );
 		expect( onMediaIdChanged ).toHaveBeenCalledWith( payloadMediaIdChange );
 	} );

package/src/components/block-mover/test/__snapshots__/index.native.js.snap

@@ -1,55 +1,116 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Block Mover Picker should match snapshot 1`] = `
-<Fragment>
-  <ForwardRef(ToolbarButton)
-    extraProps={
-      Object {
-        "hint": "Double tap to move the block to the left",
+Array [
+  <View>
+    <View
+      accessibilityHint="Double tap to move the block to the left"
+      accessibilityLabel="Move block left from position 2 to position 1"
+      accessibilityRole="button"
+      accessibilityState={
+        Object {
+          "disabled": false,
+        }
       }
-    }
-    icon={
-      <SVG
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      nativeID="animatedComponent"
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "flex": 1,
+          "justifyContent": "center",
+          "opacity": 1,
+          "padding": 3,
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "alignItems": "center",
+            "aspectRatio": 1,
+            "flex": 1,
+            "flexDirection": "row",
+            "justifyContent": "center",
+            "opacity": 1,
+          }
+        }
       >
-        <Path
-          d="M20 10.8H6.7l4.1-4.5-1.1-1.1-5.8 6.3 5.8 5.8 1.1-1.1-4-3.9H20z"
-        />
-      </SVG>
-    }
-    isDisabled={false}
-    onClick={[MockFunction]}
-    onLongPress={[Function]}
-    title="Move block left from position 2 to position 1"
-  />
-  <ForwardRef(ToolbarButton)
-    extraProps={
-      Object {
-        "hint": "Double tap to move the block to the right",
+        <View
+          style={
+            Object {
+              "flexDirection": "row",
+            }
+          }
+        >
+          Svg
+        </View>
+      </View>
+    </View>
+  </View>,
+  <View>
+    <View
+      accessibilityHint="Double tap to move the block to the right"
+      accessibilityLabel="Move block right"
+      accessibilityRole="button"
+      accessibilityState={
+        Object {
+          "disabled": true,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      nativeID="animatedComponent"
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "flex": 1,
+          "justifyContent": "center",
+          "opacity": 1,
+          "padding": 3,
+        }
       }
-    }
-    icon={
-      <SVG
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
+    >
+      <View
+        style={
+          Object {
+            "alignItems": "center",
+            "aspectRatio": 1,
+            "flex": 1,
+            "flexDirection": "row",
+            "justifyContent": "center",
+            "opacity": 0.3,
+          }
+        }
       >
-        <Path
-          d="M14.3 6.7l-1.1 1.1 4 4H4v1.5h13.3l-4.1 4.4 1.1 1.1 5.8-6.3z"
-        />
-      </SVG>
-    }
-    isDisabled={true}
-    onClick={[MockFunction]}
-    onLongPress={[Function]}
-    title="Move block right"
-  />
-  <Picker
-    hideCancelButton={true}
-    leftAlign={true}
-    onChange={[Function]}
-    options={Array []}
-    title="Change block position"
-  />
-</Fragment>
+        <View
+          style={
+            Object {
+              "flexDirection": "row",
+            }
+          }
+        >
+          Svg
+        </View>
+      </View>
+    </View>
+  </View>,
+]
 `;