From 9e8dfb57cef1f3885bb6dda58ed2e8505846191a Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Mon, 17 Feb 2025 14:31:37 +0100
Subject: [PATCH] Add tests for the site editor.

---
 .../block-editor-dark-background.spec.js      |  8 +-
 .../site-editor-dark-background.spec.js       | 75 +++++++++++++++++++
 2 files changed, 79 insertions(+), 4 deletions(-)
 create mode 100644 test/e2e/specs/site-editor/site-editor-dark-background.spec.js

diff --git a/test/e2e/specs/editor/various/block-editor-dark-background.spec.js b/test/e2e/specs/editor/various/block-editor-dark-background.spec.js
index 183bb8b38c1a7..dc333f31c7ed9 100644
--- a/test/e2e/specs/editor/various/block-editor-dark-background.spec.js
+++ b/test/e2e/specs/editor/various/block-editor-dark-background.spec.js
@@ -16,8 +16,8 @@ test.describe( 'Block editor with dark background theme', () => {
 		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );
 
-	test.describe( 'block editor iframe body', () => {
-		test( 'should have the is-dark-theme CSS class', async ( {
+	test.describe( 'Block editor iframe body', () => {
+		test( 'Should have the is-dark-theme CSS class', async ( {
 			editor,
 		} ) => {
 			const canvasBody = editor.canvas.locator( 'body' );
@@ -40,8 +40,8 @@ test.describe( 'Block editor with light background theme', () => {
 		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );
 
-	test.describe( 'block editor iframe body', () => {
-		test( 'should not have the is-dark-theme CSS class', async ( {
+	test.describe( 'Block editor iframe body', () => {
+		test( 'Should not have the is-dark-theme CSS class', async ( {
 			editor,
 		} ) => {
 			const canvasBody = editor.canvas.locator( 'body' );
diff --git a/test/e2e/specs/site-editor/site-editor-dark-background.spec.js b/test/e2e/specs/site-editor/site-editor-dark-background.spec.js
new file mode 100644
index 0000000000000..1bf49c196bdfc
--- /dev/null
+++ b/test/e2e/specs/site-editor/site-editor-dark-background.spec.js
@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Site editor with dark background theme', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'darktheme' );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.visitSiteEditor();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.describe( 'Site editor iframe body', () => {
+		test( 'Should have the is-dark-theme CSS class', async ( {
+			editor,
+		} ) => {
+			const canvasBody = editor.canvas.locator( 'body' );
+
+			await expect( canvasBody ).toHaveClass( /is-dark-theme/ );
+		} );
+	} );
+} );
+
+test.describe( 'Site editor with light background theme and theme variations', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyfour' );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.visitSiteEditor();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.describe( 'Site editor iframe body', () => {
+		test( 'Should not have the is-dark-theme CSS class', async ( {
+			editor,
+		} ) => {
+			const canvasBody = editor.canvas.locator( 'body' );
+
+			await expect( canvasBody ).not.toHaveClass( /is-dark-theme/ );
+		} );
+
+		test( 'Should add and remove the is-dark-theme CSS class with dark and light theme variation', async ( {
+			page,
+			editor,
+		} ) => {
+			// Click "Styles"
+			await page.getByRole( 'button', { name: 'Styles' } ).click();
+
+			// Click "Browse styles"
+			await page.getByRole( 'button', { name: 'Browse styles' } ).click();
+
+			const canvasBody = editor.canvas.locator( 'body' );
+
+			// Activate "Maelstrom" Theme Variation.
+			await page.getByRole( 'button', { name: 'Maelstrom' } ).click();
+
+			await expect( canvasBody ).toHaveClass( /is-dark-theme/ );
+
+			// Activate "Ember" Theme Variation.
+			await page.getByRole( 'button', { name: 'Ember' } ).click();
+
+			await expect( canvasBody ).not.toHaveClass( /is-dark-theme/ );
+		} );
+	} );
+} );