Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

E2E tests: Add width and color test to button block #46452

Merged
merged 8 commits into from
Dec 12, 2022
Merged

E2E tests: Add width and color test to button block #46452

Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a64e6d7
E2E tests: Add width and color test to button block
t-hamano Dec 11, 2022
684177d
polish selectors
t-hamano Dec 11, 2022
92e16a7
Fix tests
t-hamano Dec 11, 2022
5ec0051
Update test
t-hamano Dec 11, 2022
7b7f789
A survey of the causes of GitHub Actions failures
t-hamano Dec 11, 2022
af3ab13
Fix test
t-hamano Dec 11, 2022
6d83749
Remove `waitForSelector`
t-hamano Dec 11, 2022
9c745ab
Simplify HEX color input
t-hamano Dec 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
146 changes: 146 additions & 0 deletions test/e2e/specs/editor/blocks/buttons.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@
const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );

test.describe( 'Buttons', () => {
const COLOR_INPUT_FIELD_SELECTOR =
'.components-color-picker .components-input-control__input';

test.beforeEach( async ( { admin } ) => {
await admin.createNewPost();
} );
Expand Down Expand Up @@ -123,6 +126,149 @@ test.describe( 'Buttons', () => {
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://www.wordpress.org/">WordPress</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->`
);
} );

test( 'can resize width', async ( { editor, page } ) => {
await editor.insertBlock( { name: 'core/buttons' } );
await page.keyboard.type( 'Content' );
await editor.openDocumentSettingsSidebar();
await page.click(
'role=group[name="Button width"i] >> role=button[name="25%"i]'
);

// Check the content.
const content = await editor.getEditedPostContent();
expect( content ).toBe(
`<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":25} -->
<div class="wp-block-button has-custom-width wp-block-button__width-25"><a class="wp-block-button__link wp-element-button">Content</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->`
);
} );

test( 'can apply named colors', async ( { editor, page } ) => {
await editor.insertBlock( { name: 'core/buttons' } );
await page.keyboard.type( 'Content' );
await editor.openDocumentSettingsSidebar();

await page.click(
'role=region[name="Editor settings"i] >> role=button[name="Text"i]'
);
await page.click( 'role=button[name="Color: Cyan bluish gray"i]' );
await page.click(
'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
);
await page.click( 'role=button[name="Color: Vivid red"i]' );

// Check the content.
const content = await editor.getEditedPostContent();
expect( content ).toBe(
`<!-- wp:buttons -->
<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"vivid-red\",\"textColor\":\"cyan-bluish-gray\"} -->
<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-cyan-bluish-gray-color has-vivid-red-background-color has-text-color has-background wp-element-button\">Content</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->`
);
} );

test( 'can apply custom colors', async ( { editor, page, pageUtils } ) => {
await editor.insertBlock( { name: 'core/buttons' } );
await page.keyboard.type( 'Content' );
await editor.openDocumentSettingsSidebar();

await page.click(
'role=region[name="Editor settings"i] >> role=button[name="Text"i]'
);
await page.click( 'role=button[name="Custom color picker."i]' );
await page.waitForSelector( COLOR_INPUT_FIELD_SELECTOR );
await page.click( COLOR_INPUT_FIELD_SELECTOR );
kevin940726 marked this conversation as resolved.
Show resolved Hide resolved
await pageUtils.pressKeyWithModifier( 'primary', 'a' );
await page.keyboard.type( 'ff0000' );
kevin940726 marked this conversation as resolved.
Show resolved Hide resolved

await page.click(
'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
);
await page.click( 'role=button[name="Custom color picker."i]' );
await page.waitForSelector( COLOR_INPUT_FIELD_SELECTOR );
await page.click( COLOR_INPUT_FIELD_SELECTOR );
await pageUtils.pressKeyWithModifier( 'primary', 'a' );
await page.keyboard.type( '00ff00' );
kevin940726 marked this conversation as resolved.
Show resolved Hide resolved

// Check the content.
const content = await editor.getEditedPostContent();
expect( content ).toBe(
`<!-- wp:buttons -->
<div class=\"wp-block-buttons\"><!-- wp:button {\"style\":{\"color\":{\"text\":\"#ff0000\",\"background\":\"#00ff00\"}}} -->
<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-text-color has-background wp-element-button\" style=\"color:#ff0000;background-color:#00ff00\">Content</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->`
);
} );

test( 'can apply named gradient background color', async ( {
editor,
page,
} ) => {
await editor.insertBlock( { name: 'core/buttons' } );
await page.keyboard.type( 'Content' );
await editor.openDocumentSettingsSidebar();

await page.click(
'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
);
await page.click( 'role=tab[name="Gradient"i]' );
await page.click( 'role=button[name="Gradient: Purple to yellow"i]' );

// Check the content.
const content = await editor.getEditedPostContent();
expect( content ).toBe(
`<!-- wp:buttons -->
<div class=\"wp-block-buttons\"><!-- wp:button {\"gradient\":\"purple-to-yellow\"} -->
<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-purple-to-yellow-gradient-background has-background wp-element-button\">Content</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->`
);
} );

test( 'can apply custom gradient background color', async ( {
editor,
page,
pageUtils,
} ) => {
await editor.insertBlock( { name: 'core/buttons' } );
await page.keyboard.type( 'Content' );
await editor.openDocumentSettingsSidebar();

await page.click(
'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
);
await page.click( 'role=tab[name="Gradient"i]' );
await page.click(
'role=button[name=/^Gradient control point at position 0% with color code/]'
);
Comment on lines +239 to +241
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The button to change the point of the gradient actually has the following text:

Gradient control point at position 0% with color code rgb(6,147,227).

I used forward matching because rgb values may change with WordPress and Gutenberg updates.

Copy link
Member

@kevin940726 kevin940726 Dec 12, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For other themes, the test will fail because the selectors in the gradient palette don’t match.

Is this still true if we use regex matching here?

await page.waitForSelector( COLOR_INPUT_FIELD_SELECTOR );
await page.click( COLOR_INPUT_FIELD_SELECTOR );
await pageUtils.pressKeyWithModifier( 'primary', 'a' );
await page.keyboard.type( 'ff0000' );
kevin940726 marked this conversation as resolved.
Show resolved Hide resolved
await page.keyboard.press( 'Escape' );
await page.click(
'role=button[name=/^Gradient control point at position 100% with color code/]'
);
await page.waitForSelector( COLOR_INPUT_FIELD_SELECTOR );
await page.click( COLOR_INPUT_FIELD_SELECTOR );
await pageUtils.pressKeyWithModifier( 'primary', 'a' );
await page.keyboard.type( '00ff00' );
kevin940726 marked this conversation as resolved.
Show resolved Hide resolved

// Check the content.
const content = await editor.getEditedPostContent();
expect( content ).toBe(
`<!-- wp:buttons -->
<div class=\"wp-block-buttons\"><!-- wp:button {\"style\":{\"color\":{\"gradient\":\"linear-gradient(135deg,rgb(255,0,0) 0%,rgb(0,255,0) 100%)\"}}} -->
<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background wp-element-button\" style=\"background:linear-gradient(135deg,rgb(255,0,0) 0%,rgb(0,255,0) 100%)\">Content</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->`
);
} );
Expand Down