E2E Tests: Tweak Comments block tests after migrating to Playwright (#…

…42406)

* Update createComment util

* Return a number in publishPost

* Use role locators in comments

* Move `deleteAllComments` inside `afterEach`

* Switch from text to role selector in `publishPost`

* Use current user by default inside `createComment`

* Remove `getCurrentUser` util

* Make role selectors case-insensitive

* Move `setOption` util to comments spec

* Remove optional chaining operator

* Type response when creating a new comment

* Create a fixture for `setOption` function

* Improve types for `createComment`

* Change some variable names

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,42 @@ export interface Comment {
 	id: number;
 	author: number;
 	content: string;
+	post: number;
+}
+
+export interface CreateCommentPayload {
+	content: string;
+	post: number;
+}
+
+export interface User {
+	id: number;
 }
 
 /**
  * Create new comment using the REST API.
  *
  * @param {} this    RequestUtils.
- * @param {} comment Comment.
+ * @param {} payload CreateCommentPayload.
  */
-export async function createComment( this: RequestUtils, comment: Comment ) {
-	this.rest( {
+export async function createComment(
+	this: RequestUtils,
+	payload: CreateCommentPayload
+) {
+	const currentUser = await this.rest< User >( {
+		path: '/wp/v2/users/me',
+		method: 'GET',
+	} );
+
+	const author = currentUser.id;
+
+	const comment = await this.rest< Comment >( {
 		method: 'POST',
 		path: '/wp/v2/comments',
-		data: comment,
+		data: { ...payload, author },
 	} );
+
+	return comment;
 }
 
 /**

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,6 +8,12 @@ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
  * @typedef {import('@wordpress/e2e-test-utils-playwright').RequestUtils} RequestUtils
  */
 
+test.use( {
+	commentsBlockUtils: async ( { page, admin }, use ) => {
+		await use( new CommentsBlockUtils( { page, admin } ) );
+	},
+} );
+
 test.describe( 'Comments', () => {
 	let previousPageComments,
 		previousCommentsPerPage,
@@ -17,17 +23,20 @@ test.describe( 'Comments', () => {
 		await requestUtils.activateTheme( 'emptytheme' );
 	} );
 
-	test.beforeEach( async ( { admin } ) => {
+	test.beforeEach( async ( { commentsBlockUtils } ) => {
 		// 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(
+		previousPageComments = await commentsBlockUtils.setOption(
+			'page_comments',
+			'1'
+		);
+		previousCommentsPerPage = await commentsBlockUtils.setOption(
 			'comments_per_page',
 			'1'
 		);
-		previousDefaultCommentsPage = await admin.setOption(
+		previousDefaultCommentsPage = await commentsBlockUtils.setOption(
 			'default_comments_page',
 			'newest'
 		);
@@ -43,8 +52,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 +62,135 @@ 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,
+		commentsBlockUtils,
 	} ) => {
-		const author = requestUtils.getCurrentUser();
-		await admin.setOption( 'page_comments', '0' );
+		await commentsBlockUtils.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, commentsBlockUtils } ) => {
 		// 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(
+		await commentsBlockUtils.setOption(
+			'page_comments',
+			previousPageComments
+		);
+		await commentsBlockUtils.setOption(
+			'comments_per_page',
+			previousCommentsPerPage
+		);
+		await commentsBlockUtils.setOption(
 			'default_comments_page',
 			previousDefaultCommentsPage
 		);
+		await requestUtils.deleteAllComments();
 	} );
 
 	test.afterAll( async ( { requestUtils } ) => {
-		await requestUtils.deleteAllComments();
 		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );
 } );
+
+class CommentsBlockUtils {
+	constructor( { page, admin } ) {
+		this.page = page;
+		this.admin = admin;
+	}
+
+	/**
+	 * Sets a site option, from the options-general admin page.
+	 *
+	 * This is a temporary solution until we can handle options through the REST
+	 * API.
+	 *
+	 * @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 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;
+	}
+}