@wordpress/e2e-tests 3.0.7 → 3.0.10-next.a55ed9455a.0

package/specs/editor/blocks/navigation.test.js

@@ -26,6 +26,7 @@ import {
 	loginUser,
 	deleteUser,
 	switchUserToAdmin,
+	clickBlockToolbarButton,
 } from '@wordpress/e2e-test-utils';
 import { addQueryArgs } from '@wordpress/url';
 
@@ -83,15 +84,15 @@ async function updateActiveNavigationLink( { url, label, type } ) {
 
 		// Wait for the autocomplete suggestion item to appear.
 		await page.waitForXPath( suggestionPath );
-		// Set the suggestion
+		// Set the suggestion.
 		const suggestion = await page.waitForXPath( suggestionPath );
 
-		// Select it (so we're clicking the right one, even if it's further down the list)
+		// Select it (so we're clicking the right one, even if it's further down the list).
 		await suggestion.click();
 	}
 
 	if ( label ) {
-		// Wait for rich text editor input to be focused before we start typing the label
+		// Wait for rich text editor input to be focused before we start typing the label.
 		await page.waitForSelector( ':focus.rich-text' );
 
 		// With https://github.com/WordPress/gutenberg/pull/19686, we're auto-selecting the label if the label is URL-ish.
@@ -119,12 +120,31 @@ async function selectClassicMenu( optionText ) {
 		`//*[contains(@class, 'components-menu-item__item')][ text()="${ optionText }" ]`
 	);
 	await theOption.click();
+
+	await page.waitForResponse(
+		( response ) =>
+			response.url().includes( 'menu-items' ) && response.status() === 200
+	);
+}
+
+async function populateNavWithOneItem() {
+	// Add a Link block first.
+	const appender = await page.waitForSelector(
+		'.wp-block-navigation .block-list-appender'
+	);
+	await appender.click();
+	// Add a link to the Link block.
+	await updateActiveNavigationLink( {
+		url: 'https://wordpress.org',
+		label: 'WP',
+		type: 'url',
+	} );
 }
 
 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 SELECT_MENU_XPATH = `${ PLACEHOLDER_ACTIONS_XPATH }//button[text()='Select menu']`;
+const SELECT_MENU_XPATH = `${ PLACEHOLDER_ACTIONS_XPATH }//button[text()='Select Menu']`;
 
 /**
  * Delete all items for the given REST resources using the REST API.
@@ -194,6 +214,13 @@ async function getNavigationMenuRawContent() {
 	return stripPageIds( response.content.raw );
 }
 
+async function waitForBlock( blockName ) {
+	const blockSelector = `[aria-label="Editor content"][role="region"] [aria-label="Block: ${ blockName }"]`;
+
+	// Wait for a Submenu block before making assertion.
+	return page.waitForSelector( blockSelector );
+}
+
 // Disable reason - these tests are to be re-written.
 // eslint-disable-next-line jest/no-disabled-tests
 describe( 'Navigation', () => {
@@ -237,49 +264,246 @@ describe( 'Navigation', () => {
 		await deleteUser( contributorUsername );
 	} );
 
-	describe( 'placeholder', () => {
-		it( 'allows a navigation block to be created from existing menus', async () => {
-			await createClassicMenu( { name: 'Test Menu 1' } );
-			await createClassicMenu(
-				{ name: 'Test Menu 2' },
-				menuItemsFixture
+	describe( 'loading states', () => {
+		it( 'does not show a loading indicator if there is no ref to a Navigation post', async () => {
+			await createNewPost();
+			await clickOnMoreMenuItem( 'Code editor' );
+			const codeEditorInput = await page.waitForSelector(
+				'.editor-post-text-editor'
+			);
+
+			// Simulate block behaviour when loading a page containing an unconfigured Nav block
+			// that is not selected.
+			await codeEditorInput.click();
+			const markup = '<!-- wp:navigation /-->';
+			await page.keyboard.type( markup );
+			await clickButton( 'Exit code editor' );
+
+			// Wait for block to render...
+			const navBlock = await waitForBlock( 'Navigation' );
+
+			// Test specifically for the primary loading indicator because a spinner also exists
+			// in the hidden Placeholder component when it is loading.
+			const loadingSpinner = await navBlock.$(
+				'.wp-block-navigation__loading-indicator.components-spinner'
 			);
 
+			// We should not see the loading state if the block has not been configured and is empty.
+			expect( loadingSpinner ).toBeNull();
+		} );
+
+		it( 'shows a loading indicator whilst ref resolves to Navigation post items', async () => {
+			const testNavId = 1;
+
+			let resolveNavigationRequest;
+
+			// Mock the request for the single Navigation post in order to fully
+			// control the resolution of the request. This will enable the ability
+			// to assert on how the UI responds during the API resolution without
+			// relying on variable factors such as network conditions.
+			await setUpResponseMocking( [
+				{
+					match: ( request ) =>
+						request.url().includes( `rest_route` ) &&
+						request.url().includes( `navigation` ) &&
+						request.url().includes( testNavId ),
+					onRequestMatch: () => {
+						// The Promise simulates a REST API request whose resolultion
+						// the test has full control over.
+						return new Promise( ( resolve ) => {
+							// Assign the resolution function to the var in the
+							// upper scope to afford control over resolution.
+							resolveNavigationRequest = resolve;
+						} );
+					},
+				},
+			] );
+
 			await createNewPost();
-			await insertBlock( 'Navigation' );
-			await selectClassicMenu( 'Test Menu 2' );
+			await clickOnMoreMenuItem( 'Code editor' );
+			const codeEditorInput = await page.waitForSelector(
+				'.editor-post-text-editor'
+			);
+			await codeEditorInput.click();
+
+			// The ID used in this `ref` is that which we mock in the request
+			// above to ensure we can control the resolution of the Navigation post.
+			const markup = `<!-- wp:navigation {"ref":${ testNavId }} /-->`;
+			await page.keyboard.type( markup );
+			await clickButton( 'Exit code editor' );
 
-			// Wait for a navigation link block before making assertion.
-			await page.waitForSelector( '*[aria-label="Block: Custom Link"]' );
-			expect( await getNavigationMenuRawContent() ).toMatchSnapshot();
+			const navBlock = await waitForBlock( 'Navigation' );
+
+			// Check for the spinner to be present whilst loading.
+			await navBlock.waitForSelector( '.components-spinner' );
+
+			// Resolve the controlled mocked API request.
+			resolveNavigationRequest();
 		} );
 
-		it( 'creates an empty navigation block when the selected existing menu is also empty', async () => {
-			await createClassicMenu( { name: 'Test Menu 1' } );
+		it( 'shows a loading indicator whilst empty Navigation menu is being created', async () => {
+			const testNavId = 1;
+
+			let resolveNavigationRequest;
+
+			// Mock the request for the single Navigation post in order to fully
+			// control the resolution of the request. This will enable the ability
+			// to assert on how the UI responds during the API resolution without
+			// relying on variable factors such as network conditions.
+			await setUpResponseMocking( [
+				{
+					match: ( request ) =>
+						request.url().includes( `rest_route` ) &&
+						request.url().includes( `navigation` ) &&
+						request.url().includes( testNavId ),
+					onRequestMatch: () => {
+						// The Promise simulates a REST API request whose resolultion
+						// the test has full control over.
+						return new Promise( ( resolve ) => {
+							// Assign the resolution function to the var in the
+							// upper scope to afford control over resolution.
+							resolveNavigationRequest = resolve;
+						} );
+					},
+				},
+			] );
+
 			await createNewPost();
 			await insertBlock( 'Navigation' );
-			await selectClassicMenu( 'Test Menu 1' );
 
-			// Wait for the appender so that we know the navigation menu was created.
-			await page.waitForSelector(
-				'nav[aria-label="Block: Navigation"] button[aria-label="Add block"]'
+			let navBlock = await waitForBlock( 'Navigation' );
+
+			// Create empty Navigation block with no items
+			const startEmptyButton = await page.waitForXPath(
+				START_EMPTY_XPATH
 			);
-			expect( await getNavigationMenuRawContent() ).toMatchSnapshot();
+			await startEmptyButton.click();
+
+			navBlock = await waitForBlock( 'Navigation' );
+
+			// Check for the spinner to be present whilst loading.
+			await navBlock.waitForSelector( '.components-spinner' );
+
+			// Resolve the controlled mocked API request.
+			resolveNavigationRequest();
 		} );
+	} );
 
-		it( 'does not display the options to create from pages or menus if there are none', async () => {
-			await createNewPost();
+	describe( 'Placeholder', () => {
+		describe( 'placeholder states', () => {
+			it( 'shows placeholder on insertion of block', async () => {
+				await createNewPost();
+				await insertBlock( 'Navigation' );
+				await page.waitForXPath( START_EMPTY_XPATH );
+			} );
 
-			await insertBlock( 'Navigation' );
-			await page.waitForXPath( START_EMPTY_XPATH );
+			it( 'shows placeholder preview when unconfigured block is not selected', async () => {
+				await createNewPost();
+				await insertBlock( 'Navigation' );
 
-			const placeholderActionsLength = await page.$$eval(
-				`.${ PLACEHOLDER_ACTIONS_CLASS } button`,
-				( els ) => els.length
-			);
+				// Check for unconfigured Placeholder state to display
+				await page.waitForXPath( START_EMPTY_XPATH );
+
+				// Deselect the Nav block by inserting a new block at the root level
+				// outside of the Nav block.
+				await insertBlock( 'Paragraph' );
+
+				const navBlock = await waitForBlock( 'Navigation' );
+
+				// Check Placeholder Preview is visible.
+				await navBlock.waitForSelector(
+					'.wp-block-navigation-placeholder__preview',
+					{ visible: true }
+				);
+
+				// Check Placeholder Component itself is not visible.
+				await navBlock.waitForSelector(
+					'.wp-block-navigation-placeholder__controls',
+					{ visible: false }
+				);
+			} );
+
+			it( 'shows placeholder preview when block with no menu items is not selected', async () => {
+				await createNewPost();
+				await insertBlock( 'Navigation' );
+
+				// Create empty Navigation block with no items
+				const startEmptyButton = await page.waitForXPath(
+					START_EMPTY_XPATH
+				);
+				await startEmptyButton.click();
+
+				// Wait for block to resolve
+				let navBlock = await waitForBlock( 'Navigation' );
+
+				// Deselect the Nav block by inserting a new block at the root level
+				// outside of the Nav block.
+				await insertBlock( 'Paragraph' );
+
+				// Aquire fresh reference to block
+				navBlock = await waitForBlock( 'Navigation' );
+
+				// Check Placeholder Preview is visible.
+				await navBlock.waitForSelector(
+					'.wp-block-navigation-placeholder__preview',
+					{ visible: true }
+				);
+
+				// Check the block's appender is not visible.
+				const blockAppender = await navBlock.$(
+					'.block-list-appender'
+				);
+
+				expect( blockAppender ).toBeNull();
+			} );
+		} );
+
+		describe( 'placeholder actions', () => {
+			it( 'allows a navigation block to be created from existing menus', async () => {
+				await createClassicMenu( { name: 'Test Menu 1' } );
+				await createClassicMenu(
+					{ name: 'Test Menu 2' },
+					menuItemsFixture
+				);
+
+				await createNewPost();
+				await insertBlock( 'Navigation' );
+				await selectClassicMenu( 'Test Menu 2' );
+
+				// Wait for a navigation link block before making assertion.
+				await page.waitForSelector(
+					'*[aria-label="Block: Custom Link"]'
+				);
+				expect( await getNavigationMenuRawContent() ).toMatchSnapshot();
+			} );
+
+			it( 'creates an empty navigation block when the selected existing menu is also empty', async () => {
+				await createClassicMenu( { name: 'Test Menu 1' } );
+				await createNewPost();
+				await insertBlock( 'Navigation' );
+				await selectClassicMenu( 'Test Menu 1' );
+
+				// Wait for the appender so that we know the navigation menu was created.
+				await page.waitForSelector(
+					'nav[aria-label="Block: Navigation"] button[aria-label="Add block"]'
+				);
+				expect( await getNavigationMenuRawContent() ).toMatchSnapshot();
+			} );
+
+			it( 'does not display the options to create from existing menus if there are no existing menus', async () => {
+				await createNewPost();
+
+				await insertBlock( 'Navigation' );
+				await page.waitForXPath( START_EMPTY_XPATH );
+
+				const placeholderActionsLength = await page.$$eval(
+					`.${ PLACEHOLDER_ACTIONS_CLASS } button`,
+					( els ) => els.length
+				);
 
-			// Should only be showing "Start empty".
-			expect( placeholderActionsLength ).toEqual( 1 );
+				// Should only be showing "Start empty".
+				expect( placeholderActionsLength ).toEqual( 1 );
+			} );
 		} );
 	} );
 
@@ -289,6 +513,11 @@ describe( 'Navigation', () => {
 		const startEmptyButton = await page.waitForXPath( START_EMPTY_XPATH );
 		await startEmptyButton.click();
 
+		// Await "success" notice.
+		await page.waitForXPath(
+			'//div[@class="components-snackbar__content"][contains(text(), "Navigation Menu successfully created.")]'
+		);
+
 		const appender = await page.waitForSelector(
 			'.wp-block-navigation .block-list-appender'
 		);
@@ -313,7 +542,7 @@ describe( 'Navigation', () => {
 		// After adding a new block, search input should be shown immediately.
 		// Verify that Escape would close the popover.
 		// Regression: https://github.com/WordPress/gutenberg/pull/19885
-		// Wait for URL input to be focused
+		// Wait for URL input to be focused.
 		await page.waitForSelector(
 			'input.block-editor-url-input__input:focus'
 		);
@@ -378,7 +607,7 @@ describe( 'Navigation', () => {
 		);
 		await appenderAgain.click();
 
-		// Wait for URL input to be focused
+		// Wait for URL input to be focused.
 		await page.waitForSelector(
 			'input.block-editor-url-input__input:focus'
 		);
@@ -393,7 +622,7 @@ describe( 'Navigation', () => {
 		expect( isInURLInput ).toBe( true );
 		await page.keyboard.press( 'Escape' );
 
-		// Click the link placeholder
+		// Click the link placeholder.
 		const placeholder = await page.waitForSelector(
 			'.wp-block-navigation-link__placeholder'
 		);
@@ -557,14 +786,17 @@ describe( 'Navigation', () => {
 		const markup =
 			'<!-- wp:navigation --><!-- wp:page-list /--><!-- /wp:navigation -->';
 		await page.keyboard.type( markup );
+
 		await clickButton( 'Exit code editor' );
-		const navBlock = await page.waitForSelector(
-			'nav[aria-label="Block: Navigation"]'
-		);
-		// Select the block to convert to a wp_navigation and publish.
-		// The select menu button shows up when saving is complete.
+
+		const navBlock = await waitForBlock( 'Navigation' );
+
+		// Select the block to convert to a wp_navigation.
 		await navBlock.click();
-		await page.waitForSelector( 'button[aria-label="Select Menu"]' );
+
+		// The Page List block is rendered within Navigation InnerBlocks when saving is complete.
+		await waitForBlock( 'Page List' );
+
 		await publishPost();
 
 		// Check that the wp_navigation post has the page list block.
@@ -575,20 +807,6 @@ describe( 'Navigation', () => {
 		const NAV_ENTITY_SELECTOR =
 			'//div[@class="entities-saved-states__panel"]//label//strong[contains(text(), "Navigation")]';
 
-		async function populateNavWithOneItem() {
-			// Add a Link block first.
-			const appender = await page.waitForSelector(
-				'.wp-block-navigation .block-list-appender'
-			);
-			await appender.click();
-			// Add a link to the Link block.
-			await updateActiveNavigationLink( {
-				url: 'https://wordpress.org',
-				label: 'WP',
-				type: 'url',
-			} );
-		}
-
 		async function resetNavBlockToInitialState() {
 			const selectMenuDropdown = await page.waitForSelector(
 				'[aria-label="Select Menu"]'
@@ -611,17 +829,18 @@ describe( 'Navigation', () => {
 				'<!-- wp:navigation --><!-- wp:page-list /--><!-- /wp:navigation -->';
 			await page.keyboard.type( markup );
 			await clickButton( 'Exit code editor' );
-			const navBlock = await page.waitForSelector(
-				'nav[aria-label="Block: Navigation"]'
-			);
 
-			// Select the block to convert to a wp_navigation and publish.
-			// The select menu button shows up when saving is complete.
+			const navBlock = await waitForBlock( 'Navigation' );
+
+			// Select the block to convert to a wp_navigation.
 			await navBlock.click();
-			await page.waitForSelector( 'button[aria-label="Select Menu"]' );
+
+			// The Page List block is rendered within Navigation InnerBlocks when saving is complete.
+			await waitForBlock( 'Page List' );
 
 			// Reset the nav block to create a new entity.
 			await resetNavBlockToInitialState();
+
 			const startEmptyButton = await page.waitForXPath(
 				START_EMPTY_XPATH
 			);
@@ -657,7 +876,7 @@ describe( 'Navigation', () => {
 			await page.waitForXPath( NAV_ENTITY_SELECTOR );
 			expect( await page.$x( NAV_ENTITY_SELECTOR ) ).toHaveLength( 1 );
 
-			// Publish the post
+			// Publish the post.
 			const entitySaveButton = await page.waitForSelector(
 				'.editor-entities-saved-states__save-button'
 			);
@@ -731,6 +950,113 @@ describe( 'Navigation', () => {
 		expect( tagCount ).toBe( 1 );
 	} );
 
+	describe( 'Submenus', () => {
+		it( 'shows button which converts submenu to link when submenu is not-populated (empty)', async () => {
+			const navSubmenuSelector = `[aria-label="Editor content"][role="region"] [aria-label="Block: Submenu"]`;
+
+			await createNewPost();
+			await insertBlock( 'Navigation' );
+
+			const startEmptyButton = await page.waitForXPath(
+				START_EMPTY_XPATH
+			);
+
+			await startEmptyButton.click();
+
+			await populateNavWithOneItem();
+
+			await clickBlockToolbarButton( 'Add submenu' );
+
+			await waitForBlock( 'Submenu' );
+
+			// Revert the Submenu back to a Navigation Link block.
+			await clickBlockToolbarButton( 'Convert to Link' );
+
+			// Check the Submenu block is no longer present.
+			const submenuBlock = await page.$( navSubmenuSelector );
+
+			expect( submenuBlock ).toBeFalsy();
+		} );
+
+		it( 'shows button to convert submenu to link in disabled state when submenu is populated', async () => {
+			await createNewPost();
+			await insertBlock( 'Navigation' );
+
+			const startEmptyButton = await page.waitForXPath(
+				START_EMPTY_XPATH
+			);
+
+			await startEmptyButton.click();
+
+			await populateNavWithOneItem();
+
+			await clickBlockToolbarButton( 'Add submenu' );
+
+			await waitForBlock( 'Submenu' );
+
+			// Add a Link block first.
+			const appender = await page.waitForSelector(
+				'[aria-label="Block: Submenu"] [aria-label="Add block"]'
+			);
+
+			await appender.click();
+
+			await updateActiveNavigationLink( {
+				url: 'https://make.wordpress.org/core/',
+				label: 'Submenu item #1',
+				type: 'url',
+			} );
+
+			await clickBlockToolbarButton( 'Select Submenu' );
+
+			// Check button exists but is in disabled state.
+			const disabledConvertToLinkButton = await page.$(
+				'[aria-label="Block tools"] [aria-label="Convert to Link"][disabled]'
+			);
+
+			expect( disabledConvertToLinkButton ).toBeTruthy();
+		} );
+
+		it( 'shows button to convert submenu to link when submenu is populated with a single incomplete link item', async () => {
+			// For context on why this test is required please see:
+			// https://github.com/WordPress/gutenberg/pull/38203#issuecomment-1027672948.
+
+			await createNewPost();
+			await insertBlock( 'Navigation' );
+
+			const startEmptyButton = await page.waitForXPath(
+				START_EMPTY_XPATH
+			);
+
+			await startEmptyButton.click();
+
+			await populateNavWithOneItem();
+
+			await clickBlockToolbarButton( 'Add submenu' );
+
+			await waitForBlock( 'Submenu' );
+
+			// Add a Link block first.
+			const appender = await page.waitForSelector(
+				'[aria-label="Block: Submenu"] [aria-label="Add block"]'
+			);
+
+			await appender.click();
+
+			// Here we intentionally do not populate the inserted Navigation Link block.
+			// Rather we immediaely click away leaving the link in a state where it has
+			// no URL of label and can be considered unpopulated.
+			await clickBlockToolbarButton( 'Select Submenu' );
+
+			// Check for non-disabled Convert to Link button.
+			const convertToLinkButton = await page.$(
+				'[aria-label="Block tools"] [aria-label="Convert to Link"]:not([disabled])'
+			);
+
+			expect( convertToLinkButton ).toBeTruthy();
+		} );
+	} );
+
 	describe( 'Permission based restrictions', () => {
 		afterEach( async () => {
 			await switchUserToAdmin();
@@ -759,9 +1085,10 @@ describe( 'Navigation', () => {
 
 			await insertBlock( 'Navigation' );
 
-			// Select the Navigation post created by the Admin early
+			// Select the Navigation post created by the Admin earlier
 			// in the test.
 			const navigationPostCreatedByAdminName = 'Navigation';
+
 			const dropdown = await page.waitForXPath( SELECT_MENU_XPATH );
 			await dropdown.click();
 			const theOption = await page.waitForXPath(
@@ -769,7 +1096,7 @@ describe( 'Navigation', () => {
 			);
 			await theOption.click();
 
-			// Make sure the snackbar error shows up
+			// Make sure the snackbar error shows up.
 			await page.waitForXPath(
 				`//*[contains(@class, 'components-snackbar__content')][ text()="You do not have permission to edit this Menu. Any changes made will not be saved." ]`
 			);
@@ -792,7 +1119,7 @@ describe( 'Navigation', () => {
 			await createNewPost();
 			await insertBlock( 'Navigation' );
 
-			// Make sure the snackbar error shows up
+			// Make sure the snackbar error shows up.
 			await page.waitForXPath(
 				`//*[contains(@class, 'components-snackbar__content')][ text()="${ noticeText }" ]`
 			);

package/specs/editor/blocks/table.test.js

@@ -131,7 +131,7 @@ describe( 'Table', () => {
 		// Expect the table to have a header, body and footer with written content.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 
-		// Toggle off the switches
+		// Toggle off the switches.
 		await headerSwitch[ 0 ].click();
 		await footerSwitch[ 0 ].click();
 

package/specs/editor/plugins/align-hook.test.js

@@ -94,32 +94,32 @@ const createCorrectlyAppliesAndRemovesAlignmentTest = (
 	it( 'Correctly applies the selected alignment and correctly removes the alignment', async () => {
 		const BUTTON_XPATH = `//button[contains(@class,'components-dropdown-menu__menu-item')]//span[contains(text(), '${ alignLabels[ alignment ] }')]`;
 
-		// set the specified alignment.
+		// Set the specified alignment.
 		await insertBlock( blockName );
 		await clickBlockToolbarButton( 'Align' );
 		await ( await page.$x( BUTTON_XPATH ) )[ 0 ].click();
 
-		// verify the button of the specified alignment is pressed.
+		// Verify the button of the specified alignment is pressed.
 		await expectActiveButtonLabelToBe( alignLabels[ alignment ] );
 
 		let htmlMarkup = await getEditedPostContent();
 
-		// verify the markup of the selected alignment was generated.
+		// Verify the markup of the selected alignment was generated.
 		expect( htmlMarkup ).toMatchSnapshot();
 
-		// verify the markup can be correctly parsed
+		// Verify the markup can be correctly parsed.
 		await verifyMarkupIsValid( htmlMarkup );
 
 		await selectBlockByClientId( ( await getAllBlocks() )[ 0 ].clientId );
 
-		// remove the alignment.
+		// Remove the alignment.
 		await clickBlockToolbarButton( 'Align' );
 		await ( await page.$x( BUTTON_XPATH ) )[ 0 ].click();
 
-		// verify 'none' alignment button is in pressed state.
+		// Verify 'none' alignment button is in pressed state.
 		await expectActiveButtonLabelToBe( alignLabels.none );
 
-		// verify alignment markup was removed from the block.
+		// Verify alignment markup was removed from the block.
 		htmlMarkup = await getEditedPostContent();
 		expect( htmlMarkup ).toMatchSnapshot();
 
@@ -128,7 +128,7 @@ const createCorrectlyAppliesAndRemovesAlignmentTest = (
 
 		await selectBlockByClientId( ( await getAllBlocks() )[ 0 ].clientId );
 
-		// verify alignment `none` button is in pressed state after parsing the block.
+		// Verify alignment `none` button is in pressed state after parsing the block.
 		await expectActiveButtonLabelToBe( alignLabels.none );
 	} );
 };
@@ -202,7 +202,7 @@ describe( 'Align Hook Works As Expected', () => {
 
 		it( 'Applies the selected alignment by default', async () => {
 			await insertBlock( BLOCK_NAME );
-			// verify the correct alignment button is pressed
+			// Verify the correct alignment button is pressed.
 			await clickBlockToolbarButton( 'Align' );
 			const selectedAlignmentControls = await page.$x(
 				SELECTED_ALIGNMENT_CONTROL_SELECTOR
@@ -219,7 +219,7 @@ describe( 'Align Hook Works As Expected', () => {
 
 		it( 'Can remove the default alignment and the align attribute equals none but alignnone class is not applied', async () => {
 			await insertBlock( BLOCK_NAME );
-			// remove the alignment.
+			// Remove the alignment.
 			await clickBlockToolbarButton( 'Align' );
 			const [ selectedAlignmentControl ] = await page.$x(
 				SELECTED_ALIGNMENT_CONTROL_SELECTOR