@wordpress/e2e-tests 3.0.9 → 3.1.0

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

@@ -84,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.
@@ -144,7 +144,7 @@ async function populateNavWithOneItem() {
 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.
@@ -264,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();
 
-			// Wait for a navigation link block before making assertion.
-			await page.waitForSelector( '*[aria-label="Block: Custom Link"]' );
-			expect( await getNavigationMenuRawContent() ).toMatchSnapshot();
+			// 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' );
+
+			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' );
 
-			// Should only be showing "Start empty".
-			expect( placeholderActionsLength ).toEqual( 1 );
+				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 );
+			} );
 		} );
 	} );
 
@@ -316,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'
 		);
@@ -340,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'
 		);
@@ -405,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'
 		);
@@ -420,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'
 		);
@@ -584,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.
@@ -624,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
 			);
@@ -670,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'
 			);
@@ -842,7 +1048,7 @@ describe( 'Navigation', () => {
 			// no URL of label and can be considered unpopulated.
 			await clickBlockToolbarButton( 'Select Submenu' );
 
-			// Check for non-disabled Convert to Link button
+			// Check for non-disabled Convert to Link button.
 			const convertToLinkButton = await page.$(
 				'[aria-label="Block tools"] [aria-label="Convert to Link"]:not([disabled])'
 			);
@@ -879,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(
@@ -889,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." ]`
 			);
@@ -912,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

package/specs/editor/plugins/block-context.test.js

@@ -77,7 +77,7 @@ describe( 'Block context', () => {
 		);
 		expect( content ).toMatch( /^123,\d+,post$/ );
 
-		// Clean up
+		// Clean up.
 		await editorPage.bringToFront();
 		await previewPage.close();
 	} );

package/specs/editor/plugins/block-directory-add.test.js

@@ -12,7 +12,7 @@ import {
 
 const BLOCK1_NAME = 'block-directory-test-block/main-block';
 
-// Urls to mock
+// Urls to mock.
 const SEARCH_URLS = [
 	'/wp/v2/block-directory/search',
 	`rest_route=${ encodeURIComponent( '/wp/v2/block-directory/search' ) }`,
@@ -30,7 +30,7 @@ const INSTALL_URLS = [
 	`rest_route=${ encodeURIComponent( '/wp/v2/plugins' ) }`,
 ];
 
-// Example Blocks
+// Example Blocks.
 const MOCK_BLOCK1 = {
 	name: BLOCK1_NAME,
 	title: 'Block Directory Test Block',
@@ -44,7 +44,7 @@ const MOCK_BLOCK1 = {
 	author: 'No Author',
 	icon: 'block-default',
 	assets: [
-		'https://fake_url.com/block.js', // we will mock this
+		'https://fake_url.com/block.js', // We will mock this.
 	],
 	humanized_updated: '5 months ago',
 	links: {},
@@ -82,7 +82,7 @@ const MOCK_BLOCK2 = {
 	id: 'block-directory-test-secondary-block',
 };
 
-// Block that will be registered
+// Block that will be registered.
 const block = `( function() {
 	var registerBlockType = wp.blocks.registerBlockType;
 	var el = wp.element.createElement;
@@ -112,26 +112,26 @@ const MOCK_EMPTY_RESPONSES = [
 
 const MOCK_BLOCKS_RESPONSES = [
 	{
-		// Mock response for search with the block
+		// Mock response for search with the block.
 		match: ( request ) =>
 			matchUrl( request.url(), SEARCH_URLS ) &&
 			request.method() === 'GET',
 		onRequestMatch: createJSONResponse( [ MOCK_BLOCK1, MOCK_BLOCK2 ] ),
 	},
 	{
-		// Mock response for block type
+		// Mock response for block type.
 		match: ( request ) => matchUrl( request.url(), BLOCK_TYPE_URLS ),
 		onRequestMatch: createJSONResponse( {} ),
 	},
 	{
-		// Mock response for install
+		// Mock response for install.
 		match: ( request ) => matchUrl( request.url(), INSTALL_URLS ),
 		onRequestMatch: createJSONResponse(
 			MOCK_INSTALLED_BLOCK_PLUGIN_DETAILS
 		),
 	},
 	{
-		// Mock the response for the js asset once it gets injected
+		// Mock the response for the js asset once it gets injected.
 		match: ( request ) => request.url().includes( MOCK_BLOCK1.assets[ 0 ] ),
 		onRequestMatch: createResponse(
 			Buffer.from( block, 'utf8' ),
@@ -171,13 +171,13 @@ describe( 'adding blocks from block directory', () => {
 	} );
 
 	it( 'Should show an empty state when no plugin is found.', async () => {
-		// Be super weird so there won't be a matching block installed
+		// Be super weird so there won't be a matching block installed.
 		const impossibleBlockName = '@#$@@Dsdsdfw2#$@';
 
-		// Return an empty list of plugins
+		// Return an empty list of plugins.
 		await setUpResponseMocking( MOCK_EMPTY_RESPONSES );
 
-		// Search for the block via the inserter
+		// Search for the block via the inserter.
 		await searchForBlock( impossibleBlockName );
 
 		const selectorContent = await page.evaluate(
@@ -191,15 +191,15 @@ describe( 'adding blocks from block directory', () => {
 	} );
 
 	it( 'Should be able to add (the first) block.', async () => {
-		// Setup our mocks
+		// Setup our mocks.
 		await setUpResponseMocking( MOCK_BLOCKS_RESPONSES );
 
-		// Search for the block via the inserter
+		// Search for the block via the inserter.
 		await insertBlockDirectoryBlock( MOCK_BLOCK1.title );
 
 		await page.waitForSelector( `div[data-type="${ MOCK_BLOCK1.name }"]` );
 
-		// The block will auto select and get added, make sure we see it in the content
+		// The block will auto select and get added, make sure we see it in the content.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 } );

package/specs/editor/plugins/custom-post-types.test.js

@@ -13,7 +13,7 @@ import {
 const openPageAttributesPanel = async () => {
 	const openButton = await findSidebarPanelWithTitle( 'Page Attributes' );
 
-	// Get the classes from the panel
+	// Get the classes from the panel.
 	const buttonClassName = await (
 		await openButton.getProperty( 'className' )
 	 ).jsonValue();

package/specs/editor/plugins/custom-taxonomies.test.js

@@ -29,7 +29,7 @@ describe( 'Custom Taxonomies labels are used', () => {
 		const openButton = await findSidebarPanelWithTitle( 'Model' );
 		expect( openButton ).not.toBeFalsy();
 
-		// Get the classes from the panel
+		// Get the classes from the panel.
 		const buttonClassName = await (
 			await openButton.getProperty( 'className' )
 		 ).jsonValue();
@@ -39,13 +39,13 @@ describe( 'Custom Taxonomies labels are used', () => {
 			await openButton.click();
 		}
 
-		// Check the add new button
+		// Check the add new button.
 		const labelNew = await page.$x(
 			"//label[@class='components-form-token-field__label' and contains(text(), 'Add New Model')]"
 		);
 		expect( labelNew ).not.toBeFalsy();
 
-		// Fill with one entry
+		// Fill with one entry.
 		await page.type(
 			'input.components-form-token-field__input',
 			'Model 1'

package/specs/editor/plugins/meta-attribute-block.test.js

@@ -62,7 +62,7 @@ describe( 'Block with a meta attribute', () => {
 						// Clicking the input selects the block,
 						// and selecting the block enables the sync data mode
 						// as otherwise the asynchronous re-rendering of unselected blocks
-						// may cause the input to have not yet been updated for the other blocks
+						// may cause the input to have not yet been updated for the other blocks.
 						await input.click();
 						const inputValue = await input.getProperty( 'value' );
 						expect( await inputValue.jsonValue() ).toBe(