-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[RNMobile] Add Picker test helper #50382
Conversation
let selectOption = ( option ) => { | ||
fireEvent.press( screen.getByText( option ) ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is the default action to select a picker option (i.e. it will be used on Android).
ActionSheetIOS.showActionSheetWithOptions.mockImplementation( | ||
( _, callback ) => { | ||
onOptionSelected = callback; | ||
} | ||
); | ||
// The index passed is incremented by one as the first | ||
// option of the picker is `Cancel`. | ||
selectOption = ( option ) => | ||
onOptionSelected( options.indexOf( option ) + 1 ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
On iOS since the Picker component is rendered natively, we select the option by capturing the callback when showing the action sheet.
'components-picker__button-title': { | ||
color: 'white', | ||
}, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This style is used on iOS when rendering the Picker component:
gutenberg/packages/components/src/mobile/picker/index.ios.js
Lines 39 to 40 in 4aa07c3
? styles[ 'components-picker__button-title' ].color | |
: styles[ 'components-picker__button-title--dark' ].color; |
@@ -96,9 +104,44 @@ describe( 'Gallery block', () => { | |||
expect( getByText( 'WordPress Media Library' ) ).toBeVisible(); | |||
} ); | |||
|
|||
it( 'displays correct media options picker', async () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Checking the media options displayed in the picker wasn't being tested due to an unrelated issue (#38444). So I decided to split the test to check:
- The correct media options (here in this test)
- That block remains selected after dismissing the picker (skipped until the issue is solved)
Size Change: 0 B Total Size: 1.37 MB ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, I was able to go through all the tests as expected and confirmed the code changes look good to me, thanks @fluiddot 👏
What?
Adds a test helper to manipulate the Picker component on Android and iOS.
Why?
Currently, the Picker component works on Android tests but not on iOS.
How?
The helper mocks the
ActionSheetIOS
library which renders the Picker component natively on iOS.Additionally, the Gallery block tests have been updated to use this helper as a demonstration.
Testing Instructions
Android
TEST_RN_PLATFORM=android npm run native test -- gallery/test/index
NOTE: The Gallery block tests are displaying the warning
An update to UncontrolledInnerBlocks inside a test was not wrapped in act(...)
. I confirmed that this warning is also displayed intrunk
, so we can omit it.iOS
TEST_RN_PLATFORM=ios npm run native test -- gallery/test/index
Testing Instructions for Keyboard
N/A
Screenshots or screencast
N/A