From 4063556d2b8c03490aad5687dac228ada66dc92e Mon Sep 17 00:00:00 2001 From: David Arenas Date: Fri, 15 Jul 2022 15:29:11 +0200 Subject: [PATCH] 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 --- .../src/admin/index.ts | 2 - .../src/admin/set-option.ts | 14 --- .../src/editor/publish-post.ts | 7 +- .../src/request-utils/comments.ts | 30 ++++- .../src/request-utils/index.ts | 2 - .../src/request-utils/user.ts | 18 --- test/e2e/specs/editor/blocks/comments.spec.js | 113 ++++++++++++------ 7 files changed, 108 insertions(+), 78 deletions(-) delete mode 100644 packages/e2e-test-utils-playwright/src/admin/set-option.ts delete mode 100644 packages/e2e-test-utils-playwright/src/request-utils/user.ts diff --git a/packages/e2e-test-utils-playwright/src/admin/index.ts b/packages/e2e-test-utils-playwright/src/admin/index.ts index d28f68872abc51..ee7ebe406fc25f 100644 --- a/packages/e2e-test-utils-playwright/src/admin/index.ts +++ b/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 ); } diff --git a/packages/e2e-test-utils-playwright/src/admin/set-option.ts b/packages/e2e-test-utils-playwright/src/admin/set-option.ts deleted file mode 100644 index 2e18563d0c587b..00000000000000 --- a/packages/e2e-test-utils-playwright/src/admin/set-option.ts +++ /dev/null @@ -1,14 +0,0 @@ -/** - * Internal dependencies - */ -import type { Admin } from './'; - -export async function setOption( this: Admin, setting: string, value: string ) { - await this.visitAdminPage( 'options.php', '' ); - const previousValue = await this.page.inputValue( `#${ setting }` ); - - await this.page.fill( `#${ setting }`, value ); - - await this.page.click( '#Update' ); - return previousValue; -} diff --git a/packages/e2e-test-utils-playwright/src/editor/publish-post.ts b/packages/e2e-test-utils-playwright/src/editor/publish-post.ts index acd0ba1c5c0341..2760a8ff69cefb 100644 --- a/packages/e2e-test-utils-playwright/src/editor/publish-post.ts +++ b/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; } diff --git a/packages/e2e-test-utils-playwright/src/request-utils/comments.ts b/packages/e2e-test-utils-playwright/src/request-utils/comments.ts index a49526f167180d..e5b668aff0dde5 100644 --- a/packages/e2e-test-utils-playwright/src/request-utils/comments.ts +++ b/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; } /** diff --git a/packages/e2e-test-utils-playwright/src/request-utils/index.ts b/packages/e2e-test-utils-playwright/src/request-utils/index.ts index 1ea7b81acdfdb6..03c9002c65bcb1 100644 --- a/packages/e2e-test-utils-playwright/src/request-utils/index.ts +++ b/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 }; diff --git a/packages/e2e-test-utils-playwright/src/request-utils/user.ts b/packages/e2e-test-utils-playwright/src/request-utils/user.ts deleted file mode 100644 index 855136d80c051e..00000000000000 --- a/packages/e2e-test-utils-playwright/src/request-utils/user.ts +++ /dev/null @@ -1,18 +0,0 @@ -/** - * Internal dependencies - */ -import type { RequestUtils } from './index'; - -/** - * Get current user - * - * @param {this} this Request utils. - */ -export async function getCurrentUser( this: RequestUtils ) { - const response = await this.rest( { - path: '/wp/v2/users/me', - method: 'GET', - } ); - - return response; -} diff --git a/test/e2e/specs/editor/blocks/comments.spec.js b/test/e2e/specs/editor/blocks/comments.spec.js index e487ead36e62fa..212dd2884fa075 100644 --- a/test/e2e/specs/editor/blocks/comments.spec.js +++ b/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,7 +62,6 @@ test.describe( 'Comments', () => { page, requestUtils, } ) => { - const author = requestUtils.getCurrentUser(); await admin.createNewPost(); await editor.insertBlock( { name: 'core/comments' } ); const postId = await editor.publishPost(); @@ -61,7 +69,6 @@ test.describe( 'Comments', () => { // 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, } ); @@ -69,45 +76,45 @@ test.describe( 'Comments', () => { // 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(); @@ -115,7 +122,6 @@ test.describe( 'Comments', () => { // 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, } ); @@ -123,33 +129,68 @@ test.describe( 'Comments', () => { // 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} 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; + } +}