mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
test(many): use web-first assertions (#27113)
<!-- Please refer to our contributing documentation for any questions on submitting a pull request, or let us know here if you need any help: https://ionicframework.com/docs/building/contributing --> <!-- Some docs updates need to be made in the `ionic-docs` repo, in a separate PR. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation for details. --> <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> <!-- Issues are required for both bug fixes and features. --> Issue URL: N/A Playwright recommends using Locators with web-first assertions instead of using `waitForSelector`: https://playwright.dev/docs/api/class-frame#frame-wait-for-selector ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Removes waitForSelector usages for checking if components are visible in favor of the `toBeVisible` or `toBeHidden` assertions. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->
This commit is contained in:
@ -1,3 +1,4 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { test } from '@utils/test/playwright';
|
||||
|
||||
test.describe('modal: isOpen', () => {
|
||||
@ -9,22 +10,25 @@ test.describe('modal: isOpen', () => {
|
||||
|
||||
test('should open the modal', async ({ page }) => {
|
||||
const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
|
||||
const modal = page.locator('ion-modal');
|
||||
|
||||
await page.click('#default');
|
||||
|
||||
await ionModalDidPresent.next();
|
||||
await page.waitForSelector('ion-modal', { state: 'visible' });
|
||||
await expect(modal).toBeVisible();
|
||||
});
|
||||
|
||||
test('should open the modal then close after a timeout', async ({ page }) => {
|
||||
const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
|
||||
const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
|
||||
const modal = page.locator('ion-modal');
|
||||
|
||||
await page.click('#timeout');
|
||||
|
||||
await ionModalDidPresent.next();
|
||||
await page.waitForSelector('ion-modal', { state: 'visible' });
|
||||
await expect(modal).toBeVisible();
|
||||
|
||||
await ionModalDidDismiss.next();
|
||||
|
||||
await page.waitForSelector('ion-modal', { state: 'hidden' });
|
||||
await expect(modal).toBeHidden();
|
||||
});
|
||||
});
|
||||
|
||||
@ -33,6 +33,7 @@ test.describe('sheet modal: backdrop', () => {
|
||||
});
|
||||
test('should present another sheet modal when clicking an inactive backdrop', async ({ page }) => {
|
||||
const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
|
||||
const modal = page.locator('.custom-height');
|
||||
|
||||
await page.click('#backdrop-inactive');
|
||||
await ionModalDidPresent.next();
|
||||
@ -40,7 +41,7 @@ test.describe('sheet modal: backdrop', () => {
|
||||
await page.click('#custom-height-modal');
|
||||
await ionModalDidPresent.next();
|
||||
|
||||
await page.waitForSelector('.custom-height', { state: 'visible' });
|
||||
await expect(modal).toBeVisible();
|
||||
});
|
||||
test('input outside sheet modal should be focusable when backdrop is inactive', async ({ page }) => {
|
||||
const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
|
||||
|
||||
Reference in New Issue
Block a user