Skip to content

Commit

Permalink
more stable embedding tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@youknowriad
youknowriad committed Jun 19, 2020
1 parent 73dbcd3 commit feb1020
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 67 deletions.
6 changes: 3 additions & 3 deletions packages/components/src/autocomplete/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { escapeRegExp, find, map, debounce, deburr } from 'lodash';
import {
Component,
renderToString,
useEffect,
useLayoutEffect,
useState,
} from '@wordpress/element';
import { ENTER, ESCAPE, UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
Expand Down Expand Up @@ -157,7 +157,7 @@ const getAutoCompleterUI = ( autocompleter ) => {
* `activePromise` in the state would result in it actually being in `this.state`
* before the promise resolves and we check to see if this is the active promise or not.
*/
useEffect( () => {
useLayoutEffect( () => {
const { options, isDebounced } = autocompleter;
const loadOptions = debounce(
() => {
Expand Down Expand Up @@ -229,7 +229,7 @@ const getAutoCompleterUI = ( autocompleter ) => {
onReset,
} ) {
const [ items ] = useItems( filterValue );
useEffect( () => {
useLayoutEffect( () => {
onChangeOptions( items );
}, [ items ] );

Expand Down
86 changes: 22 additions & 64 deletions packages/e2e-tests/specs/editor/various/embedding.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,17 @@ const MOCK_RESPONSES = [
},
];

async function insertEmbed( URL ) {
await clickBlockAppender();
await page.keyboard.type( '/embed' );
await page.waitForXPath(
`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Embed')]`
);
await page.keyboard.press( 'Enter' );
await page.keyboard.type( URL );
await page.keyboard.press( 'Enter' );
}

describe( 'Embedding content', () => {
beforeEach( async () => {
await setUpResponseMocking( MOCK_RESPONSES );
Expand All @@ -159,87 +170,49 @@ describe( 'Embedding content', () => {

it( 'should render embeds in the correct state', async () => {
// Valid embed. Should render valid figure element.
await clickBlockAppender();
await page.keyboard.type( '/embed' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'https://twitter.com/notnownikki' );
await page.keyboard.press( 'Enter' );
await insertEmbed( 'https://twitter.com/notnownikki' );
await page.waitForSelector( 'figure.wp-block-embed-twitter' );

// Valid provider; invalid content. Should render failed, edit state.
await clickBlockAppender();
await page.keyboard.type( '/embed' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type(
'https://twitter.com/wooyaygutenberg123454312'
);
await page.keyboard.press( 'Enter' );
await insertEmbed( 'https://twitter.com/wooyaygutenberg123454312' );
await page.waitForSelector(
'input[value="https://twitter.com/wooyaygutenberg123454312"]'
);

// WordPress invalid content. Should render failed, edit state.
await clickBlockAppender();
await page.keyboard.type( '/embed' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'https://wordpress.org/gutenberg/handbook/' );
await page.keyboard.press( 'Enter' );
await insertEmbed( 'https://wordpress.org/gutenberg/handbook/' );
await page.waitForSelector(
'input[value="https://wordpress.org/gutenberg/handbook/"]'
);

// Provider whose oembed API has gone wrong. Should render failed, edit
// state.
await clickBlockAppender();
await page.keyboard.type( '/embed' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'https://twitter.com/thatbunty' );
await page.keyboard.press( 'Enter' );
await insertEmbed( 'https://twitter.com/thatbunty' );
await page.waitForSelector(
'input[value="https://twitter.com/thatbunty"]'
);

// WordPress content that can be embedded. Should render valid figure
// element.
await clickBlockAppender();
await page.keyboard.type( '/embed' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type(
await insertEmbed(
'https://wordpress.org/gutenberg/handbook/block-api/attributes/'
);
await page.keyboard.press( 'Enter' );
await page.waitForSelector( 'figure.wp-block-embed-wordpress' );

// Video content. Should render valid figure element, and include the
// aspect ratio class.
await clickBlockAppender();
await page.keyboard.type( '/embed' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type(
'https://www.youtube.com/watch?v=lXMskKTw3Bc'
);
await page.keyboard.press( 'Enter' );
await insertEmbed( 'https://www.youtube.com/watch?v=lXMskKTw3Bc' );
await page.waitForSelector(
'figure.wp-block-embed-youtube.wp-embed-aspect-16-9'
);

// Photo content. Should render valid figure element.
await clickBlockAppender();
await page.keyboard.type( '/embed' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'https://cloudup.com/cQFlxqtY4ob' );
await page.keyboard.press( 'Enter' );
await insertEmbed( 'https://cloudup.com/cQFlxqtY4ob' );
} );

it( 'should allow the user to convert unembeddable URLs to a paragraph with a link in it', async () => {
// URL that can't be embedded.
await clickBlockAppender();
await page.keyboard.type( '/embed' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type(
'https://twitter.com/wooyaygutenberg123454312'
);
await page.keyboard.press( 'Enter' );
await insertEmbed( 'https://twitter.com/wooyaygutenberg123454312' );

// Wait for the request to fail and present an error. Since placeholder
// has styles applied which depend on resize observer, wait for the
Expand All @@ -254,25 +227,14 @@ describe( 'Embedding content', () => {
} );

it( 'should retry embeds that could not be embedded with trailing slashes, without the trailing slashes', async () => {
await clickBlockAppender();
await page.keyboard.type( '/embed' );
await page.keyboard.press( 'Enter' );
// This URL can't be embedded, but without the trailing slash, it can.
await page.keyboard.type( 'https://twitter.com/notnownikki/' );
await page.keyboard.press( 'Enter' );
await insertEmbed( 'https://twitter.com/notnownikki/' );
// The twitter block should appear correctly.
await page.waitForSelector( 'figure.wp-block-embed-twitter' );
} );

it( 'should allow the user to try embedding a failed URL again', async () => {
// URL that can't be embedded.
await clickBlockAppender();
await page.keyboard.type( '/embed' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type(
'https://twitter.com/wooyaygutenberg123454312'
);
await page.keyboard.press( 'Enter' );
await insertEmbed( 'https://twitter.com/wooyaygutenberg123454312' );

// Wait for the request to fail and present an error. Since placeholder
// has styles applied which depend on resize observer, wait for the
Expand Down Expand Up @@ -313,11 +275,7 @@ describe( 'Embedding content', () => {

// Start a new post, embed the previous post.
await createNewPost();
await clickBlockAppender();
await page.keyboard.type( '/embed' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( postUrl );
await page.keyboard.press( 'Enter' );
await insertEmbed( postUrl );

// Check the block has become a WordPress block.
await page.waitForSelector( '.wp-block-embed-wordpress' );
Expand Down

0 comments on commit feb1020

Please sign in to comment.