From c3ae088a3b7182630819d54f73231abcbe736e86 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 25 Oct 2022 09:35:04 +0400 Subject: [PATCH] Migrate Gallery tests to Playwright (#45202) * Migrate Gallery caption tests to Playwright * Fully migrate * No need to select gallery * Use editor.selectBlocks utility * Copy full body for skipped test --- .../specs/editor/blocks/gallery.test.js | 156 ---------------- test/e2e/specs/editor/blocks/gallery.spec.js | 173 ++++++++++++++++++ 2 files changed, 173 insertions(+), 156 deletions(-) delete mode 100644 packages/e2e-tests/specs/editor/blocks/gallery.test.js diff --git a/packages/e2e-tests/specs/editor/blocks/gallery.test.js b/packages/e2e-tests/specs/editor/blocks/gallery.test.js deleted file mode 100644 index 79bd8a3441d1bd..00000000000000 --- a/packages/e2e-tests/specs/editor/blocks/gallery.test.js +++ /dev/null @@ -1,156 +0,0 @@ -/** - * External dependencies - */ -import path from 'path'; -import fs from 'fs'; -import os from 'os'; -import { v4 as uuid } from 'uuid'; - -/** - * WordPress dependencies - */ -import { - insertBlock, - getEditedPostContent, - createNewPost, - clickButton, - openListView, - getListViewBlocks, - clickBlockToolbarButton, -} 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-gallery img[src$="${ filename }.png"]` - ); - return filename; -} - -describe( 'Gallery', () => { - beforeEach( async () => { - await createNewPost(); - } ); - - it( 'can be created using uploaded images', async () => { - await insertBlock( 'Gallery' ); - const filename = await upload( '.wp-block-gallery input[type="file"]' ); - - const regex = new RegExp( - `\\s*
\\s*
\\"\\"<\/figure>\\s*<\/figure>\\s*` - ); - expect( await getEditedPostContent() ).toMatch( regex ); - } ); - - it( 'gallery caption can be edited', async () => { - const galleryCaption = 'Tested gallery caption'; - - await insertBlock( 'Gallery' ); - await upload( '.wp-block-gallery input[type="file"]' ); - await page.waitForSelector( '.wp-block-gallery .wp-block-image' ); - - // The Gallery needs to be selected from the List view panel due to the - // way that Image uploads take and lose focus. - await openListView(); - - const galleryListLink = ( await getListViewBlocks( 'Gallery' ) )[ 0 ]; - await galleryListLink.click(); - - await page.click( '.wp-block-gallery .blocks-gallery-caption' ); - - await page.keyboard.type( galleryCaption ); - - expect( await getEditedPostContent() ).toMatch( - new RegExp( `${ galleryCaption }` ) - ); - } ); - - it( "uploaded images' captions can be edited", async () => { - await insertBlock( 'Gallery' ); - await upload( '.wp-block-gallery input[type="file"]' ); - - const figureElement = await page.waitForSelector( - '.wp-block-gallery .wp-block-image' - ); - - // Check that the Image is unselected, in which case the figcaption won't be - // in the DOM - due the way that the Gallery block handles the upload the latest - // image gets selected in order to scroll to the position of it, as in large - // galleries the new upload may be off-canvas. After upload the image is unselected - // so if we don't check for that it may get unselected again by this flow after we - // have re-selected it to edit it. - await page.waitForFunction( - () => ! document.querySelector( '.wp-block-image figcaption' ) - ); - - // The Image needs to be selected from the List view panel due to the - // way that Image uploads take and lose focus. - await openListView(); - - // Due to collapsed state of ListView nodes Gallery must be expanded to reveal the child blocks. - // This xpath selects the anchor node for the block which has a child span which contains the text - // label of the block and then selects the expander span for that node. - const galleryExpander = await page.waitForXPath( - `//a[.//span[text()='Gallery']]/span[contains(@class, 'block-editor-list-view__expander')]` - ); - - await galleryExpander.click(); - - const imageListLink = ( await getListViewBlocks( 'Image' ) )[ 0 ]; - await imageListLink.click(); - await clickBlockToolbarButton( 'Add caption' ); - const captionElement = await figureElement.$( - '.block-editor-rich-text__editable' - ); - - await captionElement.click(); - const caption = 'Tested caption'; - - await page.keyboard.type( caption ); - - expect( await getEditedPostContent() ).toMatch( - new RegExp( `${ caption }` ) - ); - } ); - - // Disable reason: - // This test would be good to enable, but the media modal contains an - // invalid role, which is causing Axe tests to fail: - // https://core.trac.wordpress.org/ticket/50273 - // - // Attempts to add an Axe exception for the media modal haven't proved - // successful: - // https://github.com/WordPress/gutenberg/pull/22719 - // - // This test could be re-enabled once the trac ticket is solved. - // eslint-disable-next-line jest/no-disabled-tests - it.skip( 'when initially added the media library shows the Create Gallery view', async () => { - await insertBlock( 'Gallery' ); - await clickButton( 'Media Library' ); - await page.waitForSelector( '.media-frame' ); - const mediaLibraryHeaderText = await page.$eval( - '.media-frame-title h1', - ( element ) => element.textContent - ); - const mediaLibraryButtonText = await page.$eval( - '.media-toolbar-primary button', - ( element ) => element.textContent - ); - - expect( mediaLibraryHeaderText ).toBe( 'Create Gallery' ); - expect( mediaLibraryButtonText ).toBe( 'Create a new gallery' ); - } ); -} ); diff --git a/test/e2e/specs/editor/blocks/gallery.spec.js b/test/e2e/specs/editor/blocks/gallery.spec.js index 3ecae5751681f0..e9cfa3c03d99e9 100644 --- a/test/e2e/specs/editor/blocks/gallery.spec.js +++ b/test/e2e/specs/editor/blocks/gallery.spec.js @@ -2,12 +2,21 @@ * External dependencies */ const path = require( 'path' ); +const fs = require( 'fs/promises' ); +const os = require( 'os' ); +const { v4: uuid } = require( 'uuid' ); /** * WordPress dependencies */ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); +test.use( { + galleryBlockUtils: async ( { page }, use ) => { + await use( new GalleryBlockUtils( { page } ) ); + }, +} ); + test.describe( 'Gallery', () => { let uploadedMedia; @@ -74,4 +83,168 @@ test.describe( 'Gallery', () => { .poll( editor.getEditedPostContent ) .toBe( editedPostContent ); } ); + + test( 'can be created using uploaded images', async ( { + admin, + editor, + page, + galleryBlockUtils, + } ) => { + await admin.createNewPost(); + await editor.insertBlock( { name: 'core/gallery' } ); + const galleryBlock = page.locator( + 'role=document[name="Block: Gallery"i]' + ); + await expect( galleryBlock ).toBeVisible(); + + const filename = await galleryBlockUtils.upload( + galleryBlock.locator( 'data-testid=form-file-upload-input' ) + ); + + const image = galleryBlock.locator( 'role=img' ); + await expect( image ).toBeVisible(); + await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) ); + + const regex = new RegExp( + `\\s*
\\s*
\\"\\"<\/figure>\\s*<\/figure>\\s*` + ); + await expect.poll( editor.getEditedPostContent ).toMatch( regex ); + } ); + + test( 'gallery caption can be edited', async ( { + admin, + editor, + page, + } ) => { + const galleryCaption = 'Tested gallery caption'; + + await admin.createNewPost(); + await editor.insertBlock( { + name: 'core/gallery', + innerBlocks: [ + { + name: 'core/image', + attributes: { + id: uploadedMedia.id, + url: uploadedMedia.source_url, + }, + }, + ], + } ); + + const gallery = page.locator( 'role=document[name="Block: Gallery"i]' ); + + await expect( gallery ).toBeVisible(); + await editor.selectBlocks( gallery ); + + const caption = gallery.locator( + 'role=textbox[name="Gallery caption text"i]' + ); + await expect( caption ).toBeVisible(); + await caption.click(); + + await page.keyboard.type( galleryCaption ); + + await expect + .poll( editor.getEditedPostContent ) + .toMatch( + new RegExp( `${ galleryCaption }` ) + ); + } ); + + test( "uploaded images' captions can be edited", async ( { + admin, + editor, + page, + } ) => { + const caption = 'Tested caption'; + + await admin.createNewPost(); + await editor.insertBlock( { + name: 'core/gallery', + innerBlocks: [ + { + name: 'core/image', + attributes: { + id: uploadedMedia.id, + url: uploadedMedia.source_url, + }, + }, + ], + } ); + + const galleryImage = page.locator( + 'role=document[name="Block: Gallery"i] >> role=document[name="Block: Image"i]' + ); + const imageCaption = galleryImage.locator( + 'role=textbox[name="Image caption text"i]' + ); + await expect( galleryImage ).toBeVisible(); + + await galleryImage.click(); + await editor.clickBlockToolbarButton( 'Add caption' ); + + await expect( imageCaption ).toBeVisible(); + await imageCaption.click(); + + await page.keyboard.type( caption ); + + await expect + .poll( editor.getEditedPostContent ) + .toMatch( + new RegExp( `${ caption }` ) + ); + } ); + + // Disable reason: + // This test would be good to enable, but the media modal contains an + // invalid role, which is causing Axe tests to fail: + // https://core.trac.wordpress.org/ticket/50273 + // + // Attempts to add an Axe exception for the media modal haven't proved + // successful: + // https://github.com/WordPress/gutenberg/pull/22719 + test.fixme( + 'when initially added the media library shows the Create Gallery view', + async ( { admin, editor, page } ) => { + await admin.createNewPost(); + await editor.insertBlock( { name: 'core/gallery' } ); + await page.click( 'role=button[name="Media Library"i]' ); + await page.waitForSelector( '.media-frame' ); + expect( await page.innerText( '.media-frame-title h1' ) ).toBe( + 'Create gallery' + ); + expect( + await page.innerText( '.media-toolbar-primary button' ) + ).toBe( 'Create a new gallery' ); + } + ); } ); + +class GalleryBlockUtils { + constructor( { page } ) { + this.page = page; + + this.TEST_IMAGE_FILE_PATH = path.join( + __dirname, + '..', + '..', + '..', + 'assets', + '10x10_e2e_test_image_z9T8jK.png' + ); + } + + async upload( inputElement ) { + const tmpDirectory = await fs.mkdtemp( + path.join( os.tmpdir(), 'gutenberg-test-image-' ) + ); + const filename = uuid(); + const tmpFileName = path.join( tmpDirectory, filename + '.png' ); + await fs.copyFile( this.TEST_IMAGE_FILE_PATH, tmpFileName ); + + await inputElement.setInputFiles( tmpFileName ); + + return filename; + } +}