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

E2E Tests: Migrate style variations tests to Playwright #41427

Merged
merged 11 commits into from
Jun 19, 2022
Merged

E2E Tests: Migrate style variations tests to Playwright #41427

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
d9772bf
initial commit, pulling over site editor utils, basic scaffolding
ramonjd May 30, 2022
c586d8b
Setting up page object
ramonjd May 31, 2022
8f6bf9a
Moved test theme and update wp-env
ramonjd May 31, 2022
7b843f4
Remapped test themes directory
ramonjd Jun 6, 2022
01edb59
Remapped test themes directory and encode URI to take care of slashes
ramonjd Jun 6, 2022
273cfd1
Adding aria labels to global styles navigation buttons
ramonjd Jun 7, 2022
dfa7a00
Inlining some of the locators and using playwright methods
ramonjd Jun 8, 2022
5ae912e
Look for `background-color` instead of `background`
ramonjd Jun 16, 2022
d770e9d
Adding data testid to color indicator wrapper
ramonjd Jun 16, 2022
0cb6918
Inlining locators
ramonjd Jun 17, 2022
c697046
Fix accessible selectors
ramonjd Jun 18, 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
2 changes: 1 addition & 1 deletion .wp-env.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"wp-content/plugins/gutenberg": ".",
"wp-content/mu-plugins": "./packages/e2e-tests/mu-plugins",
"wp-content/plugins/gutenberg-test-plugins": "./packages/e2e-tests/plugins",
"wp-content/themes/gutenberg-test-themes": "./packages/e2e-tests/themes"
"wp-content/themes/gutenberg-test-themes": "./test/gutenberg-test-themes"
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-test-utils-playwright/src/editor/site-editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,6 @@ export async function saveSiteEditorEntities( this: Editor ) {
// not have that classname.
// TODO - find a way to improve this selector to use role/name.
await this.page.waitForSelector(
'.edit-site-save-button__button:not(.is-busy)'
'css=.edit-site-save-button__button:not(.is-busy)'
);
}
6 changes: 3 additions & 3 deletions packages/e2e-test-utils-playwright/src/request-utils/themes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ async function activateTheme(
let response = await this.request.get( THEMES_URL );
const html = await response.text();
const matchGroup = html.match(
new RegExp(
`action=activate&stylesheet=${ themeSlug }&_wpnonce=[a-z0-9]+`
)
`action=activate&stylesheet=${ encodeURIComponent(
ramonjd marked this conversation as resolved.
Show resolved Hide resolved
themeSlug
) }&_wpnonce=[a-z0-9]+`
);

if ( ! matchGroup ) {
Expand Down
213 changes: 0 additions & 213 deletions packages/e2e-tests/specs/site-editor/style-variations.test.js
View file
Open in desktop

This file was deleted.

3 changes: 3 additions & 0 deletions packages/edit-site/src/components/global-styles/context-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ function ContextMenu( { name, parentMenu = '' } ) {
<NavigationButtonAsItem
icon={ typography }
path={ parentMenu + '/typography' }
aria-label={ __( 'Typography styles' ) }
>
{ __( 'Typography' ) }
</NavigationButtonAsItem>
Expand All @@ -35,6 +36,7 @@ function ContextMenu( { name, parentMenu = '' } ) {
<NavigationButtonAsItem
icon={ color }
path={ parentMenu + '/colors' }
aria-label={ __( 'Colors styles' ) }
>
{ __( 'Colors' ) }
</NavigationButtonAsItem>
Expand All @@ -43,6 +45,7 @@ function ContextMenu( { name, parentMenu = '' } ) {
<NavigationButtonAsItem
icon={ layout }
path={ parentMenu + '/layout' }
aria-label={ __( 'Layout styles' ) }
>
{ __( 'Layout' ) }
</NavigationButtonAsItem>
Expand Down
5 changes: 4 additions & 1 deletion packages/edit-site/src/components/global-styles/palette.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,10 @@ function Palette( { name } ) {
<VStack spacing={ 3 }>
<Subtitle>{ __( 'Palette' ) }</Subtitle>
<ItemGroup isBordered isSeparated>
<NavigationButtonAsItem path={ screenPath }>
<NavigationButtonAsItem
path={ screenPath }
aria-label={ __( 'Color palettes' ) }
>
<HStack
direction={
colors.length === 0 ? 'row-reverse' : 'row'
Expand Down
11 changes: 10 additions & 1 deletion packages/edit-site/src/components/global-styles/screen-block-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,17 @@ function BlockMenuItem( { block } ) {
return null;
}

const navigationButtonLabel = sprintf(
// translators: %s: is the name of a block e.g., 'Image' or 'Table'.
__( '%s block styles' ),
block.title
);

return (
<NavigationButtonAsItem path={ '/blocks/' + block.name }>
<NavigationButtonAsItem
path={ '/blocks/' + block.name }
aria-label={ navigationButtonLabel }
>
<HStack justify="flex-start">
<BlockIcon icon={ block.icon } />
<FlexItem>{ block.title }</FlexItem>
Expand Down
21 changes: 17 additions & 4 deletions packages/edit-site/src/components/global-styles/screen-colors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,15 @@ function BackgroundColorItem( { name, parentMenu } ) {
}

return (
<NavigationButtonAsItem path={ parentMenu + '/colors/background' }>
<NavigationButtonAsItem
path={ parentMenu + '/colors/background' }
aria-label={ __( 'Colors background styles' ) }
>
<HStack justify="flex-start">
<ColorIndicatorWrapper expanded={ false }>
<ColorIndicator
colorValue={ gradientValue ?? backgroundColor }
data-testid="background-color-indicator"
/>
</ColorIndicatorWrapper>
<FlexItem>{ __( 'Background' ) }</FlexItem>
Expand All @@ -56,10 +60,16 @@ function TextColorItem( { name, parentMenu } ) {
}

return (
<NavigationButtonAsItem path={ parentMenu + '/colors/text' }>
<NavigationButtonAsItem
path={ parentMenu + '/colors/text' }
aria-label={ __( 'Colors text styles' ) }
>
<HStack justify="flex-start">
<ColorIndicatorWrapper expanded={ false }>
<ColorIndicator colorValue={ color } />
<ColorIndicator
colorValue={ color }
data-testid="text-color-indicator"
/>
</ColorIndicatorWrapper>
<FlexItem>{ __( 'Text' ) }</FlexItem>
</HStack>
Expand All @@ -77,7 +87,10 @@ function LinkColorItem( { name, parentMenu } ) {
}

return (
<NavigationButtonAsItem path={ parentMenu + '/colors/link' }>
<NavigationButtonAsItem
path={ parentMenu + '/colors/link' }
aria-label={ __( 'Colors link styles' ) }
>
<HStack justify="flex-start">
<ColorIndicatorWrapper expanded={ false }>
<ColorIndicator colorValue={ color } />
Expand Down
10 changes: 8 additions & 2 deletions packages/edit-site/src/components/global-styles/screen-root.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,10 @@ function ScreenRoot() {
</Card>
{ !! variations?.length && (
<ItemGroup>
<NavigationButtonAsItem path="/variations">
<NavigationButtonAsItem
path="/variations"
aria-label={ __( 'Browse styles' ) }
>
<HStack justify="space-between">
<FlexItem>
{ __( 'Browse styles' ) }
Expand Down Expand Up @@ -82,7 +85,10 @@ function ScreenRoot() {
) }
</Spacer>
<ItemGroup>
<NavigationButtonAsItem path="/blocks">
<NavigationButtonAsItem
path="/blocks"
aria-label={ __( 'Blocks styles' ) }
>
<HStack justify="space-between">
<FlexItem>{ __( 'Blocks' ) }</FlexItem>
<IconWithCurrentColor
Expand Down
13 changes: 11 additions & 2 deletions packages/edit-site/src/components/global-styles/screen-typography.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { __, sprintf } from '@wordpress/i18n';
import {
__experimentalItemGroup as ItemGroup,
__experimentalVStack as VStack,
Expand Down Expand Up @@ -43,8 +43,17 @@ function Item( { name, parentMenu, element, label } ) {
return null;
}

const navigationButtonLabel = sprintf(
// translators: %s: is a subset of Typography, e.g., 'text' or 'links'.
__( 'Typography %s styles' ),
label
);

return (
<NavigationButtonAsItem path={ parentMenu + '/typography/' + element }>
<NavigationButtonAsItem
path={ parentMenu + '/typography/' + element }
aria-label={ navigationButtonLabel }
>
<HStack justify="flex-start">
<FlexItem
className="edit-site-global-styles-screen-typography__indicator"
Expand Down
Loading