E2E: Add field text testing. (#103)

Author: cbravobernal

.wp-env.json

@@ -1,4 +1,12 @@
 {
-	"$schema": "./schemas/json/wp-env.json",
-	"plugins": [ "." ]
+  "$schema": "./schemas/json/wp-env.json",
+  "plugins": ["."],
+  "env": {
+    "tests": {
+      "mappings": {
+        "wp-content/plugins/secure-custom-fields": ".",
+        "wp-content/plugins/scf-test-plugins": "./tests/e2e/plugins"
+      }
+    }
+  }
 }

tests/e2e/field-type-text.spec.ts

@@ -0,0 +1,128 @@
+/**
+ * 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';
+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 and verify it in admin', 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');
+
+    // 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();
+    
+    // Create a new post
+    const post = await requestUtils.createPost({
+      title: 'Movie 1',
+      status: 'draft',
+      showWelcomeGuide: false,
+    });
+
+    // Navigate to edit post page
+    await admin.editPost(post.id);
+
+    // Fill in the movie title field using data-name attribute
+    const movieTitleField = page.locator('.acf-field[data-name="movie_title"] input[type="text"]');
+    await movieTitleField.fill('The Shawshank Redemption');
+
+    // Verify the movie title is displayed
+    const previewPage = await editor.openPreviewPage();
+
+    const movieTitleElement = previewPage.locator('#scf-test-movie-title');
+    await expect(movieTitleElement).toBeVisible();
+    await expect(movieTitleElement).toContainText('Movie title: The Shawshank Redemption');
+
+    // Close the preview tab
+    await previewPage.close();
+
+  });
+});
+
+/**
+ * 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/plugin-activation.spec.ts

@@ -36,4 +36,4 @@ test.describe('Plugin Activation', () => {
     const pluginName = page.locator(`tr[data-plugin="${PLUGIN_PATH}"] .plugin-title strong`);
     await expect(pluginName).toHaveText('Secure Custom Fields');
   });
-});   
+});

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

@@ -0,0 +1,30 @@
+<?php
+/**
+ * Plugin Name: SCF Test Plugin, Get Field Movie Title
+ * Plugin URI: https://github.com/WordPress/secure-custom-fields
+ * Author: SCF Team
+ *
+ * @package scf-test-plugins
+ */
+
+/**
+ * Add post-formats support to pages
+ */
+function scf_add_get_field_at_the_end() {
+	// Get the field object to validate it exists.
+	$field_object = get_field_object( 'movie_title' );
+
+	// Only proceed if the field exists and is a valid type.
+	if ( $field_object && isset( $field_object['type'] ) && 'text' === $field_object['type'] ) {
+		$field = get_field( 'movie_title' );
+
+		// Ensure we have a string value and sanitize it.
+		$field = is_string( $field ) ? sanitize_text_field( $field ) : '';
+
+		return '<p id="scf-test-movie-title">Movie title: ' . $field . '</p>';
+	}
+
+	return '';
+}
+
+add_filter( 'the_content', 'scf_add_get_field_at_the_end' );