From 11beb76e07ce84a42a6d383d06b7f99f6b4da0a9 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 6 May 2022 15:20:32 +0800 Subject: [PATCH] Update new image block test to use reorganized utils --- test/e2e/specs/editor/blocks/image.spec.js | 97 ++++++++++++---------- 1 file changed, 53 insertions(+), 44 deletions(-) diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index 8304533528ab87..8fc7018b1b39d2 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -10,9 +10,16 @@ const snapshotDiff = require( 'snapshot-diff' ); /** * WordPress dependencies */ -const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); +const { + test, + expect, + Editor, +} = require( '@wordpress/e2e-test-utils-playwright' ); test.use( { + editor: async ( { page }, use ) => { + await use( new Editor( { page } ) ); + }, imageBlockUtils: async ( { page }, use ) => { await use( new ImageBlockUtils( { page } ) ); }, @@ -23,16 +30,16 @@ test.describe( 'Image', () => { await requestUtils.deleteAllMedia(); } ); - test.beforeEach( async ( { pageUtils } ) => { - await pageUtils.createNewPost(); + test.beforeEach( async ( { admin } ) => { + await admin.createNewPost(); } ); test.afterEach( async ( { requestUtils } ) => { await requestUtils.deleteAllMedia(); } ); - test( 'can be inserted', async ( { page, pageUtils, imageBlockUtils } ) => { - await pageUtils.insertBlock( { name: 'core/image' } ); + test( 'can be inserted', async ( { editor, page, imageBlockUtils } ) => { + await editor.insertBlock( { name: 'core/image' } ); const imageBlock = page.locator( 'role=document[name="Block: Image"i]' @@ -52,15 +59,15 @@ test.describe( 'Image', () => {
` ); - expect( await pageUtils.getEditedPostContent() ).toMatch( regex ); + expect( await editor.getEditedPostContent() ).toMatch( regex ); } ); test( 'should replace, reset size, and keep selection', async ( { + editor, page, - pageUtils, imageBlockUtils, } ) => { - await pageUtils.insertBlock( { name: 'core/image' } ); + await editor.insertBlock( { name: 'core/image' } ); const imageBlock = page.locator( 'role=document[name="Block: Image"i]' @@ -83,11 +90,11 @@ test.describe( 'Image', () => {
` ); - expect( await pageUtils.getEditedPostContent() ).toMatch( regex ); + expect( await editor.getEditedPostContent() ).toMatch( regex ); } { - await pageUtils.openDocumentSettingsSidebar(); + await editor.openDocumentSettingsSidebar(); await page.click( 'role=group[name="Image size presets"i] >> role=button[name="25%"i]' ); @@ -101,11 +108,11 @@ test.describe( 'Image', () => { ` ); - expect( await pageUtils.getEditedPostContent() ).toMatch( regex ); + expect( await editor.getEditedPostContent() ).toMatch( regex ); } { - await pageUtils.showBlockToolbar(); + await editor.showBlockToolbar(); await page.click( 'role=button[name="Replace"i]' ); const replacedFilename = await imageBlockUtils.upload( @@ -127,7 +134,7 @@ test.describe( 'Image', () => {
` ); - expect( await pageUtils.getEditedPostContent() ).toMatch( regex ); + expect( await editor.getEditedPostContent() ).toMatch( regex ); } { @@ -137,16 +144,16 @@ test.describe( 'Image', () => { await image.click(); await page.keyboard.press( 'Backspace' ); - expect( await pageUtils.getEditedPostContent() ).toBe( '' ); + expect( await editor.getEditedPostContent() ).toBe( '' ); } } ); test( 'should place caret at end of caption after merging empty paragraph', async ( { + editor, page, - pageUtils, imageBlockUtils, } ) => { - await pageUtils.insertBlock( { name: 'core/image' } ); + await editor.insertBlock( { name: 'core/image' } ); const imageBlock = page.locator( 'role=document[name="Block: Image"i]' @@ -169,11 +176,11 @@ test.describe( 'Image', () => { } ); test( 'should allow soft line breaks in caption', async ( { + editor, page, - pageUtils, imageBlockUtils, } ) => { - await pageUtils.insertBlock( { name: 'core/image' } ); + await editor.insertBlock( { name: 'core/image' } ); const imageBlock = page.locator( 'role=document[name="Block: Image"i]' @@ -197,11 +204,12 @@ test.describe( 'Image', () => { } ); test( 'should have keyboard navigable toolbar for caption', async ( { + editor, page, pageUtils, imageBlockUtils, } ) => { - await pageUtils.insertBlock( { name: 'core/image' } ); + await editor.insertBlock( { name: 'core/image' } ); const imageBlock = page.locator( 'role=document[name="Block: Image"i]' @@ -234,11 +242,11 @@ test.describe( 'Image', () => { } ); test( 'should drag and drop files into media placeholder', async ( { + editor, page, - pageUtils, imageBlockUtils, } ) => { - await pageUtils.insertBlock( { name: 'core/image' } ); + await editor.insertBlock( { name: 'core/image' } ); const imageBlock = page.locator( 'role=document[name="Block: Image"i]' @@ -276,12 +284,13 @@ test.describe( 'Image', () => { } ); test( 'allows zooming using the crop tools', async ( { + editor, page, pageUtils, imageBlockUtils, } ) => { // Insert the block, upload a file and crop. - await pageUtils.insertBlock( { name: 'core/image' } ); + await editor.insertBlock( { name: 'core/image' } ); const imageBlock = page.locator( 'role=document[name="Block: Image"i]' @@ -299,8 +308,8 @@ test.describe( 'Image', () => { const initialImageDataURL = await imageBlockUtils.getDataURL( image ); // Zoom in to twice the amount using the zoom input. - await pageUtils.clickBlockToolbarButton( 'Crop' ); - await pageUtils.clickBlockToolbarButton( 'Zoom' ); + await editor.clickBlockToolbarButton( 'Crop' ); + await editor.clickBlockToolbarButton( 'Zoom' ); await expect( page.locator( 'role=slider[name="Zoom"i]' ) ).toBeFocused(); @@ -313,7 +322,7 @@ test.describe( 'Image', () => { await pageUtils.pressKeyWithModifier( 'primary', 'a' ); await page.keyboard.type( '200' ); await page.keyboard.press( 'Escape' ); - await pageUtils.clickBlockToolbarButton( 'Apply' ); + await editor.clickBlockToolbarButton( 'Apply' ); // Wait for the cropping tools to disappear. await expect( @@ -333,12 +342,12 @@ test.describe( 'Image', () => { } ); test( 'allows changing aspect ratio using the crop tools', async ( { + editor, page, - pageUtils, imageBlockUtils, } ) => { // Insert the block, upload a file and crop. - await pageUtils.insertBlock( { name: 'core/image' } ); + await editor.insertBlock( { name: 'core/image' } ); const imageBlock = page.locator( 'role=document[name="Block: Image"i]' @@ -356,12 +365,12 @@ test.describe( 'Image', () => { const initialImageDataURL = await imageBlockUtils.getDataURL( image ); // Zoom in to twice the amount using the zoom input. - await pageUtils.clickBlockToolbarButton( 'Crop' ); - await pageUtils.clickBlockToolbarButton( 'Aspect Ratio' ); + await editor.clickBlockToolbarButton( 'Crop' ); + await editor.clickBlockToolbarButton( 'Aspect Ratio' ); await page.click( 'role=menu[name="Aspect Ratio"i] >> role=menuitemradio[name="16:10"i]' ); - await pageUtils.clickBlockToolbarButton( 'Apply' ); + await editor.clickBlockToolbarButton( 'Apply' ); // Wait for the cropping tools to disappear. await expect( @@ -381,12 +390,12 @@ test.describe( 'Image', () => { } ); test( 'allows rotating using the crop tools', async ( { + editor, page, - pageUtils, imageBlockUtils, } ) => { // Insert the block, upload a file and crop. - await pageUtils.insertBlock( { name: 'core/image' } ); + await editor.insertBlock( { name: 'core/image' } ); const imageBlock = page.locator( 'role=document[name="Block: Image"i]' @@ -403,9 +412,9 @@ test.describe( 'Image', () => { const initialImageDataURL = await imageBlockUtils.getDataURL( image ); // Rotate the image. - await pageUtils.clickBlockToolbarButton( 'Crop' ); - await pageUtils.clickBlockToolbarButton( 'Rotate' ); - await pageUtils.clickBlockToolbarButton( 'Apply' ); + await editor.clickBlockToolbarButton( 'Crop' ); + await editor.clickBlockToolbarButton( 'Rotate' ); + await editor.clickBlockToolbarButton( 'Apply' ); // Wait for the cropping tools to disappear. await expect( @@ -422,11 +431,11 @@ test.describe( 'Image', () => { } ); test( 'Should reset dimensions on change URL', async ( { + editor, page, - pageUtils, imageBlockUtils, } ) => { - await pageUtils.insertBlock( { name: 'core/image' } ); + await editor.insertBlock( { name: 'core/image' } ); const imageBlock = page.locator( 'role=document[name="Block: Image"i]' @@ -444,7 +453,7 @@ test.describe( 'Image', () => { ); // Resize the Uploaded Image. - await pageUtils.openDocumentSettingsSidebar(); + await editor.openDocumentSettingsSidebar(); await page.click( 'role=group[name="Image size presets"i] >> role=button[name="25%"i]' ); @@ -456,14 +465,14 @@ test.describe( 'Image', () => { ); // Check if dimensions are changed. - expect( await pageUtils.getEditedPostContent() ).toMatch( regex ); + expect( await editor.getEditedPostContent() ).toMatch( regex ); } { const imageUrl = '/wp-includes/images/w-logo-blue.png'; // Replace uploaded image with an URL. - await pageUtils.clickBlockToolbarButton( 'Replace' ); + await editor.clickBlockToolbarButton( 'Replace' ); await page.click( 'role=button[name="Edit"i]' ); // Replace the url. await page.fill( 'role=combobox[name="URL"i]', imageUrl ); @@ -476,16 +485,17 @@ test.describe( 'Image', () => { ); // Check if dimensions are reset. - expect( await pageUtils.getEditedPostContent() ).toMatch( regex ); + expect( await editor.getEditedPostContent() ).toMatch( regex ); } } ); test( 'should undo without broken temporary state', async ( { + editor, page, pageUtils, imageBlockUtils, } ) => { - await pageUtils.insertBlock( { name: 'core/image' } ); + await editor.insertBlock( { name: 'core/image' } ); const imageBlock = page.locator( 'role=document[name="Block: Image"i]' @@ -502,8 +512,7 @@ test.describe( 'Image', () => { // Expect an empty image block (placeholder) rather than one with a // broken temporary URL. - expect( await pageUtils.getEditedPostContent() ) - .toBe( ` + expect( await editor.getEditedPostContent() ).toBe( `
` ); } );