From 50d806ee6fe647857c051e1a6178a1e7fd4316ac Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 24 Jun 2022 12:54:02 -0400 Subject: [PATCH] test(all): add await to relevant assertions (#25527) --- .../datetime/test/basic/datetime.e2e.ts | 26 ++++----- .../test/disable-dates/datetime.e2e.ts | 6 +- .../datetime/test/display/datetime.e2e.ts | 4 +- .../datetime/test/hour-cycle/datetime.e2e.ts | 4 +- .../datetime/test/minmax/datetime.e2e.ts | 26 ++++----- .../test/month-year-picker/datetime.e2e.ts | 6 +- .../datetime/test/set-value/datetime.e2e.ts | 4 +- .../test/sub-pixel-width/datetime.e2e.ts | 4 +- .../datetime/test/time-label/datetime.e2e.ts | 4 +- .../datetime/test/values/datetime.e2e.ts | 10 ++-- .../test/zoom/datetime-zoom-in.e2e.ts | 4 +- .../test/zoom/datetime-zoom-out.e2e.ts | 4 +- .../components/img/test/draggable/img.e2e.ts | 6 +- .../loading/test/basic/loading.e2e.ts | 10 ++-- .../loading/test/standalone/loading.e2e.ts | 2 +- .../components/modal/test/basic/modal.e2e.ts | 55 ++++++++----------- .../modal/test/card-nav/modal.e2e.ts | 2 +- .../modal/test/card-refresher/modal.e2e.ts | 2 +- .../test/card-scroll-target/modal.e2e.ts | 4 +- .../components/modal/test/card/modal.e2e.ts | 12 ++-- .../components/modal/test/sheet/modal.e2e.ts | 2 +- .../modal/test/trigger/modal.e2e.ts | 2 +- .../test/basic/picker-column-internal.e2e.ts | 6 +- .../popover/test/basic/popover.e2e.ts | 2 +- .../test/dismissOnSelect/popover.e2e.ts | 4 +- .../popover/test/inline/popover.e2e.ts | 6 +- .../popover/test/nested/popover.e2e.ts | 16 +++--- .../popover/test/trigger/popover.e2e.ts | 2 +- .../select/test/async/select.e2e.ts | 2 +- .../select/test/basic/select.e2e.ts | 2 +- .../select/test/compare-with/select.e2e.ts | 4 +- .../toggle/test/basic/toggle.e2e.ts | 28 +++++----- core/src/utils/test/overlays/overlays.e2e.ts | 2 +- 33 files changed, 131 insertions(+), 142 deletions(-) diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts index aac79a479f..cf11c992d5 100644 --- a/core/src/components/datetime/test/basic/datetime.e2e.ts +++ b/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(''); 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(''); 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( diff --git a/core/src/components/datetime/test/disable-dates/datetime.e2e.ts b/core/src/components/datetime/test/disable-dates/datetime.e2e.ts index a280597fc5..23bc14787e 100644 --- a/core/src/components/datetime/test/disable-dates/datetime.e2e.ts +++ b/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 }) => { diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts b/core/src/components/datetime/test/display/datetime.e2e.ts index 6c2954344a..fb553ce76e 100644 --- a/core/src/components/datetime/test/display/datetime.e2e.ts +++ b/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'); }); }); }); diff --git a/core/src/components/datetime/test/hour-cycle/datetime.e2e.ts b/core/src/components/datetime/test/hour-cycle/datetime.e2e.ts index d4496335b0..fe6d38dacd 100644 --- a/core/src/components/datetime/test/hour-cycle/datetime.e2e.ts +++ b/core/src/components/datetime/test/hour-cycle/datetime.e2e.ts @@ -8,7 +8,7 @@ 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(` @@ -16,6 +16,6 @@ test.describe('datetime: hour cycle', () => { `); const timeButton = page.locator('ion-datetime .time-body'); - expect(timeButton).toHaveText('4:30 PM'); + await expect(timeButton).toHaveText('4:30 PM'); }); }); diff --git a/core/src/components/datetime/test/minmax/datetime.e2e.ts b/core/src/components/datetime/test/minmax/datetime.e2e.ts index badc50abd4..aae8b679f4 100644 --- a/core/src/components/datetime/test/minmax/datetime.e2e.ts +++ b/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 }) => { diff --git a/core/src/components/datetime/test/month-year-picker/datetime.e2e.ts b/core/src/components/datetime/test/month-year-picker/datetime.e2e.ts index 4aa7a3d427..78999fac2a 100644 --- a/core/src/components/datetime/test/month-year-picker/datetime.e2e.ts +++ b/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(); }); }); diff --git a/core/src/components/datetime/test/set-value/datetime.e2e.ts b/core/src/components/datetime/test/set-value/datetime.e2e.ts index ae83e80e81..3c5fc86f22 100644 --- a/core/src/components/datetime/test/set-value/datetime.e2e.ts +++ b/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'); }); }); 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 index fbf4a1b1dd..de79e99ffc 100644 --- a/core/src/components/datetime/test/sub-pixel-width/datetime.e2e.ts +++ b/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'); }); }); diff --git a/core/src/components/datetime/test/time-label/datetime.e2e.ts b/core/src/components/datetime/test/time-label/datetime.e2e.ts index befa762127..79345e3ad3 100644 --- a/core/src/components/datetime/test/time-label/datetime.e2e.ts +++ b/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(''); }); }); diff --git a/core/src/components/datetime/test/values/datetime.e2e.ts b/core/src/components/datetime/test/values/datetime.e2e.ts index 4c24edba7a..788e5692f7 100644 --- a/core/src/components/datetime/test/values/datetime.e2e.ts +++ b/core/src/components/datetime/test/values/datetime.e2e.ts @@ -15,7 +15,7 @@ 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(` @@ -23,7 +23,7 @@ test.describe('datetime: values', () => { `); 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(` @@ -31,7 +31,7 @@ test.describe('datetime: values', () => { `); 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(` @@ -39,7 +39,7 @@ test.describe('datetime: values', () => { `); 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(` @@ -47,6 +47,6 @@ test.describe('datetime: values', () => { `); 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']); }); }); 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 index 41c2cdd84d..08cccc1ba3 100644 --- a/core/src/components/datetime/test/zoom/datetime-zoom-in.e2e.ts +++ b/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'); }); }); 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 index 11537e2821..c4e131417b 100644 --- a/core/src/components/datetime/test/zoom/datetime-zoom-out.e2e.ts +++ b/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'); }); }); diff --git a/core/src/components/img/test/draggable/img.e2e.ts b/core/src/components/img/test/draggable/img.e2e.ts index 945c1761eb..e98548114c 100644 --- a/core/src/components/img/test/draggable/img.e2e.ts +++ b/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', ''); }); }); diff --git a/core/src/components/loading/test/basic/loading.e2e.ts b/core/src/components/loading/test/basic/loading.e2e.ts index 08af2d8f57..e386ed6223 100644 --- a/core/src/components/loading/test/basic/loading.e2e.ts +++ b/core/src/components/loading/test/basic/loading.e2e.ts @@ -24,7 +24,7 @@ test.describe('loading: basic', () => { await ionLoadingDidDismiss.next(); - expect(loading).toBeHidden(); + await expect(loading).toBeHidden(); }; test('should open a basic loader', async ({ page }) => { await runVisualTest(page, '#basic-loading', 'basic'); @@ -54,7 +54,7 @@ test.describe('loading: basic', () => { await ionLoadingDidPresent.next(); const loading = await page.locator('ion-loading'); - expect(loading).toHaveAttribute('data-testid', 'basic-loading'); + await expect(loading).toHaveAttribute('data-testid', 'basic-loading'); }); }); test.describe('loading: focus trapping', () => { @@ -73,13 +73,13 @@ test.describe('loading: basic', () => { await page.keyboard.press('Tab'); - expect(button).toBeFocused(); + await expect(button).toBeFocused(); await page.keyboard.down('Shift'); await page.keyboard.press('Tab'); await page.keyboard.up('Shift'); - expect(button).toBeFocused(); + await expect(button).toBeFocused(); await page.keyboard.press('Tab'); @@ -87,7 +87,7 @@ test.describe('loading: basic', () => { await page.keyboard.up('Alt'); } - expect(button).toBeFocused(); + await expect(button).toBeFocused(); }); }); }); diff --git a/core/src/components/loading/test/standalone/loading.e2e.ts b/core/src/components/loading/test/standalone/loading.e2e.ts index 260a9362ea..fb3fa63cd3 100644 --- a/core/src/components/loading/test/standalone/loading.e2e.ts +++ b/core/src/components/loading/test/standalone/loading.e2e.ts @@ -20,6 +20,6 @@ test.describe('loading: standalone', () => { await ionLoadingDidDismiss.next(); - expect(loading).toBeHidden(); + await expect(loading).toBeHidden(); }); }); diff --git a/core/src/components/modal/test/basic/modal.e2e.ts b/core/src/components/modal/test/basic/modal.e2e.ts index 0d1114ab84..29e6727093 100644 --- a/core/src/components/modal/test/basic/modal.e2e.ts +++ b/core/src/components/modal/test/basic/modal.e2e.ts @@ -3,7 +3,18 @@ import { test, Viewports } from '@utils/test/playwright'; import type { E2EPage } from '@utils/test/playwright'; test.describe('modal: focus trapping', () => { + test.beforeEach(async ({ browserName }, testInfo) => { + test.skip(testInfo.project.metadata.rtl === true, 'This does not test LTR vs. RTL layout.'); + test.skip(browserName === 'firefox', 'Firefox incorrectly allows keyboard focus to move to ion-content'); + }); test('focus should be trapped inside of modal', async ({ page, browserName }) => { + /** + * The default WebKit behavior is to + * highlight items on webpages with Option-Tab. + * See "Press Tab to highlight each item on a webpage" + * in Safari Preferences > Advanced. + */ + const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab'; await page.goto('/src/components/modal/test/basic'); const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); @@ -11,32 +22,17 @@ test.describe('modal: focus trapping', () => { await ionModalDidPresent.next(); - /** - * The default WebKit behavior is to - * highlight items on webpages with Option-Tab. - * See "Press Tab to highlight each item on a webpage" - * in Safari Preferences > Advanced. - */ - if (browserName === 'webkit') { - await page.keyboard.down('Alt'); - } - await page.keyboard.press('Tab'); + const dismissButton = page.locator('ion-button.dismiss'); - const dismissButton = await page.locator('ion-button.dismiss'); - expect(dismissButton).toBeFocused(); + await page.keyboard.press(tabKey); + await expect(dismissButton).toBeFocused(); - await page.keyboard.down('Shift'); - await page.keyboard.press('Tab'); - await page.keyboard.up('Shift'); + await page.keyboard.press(`Shift+${tabKey}`); - expect(dismissButton).toBeFocused(); - await page.keyboard.press('Tab'); + await expect(dismissButton).toBeFocused(); - if (browserName === 'webkit') { - await page.keyboard.up('Alt'); - } - - expect(dismissButton).toBeFocused(); + await page.keyboard.press(tabKey); + await expect(dismissButton).toBeFocused(); }); test('focus should be returned to previously focused element when dismissing modal', async ({ @@ -47,18 +43,11 @@ test.describe('modal: focus trapping', () => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); const modalButton = await page.locator('#basic-modal'); - - if (browserName === 'webkit') { - await page.keyboard.down('Alt'); - } + const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab'; // Focus #basic-modal button - await page.keyboard.press('Tab'); - expect(modalButton).toBeFocused(); - - if (browserName === 'webkit') { - await page.keyboard.up('Alt'); - } + await page.keyboard.press(tabKey); + await expect(modalButton).toBeFocused(); await page.keyboard.press('Space'); await ionModalDidPresent.next(); @@ -66,7 +55,7 @@ test.describe('modal: focus trapping', () => { await page.keyboard.press('Escape'); await ionModalDidDismiss.next(); - expect(modalButton).toBeFocused(); + await expect(modalButton).toBeFocused(); }); }); diff --git a/core/src/components/modal/test/card-nav/modal.e2e.ts b/core/src/components/modal/test/card-nav/modal.e2e.ts index 8918d34664..2c3466d329 100644 --- a/core/src/components/modal/test/card-nav/modal.e2e.ts +++ b/core/src/components/modal/test/card-nav/modal.e2e.ts @@ -27,7 +27,7 @@ test.describe('card modal - nav', () => { await ionNavDidChange.next(); const pageOne = page.locator('page-one'); - expect(pageOne).toHaveClass(/ion-page-hidden/); + await expect(pageOne).toHaveClass(/ion-page-hidden/); const content = page.locator('.page-two-content'); diff --git a/core/src/components/modal/test/card-refresher/modal.e2e.ts b/core/src/components/modal/test/card-refresher/modal.e2e.ts index 2c6f8521fb..9567d15889 100644 --- a/core/src/components/modal/test/card-refresher/modal.e2e.ts +++ b/core/src/components/modal/test/card-refresher/modal.e2e.ts @@ -20,6 +20,6 @@ test.describe('card modal - with refresher', () => { await content.waitForElementState('stable'); - expect(modal).toBeVisible(); + await expect(modal).toBeVisible(); }); }); diff --git a/core/src/components/modal/test/card-scroll-target/modal.e2e.ts b/core/src/components/modal/test/card-scroll-target/modal.e2e.ts index 1a04472cbd..2d3eb50097 100644 --- a/core/src/components/modal/test/card-scroll-target/modal.e2e.ts +++ b/core/src/components/modal/test/card-scroll-target/modal.e2e.ts @@ -35,7 +35,7 @@ test.describe('card modal - scroll target', () => { await content.waitForElementState('stable'); - expect(modal).toBeVisible(); + await expect(modal).toBeVisible(); }); test('content should be scrollable after gesture ends', async ({ page }) => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); @@ -46,7 +46,7 @@ test.describe('card modal - scroll target', () => { const content = await page.locator('ion-modal .ion-content-scroll-host'); await dragElementBy(content, page, 0, 20); - expect(content).not.toHaveCSS('overflow', 'hidden'); + await expect(content).not.toHaveCSS('overflow', 'hidden'); }); }); }); diff --git a/core/src/components/modal/test/card/modal.e2e.ts b/core/src/components/modal/test/card/modal.e2e.ts index 1a888e5281..048211f748 100644 --- a/core/src/components/modal/test/card/modal.e2e.ts +++ b/core/src/components/modal/test/card/modal.e2e.ts @@ -55,7 +55,7 @@ test.describe('card modal', () => { await cardModalPage.swipeToCloseModal('ion-modal ion-content', false); await content.waitForElementState('stable'); - expect(modal).toBeVisible(); + await expect(modal).toBeVisible(); }); test('it should not swipe to close when swiped on the content but the content is scrolled even when content is replaced', async ({ page, @@ -70,14 +70,14 @@ test.describe('card modal', () => { await cardModalPage.swipeToCloseModal('ion-modal ion-content', false); await content.waitForElementState('stable'); - expect(modal).toBeVisible(); + await expect(modal).toBeVisible(); }); test('content should be scrollable after gesture ends', async ({ page }) => { await cardModalPage.openModalByTrigger('#card'); await cardModalPage.swipeToCloseModal('ion-modal ion-content', false, 20); const content = await page.locator('ion-modal ion-content'); - expect(content).toHaveJSProperty('scrollY', true); + await expect(content).toHaveJSProperty('scrollY', true); }); }); test.describe('card modal: rendering - tablet', () => { @@ -134,7 +134,7 @@ test.describe('card modal', () => { await cardModalPage.swipeToCloseModal('ion-modal ion-content', false); await content.waitForElementState('stable'); - expect(modal).toBeVisible(); + await expect(modal).toBeVisible(); }); test('it should not swipe to close when swiped on the content but the content is scrolled even when content is replaced', async ({ page, @@ -149,14 +149,14 @@ test.describe('card modal', () => { await cardModalPage.swipeToCloseModal('ion-modal ion-content', false); await content.waitForElementState('stable'); - expect(modal).toBeVisible(); + await expect(modal).toBeVisible(); }); test('content should be scrollable after gesture ends', async ({ page }) => { await cardModalPage.openModalByTrigger('#card'); await cardModalPage.swipeToCloseModal('ion-modal ion-content', false, 20); const content = await page.locator('ion-modal ion-content'); - expect(content).toHaveJSProperty('scrollY', true); + await expect(content).toHaveJSProperty('scrollY', true); }); }); }); diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts b/core/src/components/modal/test/sheet/modal.e2e.ts index b1bbb24a66..e65a2268dc 100644 --- a/core/src/components/modal/test/sheet/modal.e2e.ts +++ b/core/src/components/modal/test/sheet/modal.e2e.ts @@ -50,7 +50,7 @@ test.describe('sheet modal: backdrop', () => { const input = await page.locator('#root-input input'); await input.click(); - expect(input).toBeFocused(); + await expect(input).toBeFocused(); }); }); diff --git a/core/src/components/modal/test/trigger/modal.e2e.ts b/core/src/components/modal/test/trigger/modal.e2e.ts index e42f43688c..492d85098d 100644 --- a/core/src/components/modal/test/trigger/modal.e2e.ts +++ b/core/src/components/modal/test/trigger/modal.e2e.ts @@ -11,6 +11,6 @@ test.describe('modal: trigger', () => { await ionModalDidPresent.next(); const modal = await page.locator('.left-click-modal'); - expect(modal).toBeVisible(); + await expect(modal).toBeVisible(); }); }); diff --git a/core/src/components/picker-column-internal/test/basic/picker-column-internal.e2e.ts b/core/src/components/picker-column-internal/test/basic/picker-column-internal.e2e.ts index 10d9296375..c0d188d540 100644 --- a/core/src/components/picker-column-internal/test/basic/picker-column-internal.e2e.ts +++ b/core/src/components/picker-column-internal/test/basic/picker-column-internal.e2e.ts @@ -8,17 +8,17 @@ test.describe('picker-column-internal', () => { test('should render a picker item for each item', async ({ page }) => { const columns = page.locator('ion-picker-column-internal .picker-item:not(.picker-item-empty)'); - expect(columns).toHaveCount(24); + await expect(columns).toHaveCount(24); }); test('should render 6 empty picker items', async ({ page }) => { const columns = page.locator('ion-picker-column-internal .picker-item-empty'); - expect(columns).toHaveCount(6); + await expect(columns).toHaveCount(6); }); test('should not have an active item when value is not set', async ({ page }) => { const activeColumn = page.locator('ion-picker-column-internal .picker-item-active'); - expect(activeColumn).toHaveCount(0); + await expect(activeColumn).toHaveCount(0); }); test('should have an active item when value is set', async ({ page }) => { diff --git a/core/src/components/popover/test/basic/popover.e2e.ts b/core/src/components/popover/test/basic/popover.e2e.ts index de87579f2e..5e905e16d8 100644 --- a/core/src/components/popover/test/basic/popover.e2e.ts +++ b/core/src/components/popover/test/basic/popover.e2e.ts @@ -28,7 +28,7 @@ test.describe('popover: htmlAttributes', async () => { await openPopover(page, 'basic-popover'); const alert = page.locator('ion-popover'); - expect(alert).toHaveAttribute('data-testid', 'basic-popover'); + await expect(alert).toHaveAttribute('data-testid', 'basic-popover'); }); }); diff --git a/core/src/components/popover/test/dismissOnSelect/popover.e2e.ts b/core/src/components/popover/test/dismissOnSelect/popover.e2e.ts index b6e3cf83c5..e3b814cfd5 100644 --- a/core/src/components/popover/test/dismissOnSelect/popover.e2e.ts +++ b/core/src/components/popover/test/dismissOnSelect/popover.e2e.ts @@ -20,7 +20,7 @@ test.describe('popover: dismissOnSelect', async () => { await hoverTrigger.click(); // ensure parent popover is still open - expect(popover).toBeVisible(); + await expect(popover).toBeVisible(); }); test('should not dismiss a popover when clicking a click trigger', async ({ page, browserName }) => { @@ -41,6 +41,6 @@ test.describe('popover: dismissOnSelect', async () => { await ionPopoverDidPresent.next(); // wait for click popover to open // ensure parent popover is still open - expect(popover).toBeVisible(); + await expect(popover).toBeVisible(); }); }); diff --git a/core/src/components/popover/test/inline/popover.e2e.ts b/core/src/components/popover/test/inline/popover.e2e.ts index ae04ce7b5a..10c682f2ec 100644 --- a/core/src/components/popover/test/inline/popover.e2e.ts +++ b/core/src/components/popover/test/inline/popover.e2e.ts @@ -19,12 +19,12 @@ const testPopover = async (page: E2EPage, buttonID: string) => { const popover = page.locator('ion-popover'); await openPopover(page, buttonID); - expect(popover).toBeVisible(); + await expect(popover).toBeVisible(); await closePopover(page); - expect(popover).not.toBeVisible(); + await expect(popover).not.toBeVisible(); // ensure popover can be opened multiple times await openPopover(page, buttonID); - expect(popover).toBeVisible(); + await expect(popover).toBeVisible(); }; diff --git a/core/src/components/popover/test/nested/popover.e2e.ts b/core/src/components/popover/test/nested/popover.e2e.ts index ca14fca12b..b4ca032496 100644 --- a/core/src/components/popover/test/nested/popover.e2e.ts +++ b/core/src/components/popover/test/nested/popover.e2e.ts @@ -13,7 +13,7 @@ test.describe('popover: nested', async () => { await ionPopoverDidPresent.next(); const parentPopover = page.locator('.parent-popover'); - expect(parentPopover).not.toHaveClass(/overlay-hidden/); + await expect(parentPopover).not.toHaveClass(/overlay-hidden/); // note: alignment="start" is needed on popovers so all buttons are on-screen in iOS mode // otherwise this one goes off the top of the screen and tests hang/fail @@ -21,7 +21,7 @@ test.describe('popover: nested', async () => { await ionPopoverDidPresent.next(); const nestedPopover = page.locator('.child-popover-one'); - expect(nestedPopover).not.toHaveClass(/overlay-hidden/); + await expect(nestedPopover).not.toHaveClass(/overlay-hidden/); await page.setIonViewport(); expect(await page.screenshot()).toMatchSnapshot(`popover-nested-${page.getSnapshotSettings()}.png`); @@ -41,7 +41,7 @@ test.describe('popover: nested', async () => { await ionPopoverDidDismiss.next(); const nestedPopover = await page.locator('.child-popover-one'); - expect(nestedPopover).toHaveClass(/overlay-hidden/); + await expect(nestedPopover).toHaveClass(/overlay-hidden/); }); test('should render multiple levels of nesting correctly', async ({ page }) => { @@ -57,7 +57,7 @@ test.describe('popover: nested', async () => { await ionPopoverDidPresent.next(); const nestedPopover = page.locator('.child-popover-three'); - expect(nestedPopover).not.toHaveClass(/overlay-hidden/); + await expect(nestedPopover).not.toHaveClass(/overlay-hidden/); await page.setIonViewport(); expect(await page.screenshot()).toMatchSnapshot(`popover-nested-multiple-${page.getSnapshotSettings()}.png`); @@ -81,10 +81,10 @@ test.describe('popover: nested', async () => { await ionPopoverDidDismiss.next(); const nestedPopoverOne = page.locator('.child-popover-one'); - expect(nestedPopoverOne).toHaveClass(/overlay-hidden/); + await expect(nestedPopoverOne).toHaveClass(/overlay-hidden/); const nestedPopoverTwo = page.locator('.child-popover-three'); - expect(nestedPopoverTwo).toHaveClass(/overlay-hidden/); + await expect(nestedPopoverTwo).toHaveClass(/overlay-hidden/); }); test('should dismiss sibling nested popover when another sibling popover is opened', async ({ page }) => { @@ -103,7 +103,7 @@ test.describe('popover: nested', async () => { const openWithPopover = page.locator('.child-popover-one'); const sharePopover = page.locator('.child-popover-two'); - expect(openWithPopover).toHaveClass(/overlay-hidden/); - expect(sharePopover).not.toHaveClass(/overlay-hidden/); + await expect(openWithPopover).toHaveClass(/overlay-hidden/); + await expect(sharePopover).not.toHaveClass(/overlay-hidden/); }); }); diff --git a/core/src/components/popover/test/trigger/popover.e2e.ts b/core/src/components/popover/test/trigger/popover.e2e.ts index 836498acb7..2f691f1841 100644 --- a/core/src/components/popover/test/trigger/popover.e2e.ts +++ b/core/src/components/popover/test/trigger/popover.e2e.ts @@ -36,5 +36,5 @@ test.describe('popover: trigger', async () => { const checkPopover = async (page: E2EPage, popoverSelector: string) => { const popover = page.locator(popoverSelector); - expect(popover).toBeVisible(); + await expect(popover).toBeVisible(); }; diff --git a/core/src/components/select/test/async/select.e2e.ts b/core/src/components/select/test/async/select.e2e.ts index fe72d9dcb8..783c857300 100644 --- a/core/src/components/select/test/async/select.e2e.ts +++ b/core/src/components/select/test/async/select.e2e.ts @@ -12,6 +12,6 @@ test.describe('select: async', () => { await selectValueSet.next(); - expect(select).toHaveJSProperty('value', 'bird'); + await expect(select).toHaveJSProperty('value', 'bird'); }); }); diff --git a/core/src/components/select/test/basic/select.e2e.ts b/core/src/components/select/test/basic/select.e2e.ts index 7a4b863bf8..e2cba013a7 100644 --- a/core/src/components/select/test/basic/select.e2e.ts +++ b/core/src/components/select/test/basic/select.e2e.ts @@ -82,7 +82,7 @@ test.describe('select: basic', () => { if (browserName !== 'firefox') { // select has no value, so first option should be focused by default const popoverOption1 = await popover.locator('.select-interface-option:first-of-type ion-radio'); - expect(popoverOption1).toBeFocused(); + await expect(popoverOption1).toBeFocused(); } expect(await page.screenshot({ animations: 'disabled' })).toMatchSnapshot( diff --git a/core/src/components/select/test/compare-with/select.e2e.ts b/core/src/components/select/test/compare-with/select.e2e.ts index 82c03ff79c..09534ca8d1 100644 --- a/core/src/components/select/test/compare-with/select.e2e.ts +++ b/core/src/components/select/test/compare-with/select.e2e.ts @@ -10,13 +10,13 @@ test.describe('select: compare-with', () => { const multipleSelect = await page.locator('#multiple'); const singleSelect = await page.locator('#single'); - expect(multipleSelect).toHaveJSProperty('value', [ + await expect(multipleSelect).toHaveJSProperty('value', [ { label: 'selected by default', value: '1', }, ]); - expect(singleSelect).toHaveJSProperty('value', { + await expect(singleSelect).toHaveJSProperty('value', { label: 'selected by default', value: '1', }); diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts b/core/src/components/toggle/test/basic/toggle.e2e.ts index 6900e39e76..26fed21775 100644 --- a/core/src/components/toggle/test/basic/toggle.e2e.ts +++ b/core/src/components/toggle/test/basic/toggle.e2e.ts @@ -15,20 +15,20 @@ test.describe('toggle: basic', () => { test('should have proper class and aria role when checked', async ({ page }) => { const toggle = page.locator('#orange'); - expect(toggle).not.toHaveClass(/toggle-checked/); - expect(toggle).toHaveAttribute('aria-checked', 'false'); + await expect(toggle).not.toHaveClass(/toggle-checked/); + await expect(toggle).toHaveAttribute('aria-checked', 'false'); await toggle.click(); await page.waitForChanges(); - expect(toggle).toHaveClass(/toggle-checked/); - expect(toggle).toHaveAttribute('aria-checked', 'true'); + await expect(toggle).toHaveClass(/toggle-checked/); + await expect(toggle).toHaveAttribute('aria-checked', 'true'); await toggle.click(); await page.waitForChanges(); - expect(toggle).not.toHaveClass(/toggle-checked/); - expect(toggle).toHaveAttribute('aria-checked', 'false'); + await expect(toggle).not.toHaveClass(/toggle-checked/); + await expect(toggle).toHaveAttribute('aria-checked', 'false'); }); test('should fire change event with detail', async ({ page }) => { @@ -65,15 +65,15 @@ test.describe('toggle: basic', () => { test('should pass properties down to hidden input', async ({ page }) => { const toggle = page.locator('#grapeChecked'); - expect(toggle).toBeDisabled(); - expect(toggle).toHaveJSProperty('value', 'grape'); - expect(toggle).toHaveJSProperty('name', 'grape'); + await expect(toggle).toBeDisabled(); + await expect(toggle).toHaveJSProperty('value', 'grape'); + await expect(toggle).toHaveJSProperty('name', 'grape'); const hiddenInput = page.locator('#grapeChecked input[type=hidden]'); - expect(hiddenInput).toBeDisabled(); - expect(hiddenInput).toHaveJSProperty('value', 'grape'); - expect(hiddenInput).toHaveJSProperty('name', 'grape'); + await expect(hiddenInput).toBeDisabled(); + await expect(hiddenInput).toHaveJSProperty('value', 'grape'); + await expect(hiddenInput).toHaveJSProperty('name', 'grape'); await toggle.evaluate((el: HTMLIonToggleElement) => { el.disabled = false; @@ -84,8 +84,8 @@ test.describe('toggle: basic', () => { await page.waitForChanges(); - expect(hiddenInput).not.toBeDisabled(); - expect(hiddenInput).toHaveJSProperty('name', 'new-name'); + await expect(hiddenInput).not.toBeDisabled(); + await expect(hiddenInput).toHaveJSProperty('name', 'new-name'); // shouldn't have a value because it's unchecked // note: using toHaveJSProperty to check empty string triggers error for some reason diff --git a/core/src/utils/test/overlays/overlays.e2e.ts b/core/src/utils/test/overlays/overlays.e2e.ts index a6eefce4c2..5c125f324c 100644 --- a/core/src/utils/test/overlays/overlays.e2e.ts +++ b/core/src/utils/test/overlays/overlays.e2e.ts @@ -24,6 +24,6 @@ test.describe('overlays: focus', () => { await ionModalDidPresent.next(); await page.waitForChanges(); - expect(page.locator('ion-input input')).toBeFocused(); + await expect(page.locator('ion-input input')).toBeFocused(); }); });