test(previews): Add e2e tests to cover ACF integration

plugins/hwp-previews/tests/e2e/specs/acf-integration.spec.js

@@ -0,0 +1,181 @@
+import { expect, test } from "@wordpress/e2e-test-utils-playwright";
+import { HWP_SLUG, TEST_PREVIEW_URL } from "../constants";
+import {
+	createACFPostType,
+	getSettingsField,
+	goToPluginPage,
+	installACF,
+	resetPluginSettings,
+	saveChanges,
+	switchToTab,
+	uninstallACF,
+} from "../utils";
+
+test.describe("HWP Previews ACF Integration Test", () => {
+	const acfPostTypes = [
+		{
+			key: "book",
+			pluralLabel: "Books",
+			singularLabel: "Book",
+		},
+	];
+
+	test.beforeAll(async ({ requestUtils }) => {
+		await requestUtils.resetPreferences();
+	});
+
+	test.beforeEach(async ({ admin, page, requestUtils }) => {
+		await resetPluginSettings(admin);
+		await requestUtils.activatePlugin(HWP_SLUG);
+		await installACF(admin, page);
+	});
+
+	test.afterEach(async ({ admin, page }) => {
+		await uninstallACF(admin, page);
+	});
+
+	test("ACF custom post types appear in HWP Previews settings", async ({
+		page,
+		admin,
+	}) => {
+		// Create custom post types via ACF
+		for (const postType of acfPostTypes) {
+			await createACFPostType(admin, page, postType);
+		}
+
+		// Navigate to HWP Previews settings
+		await goToPluginPage(admin);
+
+		// Verify each ACF custom post type appears as a tab in settings
+		for (const postType of acfPostTypes) {
+			const tabLink = page
+				.locator("#wpbody-content")
+				.getByRole("link", { name: postType.pluralLabel });
+
+			await expect(tabLink).toBeVisible();
+
+			// Click on the tab to verify settings fields are present
+			await switchToTab(page, postType.pluralLabel);
+
+			// Verify settings fields exist for this custom post type
+			const enabledCheckbox = getSettingsField(postType.key).enabledCheckbox;
+			const previewUrlInput = getSettingsField(postType.key).previewUrlInput;
+			const iframeCheckbox = getSettingsField(postType.key).iframeCheckbox;
+
+			await expect(page.locator(enabledCheckbox)).toBeVisible();
+			await expect(page.locator(previewUrlInput)).toBeVisible();
+			await expect(page.locator(iframeCheckbox)).toBeVisible();
+		}
+	});
+
+	test("ACF custom post types use HWP preview logic correctly", async ({
+		page,
+		admin,
+		requestUtils,
+	}) => {
+		// Create a custom post type
+		const testPostType = acfPostTypes[0]; // book
+		await createACFPostType(admin, page, testPostType);
+
+		// Configure HWP Previews for the custom post type
+		await goToPluginPage(admin);
+
+		await switchToTab(page, testPostType.pluralLabel);
+		await page
+			.locator(getSettingsField(testPostType.key).enabledCheckbox)
+			.check();
+		await page
+			.locator(getSettingsField(testPostType.key).previewUrlInput)
+			.fill(TEST_PREVIEW_URL);
+		await saveChanges(page);
+
+		// Create a post of the custom post type using REST API
+		const customPost = await requestUtils.rest({
+			method: "POST",
+			path: `/wp/v2/${testPostType.key}`,
+			data: {
+				title: `Test ${testPostType.singularLabel}`,
+				content: `Test content for ${testPostType.singularLabel}`,
+				status: "draft",
+			},
+		});
+
+		// Navigate to the custom post type list
+		await admin.visitAdminPage(`/edit.php?post_type=${testPostType.key}`);
+
+		// Verify preview link uses HWP preview URL
+		await expect(
+			page.locator(`#post-${customPost.id} .view a`, {
+				hasText: "Preview",
+				exact: true,
+			})
+		).toHaveAttribute("href", TEST_PREVIEW_URL);
+
+		// Delete the post to not interfere with other tests
+		await requestUtils.rest({
+			method: "DELETE",
+			path: `/wp/v2/${testPostType.key}/${customPost.id}`,
+			data: {
+				force: true,
+			},
+		});
+	});
+
+	test("ACF custom post types with iframe preview enabled", async ({
+		page,
+		admin,
+		requestUtils,
+	}) => {
+		// Create custom post type
+		const testPostType = acfPostTypes[0]; // book
+		await createACFPostType(admin, page, testPostType);
+
+		await goToPluginPage(admin);
+
+		await switchToTab(page, testPostType.pluralLabel);
+		await page
+			.locator(getSettingsField(testPostType.key).enabledCheckbox)
+			.check();
+		await page
+			.locator(getSettingsField(testPostType.key).iframeCheckbox)
+			.check();
+		await page
+			.locator(getSettingsField(testPostType.key).previewUrlInput)
+			.fill(TEST_PREVIEW_URL);
+		await saveChanges(page);
+
+		// Create a post of the custom post type
+		const customPost = await requestUtils.rest({
+			method: "POST",
+			path: `/wp/v2/${testPostType.key}`,
+			data: {
+				title: `Test ${testPostType.singularLabel}`,
+				content: `Test content for ${testPostType.singularLabel}`,
+				status: "draft",
+			},
+		});
+
+		// Navigate to the custom post type list and click preview
+		await admin.visitAdminPage(`/edit.php?post_type=${testPostType.key}`);
+		const previewLink = page.locator(`#post-${customPost.id} .view a`, {
+			hasText: "Preview",
+			exact: true,
+		});
+		await previewLink.focus();
+		await previewLink.click();
+		await page.waitForLoadState("domcontentloaded");
+
+		// Verify iframe is present with correct URL
+		const iframe = page.locator("iframe.headless-preview-frame");
+		await expect(iframe).toHaveAttribute("src", TEST_PREVIEW_URL);
+
+		// Delete the post to not interfere with other tests
+		await requestUtils.rest({
+			method: "DELETE",
+			path: `/wp/v2/${testPostType.key}/${customPost.id}`,
+			data: {
+				force: true,
+			},
+		});
+	});
+});

plugins/hwp-previews/tests/e2e/utils.js

@@ -42,7 +42,7 @@ export async function goToPluginPage(admin) {
 
 export async function resetPluginSettings(admin) {
 	await admin.visitAdminPage(
-		"/options-general.php?page=hwp-previews&reset=true",
+		"/options-general.php?page=hwp-previews&reset=true"
 	);
 }
 
@@ -51,7 +51,7 @@ export async function installFaust(admin, page) {
 	const activateSelector = '.activate-now[data-slug="faustwp"]';
 
 	await admin.visitAdminPage(
-		"/plugin-install.php?s=faust&tab=search&type=term",
+		"/plugin-install.php?s=faust&tab=search&type=term"
 	);
 
 	const installButton = page.locator(installSelector);
@@ -72,3 +72,85 @@ export async function uninstallFaust(admin, page) {
 	await page.locator("a#deactivate-faustwp").click();
 	await page.locator("a#delete-faustwp").click();
 }
+
+export async function installACF(admin, page) {
+	const installSelector = '.install-now[data-slug="advanced-custom-fields"]';
+	const activateSelector = '.activate-now[data-slug="advanced-custom-fields"]';
+
+	await admin.visitAdminPage(
+		"/plugin-install.php?s=advanced-custom-fields&tab=search&type=term"
+	);
+
+	const installButton = page.locator(installSelector);
+
+	if (await installButton.isVisible()) {
+		await installButton.click();
+		await page.waitForSelector(activateSelector, { timeout: 1000 * 90 });
+		await page.locator(activateSelector).click();
+	} else {
+		await page.locator(activateSelector).click();
+	}
+}
+
+export async function uninstallACF(admin, page) {
+	// First, delete all ACF custom post types to clean up
+	await admin.visitAdminPage("/edit.php?post_type=acf-post-type");
+
+	// Check if there are any post types to delete
+	const postTypeRows = await page
+		.locator(".wp-list-table tbody tr:not(.no-items)")
+		.count();
+
+	if (postTypeRows > 0) {
+		// Select all post types using the checkbox
+		await page.locator("#cb-select-all-1").check();
+
+		// Select "Move to Trash" from bulk actions dropdown
+		await page.locator("#bulk-action-selector-bottom").selectOption("trash");
+
+		// Click Apply button
+		await page.locator("#doaction2").click();
+
+		// Wait for the bulk action to complete
+		await page.waitForLoadState("networkidle");
+	}
+
+	// Now uninstall the plugin
+	page.on("dialog", (dialog) => dialog.accept());
+
+	await admin.visitAdminPage("/plugins.php");
+	await page.locator("a#deactivate-advanced-custom-fields").click();
+	await page.locator("a#delete-advanced-custom-fields").click();
+}
+
+export async function createACFPostType(admin, page, postTypeConfig) {
+	// Navigate to ACF Post Types page
+	await admin.visitAdminPage("/edit.php?post_type=acf-post-type");
+
+	// Click "Add New" button in the ACF header
+	await page.getByRole("link", { name: "Add New", exact: true }).click();
+
+	// Wait for the form to load
+	await page.waitForSelector('input[name="acf_post_type[labels][name]"]');
+
+	// Fill in the singular label first (this auto-generates the key)
+	await page
+		.locator('input[name="acf_post_type[labels][singular_name]"]')
+		.fill(postTypeConfig.singularLabel);
+
+	// Clear and fill in the post type key to ensure it's correct
+	const postTypeKeyInput = page.locator(
+		'input[name="acf_post_type[post_type]"]'
+	);
+	await postTypeKeyInput.clear();
+	await postTypeKeyInput.fill(postTypeConfig.key);
+
+	// Fill in the plural label
+	await page
+		.locator('input[name="acf_post_type[labels][name]"]')
+		.fill(postTypeConfig.pluralLabel);
+
+	// Save the post type using the form submit button
+	await page.getByRole("button", { name: "Save Changes" }).click();
+	await page.waitForSelector(".notice.notice-success", { timeout: 10000 });
+}