Embed block integration tests part 2 #35533
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -816,4 +816,36 @@ describe( 'Embed block', () => { | |
|
|
||
| expect( cannotEmbedText ).toBeDefined(); | ||
| } ); | ||
|
|
||
| it( 'insert embed from slash inserter', async () => { | ||
| const embedBlockSlashInserter = '/Embed'; | ||
| const { getByPlaceholderText, getByA11yLabel } = await initializeEditor( | ||
| { | ||
| initialHtml: | ||
| '<!-- wp:paragraph --><p></p><!-- /wp:paragraph -->', | ||
| } | ||
| ); | ||
|
|
||
| const paragraphText = getByPlaceholderText( 'Start writing…' ); | ||
| fireEvent( paragraphText, 'focus' ); | ||
| fireEvent( paragraphText, 'onChange', { | ||
| nativeEvent: { | ||
| eventCount: 1, | ||
| target: undefined, | ||
| text: embedBlockSlashInserter, | ||
| }, | ||
| } ); | ||
|
|
||
| fireEvent.press( | ||
| await waitFor( () => getByA11yLabel( 'Embed block' ) ) | ||
| ); | ||
|
|
||
| const block = await waitFor( () => | ||
|
There was a problem hiding this comment. Currently, the test is failing at this point. It seems the There was a problem hiding this comment. From an investigation standpoint, I realized that the I am wondering if a prop is missing from the mocked There was a problem hiding this comment. Once the aforementioned issue is resolved, I am going to be replicating the test setup here https://github.com/WordPress/gutenberg/blob/rnmobile/add/embed-block-integration-tests-2/packages/block-library/src/embed/test/index.native.js#L193 so that all the providers that are shown within the There was a problem hiding this comment.
Interesting, I'll investigate this further in case we need to add extra functionality in the mock. There was a problem hiding this comment. After digging into how the autocomplete works, I found out that we had to trigger a different event in the There was a problem hiding this comment. In the following commits are the changes for addressing this issue: |
||
| getByA11yLabel( /Embed Block\. Row 1/ ) | ||
| ); | ||
|
|
||
| const blockName = within( block ).getByText( 'Embed' ); | ||
|
|
||
| expect( blockName ).toBeDefined(); | ||
| } ); | ||
| } ); | ||
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.
The idea here is that the Slash inserter should be visible once the text that has the
/followed byEmbedis entered. Therefore, we should be able to press theEmbed blockbutton within the Autocomplete UI.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.
That's a great idea, I'm wondering if we could query by the
Embedtext instead of the a11y label, as the items in the slash inserter display a text label, wdyt?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.
I applied this suggestion in this commit.