From 250d285299472e320f807aa6cd9c14b6c5c4230c Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 4 Jan 2024 16:11:09 +0400 Subject: [PATCH 1/2] Migrate 'datepicker' e2e tests to Playwright --- .../specs/editor/various/datepicker.spec.js | 114 ++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 test/e2e/specs/editor/various/datepicker.spec.js diff --git a/test/e2e/specs/editor/various/datepicker.spec.js b/test/e2e/specs/editor/various/datepicker.spec.js new file mode 100644 index 00000000000000..00030efa1fe274 --- /dev/null +++ b/test/e2e/specs/editor/various/datepicker.spec.js @@ -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}/ ); + } ); + + 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' ); + } ); + } ); +} ); From 59e8fcc21d909ee32a37d5a21736e4589114f09f Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 4 Jan 2024 17:17:44 +0400 Subject: [PATCH 2/2] Remove old test file --- .../specs/editor/various/datepicker.test.js | 148 ------------------ 1 file changed, 148 deletions(-) delete mode 100644 packages/e2e-tests/specs/editor/various/datepicker.test.js diff --git a/packages/e2e-tests/specs/editor/various/datepicker.test.js b/packages/e2e-tests/specs/editor/various/datepicker.test.js deleted file mode 100644 index 6838fd56a2ba9a..00000000000000 --- a/packages/e2e-tests/specs/editor/various/datepicker.test.js +++ /dev/null @@ -1,148 +0,0 @@ -/** - * WordPress dependencies - */ -import { createNewPost, changeSiteTimezone } from '@wordpress/e2e-test-utils'; - -async function getInputValue( selector ) { - return page.$eval( selector, ( element ) => element.value ); -} - -async function getSelectedOptionLabel( selector ) { - return page.$eval( - selector, - ( element ) => element.options[ element.selectedIndex ].text - ); -} - -async function getDatePickerValues() { - const year = await getInputValue( - '.components-datetime__time-field-year input' - ); - const month = await getInputValue( - '.components-datetime__time-field-month select' - ); - const monthLabel = await getSelectedOptionLabel( - '.components-datetime__time-field-month select' - ); - const day = await getInputValue( - '.components-datetime__time-field-day input' - ); - const hours = await getInputValue( - '.components-datetime__time-field-hours-input input' - ); - const minutes = await getInputValue( - '.components-datetime__time-field-minutes-input input' - ); - const amOrPm = await page.$eval( - '.components-datetime__time-field-am-pm .is-primary', - ( element ) => element.innerText.toLowerCase() - ); - - return { year, month, monthLabel, day, hours, minutes, amOrPm }; -} - -function trimLeadingZero( str ) { - return str[ 0 ] === '0' ? str.slice( 1 ) : str; -} - -function formatDatePickerValues( - { year, monthLabel, day, hours, minutes, amOrPm }, - timezone -) { - const dayTrimmed = trimLeadingZero( day ); - const hoursTrimmed = trimLeadingZero( hours ); - return `${ monthLabel } ${ dayTrimmed }, ${ year } ${ hoursTrimmed }:${ minutes }\xa0${ amOrPm } ${ timezone }`; -} - -async function getPublishingDate() { - return page.$eval( - '.editor-post-schedule__dialog-toggle', - ( dateLabel ) => dateLabel.textContent - ); -} - -describe.each( [ [ 'UTC-10' ], [ 'UTC' ], [ 'UTC+10' ] ] )( - `Datepicker %s`, - ( timezone ) => { - let oldTimezone; - beforeEach( async () => { - await page.emulateTimezone( 'America/New_York' ); // Set browser to a timezone that's different to `timezone`. - oldTimezone = await changeSiteTimezone( timezone ); - await createNewPost(); - } ); - afterEach( async () => { - await changeSiteTimezone( oldTimezone ); - await page.emulateTimezone( null ); - } ); - - it( 'should show the publishing date as "Immediately" if the date is not altered', async () => { - const publishingDate = await getPublishingDate(); - - expect( publishingDate ).toEqual( 'Immediately' ); - } ); - - it( 'should show the publishing date if the date is in the past', async () => { - // Open the datepicker. - await page.click( '.editor-post-schedule__dialog-toggle' ); - - // Change the publishing date to a year in the past. - await page.click( '.components-datetime__time-field-year' ); - await page.keyboard.press( 'ArrowDown' ); - const datePickerValues = await getDatePickerValues(); - - // Close the datepicker. - await page.click( '.editor-post-schedule__dialog-toggle' ); - - const publishingDate = await getPublishingDate(); - - expect( publishingDate ).toBe( - formatDatePickerValues( datePickerValues, timezone ) - ); - } ); - - it( 'should show the publishing date if the date is in the future', async () => { - // Open the datepicker. - await page.click( '.editor-post-schedule__dialog-toggle' ); - - // Change the publishing date to a year in the future. - await page.click( '.components-datetime__time-field-year' ); - await page.keyboard.press( 'ArrowUp' ); - const datePickerValues = await getDatePickerValues(); - - // Close the datepicker. - await page.click( '.editor-post-schedule__dialog-toggle' ); - - const publishingDate = await getPublishingDate(); - - expect( publishingDate ).not.toEqual( 'Immediately' ); - // The expected date format will be "Sep 26, 2018 11:52 pm". - expect( publishingDate ).toBe( - formatDatePickerValues( datePickerValues, timezone ) - ); - } ); - - it( `should show the publishing date as "Immediately" if the date is cleared`, async () => { - // Open the datepicker. - await page.click( '.editor-post-schedule__dialog-toggle' ); - - // Change the publishing date to a year in the future. - await page.click( '.components-datetime__time-field-year' ); - await page.keyboard.press( 'ArrowUp' ); - - // Close the datepicker. - await page.click( '.editor-post-schedule__dialog-toggle' ); - - // Open the datepicker. - await page.click( '.editor-post-schedule__dialog-toggle' ); - - // Clear the date. - await page.click( - '.block-editor-publish-date-time-picker button[aria-label="Now"]' - ); - - const publishingDate = await getPublishingDate(); - - expect( publishingDate ).toEqual( 'Immediately' ); - } ); - } -);