From db6eb354636d656ade7fa927a9c7f3f568b8cf96 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 28 Feb 2023 15:15:48 -0500
Subject: [PATCH] test(datetime): fix flaky test (#26874)

---
 .../test/presentation/datetime.e2e.ts         | 69 ++++++++-----------
 1 file changed, 29 insertions(+), 40 deletions(-)

diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts b/core/src/components/datetime/test/presentation/datetime.e2e.ts
index 180dd79f2c..548cb28ac5 100644
--- a/core/src/components/datetime/test/presentation/datetime.e2e.ts
+++ b/core/src/components/datetime/test/presentation/datetime.e2e.ts
@@ -108,45 +108,42 @@ test.describe('datetime: presentation', () => {
   });
 });
 
-// TODO: FW-3018
-test.skip('datetime: presentation: time', () => {
-  let timePickerFixture: TimePickerFixture;
-
-  test.beforeEach(async ({ page }) => {
-    timePickerFixture = new TimePickerFixture(page);
-    await timePickerFixture.goto();
+test.describe('datetime: presentation: time', () => {
+  test.beforeEach(async ({ skip }) => {
+    skip.rtl();
+    skip.mode('md');
   });
 
-  test('changing value from AM to AM should update the text', async () => {
-    await timePickerFixture.setValue('04:20:00');
-    await timePickerFixture.expectTime('4', '20', 'AM');
+  test('changing value from AM to AM should update the text', async ({ page }) => {
+    const timePickerFixture = new TimePickerFixture(page);
+    await timePickerFixture.goto('04:20:00');
 
     await timePickerFixture.setValue('11:03:00');
-    await timePickerFixture.expectTime('11', '03', 'AM');
+    await timePickerFixture.expectTime(11, 3, 'am');
   });
 
-  test('changing value from AM to PM should update the text', async () => {
-    await timePickerFixture.setValue('05:30:00');
-    await timePickerFixture.expectTime('5', '30', 'AM');
+  test('changing value from AM to PM should update the text', async ({ page }) => {
+    const timePickerFixture = new TimePickerFixture(page);
+    await timePickerFixture.goto('05:30:00');
 
     await timePickerFixture.setValue('16:40:00');
-    await timePickerFixture.expectTime('4', '40', 'PM');
+    await timePickerFixture.expectTime(16, 40, 'pm');
   });
 
-  test('changing the value from PM to AM should update the text', async () => {
-    await timePickerFixture.setValue('16:40:00');
-    await timePickerFixture.expectTime('4', '40', 'PM');
+  test('changing the value from PM to AM should update the text', async ({ page }) => {
+    const timePickerFixture = new TimePickerFixture(page);
+    await timePickerFixture.goto('16:40:00');
 
     await timePickerFixture.setValue('04:20:00');
-    await timePickerFixture.expectTime('4', '20', 'AM');
+    await timePickerFixture.expectTime(4, 20, 'am');
   });
 
-  test('changing the value from PM to PM should update the text', async () => {
-    await timePickerFixture.setValue('16:40:00');
-    await timePickerFixture.expectTime('4', '40', 'PM');
+  test('changing the value from PM to PM should update the text', async ({ page }) => {
+    const timePickerFixture = new TimePickerFixture(page);
+    await timePickerFixture.goto('16:40:00');
 
     await timePickerFixture.setValue('19:32:00');
-    await timePickerFixture.expectTime('7', '32', 'PM');
+    await timePickerFixture.expectTime(19, 32, 'pm');
   });
 });
 
@@ -159,35 +156,27 @@ class TimePickerFixture {
     this.page = page;
   }
 
-  async goto() {
+  async goto(value: string) {
     await this.page.setContent(`
-      <ion-datetime presentation="time" value="2022-03-10T13:00:00"></ion-datetime>
+      <ion-datetime presentation="time" value="${value}"></ion-datetime>
     `);
     await this.page.waitForSelector('.datetime-ready');
     this.timePicker = this.page.locator('ion-datetime');
   }
 
   async setValue(value: string) {
-    const ionChange = await this.page.spyOnEvent('ionChange');
     await this.timePicker.evaluate((el: HTMLIonDatetimeElement, newValue: string) => {
       el.value = newValue;
     }, value);
 
-    await ionChange.next();
-
-    // Changing the value can take longer than the default 100ms to repaint
-    await this.page.waitForChanges(300);
+    await this.page.waitForChanges();
   }
 
-  async expectTime(hour: string, minute: string, ampm: string) {
-    expect(
-      await this.timePicker.locator('ion-picker-column-internal:nth-child(1) .picker-item-active').textContent()
-    ).toBe(hour);
-    expect(
-      await this.timePicker.locator('ion-picker-column-internal:nth-child(2) .picker-item-active').textContent()
-    ).toBe(minute);
-    expect(
-      await this.timePicker.locator('ion-picker-column-internal:nth-child(3) .picker-item-active').textContent()
-    ).toBe(ampm);
+  async expectTime(hour: number, minute: number, ampm: string) {
+    const pickerColumns = this.timePicker.locator('ion-picker-column-internal');
+
+    await expect(pickerColumns.nth(0)).toHaveJSProperty('value', hour);
+    await expect(pickerColumns.nth(1)).toHaveJSProperty('value', minute);
+    await expect(pickerColumns.nth(2)).toHaveJSProperty('value', ampm);
   }
 }