From 97a822e7b1401af9d3d892a90da2697bd2efd67e Mon Sep 17 00:00:00 2001
From: David Calhoun <github@davidcalhoun.me>
Date: Fri, 17 May 2024 15:52:07 -0400
Subject: [PATCH] test: Delete site E2E case supports native dialogs

Playwright lacks support for interacting with native dialogs, so we mock
the dialog module to simulate the user clicking the "Delete site"
confirmation button with "Delete site files from my computer" checked.

See: https://github.com/microsoft/playwright/issues/2143
See: https://github.com/microsoft/playwright/issues/8278#issuecomment-1009957411
---
 e2e/page-objects/delete-site-modal.ts | 23 -----------------------
 e2e/page-objects/settings-tab.ts      |  4 ----
 e2e/sites.test.ts                     | 18 +++++++++++-------
 3 files changed, 11 insertions(+), 34 deletions(-)
 delete mode 100644 e2e/page-objects/delete-site-modal.ts

diff --git a/e2e/page-objects/delete-site-modal.ts b/e2e/page-objects/delete-site-modal.ts
deleted file mode 100644
index 3dae2abc6..000000000
--- a/e2e/page-objects/delete-site-modal.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { type Page } from '@playwright/test';
-
-export default class DeleteSiteModal {
-	constructor(
-		private page: Page,
-		private siteName: string
-	) {}
-
-	get locator() {
-		// We use a long site name (leaky abstraction) which will be trimmed in the rendered dialog.
-		// While this should not be a problem, in practice using the a portion of the name for the locator has proven effective where the full name failed.
-		const visibileSiteName = this.siteName.split( '-' )[ 0 ];
-		return this.page.getByRole( 'dialog', { name: `Delete ${ visibileSiteName }`, exact: false } );
-	}
-
-	get deleteFilesCheckbox() {
-		return this.locator.getByRole( 'checkbox', { name: 'Delete site files' } );
-	}
-
-	get deleteSiteButton() {
-		return this.locator.getByRole( 'button', { name: 'Delete site' } );
-	}
-}
diff --git a/e2e/page-objects/settings-tab.ts b/e2e/page-objects/settings-tab.ts
index 828a0e025..5da207a64 100644
--- a/e2e/page-objects/settings-tab.ts
+++ b/e2e/page-objects/settings-tab.ts
@@ -1,5 +1,4 @@
 import { type Page, type ElectronApplication, expect } from '@playwright/test';
-import DeleteSiteModal from './delete-site-modal';
 
 export default class SettingsTab {
 	constructor(
@@ -39,8 +38,5 @@ export default class SettingsTab {
 
 	async openDeleteSiteModal() {
 		await this.deleteButton.click();
-		const modal = new DeleteSiteModal( this.page, this.siteName );
-		await expect( modal.locator ).toBeVisible();
-		return modal;
 	}
 }
diff --git a/e2e/sites.test.ts b/e2e/sites.test.ts
index 9c3855bcf..c716cbab5 100644
--- a/e2e/sites.test.ts
+++ b/e2e/sites.test.ts
@@ -126,16 +126,20 @@ test.describe( 'Servers', () => {
 		expect( await page.title() ).toBe( 'testing site title' );
 	} );
 
-	test.fixme( 'delete site', async () => {
-		// Test doesn't work currently as we migrated from the in-app modal
-		// to native dialog, and native dialogs can't be tested by Playwright.
-		// See: https://github.com/microsoft/playwright/issues/21432
+	test( 'delete site', async () => {
 		const siteContent = new SiteContent( mainWindow, siteName );
 		const settingsTab = await siteContent.navigateToTab( 'Settings' );
 
-		const modal = await settingsTab.openDeleteSiteModal();
-		await modal.deleteFilesCheckbox.check();
-		modal.deleteSiteButton.click();
+		// Playwright lacks support for interacting with native dialogs, so we mock
+		// the dialog module to simulate the user clicking the "Delete site"
+		// confirmation button with "Delete site files from my computer" checked.
+		// See: https://github.com/microsoft/playwright/issues/21432
+		await electronApp.evaluate( ( { dialog } ) => {
+			dialog.showMessageBox = async () => {
+				return { response: 0, checkboxChecked: true };
+			};
+		} );
+		await settingsTab.openDeleteSiteModal();
 
 		await mainWindow.waitForTimeout( 200 ); // Short pause for site to delete.