Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[RNMobile] Block title in unsupported block (#18268)
* WC: #479: Adding help icon and modal to unsupported block. Also putting original name in place of 'Unsupported'. * WC: #479: Adding in unit tests for the component. * WC: #479: Changing the help icon press surface to the whole block because the small icon was too hard to press. Also rearranging the BottomSheet to work the height paddings out correctly. * WC: #479: Changing accessibility label and adding comment. * WC: #479: Adding in text/buttons to match later design. * WC: issue #479: Changing only the question mark icon to be tappable for the help block. Few color changes. Adding some text to the help block. * Display 'unsupported' on all unsupported blocks on mobile * Update the test snapshot of Unsupported block on mobile * Need to mock styling on mobile * Adjust tests to latest changes * Display the block name in quotes, for clarity * Dark mode of info text, title and description * sprintf to compose string, separate strings per platform * Wrap JSX in the grouping operator, as usual * Remove dismiss button, not used in other bottom-sheets * Remove unused import * Revise sprintf format to green the linter * Update tests after removing the Close button * Wrap more JSX in the grouping operator, as usual * Adjust the info-icon color * Different colors for the icon on the sheet * Remove local mock, using the global styleMock.js instead * Enable testing both mobile platforms
- Loading branch information
Showing
5 changed files
with
269 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
packages/block-library/src/missing/test/__snapshots__/edit.native.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`Missing block renders without crashing 1`] = ` | ||
| <View> | ||
| <View | ||
| accessibilityHint="Tap here to show help" | ||
| accessibilityLabel="Help icon" | ||
| accessibilityRole="button" | ||
| accessible={true} | ||
| clickable={true} | ||
| onClick={[Function]} | ||
| onResponderGrant={[Function]} | ||
| onResponderMove={[Function]} | ||
| onResponderRelease={[Function]} | ||
| onResponderTerminate={[Function]} | ||
| onResponderTerminationRequest={[Function]} | ||
| onStartShouldSetResponder={[Function]} | ||
| > | ||
| Svg | ||
| </View> | ||
| Svg | ||
| <Text> | ||
| missing/block/title | ||
| </Text> | ||
| <Text> | ||
| Unsupported | ||
| </Text> | ||
| Modal | ||
| </View> | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import renderer from 'react-test-renderer'; | ||
| import { Text, Platform } from 'react-native'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { BottomSheet, Icon } from '@wordpress/components'; | ||
| jest.mock( '@wordpress/blocks' ); | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import UnsupportedBlockEdit from '../edit.native.js'; | ||
|
|
||
| const defaultAttributes = { | ||
| originalName: 'missing/block/title', | ||
| }; | ||
|
|
||
| const getTestComponentWithContent = ( attributes = defaultAttributes ) => { | ||
| return renderer.create( <UnsupportedBlockEdit attributes={ attributes } /> ); | ||
| }; | ||
|
|
||
| describe( 'Missing block', () => { | ||
| it( 'renders without crashing', () => { | ||
| const component = getTestComponentWithContent(); | ||
| const rendered = component.toJSON(); | ||
| expect( rendered ).toMatchSnapshot(); | ||
| } ); | ||
|
|
||
| describe( 'help modal', () => { | ||
| it( 'renders help icon', () => { | ||
| const component = getTestComponentWithContent(); | ||
| const testInstance = component.root; | ||
| const icons = testInstance.findAllByType( Icon ); | ||
| expect( icons.length ).toBe( 2 ); | ||
| expect( icons[ 0 ].props.icon ).toBe( 'editor-help' ); | ||
| } ); | ||
|
|
||
| it( 'renders info icon on modal', () => { | ||
| const component = getTestComponentWithContent(); | ||
| const testInstance = component.root; | ||
| const bottomSheet = testInstance.findByType( BottomSheet ); | ||
| const children = bottomSheet.props.children.props.children; | ||
| expect( children.length ).toBe( 3 ); // 4 children in the bottom sheet: the icon, the "isn't yet supported" title and the "We are working hard..." message | ||
| expect( children[ 0 ].props.icon ).toBe( 'editor-help' ); | ||
| } ); | ||
|
|
||
| it( 'renders unsupported text on modal', () => { | ||
| const component = getTestComponentWithContent(); | ||
| const testInstance = component.root; | ||
| const bottomSheet = testInstance.findByType( BottomSheet ); | ||
| const children = bottomSheet.props.children.props.children; | ||
| const expectedOSString = Platform.OS === 'ios' ? 'iOS' : 'Android'; | ||
| expect( children[ 1 ].props.children ).toBe( '\'' + defaultAttributes.originalName + '\' isn\'t yet supported on WordPress for ' + expectedOSString ); | ||
| } ); | ||
| } ); | ||
|
|
||
| it( 'renders admin plugins icon', () => { | ||
| const component = getTestComponentWithContent(); | ||
| const testInstance = component.root; | ||
| const icons = testInstance.findAllByType( Icon ); | ||
| expect( icons.length ).toBe( 2 ); | ||
| expect( icons[ 1 ].props.icon ).toBe( 'admin-plugins' ); | ||
| } ); | ||
|
|
||
| it( 'renders title text without crashing', () => { | ||
| const component = getTestComponentWithContent(); | ||
| const testInstance = component.root; | ||
| const texts = testInstance.findAllByType( Text ); | ||
| expect( texts.length ).toBe( 2 ); | ||
| expect( texts[ 0 ].props.children ).toBe( 'missing/block/title' ); | ||
| expect( texts[ 1 ].props.children ).toBe( 'Unsupported' ); | ||
| } ); | ||
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters