E2E: Add more Cover block tests (#36321)

packages/e2e-tests/specs/editor/blocks/cover.test.js

@@ -1,3 +1,11 @@
+/**
+ * External dependencies
+ */
+import path from 'path';
+import fs from 'fs';
+import os from 'os';
+import { v4 as uuid } from 'uuid';
+
 /**
  * WordPress dependencies
  */
@@ -7,11 +15,110 @@ import {
 	openDocumentSettingsSidebar,
 } from '@wordpress/e2e-test-utils';
 
+async function upload( selector ) {
+	await page.waitForSelector( selector );
+	const inputElement = await page.$( selector );
+	const testImagePath = path.join(
+		__dirname,
+		'..',
+		'..',
+		'..',
+		'assets',
+		'10x10_e2e_test_image_z9T8jK.png'
+	);
+	const filename = uuid();
+	const tmpFileName = path.join( os.tmpdir(), filename + '.png' );
+	fs.copyFileSync( testImagePath, tmpFileName );
+	await inputElement.uploadFile( tmpFileName );
+	await page.waitForSelector(
+		`.wp-block-cover img[src$="${ filename }.png"]`
+	);
+	return filename;
+}
+
 describe( 'Cover', () => {
 	beforeEach( async () => {
 		await createNewPost();
 	} );
 
+	it( 'can set overlay color using color picker on block placeholder', async () => {
+		await insertBlock( 'Cover' );
+		// Get the first color option from the block placeholder's color picker
+		const colorPickerButton = await page.waitForSelector(
+			'.wp-block-cover__placeholder-background-options .components-circular-option-picker__option-wrapper:first-child button'
+		);
+		// Get the RGB value of the picked color
+		const pickedColor = await colorPickerButton.evaluate(
+			( node ) => node.style.backgroundColor
+		);
+		// Create the block by clicking selected color button
+		await colorPickerButton.click();
+		// Get the block's background dim element
+		const backgroundDim = await page.waitForSelector(
+			'.wp-block-cover .has-background-dim'
+		);
+		// Get the RGB value of the background dim
+		const dimColor = await backgroundDim.evaluate(
+			( node ) => node.style.backgroundColor
+		);
+
+		expect( pickedColor ).toEqual( dimColor );
+	} );
+
+	it( 'can set background image using image upload on block placeholder', async () => {
+		await insertBlock( 'Cover' );
+		// Create the block using uploaded image
+		const sourceImageFilename = await upload(
+			'.wp-block-cover input[type="file"]'
+		);
+		// Get the block's background image URL
+		const blockImage = await page.waitForSelector( '.wp-block-cover img' );
+		const blockImageUrl = await blockImage.evaluate( ( el ) => el.src );
+
+		expect( blockImageUrl ).toContain( sourceImageFilename );
+	} );
+
+	it( 'dims background image down by 50% by default', async () => {
+		await insertBlock( 'Cover' );
+		// Create the block using uploaded image
+		await upload( '.wp-block-cover input[type="file"]' );
+		// Get the block's background dim color and its opacity
+		const backgroundDim = await page.waitForSelector(
+			'.wp-block-cover .has-background-dim'
+		);
+		const [
+			backgroundDimColor,
+			backgroundDimOpacity,
+		] = await page.evaluate( ( el ) => {
+			const computedStyle = window.getComputedStyle( el );
+			return [ computedStyle.backgroundColor, computedStyle.opacity ];
+		}, backgroundDim );
+
+		expect( backgroundDimColor ).toBe( 'rgb(0, 0, 0)' );
+		expect( backgroundDimOpacity ).toBe( '0.5' );
+	} );
+
+	it( 'can have the title edited', async () => {
+		await insertBlock( 'Cover' );
+		// Click first color option from the block placeholder's color picker
+		const colorPickerButton = await page.waitForSelector(
+			'.wp-block-cover__placeholder-background-options .components-circular-option-picker__option-wrapper:first-child button'
+		);
+		await colorPickerButton.click();
+		// Click the title placeholder to put the cursor inside
+		const coverTitle = await page.waitForSelector(
+			'.wp-block-cover .wp-block-paragraph'
+		);
+		await coverTitle.click();
+		// Type the title
+		await page.keyboard.type( 'foo' );
+		const coverTitleText = await coverTitle.evaluate(
+			( el ) => el.innerText
+		);
+
+		expect( coverTitleText ).toEqual( 'foo' );
+	} );
+
 	it( 'can be resized using drag & drop', async () => {
 		await insertBlock( 'Cover' );
 		// Close the inserter