diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts b/core/src/components/datetime/test/custom/datetime.e2e.ts index 5563bc6c10..60339fbf74 100644 --- a/core/src/components/datetime/test/custom/datetime.e2e.ts +++ b/core/src/components/datetime/test/custom/datetime.e2e.ts @@ -5,6 +5,8 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test.describe(title('datetime: custom'), () => { test.beforeEach(async ({ page }) => { await page.goto(`/src/components/datetime/test/custom`, config); + + await page.locator('.datetime-ready').last().waitFor(); }); test('should allow styling wheel style datetimes', async ({ page }) => { @@ -30,6 +32,13 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test('should allow styling calendar days in grid style datetimes', async ({ page }) => { const datetime = page.locator('#custom-calendar-days'); + // Wait for calendar days to be rendered + await page.waitForFunction(() => { + const datetime = document.querySelector('#custom-calendar-days'); + const calendarDays = datetime?.shadowRoot?.querySelectorAll('.calendar-day'); + return calendarDays && calendarDays.length > 0; + }); + await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-calendar-days`)); }); }); diff --git a/core/src/components/datetime/test/custom/index.html b/core/src/components/datetime/test/custom/index.html index 25c4835c05..09895d9c59 100644 --- a/core/src/components/datetime/test/custom/index.html +++ b/core/src/components/datetime/test/custom/index.html @@ -164,7 +164,7 @@ const customDatetime = document.querySelector('#custom-calendar-days'); // Mock the current day to always have the same screenshots - const mockToday = '2023-06-10T16:22'; + const mockToday = '2023-06-10T16:22:00.000Z'; Date = class extends Date { constructor(...args) { if (args.length === 0) { diff --git a/core/src/components/datetime/test/datetime.e2e.ts b/core/src/components/datetime/test/datetime.e2e.ts index 2e26aad48e..c95e4d2044 100644 --- a/core/src/components/datetime/test/datetime.e2e.ts +++ b/core/src/components/datetime/test/datetime.e2e.ts @@ -22,11 +22,23 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { await expect(monthYearToggle).toContainText('January 2022'); + // Click to open the picker await monthYearToggle.click(); await page.waitForChanges(); - // February - await monthColumnItems.nth(1).click(); + // Wait for the picker to be open + await page.locator('.month-year-picker-open').waitFor(); + + // Wait a bit for the picker to fully load + await page.waitForTimeout(200); + + const ionChange = await page.spyOnEvent('ionChange'); + + // Click on February + await monthColumnItems.filter({ hasText: 'February' }).click(); + + // Wait for changes + await ionChange.next(); await page.waitForChanges(); await expect(monthYearToggle).toContainText('February 2022'); @@ -38,13 +50,23 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { const datetime = page.locator('ion-datetime'); const ionChange = await page.spyOnEvent('ionChange'); + // Click to open the picker await monthYearToggle.click(); await page.waitForChanges(); - // February - await monthColumnItems.nth(1).click(); + // Wait for the picker to be open + await page.locator('.month-year-picker-open').waitFor(); + // Wait a bit for the picker to fully load + await page.waitForTimeout(200); + + // Click on February + await monthColumnItems.filter({ hasText: 'February' }).click(); + + // Wait for changes await ionChange.next(); + await page.waitForChanges(); + await expect(ionChange).toHaveReceivedEventTimes(1); await expect(datetime).toHaveJSProperty('value', '2022-02-28'); }); diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts b/core/src/components/input-otp/test/separators/input-otp.e2e.ts index 37c9bb8bb4..4c92a45895 100644 --- a/core/src/components/input-otp/test/separators/input-otp.e2e.ts +++ b/core/src/components/input-otp/test/separators/input-otp.e2e.ts @@ -95,6 +95,8 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => el.separators = [2, 3]; }); + await page.waitForChanges(); + await expect(await hasSeparatorAfter(page, 0)).toBe(false); await expect(await hasSeparatorAfter(page, 1)).toBe(true); await expect(await hasSeparatorAfter(page, 2)).toBe(true);