diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts index 9c59c03b01..e884249a74 100644 --- a/core/src/components/datetime/test/basic/datetime.e2e.ts +++ b/core/src/components/datetime/test/basic/datetime.e2e.ts @@ -28,6 +28,21 @@ test.describe('datetime: selecting a day', () => { test('should not highlight a day until one is selected, with default-buttons', async ({ page }) => { await testHighlight(page, 'custom-datetime'); }); + test('should update the active day', async ({ page }) => { + await page.setContent(` + + `); + + const activeDay = page.locator('ion-datetime .calendar-day-active'); + + expect(activeDay).toHaveText('25'); + + const dayBtn = page.locator('ion-datetime .calendar-day[data-day="13"][data-month="12"]'); + await dayBtn.click(); + await page.waitForChanges(); + + expect(activeDay).toHaveText('13'); + }); }); test.describe('datetime: confirm date', () => { @@ -45,4 +60,97 @@ test.describe('datetime: confirm date', () => { const valueAgain = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value); expect(valueAgain).toBeUndefined(); }); + test('should set the date value based on the selected date', async ({ page }) => { + await page.setContent(` + + + + `); + + const datetimeMonthDidChange = await page.spyOnEvent('datetimeMonthDidChange'); + const eventButton = page.locator('button#bind'); + await eventButton.click(); + + const buttons = page.locator('ion-datetime .calendar-next-prev ion-button'); + await buttons.nth(1).click(); + + await datetimeMonthDidChange.next(); + + const datetime = page.locator('ion-datetime'); + await datetime.evaluate((el: HTMLIonDatetimeElement) => el.confirm()); + + // Value may include timezone information so we need to check + // that the value at least includes the correct date/time info. + const value = (await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value))!; + expect(value.includes('2021-12-25T12:40:00')).toBe(true); + }); +}); + +test.describe('datetime: footer', () => { + test('should render default buttons', async ({ page }) => { + await page.setContent(''); + + const cancelButton = page.locator('ion-datetime #cancel-button'); + expect(cancelButton).toHaveText('Cancel'); + + const confirmButton = page.locator('ion-datetime #confirm-button'); + expect(confirmButton).toHaveText('Done'); + + const datetime = page.locator('ion-datetime'); + expect(await datetime.screenshot()).toMatchSnapshot( + `datetime-footer-default-buttons-${page.getSnapshotSettings()}.png` + ); + }); + test('should render clear button', async ({ page }) => { + await page.setContent(''); + + const clearButton = page.locator('ion-datetime #clear-button'); + expect(clearButton).toHaveText('Clear'); + + const datetime = page.locator('ion-datetime'); + expect(await datetime.screenshot()).toMatchSnapshot( + `datetime-footer-clear-button-${page.getSnapshotSettings()}.png` + ); + }); + test('should render default and clear buttons', async ({ page }) => { + await page.setContent( + '' + ); + + const cancelButton = page.locator('ion-datetime #cancel-button'); + expect(cancelButton).toHaveText('Cancel'); + + const confirmButton = page.locator('ion-datetime #confirm-button'); + expect(confirmButton).toHaveText('Done'); + + const clearButton = page.locator('ion-datetime #clear-button'); + expect(clearButton).toHaveText('Clear'); + + const datetime = page.locator('ion-datetime'); + expect(await datetime.screenshot()).toMatchSnapshot( + `datetime-footer-default-clear-buttons-${page.getSnapshotSettings()}.png` + ); + }); + test('should render custom buttons', async ({ page }) => { + await page.setContent(` + + + Hello! + + + `); + + const customButton = page.locator('ion-datetime #custom-button'); + expect(customButton).toBeVisible(); + + const datetime = page.locator('ion-datetime'); + expect(await datetime.screenshot()).toMatchSnapshot( + `datetime-footer-custom-buttons-${page.getSnapshotSettings()}.png` + ); + }); }); diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..1dc2a99e9a Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..171468bd32 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..35b03bcbdc Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..1dc2a99e9a Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..171468bd32 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..35b03bcbdc Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..1dc2a99e9a Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..171468bd32 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..35b03bcbdc Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..1dc2a99e9a Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..171468bd32 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..35b03bcbdc Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6843d4af18 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..a7e61861be Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..53ba743127 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6843d4af18 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..a7e61861be Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..53ba743127 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6843d4af18 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..a7e61861be Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..53ba743127 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6843d4af18 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..a7e61861be Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..53ba743127 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..c5708a77c8 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..de0f49c2b3 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..afd7900f26 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..c5708a77c8 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..de0f49c2b3 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..afd7900f26 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..c5708a77c8 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..de0f49c2b3 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..afd7900f26 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..c5708a77c8 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..de0f49c2b3 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..afd7900f26 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..64cac5b5c1 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..f2df6ab9b2 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..96ade38dfd Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..64cac5b5c1 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..f2df6ab9b2 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..96ade38dfd Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..64cac5b5c1 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..f2df6ab9b2 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..96ade38dfd Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..64cac5b5c1 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..f2df6ab9b2 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..96ade38dfd Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/e2e.ts b/core/src/components/datetime/test/basic/e2e.ts deleted file mode 100644 index 81296840fd..0000000000 --- a/core/src/components/datetime/test/basic/e2e.ts +++ /dev/null @@ -1,144 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -describe('Footer', () => { - test('should render default buttons', async () => { - const page = await newE2EPage({ - html: '', - }); - - const cancelButton = await page.find('ion-datetime >>> #cancel-button'); - expect(cancelButton).toEqualText('Cancel'); - - const confirmButton = await page.find('ion-datetime >>> #confirm-button'); - expect(confirmButton).toEqualText('Done'); - - expect(await page.compareScreenshot()).toMatchScreenshot(); - }); - - test('should render clear button', async () => { - const page = await newE2EPage({ - html: '', - }); - - const clearButton = await page.find('ion-datetime >>> #clear-button'); - expect(clearButton).toEqualText('Clear'); - - expect(await page.compareScreenshot()).toMatchScreenshot(); - }); - - test('should render clear and default buttons', async () => { - const page = await newE2EPage({ - html: '', - }); - - const cancelButton = await page.find('ion-datetime >>> #cancel-button'); - expect(cancelButton).toEqualText('Cancel'); - - const confirmButton = await page.find('ion-datetime >>> #confirm-button'); - expect(confirmButton).toEqualText('Done'); - - const clearButton = await page.find('ion-datetime >>> #clear-button'); - expect(clearButton).toEqualText('Clear'); - - expect(await page.compareScreenshot()).toMatchScreenshot(); - }); - - test('should render custom buttons', async () => { - const page = await newE2EPage({ - html: ` - - - Hello! - - - `, - }); - - const customButton = await page.find('ion-datetime #custom-button'); - expect(customButton).not.toBeNull(); - - expect(await page.compareScreenshot()).toMatchScreenshot(); - }); - - test('should render custom buttons', async () => { - const page = await newE2EPage({ - html: ` - - - Hello! - - - `, - }); - - const customButton = await page.find('ion-datetime #custom-button'); - expect(customButton).not.toBeNull(); - - expect(await page.compareScreenshot()).toMatchScreenshot(); - }); -}); - -describe('datetime: selecting a day', () => { - it('should update the active day', async () => { - const page = await newE2EPage({ - html: ` - - `, - }); - - const activeDay = await page.find('ion-datetime >>> .calendar-day-active'); - - expect(activeDay.innerText).toEqual('25'); - - const dayBtn = await page.find('ion-datetime >>> .calendar-day[data-day="13"][data-month="12"]'); - dayBtn.click(); - await page.waitForChanges(); - - const newActiveDay = await page.find('ion-datetime >>> .calendar-day-active'); - - expect(newActiveDay.innerText).toEqual('13'); - }); -}); - -test('datetime:rtl: basic', async () => { - const page = await newE2EPage({ - url: '/src/components/datetime/test/basic?ionic:_testing=true&rtl=true', - }); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); - -describe('datetime: confirm date', () => { - test('should set the date value based on the selected date', async () => { - const page = await newE2EPage({ - html: ` - - - - `, - }); - - const eventButton = await page.find('button'); - await eventButton.click(); - - const buttons = await page.findAll('ion-datetime >>> .calendar-next-prev ion-button'); - - await buttons[1].click(); - - await page.waitForEvent('datetimeMonthDidChange'); - - await page.$eval('ion-datetime', async (el: any) => { - await el.confirm(); - }); - - const value = await (await page.find('ion-datetime')).getProperty('value'); - - expect(value).toMatch('2021-12-25T12:40:00'); - }); -}); diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts b/core/src/components/datetime/test/color/datetime.e2e.ts new file mode 100644 index 0000000000..35543ece3e --- /dev/null +++ b/core/src/components/datetime/test/color/datetime.e2e.ts @@ -0,0 +1,43 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('datetime: color', () => { + test('should not have visual regressions', async ({ page }) => { + await page.goto('/src/components/datetime/test/color'); + + const colorSelect = page.locator('ion-select'); + const darkModeToggle = page.locator('ion-checkbox'); + const datetime = page.locator('ion-datetime'); + + await darkModeToggle.evaluate((el: HTMLIonCheckboxElement) => (el.checked = true)); + await page.waitForChanges(); + + expect(await datetime.first().screenshot()).toMatchSnapshot( + `datetime-color-default-dark-${page.getSnapshotSettings()}.png` + ); + expect(await datetime.last().screenshot()).toMatchSnapshot( + `datetime-color-custom-dark-${page.getSnapshotSettings()}.png` + ); + + await darkModeToggle.evaluate((el: HTMLIonCheckboxElement) => (el.checked = false)); + await colorSelect.evaluate((el: HTMLIonSelectElement) => (el.value = 'danger')); + await page.waitForChanges(); + + expect(await datetime.first().screenshot()).toMatchSnapshot( + `datetime-color-default-light-color-${page.getSnapshotSettings()}.png` + ); + expect(await datetime.last().screenshot()).toMatchSnapshot( + `datetime-color-custom-light-color-${page.getSnapshotSettings()}.png` + ); + + await darkModeToggle.evaluate((el: HTMLIonCheckboxElement) => (el.checked = true)); + await page.waitForChanges(); + + expect(await datetime.first().screenshot()).toMatchSnapshot( + `datetime-color-default-dark-color-${page.getSnapshotSettings()}.png` + ); + expect(await datetime.last().screenshot()).toMatchSnapshot( + `datetime-color-custom-dark-color-${page.getSnapshotSettings()}.png` + ); + }); +}); diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..973e23122f Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..0aa4e19429 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..7905c9174b Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..d5c3589e29 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..a53106d1c0 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..efecb4bc19 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..36d0520cd2 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..b870e81958 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..3e5443fd2a Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..13b1f2179b Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..0df4805561 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..8120b2a794 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..00b10680e9 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..7a422d0933 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..7707ddaf29 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..02a5519fd0 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..9bb040df4a Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..2a1a0dbbed Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..d5af80b235 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..d5830aad7d Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..015fca10c7 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..4e1edee279 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..d41519fad2 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..479e7dbf5d Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..15a8423032 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..020e556039 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..104b262823 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..b6db85d00a Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..31101993a2 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..5de5178490 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..707425ca93 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..19774d14aa Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..0e74392bf0 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..885a70d4f3 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..04e1756ffa Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..7ed9b07b51 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..4bef5f819d Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..e11beabd26 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..7e9611d8de Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..c32814c0fc Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..6d25f1c08d Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..3959256183 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..258b27f571 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..5469b3fff7 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a73d6b1278 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..9689dc9c94 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..fa2a851ac6 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..5c73a6560b Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3983b9d9cb Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..b66a8381a8 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..fa50f959f4 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6c31e60e7d Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..2c515f7bc4 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a93744e559 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..c6449aef32 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..1b0402f64e Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..706243bfe7 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..d5a205614e Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..c6637a7b35 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..7a1fb29918 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..cfae370b77 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..300e83db27 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..d9ecb5245b Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..990b069fa9 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..e786ed10b3 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..10c5f04ebd Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..ffde4f4525 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..9579e3c45e Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..2619038cc9 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..8633242bcd Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..78ee691daf Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..049684a485 Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/color/e2e.ts b/core/src/components/datetime/test/color/e2e.ts deleted file mode 100644 index 143e33f4ec..0000000000 --- a/core/src/components/datetime/test/color/e2e.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('color', async () => { - const page = await newE2EPage({ - url: '/src/components/datetime/test/color?ionic:_testing=true', - }); - - const screenshotCompares = []; - - screenshotCompares.push(await page.compareScreenshot()); - - const colorSelect = await page.find('ion-select'); - const darkModeToggle = await page.find('ion-checkbox'); - - darkModeToggle.setProperty('checked', true); - await page.waitForChanges(); - screenshotCompares.push(await page.compareScreenshot()); - - darkModeToggle.setProperty('checked', false); - colorSelect.setProperty('value', 'danger'); - await page.waitForChanges(); - - screenshotCompares.push(await page.compareScreenshot()); - - darkModeToggle.setProperty('checked', true); - await page.waitForChanges(); - - screenshotCompares.push(await page.compareScreenshot()); - - for (const screenshotCompare of screenshotCompares) { - expect(screenshotCompare).toMatchScreenshot(); - } -}); diff --git a/core/src/components/datetime/test/color/index.html b/core/src/components/datetime/test/color/index.html index 8b18e3067e..bb17ceb585 100644 --- a/core/src/components/datetime/test/color/index.html +++ b/core/src/components/datetime/test/color/index.html @@ -214,12 +214,12 @@

Default

- +

Custom

- + Reset Confirm diff --git a/core/src/components/datetime/test/disable-dates/datetime.e2e.ts b/core/src/components/datetime/test/disable-dates/datetime.e2e.ts new file mode 100644 index 0000000000..a280597fc5 --- /dev/null +++ b/core/src/components/datetime/test/disable-dates/datetime.e2e.ts @@ -0,0 +1,178 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; +import type { E2EPage } from '@utils/test/playwright'; + +const DISABLED_CALENDAR_DAY_SELECTOR = '.calendar-day[disabled]:not(.calendar-day-padding)'; + +const queryAllDisabledDays = (page: E2EPage, datetimeSelector = 'ion-datetime') => { + return page.locator(`${datetimeSelector} ${DISABLED_CALENDAR_DAY_SELECTOR}`); +}; + +const queryAllWorkingMonthDisabledDays = (page: E2EPage, datetimeSelector = 'ion-datetime') => { + return page.locator(`${datetimeSelector} .calendar-month:nth-child(2) ${DISABLED_CALENDAR_DAY_SELECTOR}`); +}; + +test.describe('datetime: disable dates', () => { + /** + * We need to access testInfo, but Playwright + * requires that we destructure the first parameter. + */ + // eslint-disable-next-line no-empty-pattern + test.beforeEach(({}, testInfo) => { + test.skip(testInfo.project.metadata.rtl === true, 'These tests do not check layout rendering functionality.'); + }); + test.describe('check return values', () => { + test.beforeEach(async ({ page }) => { + await page.setContent(''); + }); + + test.describe('when isDateEnabled returns true', () => { + test('calendar days should be enabled', async ({ page }) => { + const datetime = page.locator('ion-datetime'); + await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.isDateEnabled = () => true)); + await page.waitForChanges(); + + const disabledDays = queryAllDisabledDays(page); + expect(await disabledDays.count()).toBe(0); + }); + }); + test.describe('when isDateEnabled returns false', () => { + test('calendar days should be disabled', async ({ page }) => { + const datetime = page.locator('ion-datetime'); + await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.isDateEnabled = () => false)); + await page.waitForChanges(); + + const disabledDays = queryAllDisabledDays(page); + expect(await disabledDays.count()).toBe(91); + }); + }); + test.describe('when isDateEnabled returns undefined', () => { + test('calendar days should be disabled', async ({ page }) => { + const datetime = page.locator('ion-datetime'); + await datetime.evaluate((el: HTMLIonDatetimeElement) => { + /** + * isDateEnabled expects a boolean, but we need + * to check what happens when users pass in unexpected + * values which is why we do the ts-ignore. + */ + // @ts-ignore + el.isDateEnabled = () => { + undefined; + }; + }); + + await page.waitForChanges(); + + const disabledDays = queryAllDisabledDays(page); + expect(await disabledDays.count()).toBe(91); + }); + }); + test.describe('when isDateEnabled returns null', () => { + test('calendar days should be disabled', async ({ page }) => { + const datetime = page.locator('ion-datetime'); + await datetime.evaluate((el: HTMLIonDatetimeElement) => { + /** + * isDateEnabled expects a boolean, but we need + * to check what happens when users pass in unexpected + * values which is why we do the ts-ignore. + */ + // @ts-ignore + el.isDateEnabled = () => null; + }); + + await page.waitForChanges(); + + const disabledDays = queryAllDisabledDays(page); + expect(await disabledDays.count()).toBe(91); + }); + }); + test.describe('when isDateEnabled throws an exception', () => { + test.beforeEach(async ({ page }) => { + const datetime = page.locator('ion-datetime'); + await datetime.evaluate((el: HTMLIonDatetimeElement) => { + el.isDateEnabled = (dateIsoString: string) => { + const date = new Date(dateIsoString); + + if (date.getUTCDate() === 10 && date.getUTCMonth() === 9 && date.getUTCFullYear() === 2021) { + // Throws an exception on October 10, 2021 + // Expected behavior: the day should be enabled + throw new Error('Expected exception for e2e test.'); + } + return false; + }; + }); + }); + test('calendar days should be enabled', async ({ page }) => { + await page.waitForChanges(); + + const enabledDays = page.locator( + 'ion-datetime .calendar-month:nth-child(2) .calendar-day:not([disabled]):not(.calendar-day-padding)' + ); + + expect(await enabledDays.count()).toBe(1); + }); + }); + }); + test.describe('check example usages', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/datetime/test/disable-dates'); + await page.waitForSelector('.datetime-ready'); + }); + + test('should disable a specific date', async ({ page }) => { + const disabledDay = queryAllDisabledDays(page, '#specificDate'); + + expect(disabledDay).toHaveText('10'); + }); + + test('should disable specific days of the week', async ({ page }) => { + const disabledDays = queryAllWorkingMonthDisabledDays(page, '#weekends'); + + expect(await disabledDays.count()).toEqual(10); + expect(disabledDays).toHaveText(['2', '3', '9', '10', '16', '17', '23', '24', '30', '31']); + }); + + test('should disable a range of dates', async ({ page }) => { + const disabledDays = queryAllDisabledDays(page, '#dateRange'); + + expect(await disabledDays.count()).toEqual(11); + expect(disabledDays).toHaveText(['10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20']); + }); + + test('should disable a month', async ({ page }) => { + const disabledDays = queryAllDisabledDays(page, '#month'); + + expect(await disabledDays.count()).toBe(31); + }); + }); + test.describe('with a min date range', () => { + test('should not enable already disabled dates', async ({ page }) => { + await page.setContent(` + + + `); + + const disabledDays = queryAllWorkingMonthDisabledDays(page); + + expect(await disabledDays.count()).toBe(14); + }); + }); + test.describe('with a max date range', () => { + test('should not enable already disabled dates', async ({ page }) => { + await page.setContent(` + + + `); + + const disabledDays = queryAllWorkingMonthDisabledDays(page); + + expect(await disabledDays.count()).toBe(16); + }); + }); +}); diff --git a/core/src/components/datetime/test/disable-dates/e2e.ts b/core/src/components/datetime/test/disable-dates/e2e.ts deleted file mode 100644 index 4146e8ea20..0000000000 --- a/core/src/components/datetime/test/disable-dates/e2e.ts +++ /dev/null @@ -1,201 +0,0 @@ -import type { E2EPage } from '@stencil/core/testing'; -import { newE2EPage } from '@stencil/core/testing'; - -const DISABLED_CALENDAR_DAY_SELECTOR = '.calendar-day[disabled]:not(.calendar-day-padding)'; - -function queryDisabledDay(page: E2EPage, datetimeSelector = 'ion-datetime') { - return page.find(`${datetimeSelector} >>> ${DISABLED_CALENDAR_DAY_SELECTOR}`); -} - -function queryAllDisabledDays(page: E2EPage, datetimeSelector = 'ion-datetime') { - return page.findAll(`${datetimeSelector} >>> ${DISABLED_CALENDAR_DAY_SELECTOR}`); -} - -function queryAllWorkingMonthDisabledDays(page: E2EPage, datetimeSelector = 'ion-datetime') { - return page.findAll(`${datetimeSelector} >>> .calendar-month:nth-child(2) ${DISABLED_CALENDAR_DAY_SELECTOR}`); -} - -describe('datetime: disable dates', () => { - describe('return values', () => { - let page: E2EPage; - - beforeEach(async () => { - page = await newE2EPage({ - html: '', - }); - }); - - describe('when isDateEnabled returns true', () => { - it('calendar days should be enabled', async () => { - await page.$eval('ion-datetime', (el: any) => { - el.isDateEnabled = () => true; - }); - - await page.waitForChanges(); - - const disabledDays = await queryAllDisabledDays(page); - - expect(disabledDays.length).toBe(0); - }); - }); - - describe('when isDateEnabled returns false', () => { - it('calendar days should be disabled', async () => { - await page.$eval('ion-datetime', (el: any) => { - el.isDateEnabled = () => false; - }); - - await page.waitForChanges(); - - const disabledDays = await queryAllDisabledDays(page); - - expect(disabledDays.length).toBe(91); - }); - }); - - describe('when isDateEnabled throws an exception', () => { - beforeEach(async () => { - await page.$eval('ion-datetime', (el: any) => { - el.isDateEnabled = (dateIsoString: string) => { - const date = new Date(dateIsoString); - - if (date.getUTCDate() === 10 && date.getUTCMonth() === 9 && date.getUTCFullYear() === 2021) { - // Throws an exception on October 10, 2021 - // Expected behavior: the day should be enabled - throw new Error('Expected exception for e2e test.'); - } - return false; - }; - }); - }); - - it('calendar days should be enabled', async () => { - await page.waitForChanges(); - - const enabledDays = await page.findAll( - 'ion-datetime >>> .calendar-month:nth-child(2) .calendar-day:not([disabled]):not(.calendar-day-padding)' - ); - - expect(enabledDays.length).toBe(1); - }); - - it('should throw an exception to the developer', async () => { - const errors = []; - - page.on('console', (ev) => { - if (ev.type() === 'error') { - errors.push(ev.text()); - } - }); - - await page.waitForChanges(); - - expect(errors.length).toBe(1); - expect(errors[0]).toContain( - '[Ionic Error]: Exception thrown from provided `isDateEnabled` function. Please check your function and try again.' - ); - }); - }); - - describe('when isDateEnabled returns undefined', () => { - it('calendar days should be disabled', async () => { - await page.$eval('ion-datetime', (el: any) => { - el.isDateEnabled = () => undefined; - }); - - await page.waitForChanges(); - - const disabledDays = await queryAllDisabledDays(page); - - expect(disabledDays.length).toBe(91); - }); - }); - - describe('when isDateEnabled returns null', () => { - it('calendar days should be disabled', async () => { - await page.$eval('ion-datetime', (el: any) => { - el.isDateEnabled = () => null; - }); - - await page.waitForChanges(); - - const disabledDays = await queryAllDisabledDays(page); - - expect(disabledDays.length).toBe(91); - }); - }); - }); - - describe('examples', () => { - let page: E2EPage; - - beforeEach(async () => { - page = await newE2EPage({ - url: '/src/components/datetime/test/disable-dates?ionic:_testing=true', - }); - }); - - it('should disable a specific date', async () => { - const disabledDay = await queryDisabledDay(page, '#specificDate'); - - expect(disabledDay.textContent).toBe('10'); - }); - - it('should disable specific days of the week', async () => { - const disabledDays = await queryAllWorkingMonthDisabledDays(page, '#weekends'); - const disabledValues = disabledDays.map((d) => d.textContent); - - expect(disabledValues).toEqual(['2', '3', '9', '10', '16', '17', '23', '24', '30', '31']); - }); - - it('should disable a range of dates', async () => { - const disabledDays = await queryAllDisabledDays(page, '#dateRange'); - const disabledValues = disabledDays.map((d) => d.textContent); - - expect(disabledValues).toEqual(['10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20']); - }); - - it('should disable a month', async () => { - const disabledDays = await queryAllDisabledDays(page, '#month'); - const disabledValues = disabledDays.map((d) => d.textContent); - - expect(disabledValues.length).toBe(31); - }); - }); - - describe('with a min date range', () => { - it('should not enable already disabled dates', async () => { - const page = await newE2EPage({ - html: ` - - - `, - }); - - const disabledDays = await queryAllWorkingMonthDisabledDays(page); - - expect(disabledDays.length).toBe(14); - }); - }); - - describe('with a max date range', () => { - it('should not enable already disabled dates', async () => { - const page = await newE2EPage({ - html: ` - - - `, - }); - - const disabledDays = await queryAllWorkingMonthDisabledDays(page); - - expect(disabledDays.length).toBe(16); - }); - }); -}); diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts b/core/src/components/datetime/test/display/datetime.e2e.ts new file mode 100644 index 0000000000..6c2954344a --- /dev/null +++ b/core/src/components/datetime/test/display/datetime.e2e.ts @@ -0,0 +1,124 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('datetime: display', () => { + test.describe('datetime: rendering', () => { + test.describe('fixed sizes', () => { + test('date-time should not have any visual regressions', async ({ page }) => { + await page.setContent(` + + `); + const datetime = page.locator('ion-datetime'); + expect(await datetime.screenshot()).toMatchSnapshot( + `datetime-display-date-time-${page.getSnapshotSettings()}.png` + ); + }); + test('time-date should not have any visual regressions', async ({ page }) => { + await page.setContent(` + + `); + const datetime = page.locator('ion-datetime'); + expect(await datetime.screenshot()).toMatchSnapshot( + `datetime-display-time-date-${page.getSnapshotSettings()}.png` + ); + }); + test('time should not have any visual regressions', async ({ page }) => { + await page.setContent(` + + `); + const datetime = page.locator('ion-datetime'); + expect(await datetime.screenshot()).toMatchSnapshot(`datetime-display-time-${page.getSnapshotSettings()}.png`); + }); + test('date should not have any visual regressions', async ({ page }) => { + await page.setContent(` + + `); + const datetime = page.locator('ion-datetime'); + expect(await datetime.screenshot()).toMatchSnapshot(`datetime-display-date-${page.getSnapshotSettings()}.png`); + }); + }); + test.describe('cover sizes', () => { + test.beforeEach(async ({ page }) => { + /** + * We need to take a screenshot of the entire page + * here as we want to test that the datetime fills + * the entire screen. + */ + await page.setViewportSize({ width: 500, height: 500 }); + }); + test('date-time should not have any visual regressions', async ({ page }) => { + await page.setContent(` + + `); + const datetime = page.locator('ion-datetime'); + expect(await datetime.screenshot()).toMatchSnapshot( + `datetime-display-cover-date-time-${page.getSnapshotSettings()}.png` + ); + }); + test('time-date should not have any visual regressions', async ({ page }) => { + await page.setContent(` + + `); + const datetime = page.locator('ion-datetime'); + expect(await datetime.screenshot()).toMatchSnapshot( + `datetime-display-cover-time-date-${page.getSnapshotSettings()}.png` + ); + }); + test('time should not have any visual regressions', async ({ page }) => { + await page.setContent(` + + `); + const datetime = page.locator('ion-datetime'); + expect(await datetime.screenshot()).toMatchSnapshot( + `datetime-display-cover-time-${page.getSnapshotSettings()}.png` + ); + }); + test('date should not have any visual regressions', async ({ page }) => { + await page.setContent(` + + `); + const datetime = page.locator('ion-datetime'); + expect(await datetime.screenshot()).toMatchSnapshot( + `datetime-display-cover-date-${page.getSnapshotSettings()}.png` + ); + }); + }); + }); + test.describe('datetime: switch presentations', () => { + test('month selection should work after changing presentation', async ({ page }) => { + await page.goto('/src/components/datetime/test/display'); + const ionWorkingPartsDidChange = await page.spyOnEvent('ionWorkingPartsDidChange'); + await page.waitForSelector('.datetime-ready'); + + const select = page.locator('select#presentation'); + + await select.selectOption('date-time'); + await page.waitForChanges(); + + await select.selectOption('time-date'); + await page.waitForChanges(); + + const nextMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button + ion-button'); + await nextMonthButton.click(); + await page.waitForChanges(); + + await ionWorkingPartsDidChange.next(); + + const calendarMonthYear = page.locator('ion-datetime .calendar-month-year'); + + expect(calendarMonthYear).toHaveText('March 2022'); + + // ensure it still works if presentation is changed more than once + await select.selectOption('date-time'); + await page.waitForChanges(); + + const prevMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button:first-child'); + await prevMonthButton.click(); + await page.waitForChanges(); + + await ionWorkingPartsDidChange.next(); + + expect(calendarMonthYear).toHaveText('February 2022'); + }); + }); +}); diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..b949dc3760 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..68927b948a Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..329f1a4d20 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..b949dc3760 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..68927b948a Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..329f1a4d20 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..b949dc3760 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..68927b948a Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..329f1a4d20 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..b949dc3760 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..68927b948a Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..329f1a4d20 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..c17cee712e Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..89b0647318 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..64696a0404 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..c17cee712e Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..89b0647318 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..64696a0404 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..c17cee712e Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..89b0647318 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..64696a0404 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..c17cee712e Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..89b0647318 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..64696a0404 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..879017fc1a Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..3d9ce197f6 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..153b40abc5 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..879017fc1a Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..3d9ce197f6 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..153b40abc5 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..879017fc1a Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..3d9ce197f6 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..153b40abc5 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..879017fc1a Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..3d9ce197f6 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..153b40abc5 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..bb22daa4bd Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..5396d180b9 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..95b3fb42b7 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..bb22daa4bd Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..5396d180b9 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..95b3fb42b7 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..bb22daa4bd Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..5396d180b9 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..95b3fb42b7 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..bb22daa4bd Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..5396d180b9 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..95b3fb42b7 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3061588792 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..9c60ace057 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..8f6ca09782 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3061588792 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..9c60ace057 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..8f6ca09782 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3061588792 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..9c60ace057 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..8f6ca09782 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3061588792 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..9c60ace057 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..8f6ca09782 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..590cebde37 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..944e456d2a Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..fe1ef4229a Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..590cebde37 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..944e456d2a Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..fe1ef4229a Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..590cebde37 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..944e456d2a Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..fe1ef4229a Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..590cebde37 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..944e456d2a Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..fe1ef4229a Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..25d9fef284 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..b6df6391ac Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..7cf621630f Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..25d9fef284 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..b6df6391ac Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..7cf621630f Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..25d9fef284 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..b6df6391ac Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..7cf621630f Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..25d9fef284 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..b6df6391ac Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..7cf621630f Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..e9766d8edc Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..2b812e32f8 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a2e75534db Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..e9766d8edc Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..2b812e32f8 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a2e75534db Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..e9766d8edc Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..2b812e32f8 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a2e75534db Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..e9766d8edc Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..2b812e32f8 Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a2e75534db Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/display/e2e.ts b/core/src/components/datetime/test/display/e2e.ts deleted file mode 100644 index 181cb29e4a..0000000000 --- a/core/src/components/datetime/test/display/e2e.ts +++ /dev/null @@ -1,92 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('display', async () => { - const page = await newE2EPage({ - url: '/src/components/datetime/test/display?ionic:_testing=true', - }); - - const screenshotCompares = []; - - await page.select('#presentation', 'date-time'); - await page.waitForChanges(); - - screenshotCompares.push(await page.compareScreenshot()); - - await page.select('#presentation', 'time-date'); - await page.waitForChanges(); - - screenshotCompares.push(await page.compareScreenshot()); - - await page.select('#presentation', 'time'); - await page.waitForChanges(); - - screenshotCompares.push(await page.compareScreenshot()); - - await page.select('#presentation', 'date'); - await page.waitForChanges(); - - screenshotCompares.push(await page.compareScreenshot()); - - await page.select('#size', 'cover'); - await page.select('#presentation', 'date-time'); - await page.waitForChanges(); - - screenshotCompares.push(await page.compareScreenshot()); - - await page.select('#presentation', 'time-date'); - await page.waitForChanges(); - - screenshotCompares.push(await page.compareScreenshot()); - - await page.select('#presentation', 'time'); - await page.waitForChanges(); - - screenshotCompares.push(await page.compareScreenshot()); - - await page.select('#presentation', 'date'); - await page.waitForChanges(); - - screenshotCompares.push(await page.compareScreenshot()); - - for (const screenshotCompare of screenshotCompares) { - expect(screenshotCompare).toMatchScreenshot(); - } -}); - -test('month selection should work after changing presentation', async () => { - const page = await newE2EPage({ - url: '/src/components/datetime/test/display?ionic:_testing=true', - }); - const ionWorkingPartsDidChange = await page.spyOnEvent('ionWorkingPartsDidChange', 'document'); - let calendarMonthYear; - - await page.select('#presentation', 'date-time'); - await page.waitForChanges(); - - await page.select('#presentation', 'time-date'); - await page.waitForChanges(); - - const nextMonthButton = await page.find('ion-datetime >>> .calendar-next-prev ion-button + ion-button'); - await nextMonthButton.click(); - await page.waitForChanges(); - - await ionWorkingPartsDidChange.next(); - - calendarMonthYear = await page.find('ion-datetime >>> .calendar-month-year'); - - expect(calendarMonthYear.textContent).toContain('March 2022'); - - // ensure it still works if presentation is changed more than once - await page.select('#presentation', 'date-time'); - await page.waitForChanges(); - - const prevMonthButton = await page.find('ion-datetime >>> .calendar-next-prev ion-button:first-child'); - await prevMonthButton.click(); - await page.waitForChanges(); - - await ionWorkingPartsDidChange.next(); - - calendarMonthYear = await page.find('ion-datetime >>> .calendar-month-year'); - - expect(calendarMonthYear.textContent).toContain('February 2022'); -}); diff --git a/core/src/components/datetime/test/display/index.html b/core/src/components/datetime/test/display/index.html index 97c1381e8f..5d8694d580 100644 --- a/core/src/components/datetime/test/display/index.html +++ b/core/src/components/datetime/test/display/index.html @@ -36,13 +36,13 @@

- + + @@ -18,9 +23,9 @@ - Present Popover + Present Popover - + diff --git a/core/src/components/datetime/test/set-value/datetime.e2e.ts b/core/src/components/datetime/test/set-value/datetime.e2e.ts new file mode 100644 index 0000000000..ae83e80e81 --- /dev/null +++ b/core/src/components/datetime/test/set-value/datetime.e2e.ts @@ -0,0 +1,27 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('datetime: set-value', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/datetime/test/set-value'); + await page.waitForSelector('.datetime-ready'); + }); + test('should update the active date', async ({ page }) => { + const datetime = page.locator('ion-datetime'); + await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-11-25T12:40:00.000Z')); + + await page.waitForChanges(); + + const activeDate = page.locator('ion-datetime .calendar-day-active'); + expect(activeDate).toHaveText('25'); + }); + test('should update the active time', async ({ page }) => { + const datetime = page.locator('ion-datetime'); + await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-11-25T12:40:00.000Z')); + + await page.waitForChanges(); + + const activeDate = page.locator('ion-datetime .time-body'); + expect(activeDate).toHaveText('12:40 PM'); + }); +}); diff --git a/core/src/components/datetime/test/set-value/e2e.ts b/core/src/components/datetime/test/set-value/e2e.ts deleted file mode 100644 index 9649384cee..0000000000 --- a/core/src/components/datetime/test/set-value/e2e.ts +++ /dev/null @@ -1,36 +0,0 @@ -import type { E2EPage } from '@stencil/core/testing'; -import { newE2EPage } from '@stencil/core/testing'; - -describe('datetime: setting the value', () => { - let page: E2EPage; - - beforeEach(async () => { - page = await newE2EPage({ - url: '/src/components/datetime/test/set-value?ionic:_testing=true', - }); - }); - - it('should update the active date', async () => { - await page.$eval('ion-datetime', (elm: any) => { - elm.value = '2021-11-25T12:40:00.000Z'; - }); - - await page.waitForChanges(); - - const activeDate = await page.find('ion-datetime >>> .calendar-day-active'); - - expect(activeDate).toEqualText('25'); - }); - - it('should update the active time', async () => { - await page.$eval('ion-datetime', (elm: any) => { - elm.value = '2021-11-25T12:40:00.000Z'; - }); - - await page.waitForChanges(); - - const activeTime = await page.find('ion-datetime >>> .time-body'); - - expect(activeTime).toEqualText('12:40 PM'); - }); -}); diff --git a/core/src/components/datetime/test/sub-pixel-width/datetime.e2e.ts b/core/src/components/datetime/test/sub-pixel-width/datetime.e2e.ts new file mode 100644 index 0000000000..fbf4a1b1dd --- /dev/null +++ b/core/src/components/datetime/test/sub-pixel-width/datetime.e2e.ts @@ -0,0 +1,45 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('datetime: sub-pixel width', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/datetime/test/sub-pixel-width'); + }); + test('should update the month when next button is clicked', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const datetimeMonthDidChange = await page.spyOnEvent('datetimeMonthDidChange'); + + const openModalBtn = page.locator('#open-modal'); + + await openModalBtn.click(); + await ionModalDidPresent.next(); + await page.waitForSelector('.datetime-ready'); + + const buttons = page.locator('ion-datetime .calendar-next-prev ion-button'); + await buttons.nth(1).click(); + + await datetimeMonthDidChange.next(); + + const monthYear = page.locator('ion-datetime .calendar-month-year'); + expect(monthYear).toHaveText('March 2022'); + }); + + test('should update the month when prev button is clicked', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const datetimeMonthDidChange = await page.spyOnEvent('datetimeMonthDidChange'); + + const openModalBtn = page.locator('#open-modal'); + + await openModalBtn.click(); + await ionModalDidPresent.next(); + await page.waitForSelector('.datetime-ready'); + + const buttons = page.locator('ion-datetime .calendar-next-prev ion-button'); + await buttons.nth(0).click(); + + await datetimeMonthDidChange.next(); + + const monthYear = page.locator('ion-datetime .calendar-month-year'); + expect(monthYear).toHaveText('January 2022'); + }); +}); diff --git a/core/src/components/datetime/test/sub-pixel-width/e2e.ts b/core/src/components/datetime/test/sub-pixel-width/e2e.ts deleted file mode 100644 index d42914e25d..0000000000 --- a/core/src/components/datetime/test/sub-pixel-width/e2e.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -describe('datetime: sub-pixel width', () => { - test('should update the month when next button is clicked', async () => { - const page = await newE2EPage({ - url: '/src/components/datetime/test/sub-pixel-width?ionic:_testing=true', - }); - - const openModalBtn = await page.find('#open-modal'); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const modal = await page.find('ion-modal'); - - await openModalBtn.click(); - - await modal.waitForVisible(); - await ionModalDidPresent.next(); - - const buttons = await page.findAll('ion-datetime >>> .calendar-next-prev ion-button'); - - await buttons[1].click(); - - await page.waitForEvent('datetimeMonthDidChange'); - - const monthYear = await page.find('ion-datetime >>> .calendar-month-year'); - - expect(monthYear.textContent.trim()).toBe('March 2022'); - }); - - test('should update the month when prev button is clicked', async () => { - const page = await newE2EPage({ - url: '/src/components/datetime/test/sub-pixel-width?ionic:_testing=true', - }); - - const openModalBtn = await page.find('#open-modal'); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const modal = await page.find('ion-modal'); - - await openModalBtn.click(); - - await modal.waitForVisible(); - await ionModalDidPresent.next(); - - const buttons = await page.findAll('ion-datetime >>> .calendar-next-prev ion-button'); - - await buttons[0].click(); - - await page.waitForEvent('datetimeMonthDidChange'); - - const monthYear = await page.find('ion-datetime >>> .calendar-month-year'); - - expect(monthYear.textContent.trim()).toBe('January 2022'); - }); -}); diff --git a/core/src/components/datetime/test/time-label/datetime.e2e.ts b/core/src/components/datetime/test/time-label/datetime.e2e.ts new file mode 100644 index 0000000000..befa762127 --- /dev/null +++ b/core/src/components/datetime/test/time-label/datetime.e2e.ts @@ -0,0 +1,23 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('datetime: time label', () => { + test('should render default time label', async ({ page }) => { + await page.setContent(` + + `); + await page.waitForSelector('.datetime-ready'); + + const timeLabel = page.locator('ion-datetime .time-header'); + expect(timeLabel).toHaveText('Time'); + }); + test('should not render a custom time label', async ({ page }) => { + await page.setContent(` + + `); + await page.waitForSelector('.datetime-ready'); + + const timeLabel = page.locator('ion-datetime .time-header'); + expect(timeLabel).toHaveText(''); + }); +}); diff --git a/core/src/components/datetime/test/time-label/e2e.ts b/core/src/components/datetime/test/time-label/e2e.ts deleted file mode 100644 index 2164776345..0000000000 --- a/core/src/components/datetime/test/time-label/e2e.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('time-label', async () => { - const page = await newE2EPage({ - url: '/src/components/datetime/test/time-label?ionic:_testing=true', - }); - - const screenshotCompares = []; - - screenshotCompares.push(await page.compareScreenshot()); - - for (const screenshotCompare of screenshotCompares) { - expect(screenshotCompare).toMatchScreenshot(); - } -}); diff --git a/core/src/components/datetime/test/time-label/index.html b/core/src/components/datetime/test/time-label/index.html deleted file mode 100644 index c5ab52ef1e..0000000000 --- a/core/src/components/datetime/test/time-label/index.html +++ /dev/null @@ -1,60 +0,0 @@ - - - - - Datetime - Time label - - - - - - - - - - - - Datetime - Time Label - - - -
-
-

Default Time Label

- -
-
-

No Default Time Label

- -
-
-

Custom Time Label

- -
Custom Time
- -
-
- - - - diff --git a/core/src/components/datetime/test/utils/month-did-change-event.js b/core/src/components/datetime/test/utils/month-did-change-event.js index c0256c6f11..9bf3b5d283 100644 --- a/core/src/components/datetime/test/utils/month-did-change-event.js +++ b/core/src/components/datetime/test/utils/month-did-change-event.js @@ -7,7 +7,7 @@ export function InitMonthDidChangeEvent(datetimeSelector = 'ion-datetime') { const observer = new MutationObserver((mutationRecords) => { if (mutationRecords[0].type === 'characterData') { - document.dispatchEvent(new CustomEvent('datetimeMonthDidChange')); + window.dispatchEvent(new CustomEvent('datetimeMonthDidChange')); } }); diff --git a/core/src/components/datetime/test/values/datetime.e2e.ts b/core/src/components/datetime/test/values/datetime.e2e.ts new file mode 100644 index 0000000000..4c24edba7a --- /dev/null +++ b/core/src/components/datetime/test/values/datetime.e2e.ts @@ -0,0 +1,52 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('datetime: values', () => { + test('should render correct days', async ({ page }) => { + await page.setContent(` + + `); + await page.waitForSelector('.datetime-ready'); + + const items = page.locator('.calendar-day:not([disabled])'); + + /** + * Datetime calendar grid renders 3 months by default, + * so this ensures that dayValues is applying to all + * rendered months, not just the initial month. + */ + expect(items).toHaveText(['1', '2', '3', '1', '2', '3', '1', '2', '3']); + }); + test('should render correct months', async ({ page }) => { + await page.setContent(` + + `); + + const items = page.locator('.month-column .picker-item:not(.picker-item-empty)'); + expect(items).toHaveText(['May', 'June', 'October']); + }); + test('should render correct years', async ({ page }) => { + await page.setContent(` + + `); + + const items = page.locator('.year-column .picker-item:not(.picker-item-empty)'); + expect(items).toHaveText(['2022', '2021', '2020']); + }); + test('should render correct hours', async ({ page }) => { + await page.setContent(` + + `); + + const items = page.locator('ion-picker-column-internal:first-of-type .picker-item:not(.picker-item-empty)'); + expect(items).toHaveText(['1', '2', '3']); + }); + test('should render correct minutes', async ({ page }) => { + await page.setContent(` + + `); + + const items = page.locator('ion-picker-column-internal:nth-of-type(2) .picker-item:not(.picker-item-empty)'); + expect(items).toHaveText(['01', '02', '03']); + }); +}); diff --git a/core/src/components/datetime/test/values/e2e.ts b/core/src/components/datetime/test/values/e2e.ts deleted file mode 100644 index 1d6d606512..0000000000 --- a/core/src/components/datetime/test/values/e2e.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('values', async () => { - const page = await newE2EPage({ - url: '/src/components/datetime/test/values?ionic:_testing=true', - }); - - const screenshotCompares = []; - - screenshotCompares.push(await page.compareScreenshot()); - - for (const screenshotCompare of screenshotCompares) { - expect(screenshotCompare).toMatchScreenshot(); - } -}); diff --git a/core/src/components/datetime/test/values/index.html b/core/src/components/datetime/test/values/index.html deleted file mode 100644 index c28d87c022..0000000000 --- a/core/src/components/datetime/test/values/index.html +++ /dev/null @@ -1,67 +0,0 @@ - - - - - Datetime - Values - - - - - - - - - - - - Datetime - Values - - - -
-
-

Values

- -
- -
-

Values with Max/Min

- -
-
- - - - diff --git a/core/src/components/datetime/test/zoom/datetime-zoom-in.e2e.ts b/core/src/components/datetime/test/zoom/datetime-zoom-in.e2e.ts new file mode 100644 index 0000000000..41c2cdd84d --- /dev/null +++ b/core/src/components/datetime/test/zoom/datetime-zoom-in.e2e.ts @@ -0,0 +1,55 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.use({ + viewport: { + width: 640, + height: 480, + }, + deviceScaleFactor: 2, +}); + +/** + * This test emulates zoom behavior in the browser to make sure + * that key functions of the ion-datetime continue to function even + * if the page is zoomed in or out. + */ +test.describe('datetime: zoom in interactivity', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/datetime/test/zoom'); + }); + + test('should update the month when next button is clicked', async ({ page }) => { + const openModalBtn = page.locator('#open-modal'); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const datetimeMonthDidChange = await page.spyOnEvent('datetimeMonthDidChange'); + + await openModalBtn.click(); + await ionModalDidPresent.next(); + + const buttons = page.locator('ion-datetime .calendar-next-prev ion-button'); + + await buttons.nth(1).click(); + await datetimeMonthDidChange.next(); + + const monthYear = page.locator('ion-datetime .calendar-month-year'); + expect(monthYear).toHaveText('March 2022'); + }); + + test('should update the month when prev button is clicked', async ({ page }) => { + const openModalBtn = page.locator('#open-modal'); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const datetimeMonthDidChange = await page.spyOnEvent('datetimeMonthDidChange'); + + await openModalBtn.click(); + await ionModalDidPresent.next(); + + const buttons = page.locator('ion-datetime .calendar-next-prev ion-button'); + + await buttons.nth(0).click(); + await datetimeMonthDidChange.next(); + + const monthYear = page.locator('ion-datetime .calendar-month-year'); + expect(monthYear).toHaveText('January 2022'); + }); +}); diff --git a/core/src/components/datetime/test/zoom/datetime-zoom-out.e2e.ts b/core/src/components/datetime/test/zoom/datetime-zoom-out.e2e.ts new file mode 100644 index 0000000000..11537e2821 --- /dev/null +++ b/core/src/components/datetime/test/zoom/datetime-zoom-out.e2e.ts @@ -0,0 +1,55 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.use({ + viewport: { + width: 640, + height: 480, + }, + deviceScaleFactor: 0.75, +}); + +/** + * This test emulates zoom behavior in the browser to make sure + * that key functions of the ion-datetime continue to function even + * if the page is zoomed in or out. + */ +test.describe('datetime: zoom out interactivity', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/datetime/test/zoom'); + }); + + test('should update the month when next button is clicked', async ({ page }) => { + const openModalBtn = page.locator('#open-modal'); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const datetimeMonthDidChange = await page.spyOnEvent('datetimeMonthDidChange'); + + await openModalBtn.click(); + await ionModalDidPresent.next(); + + const buttons = page.locator('ion-datetime .calendar-next-prev ion-button'); + + await buttons.nth(1).click(); + await datetimeMonthDidChange.next(); + + const monthYear = page.locator('ion-datetime .calendar-month-year'); + expect(monthYear).toHaveText('March 2022'); + }); + + test('should update the month when prev button is clicked', async ({ page }) => { + const openModalBtn = page.locator('#open-modal'); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const datetimeMonthDidChange = await page.spyOnEvent('datetimeMonthDidChange'); + + await openModalBtn.click(); + await ionModalDidPresent.next(); + + const buttons = page.locator('ion-datetime .calendar-next-prev ion-button'); + + await buttons.nth(0).click(); + await datetimeMonthDidChange.next(); + + const monthYear = page.locator('ion-datetime .calendar-month-year'); + expect(monthYear).toHaveText('January 2022'); + }); +}); diff --git a/core/src/components/datetime/test/zoom/e2e.ts b/core/src/components/datetime/test/zoom/e2e.ts deleted file mode 100644 index 8e0a7a67ab..0000000000 --- a/core/src/components/datetime/test/zoom/e2e.ts +++ /dev/null @@ -1,134 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -/** - * This test emulates zoom behavior in the browser to make sure - * that key functions of the ion-datetime continue to function even - * if the page is zoomed in or out. - */ -describe('datetime: zoom interactivity', () => { - let deviceScaleFactor; - - describe('zoom out', () => { - beforeEach(() => { - deviceScaleFactor = 0.75; - }); - - test('should update the month when next button is clicked', async () => { - const page = await newE2EPage({ - url: '/src/components/datetime/test/zoom?ionic:_testing=true', - }); - - page.setViewport({ - width: 640, - height: 480, - deviceScaleFactor, - }); - - const openModalBtn = await page.find('#open-modal'); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const modal = await page.find('ion-modal'); - - await openModalBtn.click(); - - await modal.waitForVisible(); - await ionModalDidPresent.next(); - - const buttons = await page.findAll('ion-datetime >>> .calendar-next-prev ion-button'); - - await buttons[1].click(); - - await page.waitForEvent('datetimeMonthDidChange'); - - const monthYear = await page.find('ion-datetime >>> .calendar-month-year'); - - expect(monthYear.textContent.trim()).toBe('March 2022'); - }); - - test('should update the month when prev button is clicked', async () => { - const page = await newE2EPage({ - url: '/src/components/datetime/test/zoom?ionic:_testing=true', - }); - - const openModalBtn = await page.find('#open-modal'); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const modal = await page.find('ion-modal'); - - await openModalBtn.click(); - - await modal.waitForVisible(); - await ionModalDidPresent.next(); - - const buttons = await page.findAll('ion-datetime >>> .calendar-next-prev ion-button'); - - await buttons[0].click(); - - await page.waitForEvent('datetimeMonthDidChange'); - - const monthYear = await page.find('ion-datetime >>> .calendar-month-year'); - - expect(monthYear.textContent.trim()).toBe('January 2022'); - }); - }); - - describe('zoom in', () => { - beforeEach(() => { - deviceScaleFactor = 2; - }); - - test('should update the month when next button is clicked', async () => { - const page = await newE2EPage({ - url: '/src/components/datetime/test/zoom?ionic:_testing=true', - }); - - page.setViewport({ - width: 640, - height: 480, - deviceScaleFactor, - }); - - const openModalBtn = await page.find('#open-modal'); - const modal = await page.find('ion-modal'); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await openModalBtn.click(); - - await modal.waitForVisible(); - await ionModalDidPresent.next(); - - const buttons = await page.findAll('ion-datetime >>> .calendar-next-prev ion-button'); - - await buttons[1].click(); - - await page.waitForEvent('datetimeMonthDidChange'); - - const monthYear = await page.find('ion-datetime >>> .calendar-month-year'); - - expect(monthYear.textContent.trim()).toBe('March 2022'); - }); - - test('should update the month when prev button is clicked', async () => { - const page = await newE2EPage({ - url: '/src/components/datetime/test/zoom?ionic:_testing=true', - }); - - const openModalBtn = await page.find('#open-modal'); - const modal = await page.find('ion-modal'); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await openModalBtn.click(); - - await modal.waitForVisible(); - await ionModalDidPresent.next(); - - const buttons = await page.findAll('ion-datetime >>> .calendar-next-prev ion-button'); - - await buttons[0].click(); - - await page.waitForEvent('datetimeMonthDidChange'); - - const monthYear = await page.find('ion-datetime >>> .calendar-month-year'); - - expect(monthYear.textContent.trim()).toBe('January 2022'); - }); - }); -});