Dataviews: Add first e2e tests (#56634)

* Dataviews: Add first e2e tests

* refactor tests and add `createTemplate` util

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 */

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 };

packages/e2e-tests/plugins/dataviews.php

@@ -0,0 +1,25 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test DataViews
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-dataviews
+ */
+
+/**
+ * Disables the DataViews experiment on plugin deactivation.
+ */
+function disable_dataviews_experiment() {
+	update_option( 'gutenberg-experiments', array() );
+}
+
+/**
+ * Enables the DataViews experiment.
+ */
+function enable_dataviews_experiment() {
+	update_option( 'gutenberg-experiments', array( 'gutenberg-dataviews' => true ) );
+	register_deactivation_hook( __FILE__, 'disable_dataviews_experiment' );
+}
+
+add_action( 'init', 'enable_dataviews_experiment' );

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();
+	} );
+} );