E2E Tests: Fix theme colors and font sizes. (#18761)

* E2E Tests: Fix theme colors and font sizes. * Normalize Theme: Remove theme supports instead of overwriting them. * E2E Tests: Update to expect editor defaults for colors and font sizes.
WordPress · Dec 4, 2019 · da54d11 · da54d11
1 parent 3a8dcb6
commit da54d11
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 10 deletions.
diff --git a/packages/e2e-tests/mu-plugins/normalize-theme.php b/packages/e2e-tests/mu-plugins/normalize-theme.php
@@ -0,0 +1,18 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Plugin, Normalize Theme
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-normalize-theme
+ */
+
+/**
+ * Fixes colors and font sizes so that tests
+ * are consistent across different themes.
+ */
+function normalize_theme_init() {
+	remove_theme_support( 'editor-color-palette' );
+	remove_theme_support( 'editor-font-sizes' );
+}
+add_action( 'init', 'normalize_theme_init' );
diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap
@@ -19,8 +19,8 @@ exports[`Heading it should correctly apply custom colors 1`] = `
 `;
 
 exports[`Heading it should correctly apply named colors 1`] = `
-"<!-- wp:heading {\\"textColor\\":\\"accent\\"} -->
-<h2 class=\\"has-accent-color has-text-color\\">Heading</h2>
+"<!-- wp:heading {\\"textColor\\":\\"very-dark-gray\\"} -->
+<h2 class=\\"has-very-dark-gray-color has-text-color\\">Heading</h2>
 <!-- /wp:heading -->"
 `;
 

diff --git a/packages/e2e-tests/specs/editor/blocks/heading.test.js b/packages/e2e-tests/specs/editor/blocks/heading.test.js
@@ -77,11 +77,11 @@ describe( 'Heading', () => {
 		const [ colorPanelToggle ] = await page.$x( COLOR_PANEL_TOGGLE_X_SELECTOR );
 		await colorPanelToggle.click();
 
-		const accentColorButtonSelector = `${ TEXT_COLOR_UI_X_SELECTOR }//button[@aria-label='Color: Accent Color']`;
-		const [ accentColorButton ] = await page.$x( accentColorButtonSelector );
-		await accentColorButton.click();
+		const colorButtonSelector = `${ TEXT_COLOR_UI_X_SELECTOR }//button[@aria-label='Color: Very dark gray']`;
+		const [ colorButton ] = await page.$x( colorButtonSelector );
+		await colorButton.click();
 		await page.click( '[data-type="core/heading"] h2' );
-		await page.waitForXPath( `${ accentColorButtonSelector }[@aria-pressed='true']` );
+		await page.waitForXPath( `${ colorButtonSelector }[@aria-pressed='true']` );
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 } );
diff --git a/packages/e2e-tests/specs/editor/various/editor-modes.test.js b/packages/e2e-tests/specs/editor/various/editor-modes.test.js
@@ -79,7 +79,7 @@ describe( 'Editing modes (visual/HTML)', () => {
 
 		// Change the font size using the sidebar.
 		await page.click( '.components-font-size-picker__select' );
-		await page.click( '.components-custom-select__item:nth-child(3)' );
+		await page.click( '.components-custom-select__item:nth-child(4)' );
 
 		// Make sure the HTML content updated.
 		htmlBlockContent = await page.$eval( '.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea', ( node ) => node.textContent );

diff --git a/packages/e2e-tests/specs/editor/various/font-size-picker.test.js b/packages/e2e-tests/specs/editor/various/font-size-picker.test.js
@@ -18,7 +18,7 @@ describe( 'Font Size Picker', () => {
 		await clickBlockAppender();
 		await page.keyboard.type( 'Paragraph to be made "large"' );
 		await page.click( '.components-font-size-picker__select' );
-		await page.click( '.components-custom-select__item:nth-child(3)' );
+		await page.click( '.components-custom-select__item:nth-child(4)' );
 
 		// Ensure content matches snapshot.
 		const content = await getEditedPostContent();
@@ -31,8 +31,8 @@ describe( 'Font Size Picker', () => {
 		await page.keyboard.type( 'Paragraph to be made "small"' );
 
 		await page.click( '.blocks-font-size .components-range-control__number' );
-		// This should be the "small" font-size of the current theme.
-		await page.keyboard.type( '18' );
+		// This should be the "small" font-size of the editor defaults.
+		await page.keyboard.type( '13' );
 
 		// Ensure content matches snapshot.
 		const content = await getEditedPostContent();