Dataviews: Add first e2e tests #56634
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ntsekouras
added
[Type] Automated Testing
ntsekouras
requested review from
mcsf,
youknowriad,
oandregal and
jorgefilipecosta
ntsekouras
requested review from
kevin940726,
Mamaduka,
ntwb,
nerrad and
ajitbohra
as code owners
youknowriad
reviewed
Nov 29, 2023
youknowriad
approved these changes
Nov 29, 2023
|
Size Change: 0 B Total Size: 1.7 MB ℹ️ View Unchanged
|
|
Flaky tests detected in d469a97. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7030758518
|
kevin940726
reviewed
Nov 29, 2023
| const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); | ||
|
|
||
| async function getRows( page ) { | ||
| return page.locator( 'table.dataviews-list-view tbody tr' ); |
There was a problem hiding this comment.
Prefer getByRole so that we can also make sure the rows are accessible.
This is also just a single line that can be inlined rather than making yet a helper (the function should be sync too).
There was a problem hiding this comment.
How do you get the trs by role?
There was a problem hiding this comment.
Considering we just want to grab the template titles for assertions. We can use something like - page.getByRole( 'region', { name: 'Template' } ).getByRole( 'heading', { level: 3 } ).
Then you can make assertions with toHaveText or toContainText.
P.S. The table has no accessible label at the moment.
ntsekouras
force-pushed
the
dataviews/add-e2e-tests
branch
from
d469a97 to
16702b1
Compare
kevin940726
approved these changes
Nov 29, 2023
| const firstTitle = page | ||
| .getByRole( 'region', { | ||
| name: 'Template', | ||
| includeHidden: true, |
There was a problem hiding this comment.
Any reason why we need includeHidden?
There was a problem hiding this comment.
The table's first row is hidden from view when we have the dropdown menu open.
| name: 'Template', | ||
| includeHidden: true, | ||
| } ) | ||
| .getByRole( 'heading', { |
There was a problem hiding this comment.
I think it's also beneficial to include row to indicate that we're selecting the title of the first row of the table. This could be rewritten into something like:
const firstRowTitle = page.getByRole( 'region', { name: 'Templates' } )
.getByRole( 'table' )
.getByRole( 'row' )
.first()
.getByRole( 'heading', { level: 3 } );| test( 'Sorting', async ( { admin, page } ) => { | ||
| await admin.visitSiteEditor( { path: '/wp_template/all' } ); | ||
| // Descending by title. | ||
| await page.getByRole( 'button', { name: 'Template' } ).click(); |
There was a problem hiding this comment.
It's a bit unclear to me at first glance that we're clicking on the column header. Perhaps this is clearer?
const table = page.getByRole( 'region', { name: 'Templates' } )
.getByRole( 'table' );
await table
.getByRole( 'columnheader', { name: 'Template' } )
.getByRole( 'button', { name: 'Template' } )
.click();| await admin.visitSiteEditor( { path: '/wp_template/all' } ); | ||
| // Descending by title. | ||
| await page.getByRole( 'button', { name: 'Template' } ).click(); | ||
| await page.getByRole( 'menuitem', { name: 'Sort descending' } ).click(); |
There was a problem hiding this comment.
This is just nitpicking but we can also scope it under a menu to make this slightly clearer that we're clicking inside a dropdown:
await page
.getByRole( 'menu', { name: 'Template' } )
.getByRole( 'menuitem', { name: 'Sort descending' } )
.click();| .click(); | ||
| await expect( titles ).toHaveCount( 2 ); | ||
|
|
||
| await requestUtils.deleteAllTemplates( 'wp_template' ); |
There was a problem hiding this comment.
We can put the cleaning up code inside afterEach and afterAll so that when the test fails it still runs.
There was a problem hiding this comment.
This has proven good advice sooner than expected. Thanks, Kai!
derekblank
pushed a commit
that referenced
this pull request
Dec 7, 2023
* Dataviews: Add first e2e tests * refactor tests and add `createTemplate` util
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Part of: #55083
This PR adds some initial e2e tests for DataViews