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

Site editor template preview: add E2E test and aria-pressed attribute to template preview toggle #56096

Merged
merged 3 commits into from
Nov 14, 2023
Merged

Site editor template preview: add E2E test and aria-pressed attribute to template preview toggle #56096

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
81c91c8
This PR adds a follow up E2E test for https://github.com/WordPress/gu…
ramonjd Nov 14, 2023
78405e4
Refactor test to account for order of page content blocks
ramonjd Nov 14, 2023
1ff88a9
remove saving from tests. unnecessary to the test
ramonjd Nov 14, 2023
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
1 change: 1 addition & 0 deletions packages/edit-site/src/components/sidebar-edit-mode/page-panels/edit-template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@ export default function EditTemplate() {
icon={
! isTemplateHidden ? check : undefined
}
isPressed={ ! isTemplateHidden }
onClick={ () => {
setPageContentFocusType(
isTemplateHidden
Expand Down
6 changes: 6 additions & 0 deletions packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,11 @@
.components-popover__content {
min-width: 240px;
}
.components-button.is-pressed,
.components-button.is-pressed:hover {
background: inherit;
color: inherit;
}
}

.edit-site-page-panels-edit-slug__dropdown {
Expand All @@ -92,3 +97,4 @@
padding: $grid-unit-20;
}
}

124 changes: 124 additions & 0 deletions test/e2e/specs/site-editor/pages.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,129 @@ test.describe( 'Pages', () => {
)
).toBeVisible();
} );

test( 'toggle template preview', async ( { page, editor } ) => {
await draftNewPage( page );
await editor.openDocumentSettingsSidebar();

await editor.canvas
.getByRole( 'document', {
name: 'Block: Content',
} )
.getByRole( 'document', {
name: 'Empty block; start writing or type forward slash to choose a block',
} )
.click();

// Add some content to the page.
Copy link
Member Author

Choose a reason for hiding this comment

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

This is all pretty verbose and declarative. I don't see much point in abstracting since it's unique to the test.

await page.keyboard.type( 'Sweet paragraph 1' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'Sweet paragraph 2' );
await editor.saveSiteEditorEntities();
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we need to save the site editor entities in order to test this? While running locally, it looks like we might be able to save around half a second in runtime of the test if we skip saving the entities here.

Copy link
Member Author

Choose a reason for hiding this comment

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

Thanks for checking!

No, I guess we don't need to save. I think it stemmed from my data-loss anxiety. 😄

Copy link
Member Author

Choose a reason for hiding this comment

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

I'll remove and rerun 🚀


// Header template area and page content are visible.
await expect(
editor.canvas.getByRole( 'document', {
name: 'Block: header',
} )
).toBeVisible();

const paragraphs = editor.canvas
.getByRole( 'document', {
name: 'Block: Content',
} )
.getByText( 'Sweet paragraph ' );

await expect( paragraphs.nth( 0 ) ).toBeVisible();
await expect( paragraphs.nth( 1 ) ).toBeVisible();
await expect(
editor.canvas.getByRole( 'document', {
name: 'Block: Title',
} )
).toBeVisible();

// Toggle template preview to "off".
const templateOptionsButton = page
.getByRole( 'region', { name: 'Editor settings' } )
.getByRole( 'button', { name: 'Template options' } );
await templateOptionsButton.click();
const templatePreviewButton = page
.getByRole( 'menu', { name: 'Template options' } )
.getByRole( 'menuitem', { name: 'Template preview' } );

await expect( templatePreviewButton ).toHaveAttribute(
'aria-pressed',
'true'
);
await templatePreviewButton.click();
await expect( templatePreviewButton ).toHaveAttribute(
'aria-pressed',
'false'
);

// Header template area should be hidden.
await expect(
editor.canvas.getByRole( 'document', {
name: 'Block: header',
} )
).toBeHidden();

// Content block is still visible and wrapped in a container.
const paragraphsInGroup = editor.canvas
.getByRole( 'document', {
name: 'Block: Group',
} )
.getByRole( 'document', {
name: 'Block: Content',
} )
.getByText( 'Sweet paragraph ' );

await expect( paragraphsInGroup.nth( 0 ) ).toBeVisible();
await expect( paragraphsInGroup.nth( 1 ) ).toBeVisible();
// Check order of paragraphs.
// Important to ensure the blocks are rendered as they are in the template.
await expect( paragraphsInGroup.nth( 0 ) ).toHaveText(
'Sweet paragraph 1'
);
await expect( paragraphsInGroup.nth( 1 ) ).toHaveText(
'Sweet paragraph 2'
);
await expect(
editor.canvas
.getByRole( 'document', {
name: 'Block: Group',
} )
.getByRole( 'document', {
name: 'Block: Title',
} )
).toBeVisible();

// Remove focus from templateOptionsButton button.
await editor.canvas.locator( 'body' ).click();

// Toggle template preview to "on".
await templateOptionsButton.click();
await templatePreviewButton.click();
await expect( templatePreviewButton ).toHaveAttribute(
'aria-pressed',
'true'
);

// Header template area and page content are once again visible.
await expect(
editor.canvas.getByRole( 'document', {
name: 'Block: header',
} )
).toBeVisible();
await expect( paragraphs.nth( 0 ) ).toBeVisible();
await expect( paragraphs.nth( 1 ) ).toBeVisible();
await expect(
editor.canvas.getByRole( 'document', {
name: 'Block: Title',
} )
).toBeVisible();
} );

test( 'swap template and reset to default', async ( {
admin,
page,
Expand Down Expand Up @@ -195,6 +318,7 @@ test.describe( 'Pages', () => {
await resetButton.click();
await expect( templateOptionsButton ).toHaveText( 'Single Entries' );
} );

test( 'swap template options should respect the declared `postTypes`', async ( {
page,
editor,
Expand Down
Loading