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

Migrate 'datepicker' e2e tests to Playwright #57545

Merged
merged 2 commits into from
Jan 5, 2024
Merged

Migrate 'datepicker' e2e tests to Playwright #57545

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
250d285
Migrate 'datepicker' e2e tests to Playwright
Mamaduka Jan 4, 2024
59e8fcc
Remove old test file
Mamaduka Jan 4, 2024
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
148 changes: 0 additions & 148 deletions packages/e2e-tests/specs/editor/various/datepicker.test.js
View file
Open in desktop

This file was deleted.

114 changes: 114 additions & 0 deletions test/e2e/specs/editor/various/datepicker.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
/**
* WordPress dependencies
*/
const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );

// Set browser to a timezone that's different to `timezone`.
test.use( {
timezoneId: 'America/New_York',
} );

// The `timezone` setting exposed via REST API only accepts `UTC`
// and timezone strings by location.
const TIMEZONES = [ 'Pacific/Honolulu', 'UTC', 'Australia/Sydney' ];

TIMEZONES.forEach( ( timezone ) => {
test.describe( `Datepicker: ${ timezone }`, () => {
let orignalTimezone;
test.beforeAll( async ( { requestUtils } ) => {
orignalTimezone = ( await requestUtils.getSiteSettings() ).timezone;
await requestUtils.updateSiteSettings( { timezone } );
} );

test.beforeEach( async ( { admin, editor } ) => {
await admin.createNewPost();
await editor.openDocumentSettingsSidebar();
} );

test.afterAll( async ( { requestUtils } ) => {
await requestUtils.updateSiteSettings( {
timezone: orignalTimezone,
} );
} );

test( 'should show the publishing date as "Immediately" if the date is not altered', async ( {
page,
} ) => {
await expect(
page.getByRole( 'button', { name: 'Change date' } )
).toHaveText( 'Immediately' );
} );

test( 'should show the publishing date if the date is in the past', async ( {
page,
} ) => {
const datepicker = page.getByRole( 'button', {
name: 'Change date',
} );
await datepicker.click();

// Change the publishing date to a year in the future.
await page
.getByRole( 'group', { name: 'Date' } )
.getByRole( 'spinbutton', { name: 'Year' } )
.click();
await page.keyboard.press( 'ArrowDown' );
await page.keyboard.press( 'Escape' );

// The expected date format will be "Sep 26, 2018 11:52 pm".
await expect(
page.getByRole( 'button', { name: 'Change date' } )
).toContainText( /^[A-Za-z]+\s\d{1,2},\s\d{1,4}/ );
Comment on lines +59 to +61
Copy link
Member Author

Choose a reason for hiding this comment

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

@kevin940726, @WunderBart, what do you think about this assertion? Would it suffice? 😅

Copy link
Member

Choose a reason for hiding this comment

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

I think it might be easier to just parse the date 😆. Something like...

const dateString = await page.getByRole( 'button', { name: 'Change date' } ).textContent();
const date = new Date( dateString );
expect( date ).toEqual( datePickerDate );

We can keep the regex to test the format once if we want to.

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 the example; I'll try it out later.

P.S. My understanding of this test is that they just assert that the date label switches from Immediately to an actual date. In my opinion, it shouldn't really matter if the date string matches.

Copy link
Member Author

Choose a reason for hiding this comment

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

Tried the suggested path, but Date fails to parse the string returned by a locator.

Copy link
Member

Choose a reason for hiding this comment

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

Judged from the test case, I think it's also asserting that the date in the datepicker is the same as the one shown on the button. Not sure if it matters though!

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 believe unit tests cover exact date assertions for the date-time components. Doing something similar usually ends up in ugly e2e test code 😅

Should we land the current migration version or try to make date assertions happen?

Copy link
Member

Choose a reason for hiding this comment

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

If it's already covered by unit tests then absolutely! TBH, I think all of these cases can be tested in unit/integration tests 😆. I was just being conservative 😅.

} );

test( 'should show the publishing date if the date is in the future', async ( {
page,
} ) => {
const datepicker = page.getByRole( 'button', {
name: 'Change date',
} );
await datepicker.click();

// Change the publishing date to a year in the future.
await page
.getByRole( 'group', { name: 'Date' } )
.getByRole( 'spinbutton', { name: 'Year' } )
.click();
await page.keyboard.press( 'ArrowUp' );
await page.keyboard.press( 'Escape' );

// The expected date format will be "Sep 26, 2018 11:52 pm".
await expect(
page.getByRole( 'button', { name: 'Change date' } )
).toContainText( /^[A-Za-z]+\s\d{1,2},\s\d{1,4}/ );
} );

test( 'should show the publishing date as "Immediately" if the date is cleared', async ( {
page,
} ) => {
const datepicker = page.getByRole( 'button', {
name: 'Change date',
} );
await datepicker.click();

// Change the publishing date to a year in the future.
await page
.getByRole( 'group', { name: 'Date' } )
.getByRole( 'spinbutton', { name: 'Year' } )
.click();
await page.keyboard.press( 'ArrowUp' );
await page.keyboard.press( 'Escape' );

// Clear the date.
await datepicker.click();
await page
.getByLabel( 'Change publish date' )
.getByRole( 'button', { name: 'Now' } )
.click();

await expect(
page.getByRole( 'button', { name: 'Change date' } )
).toHaveText( 'Immediately' );
} );
} );
} );
Loading