Skip to content

Commit

Permalink
Update new image block test to use reorganized utils
Browse files Browse the repository at this point in the history
  • Loading branch information
@talldan
talldan committed May 6, 2022
1 parent a11b951 commit 11beb76
Showing 1 changed file with 53 additions and 44 deletions.
97 changes: 53 additions & 44 deletions test/e2e/specs/editor/blocks/image.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 } ) );
},
Expand All @@ -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]'
Expand All @@ -52,15 +59,15 @@ test.describe( 'Image', () => {
<figure class="wp-block-image size-full"><img src="[^"]+\\/${ filename }\\.png" alt="" class="wp-image-\\1"/></figure>
<!-- \\/wp: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]'
Expand All @@ -83,11 +90,11 @@ test.describe( 'Image', () => {
<figure class="wp-block-image size-full"><img src="[^"]+\\/${ filename }\\.png" alt="" class="wp-image-\\1"/></figure>
<!-- \\/wp: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]'
);
Expand All @@ -101,11 +108,11 @@ test.describe( 'Image', () => {
<!-- /wp: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(
Expand All @@ -127,7 +134,7 @@ test.describe( 'Image', () => {
<figure class="wp-block-image size-full"><img src="[^"]+\\/${ replacedFilename }\\.png" alt="" class="wp-image-\\1"/></figure>
<!-- \\/wp:image -->`
);
expect( await pageUtils.getEditedPostContent() ).toMatch( regex );
expect( await editor.getEditedPostContent() ).toMatch( regex );
}

{
Expand All @@ -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]'
Expand All @@ -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]'
Expand All @@ -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]'
Expand Down Expand Up @@ -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]'
Expand Down Expand Up @@ -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]'
Expand All @@ -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();
Expand All @@ -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(
Expand All @@ -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]'
Expand All @@ -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(
Expand All @@ -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]'
Expand All @@ -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(
Expand All @@ -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]'
Expand All @@ -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]'
);
Expand All @@ -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 );
Expand All @@ -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]'
Expand All @@ -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( `<!-- wp:image -->
expect( await editor.getEditedPostContent() ).toBe( `<!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->` );
} );
Expand Down

0 comments on commit 11beb76

Please sign in to comment.