First pass at automating some of the default state assertions for Soc…

…ial Icons, e.g., which Social Icons are rendered, in/active, hyperlinked, etc. The manual tests being referenced come from here: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/social-icons.md#tc001
WordPress · Feb 23, 2022 · 2604748 · 2604748
1 parent 0b1df88
commit 2604748
Show file tree

Hide file tree

Showing 6 changed files with 163 additions and 18 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-library/src/social-link/edit.native.js b/packages/block-library/src/social-link/edit.native.js
@@ -55,8 +55,11 @@ const SocialLinkEdit = ( {
 	const [ isLinkSheetVisible, setIsLinkSheetVisible ] = useState( false );
 	const [ hasUrl, setHasUrl ] = useState( !! url );
 
-	const activeIcon =
-		styles[ `wp-social-link-${ service }` ] || styles[ `wp-social-link` ];
+	const activeIcon = styles[ `wp-social-link-${ service }` ] ||
+		styles[ `wp-social-link` ] || {
+			backgroundColor: '#f0f0f0',
+			color: '#444',
+		};
 
 	const inactiveIcon = usePreferredColorSchemeStyle(
 		styles.inactiveIcon,

diff --git a/packages/block-library/src/social-link/test/index.native.js b/packages/block-library/src/social-link/test/index.native.js
@@ -0,0 +1,140 @@
+/**
+ * External dependencies
+ */
+// noinspection DuplicatedCode
+import { fireEvent, initializeEditor, waitFor, within } from 'test/helpers';
+/**
+ * WordPress dependencies
+ */
+import { registerCoreBlocks } from '@wordpress/block-library';
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+
+const unregisterBlocks = () => {
+	const blocks = getBlockTypes();
+
+	blocks.forEach( ( { name } ) => unregisterBlockType( name ) );
+};
+
+describe( '<SocialLinkEdit/>', () => {
+	beforeAll( () => {
+		registerCoreBlocks();
+	} );
+
+	afterAll( () => {
+		unregisterBlocks();
+	} );
+
+	/**
+	 * GIVEN an EDITOR is displayed;
+	 * WHEN a SOCIAL ICONS BLOCK is selected from the BLOCK INSERTER;
+	 */
+	it( 'should display WORDPRESS, FACEBOOK, TWITTER, INSTAGRAM by default.', async () => {
+		// Arrange
+		const subject = await initializeEditor( {} );
+
+		// Act
+		fireEvent.press(
+			await waitFor( () => subject.getByA11yLabel( 'Add block' ) )
+		);
+		fireEvent.changeText(
+			await waitFor( () =>
+				subject.getByPlaceholderText( 'Search blocks' )
+			),
+			'social icons'
+		);
+		fireEvent.press(
+			await waitFor( () =>
+				subject.getByA11yLabel( 'Social Icons block' )
+			)
+		);
+		fireEvent(
+			await waitFor( () =>
+				within(
+					subject.getByA11yLabel( /Social Icons Block. Row 1/ )
+				).getByTestId( 'block-list-wrapper' )
+			),
+			'layout',
+			{ nativeEvent: { layout: { width: 100 } } }
+		);
+
+		// Assert
+		expect(
+			await waitFor( () =>
+				subject.getByA11yLabel( /WordPress social icon/ )
+			)
+		).toBeDefined();
+		expect(
+			await waitFor( () =>
+				subject.getByA11yLabel( /Facebook social icon/ )
+			)
+		).toBeDefined();
+		expect(
+			await waitFor( () =>
+				subject.getByA11yLabel( /Twitter social icon/ )
+			)
+		).toBeDefined();
+		expect(
+			await waitFor( () =>
+				subject.getByA11yLabel( /Instagram social icon/ )
+			)
+		).toBeDefined();
+	} );
+
+	/**
+	 * GIVEN an EDITOR is displayed;
+	 * WHEN a SOCIAL ICONS BLOCK is selected from the BLOCK INSERTER;
+	 */
+	it( `should display WORDPRESS with a URL set by default
+	     AND should display FACEBOOK, TWITTER, INSTAGRAM with NO URL set by default.`, async () => {
+		// Arrange
+		const subject = await initializeEditor( {} );
+
+		// Act
+		fireEvent.press(
+			await waitFor( () => subject.getByA11yLabel( 'Add block' ) )
+		);
+		fireEvent.changeText(
+			await waitFor( () =>
+				subject.getByPlaceholderText( 'Search blocks' )
+			),
+			'social icons'
+		);
+		fireEvent.press(
+			await waitFor( () =>
+				subject.getByA11yLabel( 'Social Icons block' )
+			)
+		);
+		fireEvent(
+			await waitFor( () =>
+				within(
+					subject.getByA11yLabel( /Social Icons Block. Row 1/ )
+				).getByTestId( 'block-list-wrapper' )
+			),
+			'layout',
+			{ nativeEvent: { layout: { width: 100 } } }
+		);
+
+		// Assert
+		expect(
+			await waitFor( () =>
+				subject.getByA11yHint( /WordPress has URL set/ )
+			)
+		).toBeDefined();
+		expect(
+			await waitFor( () =>
+				subject.getByA11yHint( /Facebook has no URL set/ )
+			)
+		).toBeDefined();
+		expect(
+			await waitFor( () =>
+				subject.getByA11yHint( /Twitter has no URL set/ )
+			)
+		).toBeDefined();
+		expect(
+			await waitFor( () =>
+				subject.getByA11yHint( /Instagram has no URL set/ )
+			)
+		).toBeDefined();
+		// console.log( JSON.stringify( subject.toJSON(), null, 1 ) );
+	} );
+} );
diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock
@@ -493,12 +493,12 @@ SPEC CHECKSUMS:
   React-logger: faee236598b0f7e1a5e3b68577016ac451f1f993
   react-native-blur: ef741a08d020010ba65e411be0ab82d1d325e7ad
   react-native-get-random-values: 6296ac9e84928625ffb34ca74ab684bbda8747a8
-  react-native-keyboard-aware-scroll-view: 0bc6c2dfe9056935a40dc1a70e764b7a1bbf6568
+  react-native-keyboard-aware-scroll-view: 374b637c8684d7de50bd930df1a2d2b8fd49daa5
   react-native-safe-area: c9cf765aa2dd96159476a99633e7d462ce5bb94f
-  react-native-safe-area-context: fb0338ddfcd1b163e1506d5ebd9b4444348e7501
+  react-native-safe-area-context: 12756eb7af017b6ff6b4f50dc5a55eab299c62fd
   react-native-slider: d4c3367c5db5d2bec3ac0ab9d15ebb73d896034c
-  react-native-video: 41ac75a71f6a6d3a9f56ba792786c4fe77e22ac0
-  react-native-webview: 8480d6e71b06e3d1d2fd644de6313108e7b65f90
+  react-native-video: 7ebeec33e4e00837563d7315b633b00337079217
+  react-native-webview: 5189276d033e3d3c5292d22e5a66ec48c9b2b04b
   React-perflogger: 5ab487cacfe6ec19bfe3d3f8072bf71eb07d63da
   React-RCTActionSheet: 03f25695e095fb5aa003828620943c74cc281fec
   React-RCTAnimation: eaf82da39f0c36fb0ef2a28df797c5f73a2a98ea
@@ -511,8 +511,8 @@ SPEC CHECKSUMS:
   React-RCTVibration: 3e815c3d2dd2e0e931b68595b5b92d23ba38b3fb
   React-runtimeexecutor: 393e26602c1b248683372051e34db63e359e3b01
   ReactCommon: c0263c1a41509aeb94be3214fa7bc3b71eae5ef6
-  RNCClipboard: def60a5048b473addc5dbac5abee5d896c08ec1b
-  RNCMaskedView: 1c8ad5b657280e8c7ebf7866277e1ff820ae48c9
+  RNCClipboard: 6e20baf63bfe3515c2b719a8c3d6797718098663
+  RNCMaskedView: 579fdb1e0abb33cc0d38ee8d4942df9976a0533e
   RNGestureHandler: 0c0e58f463a725fa37d8643d50da6abf300f7844
   RNReanimated: 7d8459391b2f3e1dc6dea919307db4adf4c1d254
   RNScreens: ec0e85d1babdd61d7ec78c98072d9e6b62d96ff6

diff --git a/test/native/setup.js b/test/native/setup.js
@@ -222,6 +222,12 @@ jest.mock( '@wordpress/compose', () => {
 			mockComponent( 'ResizeObserverMock' )( {} ),
 			{ width: 100, height: 100 },
 		] ),
+		usePreferredColorSchemeStyle: jest.fn( () => {
+			return {
+				color: '#fff',
+				backgroundColor: '#0000003f',
+			};
+		} ),
 	};
 } );
 

diff --git a/test/unit/config/global-mocks.js b/test/unit/config/global-mocks.js
@@ -7,6 +7,12 @@ jest.mock( '@wordpress/compose', () => {
 			<App key={ 'mock-key' } />,
 			{ width: 700, height: 500 },
 		] ),
+		usePreferredColorSchemeStyle: jest.fn( () => {
+			return {
+				color: '#fff',
+				backgroundColor: '#0000003f',
+			};
+		} ),
 	};
 } );