Add test for Font Library and Theme Style Variations (WordPress#60250)

* Add test * Test an additional variation
carstingaxion · Mar 27, 2024 · 363962a · 363962a
1 parent 1523f6e
commit 363962a
Showing 1 changed file with 79 additions and 0 deletions.
diff --git a/test/e2e/specs/site-editor/font-library.spec.js b/test/e2e/specs/site-editor/font-library.spec.js
@@ -86,4 +86,83 @@ test.describe( 'Font Library', () => {
 			).toBeVisible();
 		} );
 	} );
+
+	test.describe( 'When switching Theme Style variations', () => {
+		test.beforeAll( async ( { requestUtils } ) => {
+			await requestUtils.activateTheme( 'twentytwentyfour' );
+		} );
+
+		test.beforeEach( async ( { admin, editor } ) => {
+			await admin.visitSiteEditor();
+			await editor.canvas.locator( 'body' ).click();
+		} );
+
+		test( 'clicking on a font in the global styles sidebar should activate the font in the overlay when switching Theme Style variation', async ( {
+			page,
+		} ) => {
+			await page.getByRole( 'button', { name: /styles/i } ).click();
+
+			// Click "Browse styles"
+			await page.getByRole( 'button', { name: 'Browse styles' } ).click();
+
+			// Activate "Ember" Theme Variation.
+			await page.getByRole( 'button', { name: 'Ember' } ).click();
+
+			// Click "Back" button
+			await page.getByRole( 'button', { name: 'Back' } ).click();
+
+			await page
+				.getByRole( 'button', { name: 'Typography styles' } )
+				.click();
+
+			// Click "Jost 2 variants" button
+			await page
+				.getByRole( 'button', { name: 'Jost 2 variants' } )
+				.click();
+
+			await expect( page.getByRole( 'dialog' ) ).toBeVisible();
+			await expect(
+				page.getByRole( 'heading', { name: 'Fonts' } )
+			).toBeVisible();
+
+			// Check correct font is displayed in Font Library
+			await expect(
+				page.getByRole( 'heading', { name: 'Jost' } )
+			).toBeVisible();
+
+			// Close the Font Library dialog
+			await page.getByRole( 'button', { name: 'Close' } ).click();
+
+			// Click "Back"
+			await page.getByRole( 'button', { name: 'Back' } ).click();
+
+			// Click "Browse styles"
+			await page.getByRole( 'button', { name: 'Browse styles' } ).click();
+
+			// Activate "Maelstrom" Theme Variation.
+			await page.getByRole( 'button', { name: 'Maelstrom' } ).click();
+
+			// Click "Back" button
+			await page.getByRole( 'button', { name: 'Back' } ).click();
+
+			await page
+				.getByRole( 'button', { name: 'Typography styles' } )
+				.click();
+
+			// Click Cardo font-family.
+			await page
+				.getByRole( 'button', { name: 'Cardo 3 variants' } )
+				.click();
+
+			await expect( page.getByRole( 'dialog' ) ).toBeVisible();
+			await expect(
+				page.getByRole( 'heading', { name: 'Fonts' } )
+			).toBeVisible();
+
+			// Check correct font is displayed in Font Library
+			await expect(
+				page.getByRole( 'heading', { name: 'Cardo' } )
+			).toBeVisible();
+		} );
+	} );
 } );