From 8070102b487dbd6310736017ef4059b2dd6b0f2f Mon Sep 17 00:00:00 2001
From: alvitazwar <55917380+alvitazwar@users.noreply.github.com>
Date: Wed, 30 Nov 2022 03:17:24 +0600
Subject: [PATCH] Migrate test case

---
 .../editor/various/core-settings.test.js      | 42 -------------
 .../editor/various/core-settings-test.spec.js | 60 +++++++++++++++++++
 2 files changed, 60 insertions(+), 42 deletions(-)
 delete mode 100644 packages/e2e-tests/specs/editor/various/core-settings.test.js
 create mode 100644 test/e2e/specs/editor/various/core-settings-test.spec.js

diff --git a/packages/e2e-tests/specs/editor/various/core-settings.test.js b/packages/e2e-tests/specs/editor/various/core-settings.test.js
deleted file mode 100644
index 0eb98a2de050b4..00000000000000
--- a/packages/e2e-tests/specs/editor/various/core-settings.test.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { visitAdminPage } from '@wordpress/e2e-test-utils';
-
-async function getOptionsValues( selector ) {
-	await visitAdminPage( 'options.php' );
-	return page.evaluate( ( theSelector ) => {
-		const inputs = Array.from( document.querySelectorAll( theSelector ) );
-		return inputs.reduce( ( memo, input ) => {
-			memo[ input.id ] = input.value;
-			return memo;
-		}, {} );
-	}, selector );
-}
-
-// It might make sense to include a similar test in WP core (or move this one over).
-// See discussion here: https://github.com/WordPress/gutenberg/pull/32797#issuecomment-864192088.
-describe( 'Settings', () => {
-	test( 'Regression: updating a specific option will only change its value and will not corrupt others', async () => {
-		// We won't select the option that we updated and will also remove some
-		// _transient options that seem to change at every update.
-		const optionsInputsSelector =
-			'form#all-options table.form-table input:not([id*="_transient"]):not([id="blogdescription"])';
-		const optionsBefore = await getOptionsValues( optionsInputsSelector );
-
-		await visitAdminPage( 'options-general.php' );
-		await page.type(
-			'input#blogdescription',
-			'Just another Gutenberg site'
-		);
-		await page.click( 'input#submit' );
-
-		const optionsAfter = await getOptionsValues( optionsInputsSelector );
-
-		Object.entries( optionsBefore ).forEach( ( optionBefore ) => {
-			const [ id ] = optionBefore;
-			const optionAfter = [ id, optionsAfter[ id ] ];
-			expect( optionAfter ).toStrictEqual( optionBefore );
-		} );
-	} );
-} );
diff --git a/test/e2e/specs/editor/various/core-settings-test.spec.js b/test/e2e/specs/editor/various/core-settings-test.spec.js
new file mode 100644
index 00000000000000..12376671a20b76
--- /dev/null
+++ b/test/e2e/specs/editor/various/core-settings-test.spec.js
@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.use( {
+	settingUtils: async ( { page, admin, requestUtils }, use ) => {
+		await use( new SettingUtils( { page, admin, requestUtils } ) );
+	},
+} );
+test.describe( 'Settings', () => {
+	test( 'Regression: updating a specific option will only change its value and will not corrupt others', async ( {
+		page,
+		admin,
+		settingUtils,
+	} ) => {
+		const optionsInputsSelector =
+			'form#all-options table.form-table input:not([id*="_transient"]):not([id="blogdescription"])';
+		const optionsBefore = await settingUtils.getOptionsValues(
+			optionsInputsSelector
+		);
+
+		await admin.visitAdminPage( 'options-general.php' );
+		await page.type(
+			'input#blogdescription',
+			'Just another Gutenberg site'
+		);
+		await page.click( 'role=button[name="Save Changes"i]' );
+
+		const optionsAfter = await settingUtils.getOptionsValues(
+			optionsInputsSelector
+		);
+
+		Object.entries( optionsBefore ).forEach( ( optionBefore ) => {
+			const [ id ] = optionBefore;
+			const optionAfter = [ id, optionsAfter[ id ] ];
+			expect( optionAfter ).toStrictEqual( optionBefore );
+		} );
+	} );
+} );
+
+class SettingUtils {
+	constructor( { page, admin } ) {
+		this.page = page;
+		this.admin = admin;
+	}
+
+	async getOptionsValues( selector ) {
+		await this.admin.visitAdminPage( 'options.php' );
+		return this.page.evaluate( ( theSelector ) => {
+			const inputs = Array.from(
+				document.querySelectorAll( theSelector )
+			);
+			return inputs.reduce( ( memo, input ) => {
+				memo[ input.id ] = input.value;
+				return memo;
+			}, {} );
+		}, selector );
+	}
+}