test(datetime): migrate tests to playwright (#25400)

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/basic/e2e.ts

@@ -1,144 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-describe('Footer', () => {
-  test('should render default buttons', async () => {
-    const page = await newE2EPage({
-      html: '<ion-datetime show-default-buttons="true"></ion-datetime>',
-    });
-
-    const cancelButton = await page.find('ion-datetime >>> #cancel-button');
-    expect(cancelButton).toEqualText('Cancel');
-
-    const confirmButton = await page.find('ion-datetime >>> #confirm-button');
-    expect(confirmButton).toEqualText('Done');
-
-    expect(await page.compareScreenshot()).toMatchScreenshot();
-  });
-
-  test('should render clear button', async () => {
-    const page = await newE2EPage({
-      html: '<ion-datetime show-clear-button="true"></ion-datetime>',
-    });
-
-    const clearButton = await page.find('ion-datetime >>> #clear-button');
-    expect(clearButton).toEqualText('Clear');
-
-    expect(await page.compareScreenshot()).toMatchScreenshot();
-  });
-
-  test('should render clear and default buttons', async () => {
-    const page = await newE2EPage({
-      html: '<ion-datetime show-default-buttons="true" show-clear-button="true"></ion-datetime>',
-    });
-
-    const cancelButton = await page.find('ion-datetime >>> #cancel-button');
-    expect(cancelButton).toEqualText('Cancel');
-
-    const confirmButton = await page.find('ion-datetime >>> #confirm-button');
-    expect(confirmButton).toEqualText('Done');
-
-    const clearButton = await page.find('ion-datetime >>> #clear-button');
-    expect(clearButton).toEqualText('Clear');
-
-    expect(await page.compareScreenshot()).toMatchScreenshot();
-  });
-
-  test('should render custom buttons', async () => {
-    const page = await newE2EPage({
-      html: `
-        <ion-datetime show-default-buttons="true" show-clear-button="true">
-          <ion-buttons slot="buttons">
-            <ion-button id="custom-button">Hello!</ion-button>
-          </ion-buttons>
-        </ion-datetime>
-      `,
-    });
-
-    const customButton = await page.find('ion-datetime #custom-button');
-    expect(customButton).not.toBeNull();
-
-    expect(await page.compareScreenshot()).toMatchScreenshot();
-  });
-
-  test('should render custom buttons', async () => {
-    const page = await newE2EPage({
-      html: `
-        <ion-datetime show-default-buttons="true" show-clear-button="true">
-          <ion-buttons slot="buttons">
-            <ion-button id="custom-button">Hello!</ion-button>
-          </ion-buttons>
-        </ion-datetime>
-      `,
-    });
-
-    const customButton = await page.find('ion-datetime #custom-button');
-    expect(customButton).not.toBeNull();
-
-    expect(await page.compareScreenshot()).toMatchScreenshot();
-  });
-});
-
-describe('datetime: selecting a day', () => {
-  it('should update the active day', async () => {
-    const page = await newE2EPage({
-      html: `
-        <ion-datetime show-default-buttons="true" value="2021-12-25T12:40:00.000Z"></ion-datetime>
-      `,
-    });
-
-    const activeDay = await page.find('ion-datetime >>> .calendar-day-active');
-
-    expect(activeDay.innerText).toEqual('25');
-
-    const dayBtn = await page.find('ion-datetime >>> .calendar-day[data-day="13"][data-month="12"]');
-    dayBtn.click();
-    await page.waitForChanges();
-
-    const newActiveDay = await page.find('ion-datetime >>> .calendar-day-active');
-
-    expect(newActiveDay.innerText).toEqual('13');
-  });
-});
-
-test('datetime:rtl: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/datetime/test/basic?ionic:_testing=true&rtl=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-describe('datetime: confirm date', () => {
-  test('should set the date value based on the selected date', async () => {
-    const page = await newE2EPage({
-      html: `
-        <button>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 eventButton = await page.find('button');
-    await eventButton.click();
-
-    const buttons = await page.findAll('ion-datetime >>> .calendar-next-prev ion-button');
-
-    await buttons[1].click();
-
-    await page.waitForEvent('datetimeMonthDidChange');
-
-    await page.$eval('ion-datetime', async (el: any) => {
-      await el.confirm();
-    });
-
-    const value = await (await page.find('ion-datetime')).getProperty('value');
-
-    expect(value).toMatch('2021-12-25T12:40:00');
-  });
-});

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`
+    );
+  });
+});