javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(all): add await to relevant assertions (#25527)

Browse Source
This commit is contained in:
Liam DeBeasi
2022-06-24 12:54:02 -04:00
committed by GitHub
parent d65e5a71b0
commit 50d806ee6f
33 changed files with 131 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
core/src/components/datetime/test/basic/datetime.e2e.ts
View File

@ -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(

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

@ -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 }) => {

4
core/src/components/datetime/test/display/datetime.e2e.ts
View File

@ -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');
});
});
});

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

@ -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');
});
});

26
core/src/components/datetime/test/minmax/datetime.e2e.ts
View File

@ -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 }) => {

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

@ -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();
});
});

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

@ -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');
});
});

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

@ -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');
});
});

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

@ -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('');
});
});

10
core/src/components/datetime/test/values/datetime.e2e.ts
View File

@ -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']);
});
});

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

@ -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');
});
});

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

@ -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');
});
});

6
core/src/components/img/test/draggable/img.e2e.ts
View File

@ -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', '');
});
});

10
core/src/components/loading/test/basic/loading.e2e.ts
View File

@ -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();
});
});
});

2
core/src/components/loading/test/standalone/loading.e2e.ts
View File

@ -20,6 +20,6 @@ test.describe('loading: standalone', () => {
await ionLoadingDidDismiss.next();
expect(loading).toBeHidden();
await expect(loading).toBeHidden();
});
});

55
core/src/components/modal/test/basic/modal.e2e.ts
View File

@ -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();
});
});

2
core/src/components/modal/test/card-nav/modal.e2e.ts
View File

@ -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');

2
core/src/components/modal/test/card-refresher/modal.e2e.ts
View File

@ -20,6 +20,6 @@ test.describe('card modal - with refresher', () => {
await content.waitForElementState('stable');
expect(modal).toBeVisible();
await expect(modal).toBeVisible();
});
});

4
core/src/components/modal/test/card-scroll-target/modal.e2e.ts
View File

@ -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');
});
});
});

12
core/src/components/modal/test/card/modal.e2e.ts
View File

@ -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);
});
});
});

2
core/src/components/modal/test/sheet/modal.e2e.ts
View File

@ -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();
});
});

2
core/src/components/modal/test/trigger/modal.e2e.ts
View File

@ -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();
});
});

6
core/src/components/picker-column-internal/test/basic/picker-column-internal.e2e.ts
View File

@ -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 }) => {

2
core/src/components/popover/test/basic/popover.e2e.ts
View File

@ -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');
});
});

4
core/src/components/popover/test/dismissOnSelect/popover.e2e.ts
View File

@ -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();
});
});

6
core/src/components/popover/test/inline/popover.e2e.ts
View File

@ -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();
};

16
core/src/components/popover/test/nested/popover.e2e.ts
View File

@ -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/);
});
});

2
core/src/components/popover/test/trigger/popover.e2e.ts
View File

@ -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();
};

2
core/src/components/select/test/async/select.e2e.ts
View File

@ -12,6 +12,6 @@ test.describe('select: async', () => {
await selectValueSet.next();
expect(select).toHaveJSProperty('value', 'bird');
await expect(select).toHaveJSProperty('value', 'bird');
});
});

2
core/src/components/select/test/basic/select.e2e.ts
View File

@ -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(

4
core/src/components/select/test/compare-with/select.e2e.ts
View File

@ -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',
});

28
core/src/components/toggle/test/basic/toggle.e2e.ts
View File

@ -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

2
core/src/utils/test/overlays/overlays.e2e.ts
View File

@ -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();
});
});