From c7036160a6d488e660d9557512a9f4f2d1918004 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Wed, 29 Nov 2023 17:11:01 +0200 Subject: [PATCH] Dataviews: Add first e2e tests (#56634) * Dataviews: Add first e2e tests * refactor tests and add `createTemplate` util --- .../src/request-utils/index.ts | 4 +- .../src/request-utils/templates.ts | 30 ++++++- packages/e2e-tests/plugins/dataviews.php | 25 ++++++ .../site-editor/new-templates-list.spec.js | 86 +++++++++++++++++++ 4 files changed, 143 insertions(+), 2 deletions(-) create mode 100644 packages/e2e-tests/plugins/dataviews.php create mode 100644 test/e2e/specs/site-editor/new-templates-list.spec.js 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 a82cef68f2f15..064894793b8f3 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 6bb29ec921bab..76ae7022e9b7a 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/packages/e2e-tests/plugins/dataviews.php b/packages/e2e-tests/plugins/dataviews.php new file mode 100644 index 0000000000000..60a611fcae8f1 --- /dev/null +++ b/packages/e2e-tests/plugins/dataviews.php @@ -0,0 +1,25 @@ + true ) ); + register_deactivation_hook( __FILE__, 'disable_dataviews_experiment' ); +} + +add_action( 'init', 'enable_dataviews_experiment' ); diff --git a/test/e2e/specs/site-editor/new-templates-list.spec.js b/test/e2e/specs/site-editor/new-templates-list.spec.js new file mode 100644 index 0000000000000..be6008080200c --- /dev/null +++ b/test/e2e/specs/site-editor/new-templates-list.spec.js @@ -0,0 +1,86 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'Templates', () => { + test.beforeAll( async ( { requestUtils } ) => { + await Promise.all( [ + requestUtils.activateTheme( 'emptytheme' ), + requestUtils.activatePlugin( 'gutenberg-test-dataviews' ), + ] ); + } ); + test.afterAll( async ( { requestUtils } ) => { + await Promise.all( [ + requestUtils.activateTheme( 'twentytwentyone' ), + requestUtils.deactivatePlugin( 'gutenberg-test-dataviews' ), + ] ); + } ); + 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( '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 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' } ) + ).toBeHidden(); + } ); +} );