test(all): add await to relevant assertions

core/src/components/datetime/test/basic/datetime.e2e.ts

@@ -27,7 +27,7 @@ test.describe('datetime: closing time popover', () => {
     await ionPopoverDidDismiss.next();
     await page.waitForChanges();
 
-    expect(calendarMonthYear).toHaveText(currentMonthAndYear);
+    await expect(calendarMonthYear).toHaveText(currentMonthAndYear);
   });
 });
 
@@ -41,13 +41,13 @@ test.describe('datetime: selecting a day', () => {
       `#${datetimeID} .calendar-day[data-day='${today.getDate()}'][data-month='${today.getMonth() + 1}']`
     );
 
-    expect(todayBtn).toHaveClass(/calendar-day-today/);
-    expect(todayBtn).not.toHaveClass(/calendar-day-active/);
+    await expect(todayBtn).toHaveClass(/calendar-day-today/);
+    await expect(todayBtn).not.toHaveClass(/calendar-day-active/);
 
     await todayBtn.click();
     await page.waitForChanges();
 
-    expect(todayBtn).toHaveClass(/calendar-day-active/);
+    await expect(todayBtn).toHaveClass(/calendar-day-active/);
   };
 
   test('should not highlight a day until one is selected', async ({ page }) => {
@@ -64,13 +64,13 @@ test.describe('datetime: selecting a day', () => {
 
     const activeDay = page.locator('ion-datetime .calendar-day-active');
 
-    expect(activeDay).toHaveText('25');
+    await 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');
+    await expect(activeDay).toHaveText('13');
   });
 });
 
@@ -125,10 +125,10 @@ test.describe('datetime: footer', () => {
     await page.setContent('<ion-datetime value="2022-05-03" show-default-buttons="true"></ion-datetime>');
 
     const cancelButton = page.locator('ion-datetime #cancel-button');
-    expect(cancelButton).toHaveText('Cancel');
+    await expect(cancelButton).toHaveText('Cancel');
 
     const confirmButton = page.locator('ion-datetime #confirm-button');
-    expect(confirmButton).toHaveText('Done');
+    await expect(confirmButton).toHaveText('Done');
 
     const datetime = page.locator('ion-datetime');
     expect(await datetime.screenshot()).toMatchSnapshot(
@@ -139,7 +139,7 @@ test.describe('datetime: footer', () => {
     await page.setContent('<ion-datetime value="2022-05-03" show-clear-button="true"></ion-datetime>');
 
     const clearButton = page.locator('ion-datetime #clear-button');
-    expect(clearButton).toHaveText('Clear');
+    await expect(clearButton).toHaveText('Clear');
 
     const datetime = page.locator('ion-datetime');
     expect(await datetime.screenshot()).toMatchSnapshot(
@@ -152,13 +152,13 @@ test.describe('datetime: footer', () => {
     );
 
     const cancelButton = page.locator('ion-datetime #cancel-button');
-    expect(cancelButton).toHaveText('Cancel');
+    await expect(cancelButton).toHaveText('Cancel');
 
     const confirmButton = page.locator('ion-datetime #confirm-button');
-    expect(confirmButton).toHaveText('Done');
+    await expect(confirmButton).toHaveText('Done');
 
     const clearButton = page.locator('ion-datetime #clear-button');
-    expect(clearButton).toHaveText('Clear');
+    await expect(clearButton).toHaveText('Clear');
 
     const datetime = page.locator('ion-datetime');
     expect(await datetime.screenshot()).toMatchSnapshot(
@@ -175,7 +175,7 @@ test.describe('datetime: footer', () => {
     `);
 
     const customButton = page.locator('ion-datetime #custom-button');
-    expect(customButton).toBeVisible();
+    await expect(customButton).toBeVisible();
 
     const datetime = page.locator('ion-datetime');
     expect(await datetime.screenshot()).toMatchSnapshot(

core/src/components/datetime/test/disable-dates/datetime.e2e.ts

@@ -122,21 +122,21 @@ test.describe('datetime: disable dates', () => {
     test('should disable a specific date', async ({ page }) => {
       const disabledDay = queryAllDisabledDays(page, '#specificDate');
 
-      expect(disabledDay).toHaveText('10');
+      await 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']);
+      await 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']);
+      await expect(disabledDays).toHaveText(['10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20']);
     });
 
     test('should disable a month', async ({ page }) => {

core/src/components/datetime/test/display/datetime.e2e.ts

@@ -106,7 +106,7 @@ test.describe('datetime: display', () => {
 
       const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
 
-      expect(calendarMonthYear).toHaveText('March 2022');
+      await expect(calendarMonthYear).toHaveText('March 2022');
 
       // ensure it still works if presentation is changed more than once
       await select.selectOption('date-time');
@@ -118,7 +118,7 @@ test.describe('datetime: display', () => {
 
       await ionWorkingPartsDidChange.next();
 
-      expect(calendarMonthYear).toHaveText('February 2022');
+      await expect(calendarMonthYear).toHaveText('February 2022');
     });
   });
 });

core/src/components/datetime/test/hour-cycle/datetime.e2e.ts

@@ -8,14 +8,14 @@ test.describe('datetime: hour cycle', () => {
     `);
 
     const timeButton = page.locator('ion-datetime .time-body');
-    expect(timeButton).toHaveText('16:30');
+    await expect(timeButton).toHaveText('16:30');
   });
   test('should set the h12 hour cycle correctly', async ({ page }) => {
     await page.setContent(`
       <ion-datetime hour-cycle="h12" value="2022-01-01T16:30:00"></ion-datetime>
     `);
 
     const timeButton = page.locator('ion-datetime .time-body');
-    expect(timeButton).toHaveText('4:30 PM');
+    await expect(timeButton).toHaveText('4:30 PM');
   });
 });

core/src/components/datetime/test/minmax/datetime.e2e.ts

@@ -33,8 +33,8 @@ test.describe('datetime: minmax', () => {
     const prevButton = page.locator('ion-datetime .calendar-next-prev ion-button:nth-child(1)');
     const nextButton = page.locator('ion-datetime .calendar-next-prev ion-button:nth-child(2)');
 
-    expect(nextButton).toBeEnabled();
-    expect(prevButton).toBeDisabled();
+    await expect(nextButton).toBeEnabled();
+    await expect(prevButton).toBeDisabled();
 
     await page.evaluate('initDatetimeChangeEvent()');
 
@@ -45,8 +45,8 @@ test.describe('datetime: minmax', () => {
 
     await monthDidChangeSpy.next();
 
-    expect(nextButton).toBeDisabled();
-    expect(prevButton).toBeEnabled();
+    await expect(nextButton).toBeDisabled();
+    await expect(prevButton).toBeEnabled();
   });
 
   test('datetime: minmax months disabled', async ({ page }) => {
@@ -55,9 +55,9 @@ test.describe('datetime: minmax', () => {
 
     await page.waitForSelector('.datetime-ready');
 
-    expect(calendarMonths.nth(0)).not.toHaveClass(/calendar-month-disabled/);
-    expect(calendarMonths.nth(1)).not.toHaveClass(/calendar-month-disabled/);
-    expect(calendarMonths.nth(2)).toHaveClass(/calendar-month-disabled/);
+    await expect(calendarMonths.nth(0)).not.toHaveClass(/calendar-month-disabled/);
+    await expect(calendarMonths.nth(1)).not.toHaveClass(/calendar-month-disabled/);
+    await expect(calendarMonths.nth(2)).toHaveClass(/calendar-month-disabled/);
   });
 
   test('datetime: minmax navigation disabled', async ({ page }) => {
@@ -66,8 +66,8 @@ test.describe('datetime: minmax', () => {
 
     const navButtons = page.locator('ion-datetime#outside .calendar-next-prev ion-button');
 
-    expect(navButtons.nth(0)).toHaveAttribute('disabled', '');
-    expect(navButtons.nth(1)).toHaveAttribute('disabled', '');
+    await expect(navButtons.nth(0)).toHaveAttribute('disabled', '');
+    await expect(navButtons.nth(1)).toHaveAttribute('disabled', '');
   });
 
   test('datetime: min including day should not disable month', async ({ page }) => {
@@ -76,9 +76,9 @@ test.describe('datetime: minmax', () => {
 
     const calendarMonths = page.locator('ion-datetime#min-with-day .calendar-month');
 
-    expect(calendarMonths.nth(0)).toHaveClass(/calendar-month-disabled/);
-    expect(calendarMonths.nth(1)).not.toHaveClass(/calendar-month-disabled/);
-    expect(calendarMonths.nth(2)).not.toHaveClass(/calendar-month-disabled/);
+    await expect(calendarMonths.nth(0)).toHaveClass(/calendar-month-disabled/);
+    await expect(calendarMonths.nth(1)).not.toHaveClass(/calendar-month-disabled/);
+    await expect(calendarMonths.nth(2)).not.toHaveClass(/calendar-month-disabled/);
   });
 
   test.describe('when the datetime does not have a value', () => {
@@ -116,7 +116,7 @@ test.describe('datetime: minmax', () => {
       await page.waitForSelector('.datetime-ready');
 
       const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
-      expect(calendarMonthYear).toHaveText('June 2021');
+      await expect(calendarMonthYear).toHaveText('June 2021');
     };
 
     test('when min is defined', async ({ page }) => {

core/src/components/datetime/test/month-year-picker/datetime.e2e.ts

@@ -9,16 +9,16 @@ test.describe('datetime: month-year picker', () => {
 
   test('should hide the footer when picker is open', async ({ page }) => {
     const datetimeFooter = page.locator('#date-time .datetime-footer');
-    expect(datetimeFooter).toBeVisible();
+    await expect(datetimeFooter).toBeVisible();
 
     const pickerButton = page.locator('#date-time .calendar-month-year > ion-item');
     await pickerButton.click();
     await page.waitForChanges();
-    expect(datetimeFooter).not.toBeVisible();
+    await expect(datetimeFooter).not.toBeVisible();
   });
 
   test('should not hide the footer on month-year presentation', async ({ page }) => {
     const monthyearFooter = page.locator('#month-year .datetime-footer');
-    expect(monthyearFooter).toBeVisible();
+    await expect(monthyearFooter).toBeVisible();
   });
 });

core/src/components/datetime/test/set-value/datetime.e2e.ts

@@ -13,7 +13,7 @@ test.describe('datetime: set-value', () => {
     await page.waitForChanges();
 
     const activeDate = page.locator('ion-datetime .calendar-day-active');
-    expect(activeDate).toHaveText('25');
+    await expect(activeDate).toHaveText('25');
   });
   test('should update the active time', async ({ page }) => {
     const datetime = page.locator('ion-datetime');
@@ -22,6 +22,6 @@ test.describe('datetime: set-value', () => {
     await page.waitForChanges();
 
     const activeDate = page.locator('ion-datetime .time-body');
-    expect(activeDate).toHaveText('12:40 PM');
+    await expect(activeDate).toHaveText('12:40 PM');
   });
 });

core/src/components/datetime/test/sub-pixel-width/datetime.e2e.ts

@@ -21,7 +21,7 @@ test.describe('datetime: sub-pixel width', () => {
     await datetimeMonthDidChange.next();
 
     const monthYear = page.locator('ion-datetime .calendar-month-year');
-    expect(monthYear).toHaveText('March 2022');
+    await expect(monthYear).toHaveText('March 2022');
   });
 
   test('should update the month when prev button is clicked', async ({ page }) => {
@@ -40,6 +40,6 @@ test.describe('datetime: sub-pixel width', () => {
     await datetimeMonthDidChange.next();
 
     const monthYear = page.locator('ion-datetime .calendar-month-year');
-    expect(monthYear).toHaveText('January 2022');
+    await expect(monthYear).toHaveText('January 2022');
   });
 });

core/src/components/datetime/test/time-label/datetime.e2e.ts

@@ -9,7 +9,7 @@ test.describe('datetime: time label', () => {
     await page.waitForSelector('.datetime-ready');
 
     const timeLabel = page.locator('ion-datetime .time-header');
-    expect(timeLabel).toHaveText('Time');
+    await expect(timeLabel).toHaveText('Time');
   });
   test('should not render a custom time label', async ({ page }) => {
     await page.setContent(`
@@ -18,6 +18,6 @@ test.describe('datetime: time label', () => {
     await page.waitForSelector('.datetime-ready');
 
     const timeLabel = page.locator('ion-datetime .time-header');
-    expect(timeLabel).toHaveText('');
+    await expect(timeLabel).toHaveText('');
   });
 });

core/src/components/datetime/test/values/datetime.e2e.ts

@@ -15,38 +15,38 @@ test.describe('datetime: values', () => {
      * 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']);
+    await expect(items).toHaveText(['1', '2', '3', '1', '2', '3', '1', '2', '3']);
   });
   test('should render correct months', async ({ page }) => {
     await page.setContent(`
       <ion-datetime locale="en-US" presentation="month-year" month-values="5,6,10"></ion-datetime>
     `);
 
     const items = page.locator('.month-column .picker-item:not(.picker-item-empty)');
-    expect(items).toHaveText(['May', 'June', 'October']);
+    await expect(items).toHaveText(['May', 'June', 'October']);
   });
   test('should render correct years', async ({ page }) => {
     await page.setContent(`
       <ion-datetime locale="en-US" presentation="month-year" year-values="2022,2021,2020"></ion-datetime>
     `);
 
     const items = page.locator('.year-column .picker-item:not(.picker-item-empty)');
-    expect(items).toHaveText(['2022', '2021', '2020']);
+    await expect(items).toHaveText(['2022', '2021', '2020']);
   });
   test('should render correct hours', async ({ page }) => {
     await page.setContent(`
       <ion-datetime locale="en-US" presentation="time" hour-values="1,2,3"></ion-datetime>
     `);
 
     const items = page.locator('ion-picker-column-internal:first-of-type .picker-item:not(.picker-item-empty)');
-    expect(items).toHaveText(['1', '2', '3']);
+    await expect(items).toHaveText(['1', '2', '3']);
   });
   test('should render correct minutes', async ({ page }) => {
     await page.setContent(`
       <ion-datetime locale="en-US" presentation="time" minute-values="1,2,3"></ion-datetime>
     `);
 
     const items = page.locator('ion-picker-column-internal:nth-of-type(2) .picker-item:not(.picker-item-empty)');
-    expect(items).toHaveText(['01', '02', '03']);
+    await expect(items).toHaveText(['01', '02', '03']);
   });
 });

core/src/components/datetime/test/zoom/datetime-zoom-in.e2e.ts

@@ -33,7 +33,7 @@ test.describe('datetime: zoom in interactivity', () => {
     await datetimeMonthDidChange.next();
 
     const monthYear = page.locator('ion-datetime .calendar-month-year');
-    expect(monthYear).toHaveText('March 2022');
+    await expect(monthYear).toHaveText('March 2022');
   });
 
   test('should update the month when prev button is clicked', async ({ page }) => {
@@ -50,6 +50,6 @@ test.describe('datetime: zoom in interactivity', () => {
     await datetimeMonthDidChange.next();
 
     const monthYear = page.locator('ion-datetime .calendar-month-year');
-    expect(monthYear).toHaveText('January 2022');
+    await expect(monthYear).toHaveText('January 2022');
   });
 });

core/src/components/datetime/test/zoom/datetime-zoom-out.e2e.ts

@@ -33,7 +33,7 @@ test.describe('datetime: zoom out interactivity', () => {
     await datetimeMonthDidChange.next();
 
     const monthYear = page.locator('ion-datetime .calendar-month-year');
-    expect(monthYear).toHaveText('March 2022');
+    await expect(monthYear).toHaveText('March 2022');
   });
 
   test('should update the month when prev button is clicked', async ({ page }) => {
@@ -50,6 +50,6 @@ test.describe('datetime: zoom out interactivity', () => {
     await datetimeMonthDidChange.next();
 
     const monthYear = page.locator('ion-datetime .calendar-month-year');
-    expect(monthYear).toHaveText('January 2022');
+    await expect(monthYear).toHaveText('January 2022');
   });
 });

core/src/components/img/test/draggable/img.e2e.ts

@@ -6,12 +6,12 @@ test.describe('img: draggable', () => {
     await page.goto('/src/components/img/test/draggable');
 
     const imgDraggableTrue = page.locator('#img-draggable-true img');
-    expect(imgDraggableTrue).toHaveAttribute('draggable', 'true');
+    await expect(imgDraggableTrue).toHaveAttribute('draggable', 'true');
 
     const imgDraggableFalse = page.locator('#img-draggable-false img');
-    expect(imgDraggableFalse).toHaveAttribute('draggable', 'false');
+    await expect(imgDraggableFalse).toHaveAttribute('draggable', 'false');
 
     const imgDraggableUnset = page.locator('#img-draggable-unset img');
-    expect(imgDraggableUnset).toHaveAttribute('draggable', '');
+    await expect(imgDraggableUnset).toHaveAttribute('draggable', '');
   });
 });