@wordpress/e2e-tests 3.0.9 → 3.1.0

package/specs/editor/various/is-typing.test.js

@@ -17,17 +17,17 @@ describe( 'isTyping', () => {
 
 		await clickBlockAppender();
 
-		// Type in a paragraph
+		// Type in a paragraph.
 		await page.keyboard.type( 'Type' );
 
 		// Toolbar is hidden
 		let blockToolbar = await page.$( blockToolbarSelector );
 		expect( blockToolbar ).toBe( null );
 
-		// Moving the mouse shows the toolbar
+		// Moving the mouse shows the toolbar.
 		await showBlockToolbar();
 
-		// Toolbar is visible
+		// Toolbar is visible.
 		blockToolbar = await page.$( blockToolbarSelector );
 		expect( blockToolbar ).not.toBe( null );
 
@@ -40,7 +40,7 @@ describe( 'isTyping', () => {
 	} );
 
 	it( 'should not close the dropdown when typing in it', async () => {
-		// Adds a Dropdown with an input to all blocks
+		// Adds a Dropdown with an input to all blocks.
 		await page.evaluate( () => {
 			const { Dropdown, ToolbarButton, Fill } = wp.components;
 			const { createElement: el, Fragment } = wp.element;
@@ -82,19 +82,19 @@ describe( 'isTyping', () => {
 
 		await clickBlockAppender();
 
-		// Type in a paragraph
+		// Type in a paragraph.
 		await page.keyboard.type( 'Type' );
 
-		// Show Toolbar
+		// Show Toolbar.
 		await showBlockToolbar();
 
-		// Open the dropdown
+		// Open the dropdown.
 		await page.click( '.dropdown-open' );
 
 		// Type inside the dropdown's input
 		await page.type( '.dropdown-input', 'Random' );
 
-		// The input should still be visible
+		// The input should still be visible.
 		const input = await page.$( '.dropdown-input' );
 		expect( input ).not.toBe( null );
 	} );

package/specs/editor/various/keyboard-navigable-blocks.test.js

@@ -20,7 +20,7 @@ async function getActiveLabel() {
 }
 
 const navigateToContentEditorTop = async () => {
-	// Use 'Ctrl+`' to return to the top of the editor
+	// Use 'Ctrl+`' to return to the top of the editor.
 	await pressKeyWithModifier( 'ctrl', '`' );
 	await pressKeyWithModifier( 'ctrl', '`' );
 };
@@ -81,7 +81,7 @@ describe( 'Order of block keyboard navigation', () => {
 	it( 'permits tabbing through paragraph blocks in the expected order', async () => {
 		const paragraphBlocks = [ 'Paragraph 0', 'Paragraph 1', 'Paragraph 2' ];
 
-		// create 3 paragraphs blocks with some content
+		// Create 3 paragraphs blocks with some content.
 		for ( const paragraphBlock of paragraphBlocks ) {
 			await insertBlock( 'Paragraph' );
 			await page.keyboard.type( paragraphBlock );

package/specs/editor/various/links.test.js

@@ -31,10 +31,10 @@ describe( 'Links', () => {
 		// Now in a new post and try to create a link from an autocomplete suggestion using the keyboard.
 		await page.keyboard.type( 'Here comes a link: ' );
 
-		// Press Cmd+K to insert a link
+		// Press Cmd+K to insert a link.
 		await pressKeyWithModifier( 'primary', 'K' );
 
-		// Wait for the URL field to auto-focus
+		// Wait for the URL field to auto-focus.
 		await waitForURLFieldAutoFocus();
 		expect(
 			await page.$(
@@ -58,41 +58,41 @@ describe( 'Links', () => {
 	} );
 
 	it( 'can be created by selecting text and clicking Link', async () => {
-		// Create a block with some text
+		// Create a block with some text.
 		await clickBlockAppender();
 		await page.keyboard.type( 'This is Gutenberg' );
 
-		// Select some text
+		// Select some text.
 		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
 
-		// Click on the Link button
+		// Click on the Link button.
 		await page.click( 'button[aria-label="Link"]' );
 
-		// Wait for the URL field to auto-focus
+		// Wait for the URL field to auto-focus.
 		await waitForURLFieldAutoFocus();
 
-		// Type a URL
+		// Type a URL.
 		await page.keyboard.type( 'https://wordpress.org/gutenberg' );
 
-		// Submit the link
+		// Submit the link.
 		await page.keyboard.press( 'Enter' );
 
-		// The link should have been inserted
+		// The link should have been inserted.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
 	it( 'will not automatically create a link if selected text is not a valid HTTP based URL', async () => {
-		// Create a block with some text
+		// Create a block with some text.
 		await clickBlockAppender();
 		await page.keyboard.type( 'This: is not a link' );
 
-		// Select some text
+		// Select some text.
 		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
 
-		// Click on the Link button
+		// Click on the Link button.
 		await page.click( 'button[aria-label="Link"]' );
 
-		// Wait for the URL field to auto-focus
+		// Wait for the URL field to auto-focus.
 		await waitForURLFieldAutoFocus();
 
 		const urlInputValue = await page.evaluate(
@@ -103,20 +103,20 @@ describe( 'Links', () => {
 	} );
 
 	it( 'can be created by selecting text and using keyboard shortcuts', async () => {
-		// Create a block with some text
+		// Create a block with some text.
 		await clickBlockAppender();
 		await page.keyboard.type( 'This is Gutenberg' );
 
-		// Select some text
+		// Select some text.
 		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
 
-		// Press Cmd+K to insert a link
+		// Press Cmd+K to insert a link.
 		await pressKeyWithModifier( 'primary', 'K' );
 
-		// Wait for the URL field to auto-focus
+		// Wait for the URL field to auto-focus.
 		await waitForURLFieldAutoFocus();
 
-		// Type a URL
+		// Type a URL.
 		await page.keyboard.type( 'https://wordpress.org/gutenberg' );
 
 		// Navigate to and toggle the "Open in new tab" checkbox.
@@ -133,43 +133,43 @@ describe( 'Links', () => {
 		// this point the link is still not inserted.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 
-		// Tab back to the Submit and apply the link
+		// Tab back to the Submit and apply the link.
 		await pressKeyWithModifier( 'shift', 'Tab' );
 		await page.keyboard.press( 'Enter' );
 
-		// The link should have been inserted
+		// The link should have been inserted.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
 	it( 'can be created without any text selected', async () => {
-		// Create a block with some text
+		// Create a block with some text.
 		await clickBlockAppender();
 		await page.keyboard.type( 'This is Gutenberg: ' );
 
-		// Press Cmd+K to insert a link
+		// Press Cmd+K to insert a link.
 		await pressKeyWithModifier( 'primary', 'K' );
 
-		// Wait for the URL field to auto-focus
+		// Wait for the URL field to auto-focus.
 		await waitForURLFieldAutoFocus();
 
-		// Type a URL
+		// Type a URL.
 		await page.keyboard.type( 'https://wordpress.org/gutenberg' );
 
-		// Press Enter to apply the link
+		// Press Enter to apply the link.
 		await page.keyboard.press( 'Enter' );
 
-		// A link with the URL as its text should have been inserted
+		// A link with the URL as its text should have been inserted.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
 	it( 'can be created instantly when a URL is selected', async () => {
-		// Create a block with some text
+		// Create a block with some text.
 		await clickBlockAppender();
 		await page.keyboard.type(
 			'This is Gutenberg: https://wordpress.org/gutenberg'
 		);
 
-		// Select the URL
+		// Select the URL.
 		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
 		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
 		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
@@ -178,52 +178,52 @@ describe( 'Links', () => {
 		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
 		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
 
-		// Click on the Link button
+		// Click on the Link button.
 		await page.click( 'button[aria-label="Link"]' );
 
-		// A link with the selected URL as its href should have been inserted
+		// A link with the selected URL as its href should have been inserted.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
 	it( 'is not created when we click away from the link input', async () => {
-		// Create a block with some text
+		// Create a block with some text.
 		await clickBlockAppender();
 		await page.keyboard.type( 'This is Gutenberg' );
 
-		// Select some text
+		// Select some text.
 		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
 
-		// Click on the Link button
+		// Click on the Link button.
 		await page.click( 'button[aria-label="Link"]' );
 
-		// Wait for the URL field to auto-focus
+		// Wait for the URL field to auto-focus.
 		await waitForURLFieldAutoFocus();
 
-		// Type a URL
+		// Type a URL.
 		await page.keyboard.type( 'https://wordpress.org/gutenberg' );
 
-		// Click somewhere else - it doesn't really matter where
+		// Click somewhere else - it doesn't really matter where.
 		await page.click( '.editor-post-title' );
 	} );
 
 	const createAndReselectLink = async () => {
-		// Create a block with some text
+		// Create a block with some text.
 		await clickBlockAppender();
 		await page.keyboard.type( 'This is Gutenberg' );
 
-		// Select some text
+		// Select some text.
 		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
 
-		// Click on the Link button
+		// Click on the Link button.
 		await page.click( 'button[aria-label="Link"]' );
 
-		// Wait for the URL field to auto-focus
+		// Wait for the URL field to auto-focus.
 		await waitForURLFieldAutoFocus();
 
-		// Type a URL
+		// Type a URL.
 		await page.keyboard.type( 'https://wordpress.org/gutenberg' );
 
-		// Click on the Submit button
+		// Click on the Submit button.
 		await page.keyboard.press( 'Enter' );
 
 		// Reselect the link.
@@ -233,22 +233,22 @@ describe( 'Links', () => {
 	it( 'can be edited', async () => {
 		await createAndReselectLink();
 
-		// Click on the Edit button
+		// Click on the Edit button.
 		const [ editButton ] = await page.$x(
 			'//button[contains(@aria-label, "Edit")]'
 		);
 		await editButton.click();
 
-		// Wait for the URL field to auto-focus
+		// Wait for the URL field to auto-focus.
 		await waitForURLFieldAutoFocus();
 
-		// Change the URL
+		// Change the URL.
 		await page.keyboard.type( '/handbook' );
 
-		// Submit the link
+		// Submit the link.
 		await page.keyboard.press( 'Enter' );
 
-		// The link should have been updated
+		// The link should have been updated.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
@@ -264,7 +264,7 @@ describe( 'Links', () => {
 		// under very specific circumstances and screensizes.
 		await pressKeyWithModifier( 'primaryShift', 'K' );
 
-		// The link should have been removed
+		// The link should have been removed.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
@@ -287,7 +287,7 @@ describe( 'Links', () => {
 		await page.keyboard.type( 'Text' );
 		await page.click( 'button[aria-label="Link"]' );
 
-		// Typing "left" should not close the dialog
+		// Typing "left" should not close the dialog.
 		await page.keyboard.press( 'ArrowLeft' );
 		let popover = await page.$(
 			'.components-popover__content .block-editor-link-control'
@@ -310,7 +310,7 @@ describe( 'Links', () => {
 
 		await clickBlockToolbarButton( 'Link' );
 
-		// Typing "left" should not close the dialog
+		// Typing "left" should not close the dialog.
 		await page.keyboard.press( 'ArrowLeft' );
 		let popover = await page.$(
 			'.components-popover__content .block-editor-link-control'
@@ -351,10 +351,10 @@ describe( 'Links', () => {
 		// eslint-disable-next-line no-restricted-syntax
 		await page.waitForTimeout( 100 );
 
-		// Publish the post
+		// Publish the post.
 		await page.click( '.editor-post-publish-button' );
 
-		// Return the URL of the new post
+		// Return the URL of the new post.
 		await page.waitForSelector(
 			'.post-publish-panel__postpublish-post-address input'
 		);
@@ -377,10 +377,10 @@ describe( 'Links', () => {
 		await page.keyboard.type( 'This is Gutenberg' );
 		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
 
-		// Press Cmd+K to insert a link
+		// Press Cmd+K to insert a link.
 		await pressKeyWithModifier( 'primary', 'K' );
 
-		// Wait for the URL field to auto-focus
+		// Wait for the URL field to auto-focus.
 		await waitForURLFieldAutoFocus();
 		expect(
 			await page.$(
@@ -407,10 +407,10 @@ describe( 'Links', () => {
 		await page.keyboard.type( '.' );
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 
-		// Press Cmd+K to insert a link
+		// Press Cmd+K to insert a link.
 		await pressKeyWithModifier( 'primary', 'K' );
 
-		// Wait for the URL field to auto-focus
+		// Wait for the URL field to auto-focus.
 		await waitForURLFieldAutoFocus();
 		expect(
 			await page.$(
@@ -426,10 +426,10 @@ describe( 'Links', () => {
 			)
 		).toBeNull();
 
-		// Press Cmd+K to insert a link
+		// Press Cmd+K to insert a link.
 		await pressKeyWithModifier( 'primary', 'K' );
 
-		// Wait for the URL field to auto-focus
+		// Wait for the URL field to auto-focus.
 		await waitForURLFieldAutoFocus();
 		expect(
 			await page.$(
@@ -564,10 +564,10 @@ describe( 'Links', () => {
 		await pressKeyWithModifier( 'primary', 'a' );
 		await page.keyboard.type( 'wordpress.org' );
 
-		// Update the link
+		// Update the link.
 		await page.keyboard.press( 'Enter' );
 
-		// Navigate back to the popover
+		// Navigate back to the popover.
 		await page.keyboard.press( 'ArrowLeft' );
 		await page.keyboard.press( 'ArrowLeft' );
 
@@ -591,14 +591,14 @@ describe( 'Links', () => {
 
 	describe( 'Editing link text', () => {
 		it( 'should not display text input when initially creating the link', async () => {
-			// Create a block with some text
+			// Create a block with some text.
 			await clickBlockAppender();
 			await page.keyboard.type( 'This is Gutenberg: ' );
 
-			// Press Cmd+K to insert a link
+			// Press Cmd+K to insert a link.
 			await pressKeyWithModifier( 'primary', 'K' );
 
-			// Wait for the URL field to auto-focus
+			// Wait for the URL field to auto-focus.
 			await waitForURLFieldAutoFocus();
 
 			const textInput = await page
@@ -652,7 +652,7 @@ describe( 'Links', () => {
 			const textToSelect = `         spaces     `;
 			const textWithWhitespace = `Text with leading and trailing${ textToSelect }`;
 
-			// Create a block with some text
+			// Create a block with some text.
 			await clickBlockAppender();
 			await page.keyboard.type( textWithWhitespace );
 
@@ -662,16 +662,16 @@ describe( 'Links', () => {
 				await pressKeyWithModifier( 'shift', 'ArrowLeft' );
 			}
 
-			// Click on the Link button
+			// Click on the Link button.
 			await page.click( 'button[aria-label="Link"]' );
 
-			// Wait for the URL field to auto-focus
+			// Wait for the URL field to auto-focus.
 			await waitForURLFieldAutoFocus();
 
-			// Type a URL
+			// Type a URL.
 			await page.keyboard.type( 'https://wordpress.org/gutenberg' );
 
-			// Click on the Submit button
+			// Click on the Submit button.
 			await page.keyboard.press( 'Enter' );
 
 			// Reselect the link.
@@ -728,16 +728,16 @@ describe( 'Links', () => {
 			// to reflect the original value with no modifications.
 			expect( textInputValue ).toBe( originalLinkText );
 
-			// Select all the link text in the input
+			// Select all the link text in the input.
 			await pressKeyWithModifier( 'primary', 'a' );
 
-			// Modify the link text value
+			// Modify the link text value.
 			await page.keyboard.type( changedLinkText );
 
-			// Submit the change
+			// Submit the change.
 			await page.keyboard.press( 'Enter' );
 
-			// Check the created link reflects the link text
+			// Check the created link reflects the link text.
 			const actualLinkText = await page.evaluate(
 				() =>
 					document.querySelector(
@@ -768,12 +768,12 @@ describe( 'Links', () => {
 			await page.keyboard.press( 'Tab' );
 			await page.keyboard.press( 'Tab' );
 
-			// Make a selection within the RichText
+			// Make a selection within the RichText.
 			await pressKeyWithModifier( 'shift', 'ArrowRight' );
 			await pressKeyWithModifier( 'shift', 'ArrowRight' );
 			await pressKeyWithModifier( 'shift', 'ArrowRight' );
 
-			// Move back to the text input
+			// Move back to the text input.
 			await page.keyboard.press( 'Tab' );
 
 			// Tabbing back should land us in the text input.
@@ -794,7 +794,7 @@ describe( 'Links', () => {
 			const linkedText = `Gutenberg`;
 			const textBeyondLinkedText = ` and more text.`;
 
-			// Create a block with some text
+			// Create a block with some text.
 			await clickBlockAppender();
 			await page.keyboard.type(
 				`This is ${ linkedText }${ textBeyondLinkedText }`
@@ -809,19 +809,19 @@ describe( 'Links', () => {
 				await page.keyboard.press( 'ArrowLeft' );
 			}
 
-			// Select the linkedText
+			// Select the linkedText.
 			await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
 
-			// Click on the Link button
+			// Click on the Link button.
 			await page.click( 'button[aria-label="Link"]' );
 
-			// Wait for the URL field to auto-focus
+			// Wait for the URL field to auto-focus.
 			await waitForURLFieldAutoFocus();
 
-			// Type a URL
+			// Type a URL.
 			await page.keyboard.type( 'https://wordpress.org/gutenberg' );
 
-			// Update the link
+			// Update the link.
 			await page.keyboard.press( 'Enter' );
 
 			await page.keyboard.press( 'ArrowLeft' );
@@ -874,27 +874,27 @@ describe( 'Links', () => {
 			const linkOneURL = 'https://wordpress.org';
 			const linkTwoURL = 'https://wordpress.org/gutenberg';
 
-			// Create a block with some text
+			// Create a block with some text.
 			await clickBlockAppender();
 			await page.keyboard.type(
 				`This is the ${ linkedTextOne }${ linkedTextTwo }`
 			);
 
-			// Select the linkedTextTwo
+			// Select the linkedTextTwo.
 			for ( let index = 0; index < linkedTextTwo.length; index++ ) {
 				await pressKeyWithModifier( 'shift', 'ArrowLeft' );
 			}
 
-			// Click on the Link button
+			// Click on the Link button.
 			await page.click( 'button[aria-label="Link"]' );
 
-			// Wait for the URL field to auto-focus
+			// Wait for the URL field to auto-focus.
 			await waitForURLFieldAutoFocus();
 
-			// Type a URL
+			// Type a URL.
 			await page.keyboard.type( linkTwoURL );
 
-			// Update the link
+			// Update the link.
 			await page.keyboard.press( 'Enter' );
 
 			// Move cursor next to the **end** of `linkTextOne`
@@ -905,16 +905,16 @@ describe( 'Links', () => {
 			// Select `linkTextOne`
 			await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
 
-			// Click on the Link button
+			// Click on the Link button.
 			await page.click( 'button[aria-label="Link"]' );
 
-			// Wait for the URL field to auto-focus
+			// Wait for the URL field to auto-focus.
 			await waitForURLFieldAutoFocus();
 
-			// Type a URL
+			// Type a URL.
 			await page.keyboard.type( linkOneURL );
 
-			// Update the link
+			// Update the link.
 			await page.keyboard.press( 'Enter' );
 
 			// Move cursor within `linkTextOne`

package/specs/editor/various/list-view.test.js

@@ -51,7 +51,7 @@ describe( 'List view', () => {
 			'//a[contains(., "Paragraph")][@draggable="true"]'
 		);
 
-		// Drag above the heading block
+		// Drag above the heading block.
 		const headingBlock = await page.waitForXPath(
 			'//a[contains(., "Heading")][@draggable="true"]'
 		);
@@ -149,4 +149,50 @@ describe( 'List view', () => {
 
 		expect( selectedElementText ).toContain( 'Paragraph' );
 	} );
+
+	// Test keyboard Home/End keys.
+	it( 'ensures the Home/End keyboard keys move focus to start/end of list', async () => {
+		// Insert some blocks of different types.
+		await insertBlock( 'Image' );
+		await insertBlock( 'Heading' );
+		await insertBlock( 'Paragraph' );
+		await insertBlock( 'Columns' );
+		await insertBlock( 'Group' );
+
+		// Open list view.
+		await pressKeyWithModifier( 'access', 'o' );
+
+		// The last inserted group block should be selected in list view.
+		await page.waitForXPath( '//a[contains(., "Group(selected block)")]' );
+
+		// Press Home to go to the first inserted block (image).
+		await page.keyboard.press( 'Home' );
+		const listViewImageBlock = await page.waitForXPath(
+			'//a[contains(., "Image")]'
+		);
+		await expect( listViewImageBlock ).toHaveFocus();
+
+		// Press End followed by Arrow Up to go to the second to last block (columns).
+		await page.keyboard.press( 'End' );
+		await page.keyboard.press( 'ArrowUp' );
+		const listViewColumnsBlock = await page.waitForXPath(
+			'//a[contains(., "Columns")]'
+		);
+		await expect( listViewColumnsBlock ).toHaveFocus();
+
+		// Try navigating the right column to image block options button via Home key.
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'Home' );
+		const listViewImageBlockRight = await page.waitForSelector(
+			'button[aria-label="Options for Image block"]'
+		);
+		await expect( listViewImageBlockRight ).toHaveFocus();
+
+		// Try navigating the right column to group block options button.
+		await page.keyboard.press( 'End' );
+		const listViewGroupBlockRight = await page.waitForSelector(
+			'button[aria-label="Options for Group block"]'
+		);
+		await expect( listViewGroupBlockRight ).toHaveFocus();
+	} );
 } );

package/specs/editor/various/manage-reusable-blocks.test.js

@@ -28,14 +28,14 @@ describe( 'Managing reusable blocks', () => {
 	it( 'Should import reusable blocks', async () => {
 		const originalEntries = await getNumberOfEntries();
 
-		// Import Reusable block
+		// Import Reusable block.
 		await page.waitForSelector( '.list-reusable-blocks__container' );
 		const importButton = await page.$(
 			'.list-reusable-blocks__container button'
 		);
 		await importButton.click();
 
-		// Select the file to upload
+		// Select the file to upload.
 		const testReusableBlockFile = path.join(
 			__dirname,
 			'..',
@@ -47,13 +47,13 @@ describe( 'Managing reusable blocks', () => {
 		const input = await page.$( '.list-reusable-blocks-import-form input' );
 		await input.uploadFile( testReusableBlockFile );
 
-		// Submit the form
+		// Submit the form.
 		const button = await page.$(
 			'.list-reusable-blocks-import-form__button'
 		);
 		await button.click();
 
-		// Wait for the success notice
+		// Wait for the success notice.
 		await page.waitForSelector( '.notice-success' );
 		const noticeContent = await page.$eval(
 			'.notice-success',
@@ -63,7 +63,7 @@ describe( 'Managing reusable blocks', () => {
 			'Reusable block imported successfully!'
 		);
 
-		// Refresh the page
+		// Refresh the page.
 		await visitAdminPage( 'edit.php', 'post_type=wp_block' );
 
 		const expectedEntries = originalEntries + 1;