mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 15:51:16 +08:00
test(many): replace waitForSelector with waitFor (#28888)
Issue number: N/A --------- <!-- 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. --> There are some tests that use Playwright's `waitForSelector` [function](https://playwright.dev/docs/api/class-page#page-wait-for-selector). However, Playwright has informed the community to not use this function by labeling it as [discouraged](https://playwright.dev/docs/api/class-page#page-wait-for-selector). ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Replaced `waitForSelector` with the [recommended](https://playwright.dev/docs/api/class-page#page-wait-for-selector) `waitFor` [function](https://playwright.dev/docs/api/class-locator#locator-wait-for). ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> N/A
This commit is contained in:
Maria Hutt
@ -57,7 +57,7 @@ configs({ modes: ['md'] }).forEach(({ config, screenshot, title }) => {
|
||||
await page.mouse.down();
|
||||
}
|
||||
|
||||
await page.waitForSelector('#default.ion-activated');
|
||||
await page.locator('#default.ion-activated').waitFor();
|
||||
|
||||
await expect(button).toHaveScreenshot(screenshot(`button-ripple-effect`));
|
||||
});
|
||||
|
||||
@ -15,7 +15,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
});
|
||||
test('should switch to a date-only view when the date button is clicked', async ({ page }) => {
|
||||
const datetime = page.locator('ion-datetime');
|
||||
@ -45,7 +45,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toContainText('Jan 1, 2022');
|
||||
await expect(page.locator('#time-button')).toContainText('6:30 AM');
|
||||
@ -58,7 +58,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toContainText('January 2022');
|
||||
await expect(page.locator('#time-button')).toBeHidden();
|
||||
@ -71,7 +71,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toContainText('2022');
|
||||
await expect(page.locator('#time-button')).toBeHidden();
|
||||
@ -84,7 +84,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toContainText('January');
|
||||
await expect(page.locator('#time-button')).toBeHidden();
|
||||
@ -97,7 +97,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#time-button')).toContainText('6:30 AM');
|
||||
await expect(page.locator('#date-button')).toBeHidden();
|
||||
@ -110,7 +110,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const dateTarget = page.locator('#date-button');
|
||||
@ -135,7 +135,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toContainText('January 2022');
|
||||
await expect(page.locator('#time-button')).toBeHidden();
|
||||
@ -153,7 +153,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toContainText('2022');
|
||||
await expect(page.locator('#time-button')).toBeHidden();
|
||||
@ -169,7 +169,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
/**
|
||||
* The entire text reads 1 ene 2022, but some browsers will add
|
||||
@ -187,7 +187,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#time-button')).toContainText('16:30');
|
||||
});
|
||||
@ -199,7 +199,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const timeTarget = page.locator('#time-button');
|
||||
await expect(timeTarget).toContainText('6:30');
|
||||
@ -223,7 +223,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toContainText('Jan 1, 2022 6:30 AM');
|
||||
await expect(page.locator('#time-button')).not.toBeVisible();
|
||||
@ -238,7 +238,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toContainText('Jan 1, 2022 6:30 AM');
|
||||
await expect(page.locator('#time-button')).not.toBeVisible();
|
||||
|
||||
@ -11,7 +11,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toBeDisabled();
|
||||
await expect(page.locator('#time-button')).toBeDisabled();
|
||||
@ -24,7 +24,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetimeButton = page.locator('ion-datetime-button');
|
||||
await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-disabled`));
|
||||
|
||||
@ -20,7 +20,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toContainText('3 days');
|
||||
});
|
||||
@ -32,7 +32,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toHaveText('0 days');
|
||||
});
|
||||
@ -49,7 +49,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toHaveText('Jun 1, 2022');
|
||||
});
|
||||
@ -69,7 +69,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toHaveText('Selected: 3');
|
||||
});
|
||||
@ -86,7 +86,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const ionValueChange = await page.spyOnEvent('ionValueChange');
|
||||
@ -111,7 +111,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page.locator('#date-button')).toHaveText('Jun 1, 2022');
|
||||
await expect(page.locator('#time-button')).toHaveText('4:30 PM');
|
||||
|
||||
@ -24,7 +24,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
|
||||
const container = page.locator('#container');
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(container).toHaveScreenshot(screenshot(`datetime-scale`));
|
||||
});
|
||||
@ -87,7 +87,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const clearButton = page.locator('#clear-button button');
|
||||
const selectedDay = page.locator('.calendar-day-active');
|
||||
@ -114,7 +114,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
|
||||
const calendarBody = page.locator('.calendar-body');
|
||||
await expect(calendarMonthYear).toHaveText('February 2022');
|
||||
|
||||
@ -110,7 +110,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const ionChange = await page.spyOnEvent('ionChange');
|
||||
|
||||
@ -255,7 +255,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const calendarBody = page.locator('ion-datetime .calendar-body');
|
||||
const calendarHeader = page.locator('ion-datetime .calendar-month-year');
|
||||
@ -275,7 +275,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const calendarBody = page.locator('ion-datetime .calendar-body');
|
||||
const calendarHeader = page.locator('ion-datetime .calendar-month-year');
|
||||
@ -297,7 +297,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const calendarBody = page.locator('ion-datetime .calendar-body');
|
||||
const calendarHeader = page.locator('ion-datetime .calendar-month-year');
|
||||
@ -331,7 +331,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const monthYearButton = page.locator('ion-datetime .calendar-month-year');
|
||||
const monthYearInterface = page.locator('ion-datetime .datetime-year');
|
||||
@ -349,7 +349,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
await datetime.evaluate((el: HTMLIonDatetimeElement) => el.style.removeProperty('display'));
|
||||
await expect(datetime).toBeVisible();
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
// month/year interface should be reset
|
||||
await expect(monthYearInterface).toBeHidden();
|
||||
@ -399,7 +399,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const selectedDay = page.locator('ion-datetime .calendar-day-active');
|
||||
|
||||
@ -428,7 +428,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const ionChange = await page.spyOnEvent('ionChange');
|
||||
const calendarButtons = page.locator('.calendar-day:not([disabled])');
|
||||
@ -447,7 +447,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const ionChange = await page.spyOnEvent('ionChange');
|
||||
const datetime = page.locator('ion-datetime');
|
||||
@ -487,7 +487,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(datetime.locator('.calendar-day-today')).toHaveScreenshot(
|
||||
screenshot(`datetime-today-calendar-button`)
|
||||
@ -517,7 +517,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`date-highlight-start-of-month`));
|
||||
|
||||
@ -543,7 +543,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
});
|
||||
|
||||
test('should switch the calendar header when moving to a month with a different number of days', async ({
|
||||
|
||||
@ -113,7 +113,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
test.describe('check example usages', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/src/components/datetime/test/disable-dates', config);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').first().waitFor();
|
||||
});
|
||||
|
||||
test('should disable a specific date', async ({ page }) => {
|
||||
|
||||
@ -27,7 +27,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`);
|
||||
|
||||
@ -42,7 +42,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
|
||||
await expect(calendarMonthYear.locator('button')).toBeDisabled();
|
||||
});
|
||||
@ -71,7 +71,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const clearButton = page.locator('#clear-button button');
|
||||
|
||||
@ -86,7 +86,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
|
||||
const calendarBody = page.locator('.calendar-body');
|
||||
await expect(calendarMonthYear).toHaveText('February 2022');
|
||||
|
||||
@ -15,7 +15,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-date-time`));
|
||||
});
|
||||
@ -26,7 +26,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-time-date`));
|
||||
});
|
||||
@ -37,7 +37,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-time`));
|
||||
});
|
||||
@ -48,7 +48,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-date`));
|
||||
});
|
||||
@ -69,7 +69,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-date-time`));
|
||||
});
|
||||
@ -80,7 +80,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-time-date`));
|
||||
});
|
||||
@ -91,7 +91,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-time`));
|
||||
});
|
||||
@ -102,7 +102,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-date`));
|
||||
});
|
||||
@ -119,7 +119,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
test('month selection should work after changing presentation', async ({ page }) => {
|
||||
await page.goto('/src/components/datetime/test/display', config);
|
||||
const ionWorkingPartsDidChange = await page.spyOnEvent('ionWorkingPartsDidChange');
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const select = page.locator('select#presentation');
|
||||
|
||||
|
||||
@ -95,7 +95,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetimeButtons = page.locator('ion-datetime .calendar-day:not([disabled])');
|
||||
|
||||
@ -111,7 +111,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetimeYear = page.locator('ion-datetime .year-column .picker-item[data-value="2022"]');
|
||||
|
||||
@ -147,7 +147,7 @@ class DatetimeLocaleFixture {
|
||||
|
||||
this.datetime = this.page.locator('ion-datetime');
|
||||
|
||||
await this.page.waitForSelector('.datetime-ready');
|
||||
await this.page.locator('.datetime-ready').waitFor();
|
||||
}
|
||||
|
||||
async expectLocalizedDatePicker(screenshot: ScreenshotFn) {
|
||||
|
||||
@ -36,7 +36,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
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)');
|
||||
@ -61,7 +61,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
await page.goto('/src/components/datetime/test/minmax', config);
|
||||
const calendarMonths = page.locator('ion-datetime#inside .calendar-month');
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').first().waitFor();
|
||||
|
||||
await expect(calendarMonths.nth(0)).not.toHaveClass(/calendar-month-disabled/);
|
||||
await expect(calendarMonths.nth(1)).not.toHaveClass(/calendar-month-disabled/);
|
||||
@ -70,7 +70,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
|
||||
test('datetime: minmax navigation disabled', async ({ page }) => {
|
||||
await page.goto('/src/components/datetime/test/minmax', config);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').first().waitFor();
|
||||
|
||||
const navButtons = page.locator('ion-datetime#outside .calendar-next-prev ion-button');
|
||||
|
||||
@ -80,7 +80,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
|
||||
test('datetime: min including day should not disable month', async ({ page }) => {
|
||||
await page.goto('/src/components/datetime/test/minmax', config);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').first().waitFor();
|
||||
|
||||
const calendarMonths = page.locator('ion-datetime#min-with-day .calendar-month');
|
||||
|
||||
@ -102,7 +102,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
|
||||
|
||||
@ -124,7 +124,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
test.describe('setting value outside bounds should show in-bounds month', () => {
|
||||
const testDisplayedMonth = async (page: E2EPage, content: string, expectedString = /June 2021/) => {
|
||||
await page.setContent(content, config);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
|
||||
await expect(calendarMonthYear).toHaveText(expectedString);
|
||||
@ -174,7 +174,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetimeMonthDidChange = await page.spyOnEvent('datetimeMonthDidChange');
|
||||
const eventButton = page.locator('button#bind');
|
||||
@ -260,7 +260,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const ionChange = await page.spyOnEvent('ionChange');
|
||||
@ -283,7 +283,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const ionChange = await page.spyOnEvent('ionChange');
|
||||
@ -311,7 +311,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
const monthColumnItems = page.locator('ion-datetime .month-column .picker-item:not(.picker-item-empty)');
|
||||
const ionChange = await page.spyOnEvent('ionChange');
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await monthColumnItems.nth(0).click(); // switch to January
|
||||
await ionChange.next();
|
||||
@ -346,7 +346,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
// Select Jan 10, 2022
|
||||
const maxDate = page.locator('ion-datetime .calendar-day[data-day="10"][data-month="1"][data-year="2022"]');
|
||||
|
||||
@ -8,7 +8,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
test.describe(title('datetime: month-year picker'), () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/src/components/datetime/test/month-year-picker', config);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').first().waitFor();
|
||||
});
|
||||
|
||||
test('should hide the footer when picker is open', async ({ page }) => {
|
||||
|
||||
@ -62,7 +62,7 @@ class DatetimeMultipleFixture {
|
||||
);
|
||||
|
||||
this.datetime = this.page.locator('ion-datetime');
|
||||
await this.page.waitForSelector('.datetime-ready');
|
||||
await this.page.locator('.datetime-ready').waitFor();
|
||||
|
||||
return this.datetime;
|
||||
}
|
||||
@ -304,7 +304,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector(`.datetime-ready`);
|
||||
await page.locator(`.datetime-ready`).waitFor();
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const header = datetime.locator('.datetime-selected-date');
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
await openDateTimeBtn.click();
|
||||
|
||||
await ionPopoverDidPresent.next();
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page).toHaveScreenshot(screenshot(`datetime-position-base`));
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page).toHaveScreenshot(screenshot(`datetime-wheel-date-diff`));
|
||||
});
|
||||
@ -34,7 +34,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page).toHaveScreenshot(screenshot(`datetime-wheel-date-time-diff`));
|
||||
});
|
||||
@ -45,7 +45,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await expect(page).toHaveScreenshot(screenshot(`datetime-wheel-time-date-diff`));
|
||||
});
|
||||
@ -56,7 +56,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
|
||||
@ -80,7 +80,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dayValues = page.locator('ion-datetime .day-column .picker-item[data-value]');
|
||||
expect(await dayValues.count()).toEqual(27);
|
||||
@ -93,7 +93,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dayValues = page.locator('ion-datetime .day-column .picker-item[data-value]');
|
||||
expect(await dayValues.count()).toEqual(1);
|
||||
@ -116,7 +116,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const disabledMonths = page.locator('.month-column .picker-item[disabled]');
|
||||
const disabledYears = page.locator('.year-column .picker-item[disabled]');
|
||||
@ -141,7 +141,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
|
||||
const yearValues = page.locator('.year-column .picker-item:not(.picker-item-empty)');
|
||||
@ -175,7 +175,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const ionChange = await page.spyOnEvent('ionChange');
|
||||
const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
|
||||
@ -209,7 +209,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const ionChange = await page.spyOnEvent('ionChange');
|
||||
const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
|
||||
@ -230,7 +230,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const ionChange = await page.spyOnEvent('ionChange');
|
||||
const yearValues = page.locator('.year-column .picker-item:not(.picker-item-empty)');
|
||||
@ -253,7 +253,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const datetime = page.locator('ion-datetime');
|
||||
|
||||
await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-05-25T12:40:00.000Z'));
|
||||
@ -285,7 +285,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
|
||||
const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
|
||||
@ -306,7 +306,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const columns = page.locator('ion-picker-column-internal');
|
||||
|
||||
@ -327,7 +327,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const columns = page.locator('ion-picker-column-internal');
|
||||
|
||||
@ -346,7 +346,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
|
||||
expect(await dayValues.count()).toEqual(57);
|
||||
@ -359,7 +359,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
|
||||
expect(await dayValues.count()).toEqual(41);
|
||||
@ -382,7 +382,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const disabledDates = page.locator('.date-column .picker-item[disabled]');
|
||||
|
||||
@ -403,7 +403,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
|
||||
|
||||
@ -424,7 +424,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
|
||||
|
||||
@ -444,7 +444,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dateColumn = page.locator('.date-column');
|
||||
const dateValues = dateColumn.locator('.picker-item:not(.picker-item-empty)');
|
||||
@ -474,7 +474,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
|
||||
|
||||
@ -494,7 +494,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
|
||||
|
||||
@ -511,7 +511,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const ionChange = await page.spyOnEvent('ionChange');
|
||||
const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
|
||||
@ -531,7 +531,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
|
||||
expect(await dayValues.count()).toEqual(57);
|
||||
@ -544,7 +544,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
|
||||
expect(await dayValues.count()).toEqual(41);
|
||||
@ -567,7 +567,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const disabledDates = page.locator('.date-column .picker-item[disabled]');
|
||||
|
||||
@ -588,7 +588,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
|
||||
|
||||
@ -609,7 +609,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
|
||||
|
||||
@ -629,7 +629,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dateColumn = page.locator('.date-column');
|
||||
const dateValues = dateColumn.locator('.picker-item:not(.picker-item-empty)');
|
||||
@ -659,7 +659,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
|
||||
|
||||
@ -679,7 +679,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
|
||||
|
||||
|
||||
@ -117,7 +117,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const monthYearButton = page.locator('ion-datetime .calendar-month-year');
|
||||
@ -189,7 +189,7 @@ class DatetimePresentationFixture {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await this.page.waitForSelector('.datetime-ready');
|
||||
await this.page.locator('.datetime-ready').waitFor();
|
||||
this.datetime = this.page.locator('ion-datetime');
|
||||
}
|
||||
|
||||
@ -214,7 +214,7 @@ class TimePickerFixture {
|
||||
`,
|
||||
config
|
||||
);
|
||||
await this.page.waitForSelector('.datetime-ready');
|
||||
await this.page.locator('.datetime-ready').waitFor();
|
||||
this.timePicker = this.page.locator('ion-datetime');
|
||||
}
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`);
|
||||
|
||||
@ -43,7 +43,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
|
||||
);
|
||||
|
||||
const ionChange = await page.spyOnEvent('ionChange');
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
|
||||
await expect(calendarMonthYear).toHaveText('February 2022');
|
||||
|
||||
@ -66,7 +66,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
|
||||
|
||||
const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
|
||||
const monthYearButton = page.locator('.calendar-month-year ion-item');
|
||||
await expect(calendarMonthYear).toHaveText('February 2022');
|
||||
@ -157,7 +157,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const clearButton = page.locator('#clear-button button');
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
test.describe(title('datetime: set-value'), () => {
|
||||
test('should update the active date when value is initially set', async ({ page }) => {
|
||||
await page.goto('/src/components/datetime/test/set-value', config);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-11-25T12:40:00.000Z'));
|
||||
@ -18,7 +18,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
|
||||
test('should update the active time when value is initially set', async ({ page }) => {
|
||||
await page.goto('/src/components/datetime/test/set-value', config);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-11-25T12:40:00.000Z'));
|
||||
@ -37,7 +37,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const activeDayButton = page.locator('.calendar-day-active');
|
||||
@ -53,7 +53,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
|
||||
test('should scroll to new month when value is initially set and then updated', async ({ page }) => {
|
||||
await page.goto('/src/components/datetime/test/set-value', config);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-05-25T12:40:00.000Z'));
|
||||
|
||||
@ -10,7 +10,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const timeLabel = page.locator('ion-datetime .time-header');
|
||||
await expect(timeLabel).toHaveText('Time');
|
||||
@ -22,7 +22,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const timeLabel = page.locator('ion-datetime .time-header');
|
||||
await expect(timeLabel).toHaveText('');
|
||||
|
||||
@ -10,7 +10,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
`,
|
||||
config
|
||||
);
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const items = page.locator('.calendar-day:not([disabled])');
|
||||
|
||||
@ -91,7 +91,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const minuteItems = page.locator(
|
||||
'ion-picker-column-internal:nth-of-type(2) .picker-item:not(.picker-item-empty)'
|
||||
@ -137,7 +137,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const monthItems = page.locator('.month-column .picker-item:not(.picker-item-empty)');
|
||||
await expect(monthItems).toHaveText(['January']);
|
||||
@ -169,7 +169,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
const todayButton = page.locator('.calendar-day[data-day="10"][data-month="10"][data-year="2022"]');
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
|
||||
await content.evaluate(async (el: HTMLIonContentElement) => {
|
||||
await el.scrollToBottom();
|
||||
});
|
||||
await page.waitForSelector('#largeTitleHeader.header-collapse-condense-inactive');
|
||||
await page.locator('#largeTitleHeader.header-collapse-condense-inactive').waitFor();
|
||||
|
||||
await expect(smallTitleHeader).toHaveScreenshot(screenshot(`header-condense-large-title-collapsed-diff`));
|
||||
|
||||
@ -30,7 +30,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
|
||||
await content.evaluate(async (el: HTMLIonContentElement) => {
|
||||
await el.scrollToTop();
|
||||
});
|
||||
await page.waitForSelector('#smallTitleHeader.header-collapse-condense-inactive');
|
||||
await page.locator('#smallTitleHeader.header-collapse-condense-inactive').waitFor();
|
||||
|
||||
await expect(smallTitleHeader).toHaveAttribute('aria-hidden', 'true');
|
||||
});
|
||||
|
||||
@ -15,7 +15,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
|
||||
await ionModalDidDismiss.next();
|
||||
|
||||
await page.waitForSelector('ion-modal', { state: 'detached' });
|
||||
await page.locator('ion-modal').waitFor({ state: 'detached' });
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -14,7 +14,7 @@ import { dragElementByYAxis } from '@utils/test/playwright';
|
||||
const pullToRefresh = async (page: E2EPage, selector = 'body') => {
|
||||
const target = page.locator(selector);
|
||||
|
||||
await page.waitForSelector('ion-refresher.hydrated', { state: 'attached' });
|
||||
await page.locator('ion-refresher.hydrated').waitFor({ state: 'attached' });
|
||||
|
||||
const ev = await page.spyOnEvent('ionRefreshComplete');
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
}
|
||||
|
||||
// Waits for the ripple effect to be added
|
||||
await page.waitForSelector('.ion-activated');
|
||||
await page.locator('.ion-activated').waitFor();
|
||||
|
||||
await expect(el).toHaveClass(/ion-activated/);
|
||||
});
|
||||
@ -56,7 +56,7 @@ const verifyRippleEffect = async (page: E2EPage, config: E2EPageOptions, selecto
|
||||
await page.mouse.down();
|
||||
}
|
||||
|
||||
await page.waitForSelector('.ion-activated');
|
||||
await page.locator('.ion-activated').waitFor();
|
||||
|
||||
await expect(el).toHaveClass(/ion-activated/);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user