Migrate code block test case to playwright

packages/e2e-test-utils-playwright/src/page/click-block-appender.js

@@ -0,0 +1,17 @@
+/**
+ * Clicks the default block appender.
+ *
+ * @this {import('./').PageUtils}
+ */
+
+ export async function clickBlockAppender() {
+	// The block appender is only visible when there's no selection.
+	await this.page.evaluate( () =>
+		window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock()
+	);
+	const appender = await this.page.waitForSelector(
+		'.block-editor-default-block-appender__content'
+	);
+	await appender.click();
+	await this.page.evaluate( () => new Promise( window.requestIdleCallback ) );
+}

packages/e2e-test-utils-playwright/src/page/index.ts

@@ -23,6 +23,8 @@ import { setBrowserViewport } from './set-browser-viewport';
 import { showBlockToolbar } from './show-block-toolbar';
 import { visitAdminPage } from './visit-admin-page';
 import { visitSiteEditor } from './site-editor';
+import {clickBlockAppender} from './click-block-appender';
+
 
 class PageUtils {
 	browser: Browser;
@@ -50,6 +52,7 @@ class PageUtils {
 	openPreviewPage = openPreviewPage;
 	setBrowserViewport = setBrowserViewport;
 	pressKeyTimes = pressKeyTimes;
+	clickBlockAppender = clickBlockAppender;
 }
 
 export { PageUtils };

test/e2e/specs/editor/blocks/code.spec.js

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+
+test.describe( 'Code', () => {
+	test.beforeEach( async ({pageUtils}) => {
+		await pageUtils.createNewPost();
+	} );
+
+	test( 'can be created by three backticks and enter', async ({page,pageUtils}) => {
+		await pageUtils.clickBlockAppender();
+		await page.keyboard.type( '```' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '<?php' );
+
+		// Check the content
+        const content = await pageUtils.getEditedPostContent();
+        expect( content ).toBe(
+            `<!-- wp:code -->
+<pre class="wp-block-code"><code>&lt;?php</code></pre>
+<!-- /wp:code -->`
+        );
+
+	} );
+
+	test( 'should delete block when backspace in an empty code', async ({page,pageUtils}) => {
+		await pageUtils.insertBlock({ name: 'core/code' });
+
+		await page.keyboard.type( 'a' );
+
+		await page.keyboard.press( 'Backspace' );
+		await page.keyboard.press( 'Backspace' );
+
+		// Expect code block to be deleted.
+		expect( await pageUtils.getEditedPostContent() ).toBe( '' );
+	} );
+
+	test( 'should paste plain text', async ({page,pageUtils}) => {
+		await pageUtils.insertBlock( { name: 'core/code' });
+
+		// Test to see if HTML and white space is kept.
+		await pageUtils.setClipboardData( { plainText: '<img />\n\t<br>' } );
+
+		await pageUtils.pressKeyWithModifier( 'primary', 'v' );
+
+		// Check the content
+        const content = await pageUtils.getEditedPostContent();
+        expect( content ).toBe(
+            `<!-- wp:code -->
+<pre class="wp-block-code"><code>&lt;img />
+	&lt;br></code></pre>
+<!-- /wp:code -->`
+        );
+	} );
+} );