From f808cff73cd88928d3f42d1ce0f64a7329baf5d1 Mon Sep 17 00:00:00 2001
From: Alvi Tazwar <55917380+alvitazwar@users.noreply.github.com>
Date: Tue, 25 Oct 2022 21:24:38 +0600
Subject: [PATCH] Migrate Fullscreen mode test to Playwright (#43963)

* Add Full Screen Test case

* Remove old migrated file

* Modify Locator

* Update test/e2e/specs/editor/various/fullscreen-mode.spec.js

Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>

* Update test/e2e/specs/editor/various/fullscreen-mode.spec.js

Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>

* Update test/e2e/specs/editor/various/fullscreen-mode.spec.js

Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>

* Update test/e2e/specs/editor/various/fullscreen-mode.spec.js

Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>

* Update test/e2e/specs/editor/various/fullscreen-mode.spec.js

Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>

* Update test/e2e/specs/editor/various/fullscreen-mode.spec.js

Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>

* Addressed Feedback

Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>
---
 .../editor/various/fullscreen-mode.test.js    | 31 ---------------
 .../editor/various/fullscreen-mode.spec.js    | 39 +++++++++++++++++++
 2 files changed, 39 insertions(+), 31 deletions(-)
 delete mode 100644 packages/e2e-tests/specs/editor/various/fullscreen-mode.test.js
 create mode 100644 test/e2e/specs/editor/various/fullscreen-mode.spec.js

diff --git a/packages/e2e-tests/specs/editor/various/fullscreen-mode.test.js b/packages/e2e-tests/specs/editor/various/fullscreen-mode.test.js
deleted file mode 100644
index 2d925e56a204a..0000000000000
--- a/packages/e2e-tests/specs/editor/various/fullscreen-mode.test.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	clickOnMoreMenuItem,
-	toggleMoreMenu,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Fullscreen Mode', () => {
-	beforeAll( async () => {
-		await createNewPost();
-	} );
-
-	it( 'should open the fullscreen mode from the more menu', async () => {
-		await clickOnMoreMenuItem( 'Fullscreen mode' );
-		await toggleMoreMenu( 'close' );
-
-		const isFullscreenEnabled = await page.$eval( 'body', ( body ) => {
-			return body.classList.contains( 'is-fullscreen-mode' );
-		} );
-
-		expect( isFullscreenEnabled ).toBe( true );
-
-		const fullscreenCloseButton = await page.$(
-			'.edit-post-fullscreen-mode-close'
-		);
-
-		expect( fullscreenCloseButton ).not.toBeNull();
-	} );
-} );
diff --git a/test/e2e/specs/editor/various/fullscreen-mode.spec.js b/test/e2e/specs/editor/various/fullscreen-mode.spec.js
new file mode 100644
index 0000000000000..8b7a0785a7ed6
--- /dev/null
+++ b/test/e2e/specs/editor/various/fullscreen-mode.spec.js
@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Fullscreen Mode', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllPosts();
+	} );
+
+	test( 'should open the fullscreen mode from the more menu', async ( {
+		page,
+	} ) => {
+		// Open Options Menu
+		await page.click(
+			'role=region[name="Editor top bar"i] >> role=button[name="Options"i]'
+		);
+
+		// Select Full Screen Mode
+		await page
+			.locator( 'role=menuitemcheckbox', { hasText: 'Fullscreen mode' } )
+			.click();
+
+		// Check the body class.
+		await expect( page.locator( 'body' ) ).toHaveClass(
+			/is-fullscreen-mode/
+		);
+
+		await expect(
+			page.locator(
+				'role=region[name="Editor top bar"i] >> role=link[name="View Posts"i]'
+			)
+		).toBeVisible();
+	} );
+} );