test(datetime-button): migrate to generators (#27307)

Issue number: N/A

---------

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Datetime button tests use the legacy syntax

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Datetime button tests use the generator syntax

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

core/src/components/datetime-button/test/basic/datetime-button.e2e-legacy.ts

@@ -1,185 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('datetime-button: switching to correct view', () => {
-  test.beforeEach(async ({ page, skip }) => {
-    skip.rtl();
-    skip.mode('ios', 'No mode-specific logic');
-
-    await page.setContent(`
-      <ion-datetime-button datetime="datetime"></ion-datetime-button>
-      <ion-datetime id="datetime" presentation="date-time"></ion-datetime>
-    `);
-    await page.waitForSelector('.datetime-ready');
-  });
-  test('should switch to a date-only view when the date button is clicked', async ({ page }) => {
-    const datetime = page.locator('ion-datetime');
-    await expect(datetime).toHaveJSProperty('presentation', 'date-time');
-
-    await page.click('#date-button');
-    await page.waitForChanges();
-
-    await expect(datetime).toHaveJSProperty('presentation', 'date');
-  });
-  test('should switch to a time-only view when the time button is clicked', async ({ page }) => {
-    const datetime = page.locator('ion-datetime');
-    await expect(datetime).toHaveJSProperty('presentation', 'date-time');
-
-    await page.click('#time-button');
-    await page.waitForChanges();
-
-    await expect(datetime).toHaveJSProperty('presentation', 'time');
-  });
-});
-
-test.describe('datetime-button: labels', () => {
-  test.beforeEach(({ skip }) => {
-    skip.rtl();
-    skip.mode('ios', 'No mode-specific logic');
-  });
-  test('should set date and time labels in separate buttons', async ({ page }) => {
-    await page.setContent(`
-      <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
-      <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="date-time"></ion-datetime>
-    `);
-    await page.waitForSelector('.datetime-ready');
-
-    await expect(page.locator('#date-button')).toContainText('Jan 1, 2022');
-    await expect(page.locator('#time-button')).toContainText('6:30 AM');
-  });
-  test('should set only month and year', async ({ page }) => {
-    await page.setContent(`
-      <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
-      <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="month-year"></ion-datetime>
-    `);
-    await page.waitForSelector('.datetime-ready');
-
-    await expect(page.locator('#date-button')).toContainText('January 2022');
-    await expect(page.locator('#time-button')).toBeHidden();
-  });
-  test('should set only year', async ({ page }) => {
-    await page.setContent(`
-      <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
-      <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="year"></ion-datetime>
-    `);
-    await page.waitForSelector('.datetime-ready');
-
-    await expect(page.locator('#date-button')).toContainText('2022');
-    await expect(page.locator('#time-button')).toBeHidden();
-  });
-  test('should set only month', async ({ page }) => {
-    await page.setContent(`
-      <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
-      <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="month"></ion-datetime>
-    `);
-    await page.waitForSelector('.datetime-ready');
-
-    await expect(page.locator('#date-button')).toContainText('January');
-    await expect(page.locator('#time-button')).toBeHidden();
-  });
-  test('should set only time', async ({ page }) => {
-    await page.setContent(`
-      <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
-      <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="time"></ion-datetime>
-    `);
-    await page.waitForSelector('.datetime-ready');
-
-    await expect(page.locator('#time-button')).toContainText('6:30 AM');
-    await expect(page.locator('#date-button')).toBeHidden();
-  });
-  test('should update the label when the value of the datetime changes', async ({ page }) => {
-    await page.setContent(`
-      <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
-      <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="date"></ion-datetime>
-    `);
-    await page.waitForSelector('.datetime-ready');
-
-    const datetime = page.locator('ion-datetime');
-    const dateTarget = page.locator('#date-button');
-
-    await expect(dateTarget).toContainText('Jan 1, 2022');
-
-    await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2023-05-10'));
-    await page.waitForChanges();
-
-    await expect(dateTarget).toContainText('May 10, 2023');
-  });
-});
-
-test.describe('datetime-button: locale', () => {
-  test.beforeEach(({ skip }) => {
-    skip.rtl();
-    skip.mode('ios', 'No mode-specific logic');
-  });
-  test('should use the same locale as datetime', async ({ page }) => {
-    await page.setContent(`
-      <ion-datetime-button datetime="datetime"></ion-datetime-button>
-      <ion-datetime locale="es-ES" id="datetime" value="2022-01-01T06:30:00" presentation="date-time"></ion-datetime>
-    `);
-    await page.waitForSelector('.datetime-ready');
-
-    /**
-     * The entire text reads 1 ene 2022, but some browsers will add
-     * a period after "ene". Just checking ene allows us to verify the
-     * behavior while avoiding these cross browser differences.
-     */
-    await expect(page.locator('#date-button')).toContainText(/ene/);
-    await expect(page.locator('#time-button')).toContainText('6:30');
-  });
-  test('should respect hour cycle even if different from locale default', async ({ page }) => {
-    await page.setContent(`
-      <ion-datetime-button datetime="datetime"></ion-datetime-button>
-      <ion-datetime hour-cycle="h23" locale="en-US" id="datetime" value="2022-01-01T16:30:00" presentation="date-time"></ion-datetime>
-    `);
-    await page.waitForSelector('.datetime-ready');
-
-    await expect(page.locator('#time-button')).toContainText('16:30');
-  });
-  test('should ignore the timezone when selecting a date', async ({ page }) => {
-    await page.setContent(`
-      <ion-datetime-button datetime="datetime"></ion-datetime-button>
-      <ion-datetime locale="en-US" id="datetime" value="2022-01-02T06:30:00" presentation="date-time"></ion-datetime>
-    `);
-    await page.waitForSelector('.datetime-ready');
-
-    const timeTarget = page.locator('#time-button');
-    await expect(timeTarget).toContainText('6:30');
-
-    const firstOfMonth = page.locator('ion-datetime .calendar-day[data-month="1"][data-day="1"]');
-    await firstOfMonth.click();
-    await page.waitForChanges();
-
-    await expect(timeTarget).toContainText('6:30');
-  });
-});
-
-test.describe('datetime-button: wheel', () => {
-  test.beforeEach(({ skip }) => {
-    skip.rtl();
-    skip.mode('ios', 'No mode-specific logic');
-  });
-  test('should only show a single date button when presentation="date-time" and prefer-wheel="true"', async ({
-    page,
-  }) => {
-    await page.setContent(`
-      <ion-datetime-button datetime="datetime"></ion-datetime-button>
-      <ion-datetime locale="en-US" id="datetime" value="2022-01-01T06:30:00" presentation="date-time" prefer-wheel="true"></ion-datetime>
-    `);
-    await page.waitForSelector('.datetime-ready');
-
-    await expect(page.locator('#date-button')).toContainText('Jan 1, 2022 6:30 AM');
-    await expect(page.locator('#time-button')).not.toBeVisible();
-  });
-  test('should only show a single date button when presentation="time-date" and prefer-wheel="true"', async ({
-    page,
-  }) => {
-    await page.setContent(`
-      <ion-datetime-button datetime="datetime"></ion-datetime-button>
-      <ion-datetime locale="en-US" id="datetime" value="2022-01-01T06:30:00" presentation="time-date" prefer-wheel="true"></ion-datetime>
-    `);
-    await page.waitForSelector('.datetime-ready');
-
-    await expect(page.locator('#date-button')).toContainText('Jan 1, 2022 6:30 AM');
-    await expect(page.locator('#time-button')).not.toBeVisible();
-  });
-});

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

@@ -0,0 +1,211 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * The tested behavior does not
+ * vary across modes/directions
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('datetime-button: switching to correct view'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" presentation="date-time"></ion-datetime>
+      `,
+        config
+      );
+      await page.waitForSelector('.datetime-ready');
+    });
+    test('should switch to a date-only view when the date button is clicked', async ({ page }) => {
+      const datetime = page.locator('ion-datetime');
+      await expect(datetime).toHaveJSProperty('presentation', 'date-time');
+
+      await page.click('#date-button');
+      await page.waitForChanges();
+
+      await expect(datetime).toHaveJSProperty('presentation', 'date');
+    });
+    test('should switch to a time-only view when the time button is clicked', async ({ page }) => {
+      const datetime = page.locator('ion-datetime');
+      await expect(datetime).toHaveJSProperty('presentation', 'date-time');
+
+      await page.click('#time-button');
+      await page.waitForChanges();
+
+      await expect(datetime).toHaveJSProperty('presentation', 'time');
+    });
+  });
+  test.describe(title('datetime-button: labels'), () => {
+    test('should set date and time labels in separate buttons', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="date-time"></ion-datetime>
+      `,
+        config
+      );
+      await page.waitForSelector('.datetime-ready');
+
+      await expect(page.locator('#date-button')).toContainText('Jan 1, 2022');
+      await expect(page.locator('#time-button')).toContainText('6:30 AM');
+    });
+    test('should set only month and year', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="month-year"></ion-datetime>
+      `,
+        config
+      );
+      await page.waitForSelector('.datetime-ready');
+
+      await expect(page.locator('#date-button')).toContainText('January 2022');
+      await expect(page.locator('#time-button')).toBeHidden();
+    });
+    test('should set only year', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="year"></ion-datetime>
+      `,
+        config
+      );
+      await page.waitForSelector('.datetime-ready');
+
+      await expect(page.locator('#date-button')).toContainText('2022');
+      await expect(page.locator('#time-button')).toBeHidden();
+    });
+    test('should set only month', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="month"></ion-datetime>
+      `,
+        config
+      );
+      await page.waitForSelector('.datetime-ready');
+
+      await expect(page.locator('#date-button')).toContainText('January');
+      await expect(page.locator('#time-button')).toBeHidden();
+    });
+    test('should set only time', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="time"></ion-datetime>
+      `,
+        config
+      );
+      await page.waitForSelector('.datetime-ready');
+
+      await expect(page.locator('#time-button')).toContainText('6:30 AM');
+      await expect(page.locator('#date-button')).toBeHidden();
+    });
+    test('should update the label when the value of the datetime changes', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="date"></ion-datetime>
+      `,
+        config
+      );
+      await page.waitForSelector('.datetime-ready');
+
+      const datetime = page.locator('ion-datetime');
+      const dateTarget = page.locator('#date-button');
+
+      await expect(dateTarget).toContainText('Jan 1, 2022');
+
+      await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2023-05-10'));
+      await page.waitForChanges();
+
+      await expect(dateTarget).toContainText('May 10, 2023');
+    });
+  });
+
+  test.describe(title('datetime-button: locale'), () => {
+    test('should use the same locale as datetime', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime locale="es-ES" id="datetime" value="2022-01-01T06:30:00" presentation="date-time"></ion-datetime>
+      `,
+        config
+      );
+      await page.waitForSelector('.datetime-ready');
+
+      /**
+       * The entire text reads 1 ene 2022, but some browsers will add
+       * a period after "ene". Just checking ene allows us to verify the
+       * behavior while avoiding these cross browser differences.
+       */
+      await expect(page.locator('#date-button')).toContainText(/ene/);
+      await expect(page.locator('#time-button')).toContainText('6:30');
+    });
+    test('should respect hour cycle even if different from locale default', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime hour-cycle="h23" locale="en-US" id="datetime" value="2022-01-01T16:30:00" presentation="date-time"></ion-datetime>
+      `,
+        config
+      );
+      await page.waitForSelector('.datetime-ready');
+
+      await expect(page.locator('#time-button')).toContainText('16:30');
+    });
+    test('should ignore the timezone when selecting a date', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime locale="en-US" id="datetime" value="2022-01-02T06:30:00" presentation="date-time"></ion-datetime>
+      `,
+        config
+      );
+      await page.waitForSelector('.datetime-ready');
+
+      const timeTarget = page.locator('#time-button');
+      await expect(timeTarget).toContainText('6:30');
+
+      const firstOfMonth = page.locator('ion-datetime .calendar-day[data-month="1"][data-day="1"]');
+      await firstOfMonth.click();
+      await page.waitForChanges();
+
+      await expect(timeTarget).toContainText('6:30');
+    });
+  });
+
+  test.describe(title('datetime-button: wheel'), () => {
+    test('should only show a single date button when presentation="date-time" and prefer-wheel="true"', async ({
+      page,
+    }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime locale="en-US" id="datetime" value="2022-01-01T06:30:00" presentation="date-time" prefer-wheel="true"></ion-datetime>
+      `,
+        config
+      );
+      await page.waitForSelector('.datetime-ready');
+
+      await expect(page.locator('#date-button')).toContainText('Jan 1, 2022 6:30 AM');
+      await expect(page.locator('#time-button')).not.toBeVisible();
+    });
+    test('should only show a single date button when presentation="time-date" and prefer-wheel="true"', async ({
+      page,
+    }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime locale="en-US" id="datetime" value="2022-01-01T06:30:00" presentation="time-date" prefer-wheel="true"></ion-datetime>
+      `,
+        config
+      );
+      await page.waitForSelector('.datetime-ready');
+
+      await expect(page.locator('#date-button')).toContainText('Jan 1, 2022 6:30 AM');
+      await expect(page.locator('#time-button')).not.toBeVisible();
+    });
+  });
+});

core/src/components/datetime-button/test/disabled/datetime-button.e2e-legacy.ts

@@ -1,28 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('datetime-button: disabled buttons', () => {
-  test('buttons should not be enabled when component is disabled', async ({ page, skip }) => {
-    skip.rtl();
-    skip.mode('ios', 'No mode-specific logic');
-
-    await page.setContent(`
-      <ion-datetime-button datetime="datetime" disabled="true"></ion-datetime-button>
-      <ion-datetime id="datetime" presentation="date-time"></ion-datetime>
-    `);
-    await page.waitForSelector('.datetime-ready');
-
-    await expect(page.locator('#date-button')).toBeDisabled();
-    await expect(page.locator('#time-button')).toBeDisabled();
-  });
-  test('buttons should visually be disabled', async ({ page }) => {
-    await page.setContent(`
-      <ion-datetime-button datetime="datetime" disabled="true"></ion-datetime-button>
-      <ion-datetime id="datetime" presentation="date-time" value="2022-01-01T16:30:00"></ion-datetime>
-    `);
-    await page.waitForSelector('.datetime-ready');
-
-    const datetimeButton = page.locator('ion-datetime-button');
-    await expect(datetimeButton).toHaveScreenshot(`datetime-button-disabled-${page.getSnapshotSettings()}.png`);
-  });
-});

core/src/components/datetime-button/test/disabled/datetime-button.e2e.ts

@@ -0,0 +1,33 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('datetime-button: disabled buttons'), () => {
+    test('buttons should not be enabled when component is disabled', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button datetime="datetime" disabled="true"></ion-datetime-button>
+        <ion-datetime id="datetime" presentation="date-time"></ion-datetime>
+      `,
+        config
+      );
+      await page.waitForSelector('.datetime-ready');
+
+      await expect(page.locator('#date-button')).toBeDisabled();
+      await expect(page.locator('#time-button')).toBeDisabled();
+    });
+    test('buttons should visually be disabled', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button datetime="datetime" disabled="true"></ion-datetime-button>
+        <ion-datetime id="datetime" presentation="date-time" value="2022-01-01T16:30:00"></ion-datetime>
+      `,
+        config
+      );
+      await page.waitForSelector('.datetime-ready');
+
+      const datetimeButton = page.locator('ion-datetime-button');
+      await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-disabled`));
+    });
+  });
+});

core/src/components/datetime-button/test/multiple/datetime-button.e2e-legacy.ts

@@ -1,100 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('datetime-button: multiple selection', () => {
-  test.beforeEach(async ({ skip }) => {
-    skip.rtl();
-    skip.mode('ios', 'No mode-specific logic');
-  });
-  test('should render number of dates when more than 1 date is selected', async ({ page }) => {
-    await page.setContent(`
-      <ion-datetime-button datetime="datetime"></ion-datetime-button>
-      <ion-datetime locale="en-US" id="datetime" presentation="date" multiple="true"></ion-datetime>
-
-      <script>
-        const datetime = document.querySelector('ion-datetime');
-        datetime.value = ['2022-06-01', '2022-06-02', '2022-06-03'];
-      </script>
-    `);
-    await page.waitForSelector('.datetime-ready');
-
-    await expect(page.locator('#date-button')).toContainText('3 days');
-  });
-  test('should render number of dates when 0 dates are selected', async ({ page }) => {
-    await page.setContent(`
-      <ion-datetime-button datetime="datetime"></ion-datetime-button>
-      <ion-datetime locale="en-US" id="datetime" presentation="date" multiple="true"></ion-datetime>
-    `);
-    await page.waitForSelector('.datetime-ready');
-
-    await expect(page.locator('#date-button')).toHaveText('0 days');
-  });
-  test('should render date when only 1 day is selected', async ({ page }) => {
-    await page.setContent(`
-      <ion-datetime-button datetime="datetime"></ion-datetime-button>
-      <ion-datetime locale="en-US" id="datetime" presentation="date" multiple="true"></ion-datetime>
-
-      <script>
-        const datetime = document.querySelector('ion-datetime');
-        datetime.value = ['2022-06-01'];
-      </script>
-    `);
-    await page.waitForSelector('.datetime-ready');
-
-    await expect(page.locator('#date-button')).toHaveText('Jun 1, 2022');
-  });
-  test('should use customFormatter', async ({ page }) => {
-    await page.setContent(`
-      <ion-datetime-button datetime="datetime"></ion-datetime-button>
-      <ion-datetime locale="en-US" id="datetime" presentation="date" multiple="true"></ion-datetime>
-
-      <script>
-        const datetime = document.querySelector('ion-datetime');
-        datetime.titleSelectedDatesFormatter = (selectedDates) => {
-          return 'Selected: ' + selectedDates.length;
-        };
-        datetime.value = ['2022-06-01', '2022-06-02', '2022-06-03'];
-      </script>
-    `);
-    await page.waitForSelector('.datetime-ready');
-
-    await expect(page.locator('#date-button')).toHaveText('Selected: 3');
-  });
-  test('should re-render when value is programmatically changed', async ({ page }) => {
-    await page.setContent(`
-      <ion-datetime-button datetime="datetime"></ion-datetime-button>
-      <ion-datetime locale="en-US" id="datetime" presentation="date" multiple="true"></ion-datetime>
-
-      <script>
-        const datetime = document.querySelector('ion-datetime');
-        datetime.value = ['2022-06-01', '2022-06-02'];
-      </script>
-    `);
-    await page.waitForSelector('.datetime-ready');
-
-    const datetime = page.locator('ion-datetime');
-    const ionValueChange = await page.spyOnEvent('ionValueChange');
-    const dateButton = page.locator('#date-button');
-    await expect(dateButton).toHaveText('2 days');
-
-    await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = ['2022-06-01', '2022-06-02', '2022-06-03']));
-    await ionValueChange.next();
-
-    await expect(dateButton).toHaveText('3 days');
-  });
-  test('should render single date if datetime is used incorrectly', async ({ page }) => {
-    await page.setContent(`
-      <ion-datetime-button datetime="datetime"></ion-datetime-button>
-      <ion-datetime locale="en-US" id="datetime" presentation="date-time" multiple="true"></ion-datetime>
-
-      <script>
-        const datetime = document.querySelector('ion-datetime');
-        datetime.value = ['2022-06-01T16:30', '2022-06-02'];
-      </script>
-    `);
-    await page.waitForSelector('.datetime-ready');
-
-    await expect(page.locator('#date-button')).toHaveText('Jun 1, 2022');
-    await expect(page.locator('#time-button')).toHaveText('4:30 PM');
-  });
-});

core/src/components/datetime-button/test/multiple/datetime-button.e2e.ts

@@ -0,0 +1,120 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * The tested behavior does not
+ * vary across modes/directions
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('datetime-button: multiple selection'), () => {
+    test('should render number of dates when more than 1 date is selected', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime locale="en-US" id="datetime" presentation="date" multiple="true"></ion-datetime>
+
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.value = ['2022-06-01', '2022-06-02', '2022-06-03'];
+        </script>
+      `,
+        config
+      );
+      await page.waitForSelector('.datetime-ready');
+
+      await expect(page.locator('#date-button')).toContainText('3 days');
+    });
+    test('should render number of dates when 0 dates are selected', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime locale="en-US" id="datetime" presentation="date" multiple="true"></ion-datetime>
+      `,
+        config
+      );
+      await page.waitForSelector('.datetime-ready');
+
+      await expect(page.locator('#date-button')).toHaveText('0 days');
+    });
+    test('should render date when only 1 day is selected', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime locale="en-US" id="datetime" presentation="date" multiple="true"></ion-datetime>
+
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.value = ['2022-06-01'];
+        </script>
+      `,
+        config
+      );
+      await page.waitForSelector('.datetime-ready');
+
+      await expect(page.locator('#date-button')).toHaveText('Jun 1, 2022');
+    });
+    test('should use customFormatter', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime locale="en-US" id="datetime" presentation="date" multiple="true"></ion-datetime>
+
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.titleSelectedDatesFormatter = (selectedDates) => {
+            return 'Selected: ' + selectedDates.length;
+          };
+          datetime.value = ['2022-06-01', '2022-06-02', '2022-06-03'];
+        </script>
+      `,
+        config
+      );
+      await page.waitForSelector('.datetime-ready');
+
+      await expect(page.locator('#date-button')).toHaveText('Selected: 3');
+    });
+    test('should re-render when value is programmatically changed', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime locale="en-US" id="datetime" presentation="date" multiple="true"></ion-datetime>
+
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.value = ['2022-06-01', '2022-06-02'];
+        </script>
+      `,
+        config
+      );
+      await page.waitForSelector('.datetime-ready');
+
+      const datetime = page.locator('ion-datetime');
+      const ionValueChange = await page.spyOnEvent('ionValueChange');
+      const dateButton = page.locator('#date-button');
+      await expect(dateButton).toHaveText('2 days');
+
+      await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = ['2022-06-01', '2022-06-02', '2022-06-03']));
+      await ionValueChange.next();
+
+      await expect(dateButton).toHaveText('3 days');
+    });
+    test('should render single date if datetime is used incorrectly', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime locale="en-US" id="datetime" presentation="date-time" multiple="true"></ion-datetime>
+
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.value = ['2022-06-01T16:30', '2022-06-02'];
+        </script>
+      `,
+        config
+      );
+      await page.waitForSelector('.datetime-ready');
+
+      await expect(page.locator('#date-button')).toHaveText('Jun 1, 2022');
+      await expect(page.locator('#time-button')).toHaveText('4:30 PM');
+    });
+  });
+});

core/src/components/datetime-button/test/overlays/datetime-button.e2e-legacy.ts

@@ -1,167 +0,0 @@
-import { expect } from '@playwright/test';
-import type { Locator } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-import type { EventSpy } from '@utils/test/playwright';
-
-test.describe('datetime-button: rendering', () => {
-  test('should size the modal correctly', async ({ page }) => {
-    await page.setContent(`
-      <ion-datetime-button datetime="datetime"></ion-datetime-button>
-      <ion-modal>
-        <ion-datetime id="datetime" show-default-title="true" show-default-buttons="true" value="2022-01-01T16:30:00"></ion-datetime>
-      </ion-modal>
-    `);
-
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-    const dateButton = page.locator('ion-datetime-button #date-button');
-    await dateButton.click();
-    await ionModalDidPresent.next();
-
-    await expect(page).toHaveScreenshot(`datetime-overlay-modal-${page.getSnapshotSettings()}.png`, {
-      animations: 'disabled',
-    });
-  });
-
-  test('should size the popover correctly', async ({ page, skip }) => {
-    skip.browser('firefox', 'Rendering is flaky in Firefox 107');
-    await page.setContent(`
-      <ion-datetime-button datetime="datetime"></ion-datetime-button>
-      <ion-popover>
-        <ion-datetime id="datetime" show-default-title="true" show-default-buttons="true" value="2022-01-01T16:30:00"></ion-datetime>
-      </ion-popover>
-    `);
-
-    const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
-    const dateButton = page.locator('ion-datetime-button #date-button');
-    await dateButton.click();
-    await ionPopoverDidPresent.next();
-
-    await expect(page).toHaveScreenshot(`datetime-overlay-popover-${page.getSnapshotSettings()}.png`, {
-      animations: 'disabled',
-    });
-  });
-});
-
-test.describe('datetime-button: popover', () => {
-  let datetime: Locator;
-  let popover: Locator;
-  let ionPopoverDidPresent: EventSpy;
-  let ionPopoverDidDismiss: EventSpy;
-  test.beforeEach(async ({ page, skip }) => {
-    skip.rtl();
-    skip.mode('ios', 'No mode-specific logic');
-
-    await page.setContent(`
-      <ion-datetime-button datetime="datetime"></ion-datetime-button>
-
-      <ion-popover>
-        <ion-datetime id="datetime" presentation="date-time"></ion-datetime>
-      </ion-popover>
-    `);
-
-    datetime = page.locator('ion-datetime');
-    popover = page.locator('ion-popover');
-    ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
-    ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
-  });
-  test('should open the date popover', async ({ page }) => {
-    await page.click('#date-button');
-
-    await ionPopoverDidPresent.next();
-
-    await expect(datetime).toBeVisible();
-  });
-  test('should open the time popover', async ({ page }) => {
-    await page.click('#time-button');
-
-    await ionPopoverDidPresent.next();
-
-    await expect(datetime).toBeVisible();
-  });
-  test('should open the date popover then the time popover', async ({ page }) => {
-    await page.click('#date-button');
-    await ionPopoverDidPresent.next();
-    await expect(datetime).toBeVisible();
-
-    await popover.evaluate((el: HTMLIonPopoverElement) => el.dismiss());
-    await ionPopoverDidDismiss.next();
-
-    await page.click('#time-button');
-    await ionPopoverDidPresent.next();
-    await expect(datetime).toBeVisible();
-  });
-  test('should open the time popover then the date popover', async ({ page }) => {
-    await page.click('#time-button');
-    await ionPopoverDidPresent.next();
-    await expect(datetime).toBeVisible();
-
-    await popover.evaluate((el: HTMLIonPopoverElement) => el.dismiss());
-    await ionPopoverDidDismiss.next();
-
-    await page.click('#date-button');
-    await ionPopoverDidPresent.next();
-    await expect(datetime).toBeVisible();
-  });
-});
-
-test.describe('datetime-button: modal', () => {
-  let datetime: Locator;
-  let modal: Locator;
-  let ionModalDidPresent: EventSpy;
-  let ionModalDidDismiss: EventSpy;
-  test.beforeEach(async ({ page, skip }) => {
-    skip.rtl();
-    skip.mode('ios', 'No mode-specific logic');
-
-    await page.setContent(`
-      <ion-datetime-button datetime="datetime"></ion-datetime-button>
-
-      <ion-modal>
-        <ion-datetime id="datetime" presentation="date-time"></ion-datetime>
-      </ion-modal>
-    `);
-
-    datetime = page.locator('ion-datetime');
-    modal = page.locator('ion-modal');
-    ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-    ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-  });
-  test('should open the date modal', async ({ page }) => {
-    await page.click('#date-button');
-
-    await ionModalDidPresent.next();
-
-    await expect(datetime).toBeVisible();
-  });
-  test('should open the time modal', async ({ page }) => {
-    await page.click('#time-button');
-
-    await ionModalDidPresent.next();
-
-    await expect(datetime).toBeVisible();
-  });
-  test('should open the date modal then the time modal', async ({ page }) => {
-    await page.click('#date-button');
-    await ionModalDidPresent.next();
-    await expect(datetime).toBeVisible();
-
-    await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
-    await ionModalDidDismiss.next();
-
-    await page.click('#time-button');
-    await ionModalDidPresent.next();
-    await expect(datetime).toBeVisible();
-  });
-  test('should open the time modal then the date modal', async ({ page }) => {
-    await page.click('#time-button');
-    await ionModalDidPresent.next();
-    await expect(datetime).toBeVisible();
-
-    await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
-    await ionModalDidDismiss.next();
-
-    await page.click('#date-button');
-    await ionModalDidPresent.next();
-    await expect(datetime).toBeVisible();
-  });
-});

core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts

@@ -0,0 +1,180 @@
+import { expect } from '@playwright/test';
+import type { Locator } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+import type { EventSpy } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('datetime-button: rendering'), () => {
+    test('should size the modal correctly', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-modal>
+          <ion-datetime id="datetime" show-default-title="true" show-default-buttons="true" value="2022-01-01T16:30:00"></ion-datetime>
+        </ion-modal>
+      `,
+        config
+      );
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const dateButton = page.locator('ion-datetime-button #date-button');
+      await dateButton.click();
+      await ionModalDidPresent.next();
+
+      await expect(page).toHaveScreenshot(screenshot(`datetime-overlay-modal`));
+    });
+
+    test('should size the popover correctly', async ({ page, skip }) => {
+      skip.browser('firefox', 'Rendering is flaky in Firefox 107');
+      await page.setContent(
+        `
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-popover>
+          <ion-datetime id="datetime" show-default-title="true" show-default-buttons="true" value="2022-01-01T16:30:00"></ion-datetime>
+        </ion-popover>
+      `,
+        config
+      );
+
+      const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+      const dateButton = page.locator('ion-datetime-button #date-button');
+      await dateButton.click();
+      await ionPopoverDidPresent.next();
+
+      await expect(page).toHaveScreenshot(screenshot(`datetime-overlay-popover`));
+    });
+  });
+});
+
+/**
+ * The tested behavior does not
+ * vary across modes/directions
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('datetime-button: popover'), () => {
+    let datetime: Locator;
+    let popover: Locator;
+    let ionPopoverDidPresent: EventSpy;
+    let ionPopoverDidDismiss: EventSpy;
+    test.beforeEach(async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+
+        <ion-popover>
+          <ion-datetime id="datetime" presentation="date-time"></ion-datetime>
+        </ion-popover>
+      `,
+        config
+      );
+
+      datetime = page.locator('ion-datetime');
+      popover = page.locator('ion-popover');
+      ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+      ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
+    });
+    test('should open the date popover', async ({ page }) => {
+      await page.click('#date-button');
+
+      await ionPopoverDidPresent.next();
+
+      await expect(datetime).toBeVisible();
+    });
+    test('should open the time popover', async ({ page }) => {
+      await page.click('#time-button');
+
+      await ionPopoverDidPresent.next();
+
+      await expect(datetime).toBeVisible();
+    });
+    test('should open the date popover then the time popover', async ({ page }) => {
+      await page.click('#date-button');
+      await ionPopoverDidPresent.next();
+      await expect(datetime).toBeVisible();
+
+      await popover.evaluate((el: HTMLIonPopoverElement) => el.dismiss());
+      await ionPopoverDidDismiss.next();
+
+      await page.click('#time-button');
+      await ionPopoverDidPresent.next();
+      await expect(datetime).toBeVisible();
+    });
+    test('should open the time popover then the date popover', async ({ page }) => {
+      await page.click('#time-button');
+      await ionPopoverDidPresent.next();
+      await expect(datetime).toBeVisible();
+
+      await popover.evaluate((el: HTMLIonPopoverElement) => el.dismiss());
+      await ionPopoverDidDismiss.next();
+
+      await page.click('#date-button');
+      await ionPopoverDidPresent.next();
+      await expect(datetime).toBeVisible();
+    });
+  });
+
+  test.describe(title('datetime-button: modal'), () => {
+    let datetime: Locator;
+    let modal: Locator;
+    let ionModalDidPresent: EventSpy;
+    let ionModalDidDismiss: EventSpy;
+    test.beforeEach(async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+
+        <ion-modal>
+          <ion-datetime id="datetime" presentation="date-time"></ion-datetime>
+        </ion-modal>
+      `,
+        config
+      );
+
+      datetime = page.locator('ion-datetime');
+      modal = page.locator('ion-modal');
+      ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+    });
+    test('should open the date modal', async ({ page }) => {
+      await page.click('#date-button');
+
+      await ionModalDidPresent.next();
+
+      await expect(datetime).toBeVisible();
+    });
+    test('should open the time modal', async ({ page }) => {
+      await page.click('#time-button');
+
+      await ionModalDidPresent.next();
+
+      await expect(datetime).toBeVisible();
+    });
+    test('should open the date modal then the time modal', async ({ page }) => {
+      await page.click('#date-button');
+      await ionModalDidPresent.next();
+      await expect(datetime).toBeVisible();
+
+      await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
+      await ionModalDidDismiss.next();
+
+      await page.click('#time-button');
+      await ionModalDidPresent.next();
+      await expect(datetime).toBeVisible();
+    });
+    test('should open the time modal then the date modal', async ({ page }) => {
+      await page.click('#time-button');
+      await ionModalDidPresent.next();
+      await expect(datetime).toBeVisible();
+
+      await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
+      await ionModalDidDismiss.next();
+
+      await page.click('#date-button');
+      await ionModalDidPresent.next();
+      await expect(datetime).toBeVisible();
+    });
+  });
+});