E2E Tests: Tweak Comments block tests after migrating to Playwright

packages/e2e-test-utils-playwright/src/admin/index.ts

@@ -11,7 +11,6 @@ import type { Browser, Page, BrowserContext } from '@playwright/test';
  */
 import { createNewPost } from './create-new-post';
 import { getPageError } from './get-page-error';
-import { setOption } from './set-option';
 import { visitAdminPage } from './visit-admin-page';
 import { visitSiteEditor } from './visit-site-editor';
 import type { PageUtils } from '../page-utils';
@@ -36,7 +35,6 @@ export class Admin {
 
 	createNewPost = createNewPost.bind( this );
 	getPageError = getPageError.bind( this );
-	setOption = setOption.bind( this );
 	visitAdminPage = visitAdminPage.bind( this );
 	visitSiteEditor = visitSiteEditor.bind( this );
 }

packages/e2e-test-utils-playwright/src/editor/publish-post.ts

@@ -30,8 +30,11 @@ export async function publishPost( this: Editor ) {
 		'role=region[name="Editor publish"i] >> role=button[name="Publish"i]'
 	);
 
-	const urlString = await this.page.inputValue( 'text="Post address"' );
+	const urlString = await this.page.inputValue(
+		'role=textbox[name="Post address"i]'
+	);
 	const url = new URL( urlString );
 	const postId = url.searchParams.get( 'p' );
-	return postId;
+
+	return typeof postId === 'string' ? parseInt( postId, 10 ) : null;
 }

packages/e2e-test-utils-playwright/src/request-utils/comments.ts

@@ -7,20 +7,35 @@ export interface Comment {
 	id: number;
 	author: number;
 	content: string;
+	post: number;
 }
 
 /**
  * Create new comment using the REST API.
  *
- * @param {} this    RequestUtils.
- * @param {} comment Comment.
+ * It uses the current user if no author is defined inside `comment`.
+ *
+ * @param {} this           RequestUtils.
+ * @param {} comment        Partial<Comment>.
  */
-export async function createComment( this: RequestUtils, comment: Comment ) {
-	this.rest( {
+export async function createComment(
+	this: RequestUtils,
+	comment: Partial< Comment >
+) {
+	const currentUser = await this.rest( {
+		path: '/wp/v2/users/me',
+		method: 'GET',
+	} );
+
+	const author = currentUser?.id;
+
+	const response = await this.rest( {
 		method: 'POST',
 		path: '/wp/v2/comments',
-		data: comment,
+		data: { ...comment, author },
 	} );
+
+	return response;
 }
 
 /**

packages/e2e-test-utils-playwright/src/request-utils/index.ts

@@ -21,7 +21,6 @@ import { deleteAllBlocks } from './blocks';
 import { createComment, deleteAllComments } from './comments';
 import { deleteAllPosts } from './posts';
 import { resetPreferences } from './preferences';
-import { getCurrentUser } from './user';
 import { deleteAllWidgets, addWidgetBlock } from './widgets';
 
 interface StorageState {
@@ -133,7 +132,6 @@ class RequestUtils {
 	uploadMedia = uploadMedia.bind( this );
 	deleteMedia = deleteMedia.bind( this );
 	deleteAllMedia = deleteAllMedia.bind( this );
-	getCurrentUser = getCurrentUser.bind( this );
 }
 
 export type { StorageState };

test/e2e/specs/editor/blocks/comments.spec.js

@@ -8,26 +8,48 @@ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
  * @typedef {import('@wordpress/e2e-test-utils-playwright').RequestUtils} RequestUtils
  */
 
+/**
+ * Sets a site option, from the options-general admin page.
+ *
+ * This is a temporary solution until we can handle WP options through the REST
+ * API. Note that this function needs to be binded to work properly.
+ *
+ * @param {string} setting The option, used to get the option by id.
+ * @param {string} value   The value to set the option to.
+ *
+ * @return {Promise<string>} A Promise that resolves to the option's previous value.
+ */
+async function _setOption( setting, value ) {
+	await this.admin.visitAdminPage( 'options.php', '' );
+	const previousValue = await this.page.inputValue( `#${ setting }` );
+
+	await this.page.fill( `#${ setting }`, value );
+	await this.page.click( '#Update' );
+
+	return previousValue;
+}
+
 test.describe( 'Comments', () => {
 	let previousPageComments,
 		previousCommentsPerPage,
-		previousDefaultCommentsPage;
+		previousDefaultCommentsPage,
+		setOption;
 
 	test.beforeAll( async ( { requestUtils } ) => {
 		await requestUtils.activateTheme( 'emptytheme' );
 	} );
 
-	test.beforeEach( async ( { admin } ) => {
+	test.beforeEach( async ( { admin, page } ) => {
+		// Initializes `setOption`, binding it with required dependencies.
+		setOption = _setOption.bind( { admin, page } );
+
 		// Ideally, we'd set options in beforeAll. Unfortunately, these
 		// aren't exposed via the REST API, so we have to set them through the
 		// relevant wp-admin screen, which involves page utils; but those are
 		// prohibited from beforeAll.
-		previousPageComments = await admin.setOption( 'page_comments', '1' );
-		previousCommentsPerPage = await admin.setOption(
-			'comments_per_page',
-			'1'
-		);
-		previousDefaultCommentsPage = await admin.setOption(
+		previousPageComments = await setOption( 'page_comments', '1' );
+		previousCommentsPerPage = await setOption( 'comments_per_page', '1' );
+		previousDefaultCommentsPage = await setOption(
 			'default_comments_page',
 			'newest'
 		);
@@ -43,8 +65,8 @@ test.describe( 'Comments', () => {
 		await admin.createNewPost();
 		await editor.insertBlock( { name: 'core/comments' } );
 		await expect(
-			await page.locator( 'text="No results found."' )
-		).toHaveCount( 1 );
+			page.locator( 'role=document[name="Block: Comment Template"i]' )
+		).toContainText( 'No results found.' );
 	} );
 
 	test( 'Pagination links are working as expected', async ( {
@@ -53,103 +75,96 @@ test.describe( 'Comments', () => {
 		page,
 		requestUtils,
 	} ) => {
-		const author = requestUtils.getCurrentUser();
 		await admin.createNewPost();
 		await editor.insertBlock( { name: 'core/comments' } );
 		const postId = await editor.publishPost();
 
 		// Create three comments for that post.
 		for ( let i = 0; i < 3; i++ ) {
 			await requestUtils.createComment( {
-				author: author.id,
 				content: `This is an automated comment - ${ i }`,
 				post: postId,
 			} );
 		}
 
 		// Visit the post that was just published.
 		await page.click(
-			'role=region[name="Editor publish"i] >> "View Post"'
+			'role=region[name="Editor publish"] >> role=link[name="View Post"i]'
 		);
 
 		// We check that there is a previous comments page link.
 		await expect(
-			await page.locator( 'text="Older Comments"' )
-		).toHaveCount( 1 );
+			page.locator( 'role=link[name="Older Comments"i]' )
+		).toBeVisible();
 		await expect(
-			await page.locator( 'text="Newer Comments"' )
-		).toHaveCount( 0 );
+			page.locator( 'role=link[name="Newer Comments"i]' )
+		).toBeHidden();
 
-		await page.click( 'text="Older Comments"' );
+		await page.click( 'role=link[name="Older Comments"i]' );
 
 		// We check that there are a previous and a next link.
 		await expect(
-			await page.locator( 'text="Older Comments"' )
-		).toHaveCount( 1 );
+			page.locator( 'role=link[name="Older Comments"i]' )
+		).toBeVisible();
 		await expect(
-			await page.locator( 'text="Newer Comments"' )
-		).toHaveCount( 1 );
+			page.locator( 'role=link[name="Newer Comments"i]' )
+		).toBeVisible();
 
-		await page.click( 'text="Older Comments"' );
+		await page.click( 'role=link[name="Older Comments"i]' );
 
 		// We check that there is only have a next link
 		await expect(
-			await page.locator( 'text="Older Comments"' )
-		).toHaveCount( 0 );
+			page.locator( 'role=link[name="Older Comments"i]' )
+		).toBeHidden();
 		await expect(
-			await page.locator( 'text="Newer Comments"' )
-		).toHaveCount( 1 );
+			page.locator( 'role=link[name="Newer Comments"i]' )
+		).toBeVisible();
 	} );
 	test( 'Pagination links are not appearing if break comments is not enabled', async ( {
 		admin,
 		editor,
 		page,
 		requestUtils,
 	} ) => {
-		const author = requestUtils.getCurrentUser();
-		await admin.setOption( 'page_comments', '0' );
+		await setOption( 'page_comments', '0' );
 		await admin.createNewPost();
 		await editor.insertBlock( { name: 'core/comments' } );
 		const postId = await editor.publishPost();
 
 		// Create three comments for that post.
 		for ( let i = 0; i < 3; i++ ) {
 			await requestUtils.createComment( {
-				author: author.id,
 				content: `This is an automated comment - ${ i }`,
 				post: postId,
 			} );
 		}
 
 		// Visit the post that was just published.
 		await page.click(
-			'role=region[name="Editor publish"i] >> "View Post"'
+			'role=region[name="Editor publish"] >> role=link[name="View Post"i]'
 		);
 
 		// We check that there are no comments page link.
 		await expect(
-			await page.locator( 'text="Older Comments"' )
-		).toHaveCount( 0 );
+			page.locator( 'role=link[name="Older Comments"i]' )
+		).toBeHidden();
 		await expect(
-			await page.locator( 'text="Newer Comments"' )
-		).toHaveCount( 0 );
+			page.locator( 'role=link[name="Newer Comments"i]' )
+		).toBeHidden();
 	} );
 
-	test.afterEach( async ( { admin } ) => {
+	test.afterEach( async ( { requestUtils } ) => {
 		// Ideally, we'd set options in afterAll. Unfortunately, these
 		// aren't exposed via the REST API, so we have to set them through the
 		// relevant wp-admin screen, which involves page utils; but those are
 		// prohibited from beforeAll.
-		await admin.setOption( 'page_comments', previousPageComments );
-		await admin.setOption( 'comments_per_page', previousCommentsPerPage );
-		await admin.setOption(
-			'default_comments_page',
-			previousDefaultCommentsPage
-		);
+		await setOption( 'page_comments', previousPageComments );
+		await setOption( 'comments_per_page', previousCommentsPerPage );
+		await setOption( 'default_comments_page', previousDefaultCommentsPage );
+		await requestUtils.deleteAllComments();
 	} );
 
 	test.afterAll( async ( { requestUtils } ) => {
-		await requestUtils.deleteAllComments();
 		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );
 } );