test(datetime): resolve flaky tests as year changes (#26561)

ionic-team · Jan 4, 2023 · 1917c71 · 1917c71
1 parent 9503f0b
commit 1917c71
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts b/core/src/components/datetime/test/locale/datetime.e2e.ts
@@ -121,11 +121,9 @@ test.describe('ar-EG', () => {
     `);
     await page.waitForSelector('.datetime-ready');
 
-    const datetimeYears = page.locator('ion-datetime .year-column .picker-item:not(.picker-item-empty)');
+    const datetimeYear = page.locator('ion-datetime .year-column .picker-item[data-value="2022"]');
 
-    await expect(datetimeYears.nth(0)).toHaveText('٢٠٢٢');
-    await expect(datetimeYears.nth(1)).toHaveText('٢٠٢١');
-    await expect(datetimeYears.nth(2)).toHaveText('٢٠٢٠');
+    await expect(datetimeYear).toHaveText('٢٠٢٢');
   });
 });
 
@@ -147,6 +145,7 @@ class DatetimeLocaleFixture {
         locale="${this.locale}"
         presentation="${presentation}"
         value="2022-04-19T04:20:00"
+        max="2022"
       ></ion-datetime>
     `);
 

diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts
@@ -17,14 +17,14 @@ test.describe('datetime: prefer wheel', () => {
   test.describe('datetime: wheel rendering', () => {
     test('should not have visual regressions for date wheel', async ({ page }) => {
       await page.setContent(`
-        <ion-datetime size="cover" presentation="date" prefer-wheel="true" value="2019-05-30"></ion-datetime>
+        <ion-datetime size="cover" presentation="date" prefer-wheel="true" value="2019-05-30" max="2022"></ion-datetime>
       `);
 
       expect(await page.screenshot()).toMatchSnapshot(`datetime-wheel-date-diff-${page.getSnapshotSettings()}.png`);
     });
     test('should not have visual regressions for date-time wheel', async ({ page }) => {
       await page.setContent(`
-        <ion-datetime size="cover" presentation="date-time" prefer-wheel="true" value="2019-05-30T16:30:00"></ion-datetime>
+        <ion-datetime size="cover" presentation="date-time" prefer-wheel="true" value="2019-05-30T16:30:00" max="2022"></ion-datetime>
       `);
 
       expect(await page.screenshot()).toMatchSnapshot(
@@ -33,7 +33,7 @@ test.describe('datetime: prefer wheel', () => {
     });
     test('should not have visual regressions for time-date wheel', async ({ page }) => {
       await page.setContent(`
-        <ion-datetime size="cover" presentation="time-date" prefer-wheel="true" value="2019-05-30T16:30:00"></ion-datetime>
+        <ion-datetime size="cover" presentation="time-date" prefer-wheel="true" value="2019-05-30T16:30:00" max="2022"></ion-datetime>
       `);
 
       expect(await page.screenshot()).toMatchSnapshot(
@@ -42,7 +42,7 @@ test.describe('datetime: prefer wheel', () => {
     });
     test('should render a condense header when specified', async ({ page }) => {
       await page.setContent(`
-        <ion-datetime size="cover" presentation="time-date" prefer-wheel="true" value="2019-05-30T16:30:00"><div slot="title">My Custom Title</div></ion-datetime>
+        <ion-datetime size="cover" presentation="time-date" prefer-wheel="true" value="2019-05-30T16:30:00" max="2022"><div slot="title">My Custom Title</div></ion-datetime>
       `);
       await page.waitForSelector('.datetime-ready');
 
@@ -131,6 +131,19 @@ test.describe('datetime: prefer wheel', () => {
           presentation="date"
           prefer-wheel="true"
         ></ion-datetime>
+
+        <script>
+          const mockToday = '2022-10-10T16:22';
+          Date = class extends Date {
+            constructor(...args) {
+              if (args.length === 0) {
+                super(mockToday)
+              } else {
+                super(...args);
+              }
+            }
+          }
+        </script>
       `);
 
       await page.waitForSelector('.datetime-ready');

diff --git a/core/src/components/datetime/test/presentation/index.html b/core/src/components/datetime/test/presentation/index.html
@@ -35,7 +35,7 @@
         </ion-toolbar>
       </ion-header>
       <ion-content class="ion-padding">
-        <ion-datetime presentation="date-time" value="2022-03-10T13:00:00"></ion-datetime>
+        <ion-datetime presentation="date-time" value="2022-03-10T13:00:00" max="2022"></ion-datetime>
       </ion-content>
     </ion-app>
     <script>