test(datetime): add tests

2026-03-13 10:22:08 +08:00 · 2023-08-10 17:09:16 -05:00
parent 84cf0f152f
commit 1a9714783f
2 changed files with 169 additions and 0 deletions
--- a/core/src/components/datetime/test/cancel/datetime.e2e.ts
+++ b/core/src/components/datetime/test/cancel/datetime.e2e.ts
@@ -0,0 +1,69 @@
+import { configs, test } from '@utils/test/playwright';
+import { expect } from '@playwright/test';
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe.only(title('datetime: cancel method'), () => {
+    test('should emit ionCancel', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime></ion-datetime>
+      `,
+        config
+      );
+
+      const ionCancel = await page.spyOnEvent('ionCancel');
+      const datetime = page.locator('ion-datetime');
+
+      await datetime.evaluate((el: HTMLIonDatetimeElement) => el.cancel());
+
+      await ionCancel.next();
+    });
+
+    test('parent overlay should be dismissed when true is passed', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-modal>
+          <ion-datetime></ion-datetime>
+        </ion-modal>
+      `,
+        config
+      );
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+      const datetime = page.locator('ion-datetime');
+      const modal = page.locator('ion-modal');
+
+      await modal.evaluate((el: HTMLIonModalElement) => el.present());
+
+      await ionModalDidPresent.next();
+
+      await datetime.evaluate((el: HTMLIonDatetimeElement) => el.cancel(true));
+
+      await ionModalDidDismiss.next();
+    });
+
+    test('should reset the internal state of datetime', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime value="2023-06-06T16:30" show-default-buttons="true"></ion-datetime>
+      `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+
+      const day = datetime.locator('.calendar-day[data-month="6"][data-day="1"][data-year="2023"]');
+      await day.click();
+      await page.waitForChanges();
+
+      await expect(day).toHaveClass(/calendar-day-active/);
+
+      await datetime.evaluate((el: HTMLIonDatetimeElement) => el.cancel());
+      await page.waitForChanges();
+
+      await expect(day).not.toHaveClass(/calendar-day-active/);
+    });
+  });
+});
--- a/core/src/components/datetime/test/reset/datetime.e2e.ts
+++ b/core/src/components/datetime/test/reset/datetime.e2e.ts
@@ -0,0 +1,100 @@
+import { configs, test } from '@utils/test/playwright';
+import { expect } from '@playwright/test';
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe.only(title('datetime: reset method'), () => {
+    test('should reset the internal state of datetime to the set value', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime value="2023-06-06T16:30" show-default-buttons="true"></ion-datetime>
+      `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+
+      const dayOne = datetime.locator('.calendar-day[data-month="6"][data-day="1"][data-year="2023"]');
+      const daySix = datetime.locator('.calendar-day[data-month="6"][data-day="6"][data-year="2023"]');
+      await dayOne.click();
+      await page.waitForChanges();
+
+      await expect(dayOne).toHaveClass(/calendar-day-active/);
+
+      await datetime.evaluate((el: HTMLIonDatetimeElement) => el.reset());
+      await page.waitForChanges();
+
+      await expect(daySix).toHaveClass(/calendar-day-active/);
+    });
+
+    test('should reset the internal state of datetime to the provided value', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime show-default-buttons="true"></ion-datetime>
+
+        <script>
+          const mockToday = '2023-06-12T16:22';
+          Date = class extends Date {
+            constructor(...args) {
+              if (args.length === 0) {
+                super(mockToday)
+              } else {
+                super(...args);
+              }
+            }
+          }
+        </script>
+      `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+
+      const dayOne = datetime.locator('.calendar-day[data-month="6"][data-day="1"][data-year="2023"]');
+      const daySix = datetime.locator('.calendar-day[data-month="6"][data-day="6"][data-year="2023"]');
+      await dayOne.click();
+      await page.waitForChanges();
+
+      await expect(dayOne).toHaveClass(/calendar-day-active/);
+
+      await datetime.evaluate((el: HTMLIonDatetimeElement) => el.reset('2023-06-06T16:30'));
+      await page.waitForChanges();
+
+      await expect(daySix).toHaveClass(/calendar-day-active/);
+    });
+
+    test('should reset the internal state of datetime to today when value is set or passed', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime show-default-buttons="true"></ion-datetime>
+
+        <script>
+          const mockToday = '2023-06-06T16:22';
+          Date = class extends Date {
+            constructor(...args) {
+              if (args.length === 0) {
+                super(mockToday)
+              } else {
+                super(...args);
+              }
+            }
+          }
+        </script>
+      `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+
+      const dayOne = datetime.locator('.calendar-day[data-month="6"][data-day="1"][data-year="2023"]');
+      await dayOne.click();
+      await page.waitForChanges();
+
+      await expect(dayOne).toHaveClass(/calendar-day-active/);
+
+      await datetime.evaluate((el: HTMLIonDatetimeElement) => el.reset());
+      await page.waitForChanges();
+
+      await expect(await datetime.locator('.calendar-day-active').count()).toBe(0);
+    });
+  });
+});