Skip to content
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.

Sign up for GitHub

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

Navigation: Re-enable navigation block e2e tests #29543

Merged
merged 1 commit into from
Mar 9, 2021
Merged

Navigation: Re-enable navigation block e2e tests #29543

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 59 additions & 0 deletions packages/e2e-tests/specs/experiments/blocks/__snapshots__/navigation.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Navigation Creating from existing Menus allows a navigation block to be created from existing menus 1`] = `
"<!-- wp:navigation {\\"orientation\\":\\"horizontal\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Home\\",\\"url\\":\\"http://localhost:8889/\\"} /-->

<!-- wp:navigation-link {\\"label\\":\\"Accusamus quo repellat illum magnam quas\\",\\"url\\":\\"http://localhost:8889/?page_id=41\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Debitis cum consequatur sit doloremque\\",\\"url\\":\\"http://localhost:8889/?page_id=51\\"} /-->
<!-- /wp:navigation-link -->

<!-- wp:navigation-link {\\"label\\":\\"Est ea vero non nihil officiis in\\",\\"url\\":\\"http://localhost:8889/?page_id=53\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Fuga odio quis tempora\\",\\"url\\":\\"http://localhost:8889/?page_id=56\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"In consectetur repellendus eveniet maiores aperiam\\",\\"url\\":\\"http://localhost:8889/?page_id=15\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Mollitia maiores consequatur ea dolorem blanditiis\\",\\"url\\":\\"http://localhost:8889/?page_id=45\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Necessitatibus nisi qui qui necessitatibus quaerat possimus\\",\\"url\\":\\"http://localhost:8889/?page_id=27\\"} /-->
<!-- /wp:navigation-link -->
<!-- /wp:navigation-link -->
<!-- /wp:navigation-link -->
<!-- /wp:navigation-link -->

<!-- wp:navigation-link {\\"label\\":\\"Nulla omnis autem dolores eligendi\\",\\"url\\":\\"http://localhost:8889/?page_id=43\\"} /-->

<!-- wp:navigation-link {\\"label\\":\\"Sample Page\\",\\"url\\":\\"http://localhost:8889/?page_id=2\\"} /-->

<!-- wp:navigation-link {\\"label\\":\\"Beatae qui labore voluptas eveniet officia quia voluptas qui porro sequi et aut est\\",\\"description\\":\\"Ratione nemo ut aut ullam sed assumenda quis est exercitationem\\",\\"url\\":\\"http://localhost:8889/?cat=7\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Et minus itaque velit tempore hic quisquam saepe quas asperiores\\",\\"description\\":\\"Vel fuga enim rerum perspiciatis sapiente mollitia magni ut molestiae labore quae quia quia libero perspiciatis voluptatem quidem deleniti eveniet laboriosam doloribus dolor laborum accusantium modi ducimus itaque rerum cum nostrum\\",\\"url\\":\\"http://localhost:8889/?cat=19\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Et quas a et mollitia et voluptas optio voluptate quia quo unde aut in nostrum iste impedit quisquam id aut\\",\\"description\\":\\"Quas sit labore earum omnis eos sint iste est possimus harum aut soluta sint optio quos distinctio inventore voluptate non ut aliquam ad ut voluptates fugiat numquam magnam modi repellendus modi laudantium et debitis officia est voluptatum quidem unde molestiae animi vero fuga accusamus nam\\",\\"url\\":\\"http://localhost:8889/?cat=6\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Illo quis sit impedit itaque expedita earum deserunt magni doloremque velit eum id error\\",\\"description\\":\\"Doloremque vero sunt officiis iste voluptatibus voluptas molestiae sint asperiores recusandae amet praesentium et explicabo nesciunt similique voluptatum laudantium amet officiis quas distinctio quis enim nihil tempora\\",\\"url\\":\\"http://localhost:8889/?cat=16\\"} /-->
<!-- /wp:navigation-link -->
<!-- /wp:navigation-link -->
<!-- /wp:navigation-link -->

<!-- wp:navigation-link {\\"label\\":\\"WordPress.org\\",\\"url\\":\\"https://wordpress.org\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Google\\",\\"url\\":\\"https://google.com\\"} /-->
<!-- /wp:navigation-link -->
<!-- /wp:navigation -->"
`;

exports[`Navigation Creating from existing Menus creates an empty navigation block when the selected existing menu is also empty 1`] = `"<!-- wp:navigation {\\"orientation\\":\\"horizontal\\"} /-->"`;

exports[`Navigation Creating from existing Pages allows a navigation block to be created using existing pages 1`] = `
"<!-- wp:navigation {\\"orientation\\":\\"horizontal\\"} -->
<!-- wp:page-list /-->
<!-- /wp:navigation -->"
`;

exports[`Navigation allows an empty navigation block to be created and manually populated using a mixture of internal and external links 1`] = `
"<!-- wp:navigation {\\"orientation\\":\\"horizontal\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"WP\\",\\"id\\":\\"https://wordpress.org\\",\\"url\\":\\"https://wordpress.org\\"} /-->

<!-- wp:navigation-link {\\"label\\":\\"Contact\\",\\"id\\":1,\\"url\\":\\"https://this/is/a/test/search/get-in-touch\\"} /-->
<!-- /wp:navigation -->"
`;

exports[`Navigation allows pages to be created from the navigation block and their links added to menu 1`] = `
"<!-- wp:navigation {\\"orientation\\":\\"horizontal\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"A really long page name that will not exist\\",\\"id\\":1,\\"url\\":\\"https://this/is/a/test/create/page/my-new-page\\"} /-->
<!-- /wp:navigation -->"
`;
118 changes: 33 additions & 85 deletions packages/e2e-tests/specs/experiments/blocks/navigation.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
getEditedPostContent,
insertBlock,
setUpResponseMocking,
clickBlockToolbarButton,
pressKeyWithModifier,
showBlockToolbar,
} from '@wordpress/e2e-test-utils';
Expand Down Expand Up @@ -218,35 +217,29 @@ async function updateActiveNavigationLink( { url, label, type } ) {
}

async function selectDropDownOption( optionText ) {
const selectToggle = await page.waitForSelector(
'.wp-block-navigation-placeholder__select-control button'
const dropdown = await page.waitForXPath(
"//*[contains(@class, 'wp-block-navigation-placeholder__actions__dropdown')]"
);
await selectToggle.click();
await dropdown.click();
const theOption = await page.waitForXPath(
`//li[text()="${ optionText }"]`
`//*[contains(@class, 'components-menu-item__item')][ text()="${ optionText }" ]`
);
await theOption.click();
}

async function clickCreateButton() {
const buttonText = 'Create';
// Wait for button to become available
await page.waitForXPath(
`//button[text()="${ buttonText }"][not(@disabled)]`
);

// Then locate...
const createNavigationButton = await page.waitForXPath(
`//button[text()="${ buttonText }"][not(@disabled)]`
);
const PLACEHOLDER_ACTIONS_CLASS = 'wp-block-navigation-placeholder__actions';
const PLACEHOLDER_ACTIONS_XPATH = `//*[contains(@class, '${ PLACEHOLDER_ACTIONS_CLASS }')]`;
const START_EMPTY_XPATH = `${ PLACEHOLDER_ACTIONS_XPATH }//button[text()='Start empty']`;
const ADD_ALL_PAGES_XPATH = `${ PLACEHOLDER_ACTIONS_XPATH }//button[text()='Add all pages']`;

// Then click
await createNavigationButton.click();
async function createNavBlockWithAllPages() {
const allPagesButton = await page.waitForXPath( ADD_ALL_PAGES_XPATH );
await allPagesButton.click();
}

async function createEmptyNavBlock() {
await selectDropDownOption( 'Create empty Navigation' );
await clickCreateButton();
const startEmptyButton = await page.waitForXPath( START_EMPTY_XPATH );
await startEmptyButton.click();
}

async function addLinkBlock() {
Expand All @@ -268,8 +261,7 @@ afterEach( async () => {
await setUpResponseMocking( [] );
} );

// Skip reason: https://github.com/WordPress/gutenberg/issues/27588.
describe.skip( 'Navigation', () => {
describe( 'Navigation', () => {
describe( 'Creating from existing Pages', () => {
it( 'allows a navigation block to be created using existing pages', async () => {
// Mock the response from the Pages endpoint. This is done so that the pages returned are always
Expand All @@ -292,9 +284,7 @@ describe.skip( 'Navigation', () => {
// Add the navigation block.
await insertBlock( 'Navigation' );

await selectDropDownOption( 'Create from all top-level pages' );

await clickCreateButton();
await createNavBlockWithAllPages();

// Snapshot should contain the mocked pages.
expect( await getEditedPostContent() ).toMatchSnapshot();
Expand All @@ -307,26 +297,15 @@ describe.skip( 'Navigation', () => {
// Add the navigation block.
await insertBlock( 'Navigation' );

await page.waitForSelector(
'.wp-block-navigation-placeholder__select-control button'
);
await page.click(
'.wp-block-navigation-placeholder__select-control button'
);
await page.waitForXPath( START_EMPTY_XPATH );

const dropDownItemsLength = await page.$$eval(
'ul[role="listbox"] li[role="option"]',
const placeholderActionsLength = await page.$$eval(
`.${ PLACEHOLDER_ACTIONS_CLASS } button`,
( els ) => els.length
);

// Should only be showing
// 1. Create empty menu.
expect( dropDownItemsLength ).toEqual( 1 );

await page.waitForXPath( '//li[text()="Create empty Navigation"]' );

// Snapshot should contain the mocked menu items.
expect( await getEditedPostContent() ).toMatchSnapshot();
// Should only be showing "Start empty"
expect( placeholderActionsLength ).toEqual( 1 );
} );
} );

Expand All @@ -339,8 +318,6 @@ describe.skip( 'Navigation', () => {

await selectDropDownOption( 'Test Menu 2' );

await clickCreateButton();

await page.waitForSelector( '.wp-block-navigation__container' );

// Scope element selector to the Editor's "Content" region as otherwise it picks up on
Expand All @@ -367,8 +344,6 @@ describe.skip( 'Navigation', () => {

await selectDropDownOption( 'Test Menu 1' );

await clickCreateButton();

// Scope element selector to the "Editor content" as otherwise it picks up on
// Block Style live previews.
const navBlockItemsLength = await page.$$eval(
Expand All @@ -390,26 +365,15 @@ describe.skip( 'Navigation', () => {
// Add the navigation block.
await insertBlock( 'Navigation' );

await page.waitForSelector(
'.wp-block-navigation-placeholder__select-control button'
);
await page.click(
'.wp-block-navigation-placeholder__select-control button'
);
await page.waitForXPath( START_EMPTY_XPATH );

const dropDownItemsLength = await page.$$eval(
'ul[role="listbox"] li[role="option"]',
const placeholderActionsLength = await page.$$eval(
`.${ PLACEHOLDER_ACTIONS_CLASS } button`,
( els ) => els.length
);

// Should only be showing
// 1. Create empty menu.
expect( dropDownItemsLength ).toEqual( 1 );

await page.waitForXPath( '//li[text()="Create empty Navigation"]' );

// Snapshot should contain the mocked menu items.
expect( await getEditedPostContent() ).toMatchSnapshot();
// Should only be showing create empty menu.
expect( placeholderActionsLength ).toEqual( 1 );
} );
} );

Expand Down Expand Up @@ -452,17 +416,12 @@ describe.skip( 'Navigation', () => {
);
expect( isInURLInput ).toBe( true );
await page.keyboard.press( 'Escape' );
const isInLinkRichText = await page.evaluate(
() =>
document.activeElement.classList.contains( 'rich-text' ) &&
!! document.activeElement.closest(
'.block-editor-block-list__block'
)
);
expect( isInLinkRichText ).toBe( true );

// Now, trigger the link dialog once more.
await clickBlockToolbarButton( 'Link' );
//click the link placeholder
const placeholder = await page.waitForSelector(
'.wp-block-navigation-link__placeholder'
);
await placeholder.click();

// For the second nav link block use an existing internal page.
// Mock the api response so that it's consistent.
Expand Down Expand Up @@ -539,21 +498,10 @@ describe.skip( 'Navigation', () => {

await createPageButton.click();

// wait for the creating confirmation to go away, and we should now be focused on our text input
await page.waitForSelector( ':focus.rich-text' );

// Confirm the new link is focused.
const isInLinkRichText = await page.evaluate(
() =>
document.activeElement.classList.contains( 'rich-text' ) &&
!! document.activeElement.closest(
'.block-editor-block-list__block'
) &&
document.activeElement.innerText ===
'A really long page name that will not exist'
const draftLink = await page.waitForSelector(
'.wp-block-navigation-link__content'
);

expect( isInLinkRichText ).toBe( true );
await draftLink.click();

// Expect a Navigation Block with a link for "A really long page name that will not exist".
expect( await getEditedPostContent() ).toMatchSnapshot();
Expand Down