Tests: Add block e2e experiment.

tests/e2e/field-type-text-with-scf-block.spec.ts

@@ -0,0 +1,165 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+const PLUGIN_SLUG = 'secure-custom-fields';
+const TEST_PLUGIN_SLUG = 'scf-test-plugin-get-field-movie-title-block';
+const FIELD_GROUP_LABEL = 'Movie Details';
+const FIELD_LABEL = 'Movie Title';
+
+test.describe( 'Field Type > Text', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin( PLUGIN_SLUG );
+		await requestUtils.activatePlugin( TEST_PLUGIN_SLUG );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin( PLUGIN_SLUG );
+		await requestUtils.deactivatePlugin( TEST_PLUGIN_SLUG );
+		await requestUtils.deleteAllPosts();
+	} );
+
+	test.beforeEach( async ( { page, admin } ) => {
+		await deleteFieldGroups( page, admin );
+	} );
+
+	test( 'should create a text field for movies, add content to it, and verify it displays on the frontend as a block', async ( {
+		page,
+		admin,
+		editor,
+		requestUtils,
+	} ) => {
+		// Navigate to Field Groups and create new.
+		await admin.visitAdminPage( 'edit.php', 'post_type=acf-field-group' );
+		const addNewButton = page.locator( 'a.acf-btn:has-text("Add New")' );
+		await addNewButton.click();
+
+		// Fill field group title.
+		await page.waitForSelector( '#title' );
+		await page.fill( '#title', FIELD_GROUP_LABEL );
+
+		// Add text field.
+		const fieldLabel = page.locator(
+			'input[id^="acf_fields-field_"][id$="-label"]'
+		);
+		await fieldLabel.fill( FIELD_LABEL );
+		// The field name is generated automatically.
+
+		// Select field type as text (it's default, but let's be explicit).
+		const fieldType = page.locator(
+			'select[id^="acf_fields-field_"][id$="-type"]'
+		);
+		await fieldType.selectOption( 'text' );
+
+		// Set block in location rules.
+		await page.selectOption(
+			'select[id^="acf_field_group-location-group_0-rule_0-param"]',
+			'block'
+		);
+		await page.selectOption(
+			'select[id^="acf_field_group-location-group_0-rule_0-operator"]',
+			'=='
+		);
+		await page.selectOption(
+			'select[id^="acf_field_group-location-group_0-rule_0-value"]',
+			'scf/movie-title-block'
+		);
+
+		// Submit form.
+		const publishButton = page.locator(
+			'button.acf-btn.acf-publish[type="submit"]'
+		);
+		await publishButton.click();
+
+		// Verify success message.
+		const successNotice = page.locator( '.updated.notice' );
+		await expect( successNotice ).toBeVisible();
+		await expect( successNotice ).toContainText( 'Field group published' );
+
+		// Verify field group appears in the list.
+		await admin.visitAdminPage( 'edit.php', 'post_type=acf-field-group' );
+		const fieldGroupRow = page.locator(
+			`tr:has-text("${ FIELD_GROUP_LABEL }")`
+		);
+		await expect( fieldGroupRow ).toBeVisible();
+
+		const post = await requestUtils.createPost( {
+			title: 'Movie 1',
+			status: 'publish',
+			showWelcomeGuide: false,
+		} );
+
+		await admin.editPost( post.id );
+
+		await editor.insertBlock( {
+			name: 'scf/movie-title-block',
+		} ); 
+
+		await page.waitForSelector(
+			'.acf-field[data-name="movie_title"] input'
+		);
+		await page.fill(
+			'.acf-field[data-name="movie_title"] input',
+			'Awesome movie'
+		);
+		// Add a blur event to trigger the field's onchange handlers.
+		await page.click('body', { position: { x: 0, y: 0 } });
+
+		// Let's also make sure we give the editor a moment to save the field data.
+		await page.waitForTimeout(200);
+
+		const previewPage = await editor.openPreviewPage();
+
+		// Verify the custom field value appears in the preview.
+		await previewPage.waitForSelector( '#scf-test-block-movie-title' );
+		await expect(
+			previewPage.locator( '#scf-test-block-movie-title' )
+		).toContainText( 'Movie title: Awesome movie' );
+	} );
+} );
+
+/**
+ * Helper function to delete the field group
+ */
+async function deleteFieldGroups( page, admin ) {
+	await admin.visitAdminPage( 'edit.php', 'post_type=acf-field-group' );
+
+	// Find and select the field group row
+	const allFieldGroupsCheckbox = page.locator( 'input#cb-select-all-1' );
+
+	if ( await allFieldGroupsCheckbox.isVisible() ) {
+		await allFieldGroupsCheckbox.check();
+		// Use bulk actions to trash the field group.
+		await page.selectOption( '#bulk-action-selector-bottom', 'trash' );
+		await page.click( '#doaction2' );
+
+		// Verify deletion success message.
+		const deleteMessage = page.locator( '.updated.notice' );
+		await expect( deleteMessage ).toBeVisible( { timeout: 5000 } );
+		await expect( deleteMessage ).toContainText( 'moved to the Trash' );
+
+		await emptyTrash( page, admin );
+	}
+}
+
+
+/**
+ * Helper function to empty trash
+ */
+async function emptyTrash( page, admin ) {
+	await admin.visitAdminPage(
+		'edit.php',
+		'post_status=trash&post_type=acf-field-group'
+	);
+	const emptyTrashButton = page.locator(
+		'.tablenav.bottom input[name="delete_all"][value="Empty Trash"]'
+	);
+	await emptyTrashButton.waitFor( { state: 'visible' } );
+	await emptyTrashButton.click();
+
+	// Verify success notice.
+	const successNotice = page.locator( '.notice.updated p' );
+	await expect( successNotice ).toBeVisible();
+	await expect( successNotice ).toHaveText( /permanently deleted/ );
+}

tests/e2e/plugins/blocks/scf-movie-title-block/block.json

@@ -0,0 +1,16 @@
+{
+	"name": "scf/movie-title-block",
+	"title": "My Test Plugin Movie Title Block",
+	"description": "A custom block that uses SCF fields.",
+	"category": "layout",
+	"icon": "admin-comments",
+	"keywords": [ "custom", "scf", "block" ],
+	"acf": {
+		"mode": "edit",
+		"renderTemplate": "template.php"
+	},
+	"supports": {
+		"align": true
+	},
+	"textdomain": "secure-custom-fields"
+}

tests/e2e/plugins/blocks/scf-movie-title-block/template.php

@@ -0,0 +1,15 @@
+<?php
+/**
+ * Template for the SCF Movie Title Block.
+ *
+ * @package scf-test-plugins
+ */
+
+// Exit if accessed directly.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+$movie_title = get_field( 'movie_title' );
+
+?>
+<p id="scf-test-block-movie-title">Movie title: <?php echo esc_html( $movie_title ); ?></p>

tests/e2e/plugins/scf-test-get-field-scf-block.php

@@ -0,0 +1,18 @@
+<?php
+/**
+ * Plugin Name: SCF Test Plugin, Get Field Movie Title Block
+ * Plugin URI: https://github.com/WordPress/secure-custom-fields
+ * Author: SCF Team
+ *
+ * @package scf-test-plugins
+ */
+
+/**
+ * Registers a custom block type for testing.
+ *
+ * @return void
+ */
+function scf_test_register_acf_blocks() {
+	register_block_type( __DIR__ . '/blocks/scf-movie-title-block' );
+}
+add_action( 'init', 'scf_test_register_acf_blocks' );