From 16702b1ee096011131dc3d8865214a8cab8e4520 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 29 Nov 2023 16:28:39 +0200 Subject: [PATCH] refactor tests and add `createTemplate` util --- .../src/request-utils/index.ts | 4 +- .../src/request-utils/templates.ts | 30 +++- .../site-editor/new-templates-list.spec.js | 162 +++++++----------- 3 files changed, 90 insertions(+), 106 deletions(-) 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 a82cef68f2f154..064894793b8f31 100644 --- a/packages/e2e-test-utils-playwright/src/request-utils/index.ts +++ b/packages/e2e-test-utils-playwright/src/request-utils/index.ts @@ -16,7 +16,7 @@ import { listMedia, uploadMedia, deleteMedia, deleteAllMedia } from './media'; import { createUser, deleteAllUsers } from './users'; import { setupRest, rest, getMaxBatchSize, batchRest } from './rest'; import { getPluginsMap, activatePlugin, deactivatePlugin } from './plugins'; -import { deleteAllTemplates } from './templates'; +import { deleteAllTemplates, createTemplate } from './templates'; import { activateTheme, getCurrentThemeGlobalStylesPostId, @@ -172,6 +172,8 @@ class RequestUtils { /** @borrows deleteAllTemplates as this.deleteAllTemplates */ deleteAllTemplates: typeof deleteAllTemplates = deleteAllTemplates.bind( this ); + /** @borrows createTemplate as this.createTemplate */ + createTemplate: typeof createTemplate = createTemplate.bind( this ); /** @borrows resetPreferences as this.resetPreferences */ resetPreferences: typeof resetPreferences = resetPreferences.bind( this ); /** @borrows listMedia as this.listMedia */ diff --git a/packages/e2e-test-utils-playwright/src/request-utils/templates.ts b/packages/e2e-test-utils-playwright/src/request-utils/templates.ts index 6bb29ec921bab2..76ae7022e9b7a2 100644 --- a/packages/e2e-test-utils-playwright/src/request-utils/templates.ts +++ b/packages/e2e-test-utils-playwright/src/request-utils/templates.ts @@ -10,6 +10,13 @@ interface Template { id: string; } +interface CreateTemplatePayload { + slug: string; + title?: string; + content?: string; + description?: string; +} + const PATH_MAPPING = { wp_template: '/wp/v2/templates', wp_template_part: '/wp/v2/template-parts', @@ -52,4 +59,25 @@ async function deleteAllTemplates( this: RequestUtils, type: TemplateType ) { } } -export { deleteAllTemplates }; +/** + * Creates a new template using the REST API. + * + * @param this + * @param type Template type to delete. + * @param payload Template attributes. + */ +async function createTemplate( + this: RequestUtils, + type: TemplateType, + payload: CreateTemplatePayload +) { + const template = await this.rest< Template >( { + method: 'POST', + path: PATH_MAPPING[ type ], + params: { ...payload, type, status: 'publish', is_wp_suggestion: true }, + } ); + + return template; +} + +export { deleteAllTemplates, createTemplate }; diff --git a/test/e2e/specs/site-editor/new-templates-list.spec.js b/test/e2e/specs/site-editor/new-templates-list.spec.js index 19928faa337935..be6008080200c8 100644 --- a/test/e2e/specs/site-editor/new-templates-list.spec.js +++ b/test/e2e/specs/site-editor/new-templates-list.spec.js @@ -3,130 +3,84 @@ */ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); -async function getRows( page ) { - return page.locator( 'table.dataviews-list-view tbody tr' ); -} - -async function getTemplateTitles( page ) { - const rows = await ( await getRows( page ) ).all(); - return Promise.all( - rows.map( ( row ) => row.locator( 'td' ).nth( 0 ).textContent() ) - ); -} - -async function goToTemplatesList( admin, page ) { - await admin.visitSiteEditor(); - await page.getByRole( 'button', { name: 'Templates' } ).click(); - await page.getByRole( 'button', { name: 'Manage all templates' } ).click(); -} - -async function createTemplate( admin, page ) { - await admin.visitSiteEditor(); - await page.getByRole( 'button', { name: 'Templates' } ).click(); - await page.getByRole( 'button', { name: 'Add New Template' } ).click(); - await page.locator( 'span', { hasText: 'Date Archives' } ).first().click(); - // Wait a bit for the template to be created. - await page.getByRole( 'button', { name: 'Close' } ).click(); -} - test.describe( 'Templates', () => { test.beforeAll( async ( { requestUtils } ) => { await Promise.all( [ - requestUtils.deleteAllTemplates( 'wp_template' ), requestUtils.activateTheme( 'emptytheme' ), requestUtils.activatePlugin( 'gutenberg-test-dataviews' ), ] ); } ); - test.beforeEach( async ( { requestUtils } ) => { - await requestUtils.deleteAllTemplates( 'wp_template' ); - } ); test.afterAll( async ( { requestUtils } ) => { await Promise.all( [ requestUtils.activateTheme( 'twentytwentyone' ), requestUtils.deactivatePlugin( 'gutenberg-test-dataviews' ), ] ); } ); - test.describe( 'Sorting', () => { - test( 'By title', async ( { admin, page } ) => { - await goToTemplatesList( admin, page ); - // Descending. - await page.getByRole( 'button', { name: 'Template' } ).click(); - await page - .getByRole( 'menuitem', { name: 'Sort descending' } ) - .click(); - // Close the dropdown menu. - await page.keyboard.press( 'Escape' ); - expect( await getTemplateTitles( page ) ).toEqual( [ - 'Tag Archives', - 'Single Entries', - 'Index', - 'Custom', - 'Category Archives', - ] ); - // Ascending. - await page.getByRole( 'button', { name: 'Template' } ).click(); - await page - .getByRole( 'menuitem', { name: 'Sort ascending' } ) - .click(); - expect( await getTemplateTitles( page ) ).toEqual( [ - 'Category Archives', - 'Custom', - 'Index', - 'Single Entries', - 'Tag Archives', - ] ); - } ); + test( 'Sorting', async ( { admin, page } ) => { + await admin.visitSiteEditor( { path: '/wp_template/all' } ); + // Descending by title. + await page.getByRole( 'button', { name: 'Template' } ).click(); + await page.getByRole( 'menuitem', { name: 'Sort descending' } ).click(); + const firstTitle = page + .getByRole( 'region', { + name: 'Template', + includeHidden: true, + } ) + .getByRole( 'heading', { + level: 3, + includeHidden: true, + } ) + .first(); + await expect( firstTitle ).toHaveText( 'Tag Archives' ); + // Ascending by title. + await page.getByRole( 'menuitem', { name: 'Sort ascending' } ).click(); + await expect( firstTitle ).toHaveText( 'Category Archives' ); } ); - test.describe( 'Filtering', () => { - test( 'Global search', async ( { admin, page } ) => { - await goToTemplatesList( admin, page ); - await page - .locator( '.dataviews-wrapper input[type="search"]' ) - .click(); - await page.keyboard.type( 'tag' ); - await expect( await getRows( page ) ).toHaveCount( 1 ); - expect( await getTemplateTitles( page ) ).toEqual( [ - 'Tag Archives', - ] ); - await page.getByRole( 'button', { name: 'Reset filters' } ).click(); - await expect( await getRows( page ) ).toHaveCount( 5 ); - } ); - test( 'Author filter', async ( { admin, page } ) => { - await createTemplate( admin, page ); - await admin.visitSiteEditor( { path: '/wp_template/all' } ); - await expect( await getRows( page ) ).toHaveCount( 6 ); - await page.getByRole( 'button', { name: 'Add filter' } ).click(); - await page.getByRole( 'menuitem', { name: 'Author' } ).hover(); - await page - .getByRole( 'menuitemcheckbox', { name: 'admin' } ) - .click(); - await expect( await getRows( page ) ).toHaveCount( 1 ); - expect( await getTemplateTitles( page ) ).toEqual( [ - 'Date Archives', - ] ); - } ); - test( 'Multiple filters', async ( { admin, page } ) => { - await createTemplate( admin, page ); - await admin.visitSiteEditor( { path: '/wp_template/all' } ); - await page - .locator( '.dataviews-wrapper input[type="search"]' ) - .click(); - await page.keyboard.type( 'archives' ); - await expect( await getRows( page ) ).toHaveCount( 3 ); - await page.getByRole( 'button', { name: 'Add filter' } ).click(); - await page.getByRole( 'menuitem', { name: 'Author' } ).hover(); - await page - .getByRole( 'menuitemcheckbox', { name: 'Emptytheme' } ) - .click(); - await expect( await getRows( page ) ).toHaveCount( 2 ); + test( 'Filtering', async ( { requestUtils, admin, page } ) => { + await requestUtils.createTemplate( 'wp_template', { + slug: 'date', + title: 'Date Archives', + content: 'hi', } ); + await admin.visitSiteEditor( { path: '/wp_template/all' } ); + // Global search. + await page.getByRole( 'searchbox', { name: 'Filter list' } ).click(); + await page.keyboard.type( 'tag' ); + const titles = page + .getByRole( 'region', { name: 'Template' } ) + .getByRole( 'heading', { level: 3 } ); + await expect( titles ).toHaveCount( 1 ); + await expect( titles.first() ).toHaveText( 'Tag Archives' ); + await page.getByRole( 'button', { name: 'Reset filters' } ).click(); + await expect( titles ).toHaveCount( 6 ); + + // Filter by author. + await page.getByRole( 'button', { name: 'Add filter' } ).click(); + await page.getByRole( 'menuitem', { name: 'Author' } ).hover(); + await page.getByRole( 'menuitemcheckbox', { name: 'admin' } ).click(); + await expect( titles ).toHaveCount( 1 ); + await expect( titles.first() ).toHaveText( 'Date Archives' ); + + // Filter by author and text. + await page.getByRole( 'button', { name: 'Reset filters' } ).click(); + await page.getByRole( 'searchbox', { name: 'Filter list' } ).click(); + await page.keyboard.type( 'archives' ); + await expect( titles ).toHaveCount( 3 ); + await page.getByRole( 'button', { name: 'Add filter' } ).click(); + await page.getByRole( 'menuitem', { name: 'Author' } ).hover(); + await page + .getByRole( 'menuitemcheckbox', { name: 'Emptytheme' } ) + .click(); + await expect( titles ).toHaveCount( 2 ); + + await requestUtils.deleteAllTemplates( 'wp_template' ); } ); test( 'Field visibility', async ( { admin, page } ) => { - await goToTemplatesList( admin, page ); + await admin.visitSiteEditor( { path: '/wp_template/all' } ); await page.getByRole( 'button', { name: 'Description' } ).click(); await page.getByRole( 'menuitem', { name: 'Hide' } ).click(); await expect( page.getByRole( 'button', { name: 'Description' } ) - ).toHaveCount( 0 ); + ).toBeHidden(); } ); } );