Skip to content

Commit

Permalink
Fix flaky Behaviors UI e2e tests (#50954)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mamaduka
Mamaduka authored May 25, 2023
1 parent 330dac9 commit ee74c04
Showing 1 changed file with 87 additions and 29 deletions.
116 changes: 87 additions & 29 deletions test/e2e/specs/editor/various/behaviors.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,15 @@ const path = require( 'path' );
*/
const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );

test.describe( 'Testing behaviors functionality', () => {
const filename = '1024x768_e2e_test_image_size.jpeg';
const filepath = path.join( './test/e2e/assets', filename );
test.use( {
behaviorUtils: async ( { page, requestUtils }, use ) => {
await use( new BehaviorUtils( { page, requestUtils } ) );
},
} );

const createMedia = async ( { admin, requestUtils } ) => {
await admin.createNewPost();
const media = await requestUtils.uploadMedia( filepath );
return media;
};
const filename = '1024x768_e2e_test_image_size.jpeg';

test.describe( 'Testing behaviors functionality', () => {
test.afterAll( async ( { requestUtils } ) => {
await requestUtils.activateTheme( 'twentytwentyone' );
await requestUtils.deleteAllPosts();
Expand All @@ -32,9 +31,11 @@ test.describe( 'Testing behaviors functionality', () => {
editor,
requestUtils,
page,
behaviorUtils,
} ) => {
await requestUtils.activateTheme( 'twentytwentyone' );
const media = await createMedia( { admin, requestUtils } );
await admin.createNewPost();
const media = await behaviorUtils.createMedia();
await editor.insertBlock( {
name: 'core/image',
attributes: {
Expand All @@ -44,29 +45,37 @@ test.describe( 'Testing behaviors functionality', () => {
},
} );

await page.getByRole( 'button', { name: 'Advanced' } ).click();
const select = page.getByLabel( 'Behavior' );
await editor.openDocumentSettingsSidebar();
const editorSettings = page.getByRole( 'region', {
name: 'Editor settings',
} );
await editorSettings
.getByRole( 'button', { name: 'Advanced' } )
.click();
const select = editorSettings.getByRole( 'combobox', {
name: 'Behavior',
} );

// By default, no behaviors should be selected.
await expect( select ).toHaveCount( 1 );
await expect( select ).toHaveValue( '' );

// By default, you should be able to select the Lightbox behavior.
const options = select.locator( 'option' );
await expect( options ).toHaveCount( 2 );
await expect( select.getByRole( 'option' ) ).toHaveCount( 2 );
} );

test( 'Behaviors UI can be disabled in the `theme.json`', async ( {
admin,
editor,
requestUtils,
page,
behaviorUtils,
} ) => {
// { "lightbox": true } is the default behavior setting, so we activate the
// `behaviors-ui-disabled` theme where it is disabled by default. Change if we change
// the default value in the core theme.json file.
await requestUtils.activateTheme( 'behaviors-ui-disabled' );
const media = await createMedia( { admin, requestUtils } );
await admin.createNewPost();
const media = await behaviorUtils.createMedia();

await editor.insertBlock( {
name: 'core/image',
Expand All @@ -77,20 +86,32 @@ test.describe( 'Testing behaviors functionality', () => {
},
} );

await page.getByRole( 'button', { name: 'Advanced' } ).click();
await editor.openDocumentSettingsSidebar();
const editorSettings = page.getByRole( 'region', {
name: 'Editor settings',
} );
await editorSettings
.getByRole( 'button', { name: 'Advanced' } )
.click();

// No behaviors dropdown should be present.
await expect( page.getByLabel( 'Behavior' ) ).toHaveCount( 0 );
await expect(
editorSettings.getByRole( 'combobox', {
name: 'Behavior',
} )
).toBeHidden();
} );

test( "Block's value for behaviors takes precedence over the theme's value", async ( {
admin,
editor,
requestUtils,
page,
behaviorUtils,
} ) => {
await requestUtils.activateTheme( 'twentytwentyone' );
const media = await createMedia( { admin, requestUtils } );
await admin.createNewPost();
const media = await behaviorUtils.createMedia();

await editor.insertBlock( {
name: 'core/image',
Expand All @@ -103,17 +124,23 @@ test.describe( 'Testing behaviors functionality', () => {
},
} );

await page.getByRole( 'button', { name: 'Advanced' } ).click();
const select = page.getByLabel( 'Behavior' );
await editor.openDocumentSettingsSidebar();
const editorSettings = page.getByRole( 'region', {
name: 'Editor settings',
} );
await editorSettings
.getByRole( 'button', { name: 'Advanced' } )
.click();
const select = editorSettings.getByRole( 'combobox', {
name: 'Behavior',
} );

// The lightbox should be selected because the value from the block's
// attributes takes precedence over the theme's value.
await expect( select ).toHaveCount( 1 );
await expect( select ).toHaveValue( 'lightbox' );

// There should be 2 options available: `No behaviors` and `Lightbox`.
const options = select.locator( 'option' );
await expect( options ).toHaveCount( 2 );
await expect( select.getByRole( 'option' ) ).toHaveCount( 2 );

// We can change the value of the behaviors dropdown to `No behaviors`.
await select.selectOption( { label: 'No behaviors' } );
Expand All @@ -128,10 +155,12 @@ test.describe( 'Testing behaviors functionality', () => {
editor,
requestUtils,
page,
behaviorUtils,
} ) => {
// In this theme, the default value for settings.behaviors.blocks.core/image.lightbox is `true`.
await requestUtils.activateTheme( 'behaviors-enabled' );
const media = await createMedia( { admin, requestUtils } );
await admin.createNewPost();
const media = await behaviorUtils.createMedia();

await editor.insertBlock( {
name: 'core/image',
Expand All @@ -142,20 +171,49 @@ test.describe( 'Testing behaviors functionality', () => {
},
} );

await page.getByRole( 'button', { name: 'Advanced' } ).click();
const select = page.getByLabel( 'Behavior' );
await editor.openDocumentSettingsSidebar();
const editorSettings = page.getByRole( 'region', {
name: 'Editor settings',
} );
await editorSettings
.getByRole( 'button', { name: 'Advanced' } )
.click();
const select = editorSettings.getByRole( 'combobox', {
name: 'Behavior',
} );

// The behaviors dropdown should be present and the value should be set to
// `lightbox`.
await expect( select ).toHaveCount( 1 );
await expect( select ).toHaveValue( 'lightbox' );

// There should be 2 options available: `No behaviors` and `Lightbox`.
const options = select.locator( 'option' );
await expect( options ).toHaveCount( 2 );
await expect( select.getByRole( 'option' ) ).toHaveCount( 2 );

// We can change the value of the behaviors dropdown to `No behaviors`.
await select.selectOption( { label: 'No behaviors' } );
await expect( select ).toHaveValue( '' );
} );
} );

class BehaviorUtils {
constructor( { page, requestUtils } ) {
this.page = page;
this.requestUtils = requestUtils;

this.TEST_IMAGE_FILE_PATH = path.join(
__dirname,
'..',
'..',
'..',
'assets',
filename
);
}

async createMedia() {
const media = await this.requestUtils.uploadMedia(
this.TEST_IMAGE_FILE_PATH
);
return media;
}
}

0 comments on commit ee74c04

Please sign in to comment.