test(datetime): migrate tests to playwright

core/src/components/datetime/test/basic/datetime.e2e.ts

@@ -28,6 +28,21 @@ test.describe('datetime: selecting a day', () => {
   test('should not highlight a day until one is selected, with default-buttons', async ({ page }) => {
     await testHighlight(page, 'custom-datetime');
   });
+  test('should update the active day', async ({ page }) => {
+    await page.setContent(`
+      <ion-datetime show-default-buttons="true" value="2021-12-25T12:40:00.000Z"></ion-datetime>
+    `);
+
+    const activeDay = page.locator('ion-datetime .calendar-day-active');
+
+    expect(activeDay).toHaveText('25');
+
+    const dayBtn = page.locator('ion-datetime .calendar-day[data-day="13"][data-month="12"]');
+    await dayBtn.click();
+    await page.waitForChanges();
+
+    expect(activeDay).toHaveText('13');
+  });
 });
 
 test.describe('datetime: confirm date', () => {
@@ -45,4 +60,97 @@ test.describe('datetime: confirm date', () => {
     const valueAgain = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value);
     expect(valueAgain).toBeUndefined();
   });
+  test('should set the date value based on the selected date', async ({ page }) => {
+    await page.setContent(`
+      <button id="bind">Bind datetimeMonthDidChange event</button>
+      <ion-datetime value="2021-12-25T12:40:00.000Z"></ion-datetime>
+      <script type="module">
+        import { InitMonthDidChangeEvent } from '/src/components/datetime/test/utils/month-did-change-event.js';
+        document.querySelector('button').addEventListener('click', function() {
+          InitMonthDidChangeEvent();
+        });
+      </script>
+    `);
+
+    const datetimeMonthDidChange = await page.spyOnEvent('datetimeMonthDidChange');
+    const eventButton = page.locator('button#bind');
+    await eventButton.click();
+
+    const buttons = page.locator('ion-datetime .calendar-next-prev ion-button');
+    await buttons.nth(1).click();
+
+    await datetimeMonthDidChange.next();
+
+    const datetime = page.locator('ion-datetime');
+    await datetime.evaluate((el: HTMLIonDatetimeElement) => el.confirm());
+
+    // Value may include timezone information so we need to check
+    // that the value at least includes the correct date/time info.
+    const value = (await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value))!;
+    expect(value.includes('2021-12-25T12:40:00')).toBe(true);
+  });
+});
+
+test.describe('datetime: footer', () => {
+  test('should render default buttons', async ({ page }) => {
+    await page.setContent('<ion-datetime value="2022-05-03" show-default-buttons="true"></ion-datetime>');
+
+    const cancelButton = page.locator('ion-datetime #cancel-button');
+    expect(cancelButton).toHaveText('Cancel');
+
+    const confirmButton = page.locator('ion-datetime #confirm-button');
+    expect(confirmButton).toHaveText('Done');
+
+    const datetime = page.locator('ion-datetime');
+    expect(await datetime.screenshot()).toMatchSnapshot(
+      `datetime-footer-default-buttons-${page.getSnapshotSettings()}.png`
+    );
+  });
+  test('should render clear button', async ({ page }) => {
+    await page.setContent('<ion-datetime value="2022-05-03" show-clear-button="true"></ion-datetime>');
+
+    const clearButton = page.locator('ion-datetime #clear-button');
+    expect(clearButton).toHaveText('Clear');
+
+    const datetime = page.locator('ion-datetime');
+    expect(await datetime.screenshot()).toMatchSnapshot(
+      `datetime-footer-clear-button-${page.getSnapshotSettings()}.png`
+    );
+  });
+  test('should render default and clear buttons', async ({ page }) => {
+    await page.setContent(
+      '<ion-datetime value="2022-05-03" show-default-buttons="true" show-clear-button="true"></ion-datetime>'
+    );
+
+    const cancelButton = page.locator('ion-datetime #cancel-button');
+    expect(cancelButton).toHaveText('Cancel');
+
+    const confirmButton = page.locator('ion-datetime #confirm-button');
+    expect(confirmButton).toHaveText('Done');
+
+    const clearButton = page.locator('ion-datetime #clear-button');
+    expect(clearButton).toHaveText('Clear');
+
+    const datetime = page.locator('ion-datetime');
+    expect(await datetime.screenshot()).toMatchSnapshot(
+      `datetime-footer-default-clear-buttons-${page.getSnapshotSettings()}.png`
+    );
+  });
+  test('should render custom buttons', async ({ page }) => {
+    await page.setContent(`
+      <ion-datetime value="2022-05-03">
+        <ion-buttons slot="buttons">
+          <ion-button id="custom-button" color="primary">Hello!</ion-button>
+        </ion-buttons>
+      </ion-datetime>
+    `);
+
+    const customButton = page.locator('ion-datetime #custom-button');
+    expect(customButton).toBeVisible();
+
+    const datetime = page.locator('ion-datetime');
+    expect(await datetime.screenshot()).toMatchSnapshot(
+      `datetime-footer-custom-buttons-${page.getSnapshotSettings()}.png`
+    );
+  });
 });

core/src/components/datetime/test/color/datetime.e2e.ts

@@ -0,0 +1,43 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('datetime: color', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto('/src/components/datetime/test/color');
+
+    const colorSelect = page.locator('ion-select');
+    const darkModeToggle = page.locator('ion-checkbox');
+    const datetime = page.locator('ion-datetime');
+
+    await darkModeToggle.evaluate((el: HTMLIonCheckboxElement) => (el.checked = true));
+    await page.waitForChanges();
+
+    expect(await datetime.first().screenshot()).toMatchSnapshot(
+      `datetime-color-default-dark-${page.getSnapshotSettings()}.png`
+    );
+    expect(await datetime.last().screenshot()).toMatchSnapshot(
+      `datetime-color-custom-dark-${page.getSnapshotSettings()}.png`
+    );
+
+    await darkModeToggle.evaluate((el: HTMLIonCheckboxElement) => (el.checked = false));
+    await colorSelect.evaluate((el: HTMLIonSelectElement) => (el.value = 'danger'));
+    await page.waitForChanges();
+
+    expect(await datetime.first().screenshot()).toMatchSnapshot(
+      `datetime-color-default-light-color-${page.getSnapshotSettings()}.png`
+    );
+    expect(await datetime.last().screenshot()).toMatchSnapshot(
+      `datetime-color-custom-light-color-${page.getSnapshotSettings()}.png`
+    );
+
+    await darkModeToggle.evaluate((el: HTMLIonCheckboxElement) => (el.checked = true));
+    await page.waitForChanges();
+
+    expect(await datetime.first().screenshot()).toMatchSnapshot(
+      `datetime-color-default-dark-color-${page.getSnapshotSettings()}.png`
+    );
+    expect(await datetime.last().screenshot()).toMatchSnapshot(
+      `datetime-color-custom-dark-color-${page.getSnapshotSettings()}.png`
+    );
+  });
+});

core/src/components/datetime/test/color/index.html

@@ -214,12 +214,12 @@
         <div class="grid">
           <div class="grid-item">
             <h2>Default</h2>
-            <ion-datetime show-default-title="true" show-default-buttons="true"></ion-datetime>
+            <ion-datetime value="2022-05-03" show-default-title="true" show-default-buttons="true"></ion-datetime>
           </div>
 
           <div class="grid-item">
             <h2>Custom</h2>
-            <ion-datetime show-default-title="true" show-default-buttons="true">
+            <ion-datetime value="2022-05-03" show-default-title="true" show-default-buttons="true">
               <ion-buttons slot="buttons">
                 <ion-button color="danger">Reset</ion-button>
                 <ion-button color="primary">Confirm</ion-button>