test(select, select-popover): migrate to generators (#27393)

Issue number: N/A

---------

<!-- 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. -->

Select and select popover tests are using legacy syntax

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

- Select and select popover tests are using generator syntax


915bb49fad

- The select custom behavior does not vary across directions, so I
removed the extra RTL checks.


01555bd44b

- The single value screenshots were not being used, so I removed them.


8b4cffcaf8

- The spec screenshots were not being used, so I removed them.


e50b08b2ed

- The legacy standalone check does not vary across directions, so I
removed the RTL checks.


43e26bab77

- The legacy single value tests do not vary across directions, so I
removed the the RTL checks


4935a68aab

- The basic tests were creating screenshots of each overlay as they were
opened. However, we already have test coverage for how each overlay is
rendered in each overlay test suite. As a result, I removed the
screenshots in favor of a `toBeVisible` assertion. This ensures that
overlays are presented with the select, which is what I think we want to
prioritize testing.
- These same tests were also waiting for overlays to dismiss. This
behavior is already tested in the respective overlay test suites, so I
removed the dismiss calls.


8cc6c426f1
- The legacy basic tests were creating screenshots of each overlay as
they were opened. However, we already have test coverage for how each
overlay is rendered in each overlay test suite. As a result, I removed
the screenshots in favor of a `toBeVisible` assertion. This ensures that
overlays are presented with the select, which is what I think we want to
prioritize testing.
- These same tests were also waiting for overlays to dismiss. This
behavior is already tested in the respective overlay test suites, so I
removed the dismiss calls.

## 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. -->

---------

Co-authored-by: ionitron <hi@ionicframework.com>

core/src/components/select-popover/test/basic/select-popover.e2e-legacy.ts

@@ -1,65 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-import type { SelectPopoverOption } from '../../select-popover-interface';
-import { SelectPopoverPage } from '../fixtures';
-
-const options: SelectPopoverOption[] = [
-  { value: 'apple', text: 'Apple', disabled: false, checked: false },
-  { value: 'banana', text: 'Banana', disabled: false, checked: false },
-];
-
-const checkedOptions: SelectPopoverOption[] = [
-  { value: 'apple', text: 'Apple', disabled: false, checked: true },
-  { value: 'banana', text: 'Banana', disabled: false, checked: false },
-];
-
-test.describe('select-popover: basic', () => {
-  test.beforeEach(({ skip, browserName }) => {
-    skip.rtl();
-    skip.mode('ios', 'Consistent behavior across modes');
-    test.skip(browserName === 'webkit', 'https://ionic-cloud.atlassian.net/browse/FW-2979');
-  });
-
-  test.describe('single selection', () => {
-    let selectPopoverPage: SelectPopoverPage;
-
-    test.beforeEach(async ({ page }) => {
-      selectPopoverPage = new SelectPopoverPage(page);
-    });
-
-    test('clicking an unselected option should dismiss the popover', async () => {
-      await selectPopoverPage.setup(options, false);
-
-      await selectPopoverPage.clickOption('apple');
-      await selectPopoverPage.ionPopoverDidDismiss.next();
-      await expect(selectPopoverPage.popover).not.toBeVisible();
-    });
-
-    test('clicking a selected option should dismiss the popover', async () => {
-      await selectPopoverPage.setup(checkedOptions, false);
-
-      await selectPopoverPage.clickOption('apple');
-      await selectPopoverPage.ionPopoverDidDismiss.next();
-      await expect(selectPopoverPage.popover).not.toBeVisible();
-    });
-
-    test('pressing Space on an unselected option should dismiss the popover', async () => {
-      await selectPopoverPage.setup(options, false);
-
-      await selectPopoverPage.pressSpaceOnOption('apple');
-      await selectPopoverPage.ionPopoverDidDismiss.next();
-      await expect(selectPopoverPage.popover).not.toBeVisible();
-    });
-
-    test('pressing Space on a selected option should dismiss the popover', async ({ browserName }) => {
-      test.skip(browserName === 'firefox', 'Same behavior as https://ionic-cloud.atlassian.net/browse/FW-2979');
-
-      await selectPopoverPage.setup(checkedOptions, false);
-
-      await selectPopoverPage.pressSpaceOnOption('apple');
-      await selectPopoverPage.ionPopoverDidDismiss.next();
-      await expect(selectPopoverPage.popover).not.toBeVisible();
-    });
-  });
-});

core/src/components/select-popover/test/basic/select-popover.e2e.ts

@@ -0,0 +1,92 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+import type { SelectPopoverOption } from '../../select-popover-interface';
+import { SelectPopoverPage } from '../fixtures';
+
+const options: SelectPopoverOption[] = [
+  { value: 'apple', text: 'Apple', disabled: false, checked: false },
+  { value: 'banana', text: 'Banana', disabled: false, checked: false },
+];
+
+const checkedOptions: SelectPopoverOption[] = [
+  { value: 'apple', text: 'Apple', disabled: false, checked: true },
+  { value: 'banana', text: 'Banana', disabled: false, checked: false },
+];
+
+/**
+ * This behavior does not vary across modes/directions.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('select-popover: basic'), () => {
+    test.beforeEach(({ browserName }) => {
+      test.skip(browserName === 'webkit', 'https://ionic-cloud.atlassian.net/browse/FW-2979');
+    });
+
+    test.describe('single selection', () => {
+      let selectPopoverPage: SelectPopoverPage;
+
+      test.beforeEach(async ({ page }) => {
+        selectPopoverPage = new SelectPopoverPage(page);
+      });
+
+      test('clicking an unselected option should dismiss the popover', async () => {
+        await selectPopoverPage.setup(config, options, false);
+
+        await selectPopoverPage.clickOption('apple');
+        await selectPopoverPage.ionPopoverDidDismiss.next();
+        await expect(selectPopoverPage.popover).not.toBeVisible();
+      });
+
+      test('clicking a selected option should dismiss the popover', async () => {
+        await selectPopoverPage.setup(config, checkedOptions, false);
+
+        await selectPopoverPage.clickOption('apple');
+        await selectPopoverPage.ionPopoverDidDismiss.next();
+        await expect(selectPopoverPage.popover).not.toBeVisible();
+      });
+
+      test('pressing Space on an unselected option should dismiss the popover', async () => {
+        await selectPopoverPage.setup(config, options, false);
+
+        await selectPopoverPage.pressSpaceOnOption('apple');
+        await selectPopoverPage.ionPopoverDidDismiss.next();
+        await expect(selectPopoverPage.popover).not.toBeVisible();
+      });
+
+      test('pressing Space on a selected option should dismiss the popover', async ({ browserName }) => {
+        test.skip(browserName === 'firefox', 'Same behavior as https://ionic-cloud.atlassian.net/browse/FW-2979');
+
+        await selectPopoverPage.setup(config, checkedOptions, false);
+
+        await selectPopoverPage.pressSpaceOnOption('apple');
+        await selectPopoverPage.ionPopoverDidDismiss.next();
+        await expect(selectPopoverPage.popover).not.toBeVisible();
+      });
+    });
+  });
+});
+
+/**
+ * This behavior does not vary across directions.
+ * The components used inside of `ion-select-popover`
+ * do have RTL logic, but those are tested in their
+ * respective component test files.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('select-popover: rendering'), () => {
+    let selectPopoverPage: SelectPopoverPage;
+
+    test.beforeEach(async ({ page }) => {
+      selectPopoverPage = new SelectPopoverPage(page);
+    });
+    test('should not have visual regressions with single selection', async () => {
+      await selectPopoverPage.setup(config, options, false);
+      await selectPopoverPage.screenshot(screenshot, 'select-popover-diff');
+    });
+    test('should not have visual regressions with multiple selection', async () => {
+      await selectPopoverPage.setup(config, options, true);
+      await selectPopoverPage.screenshot(screenshot, 'select-popover-multiple-diff');
+    });
+  });
+});

core/src/components/select-popover/test/fixtures.ts

@@ -1,4 +1,5 @@
-import type { E2EPage, E2ELocator, EventSpy } from '@utils/test/playwright';
+import { expect } from '@playwright/test';
+import type { E2EPage, E2ELocator, EventSpy, E2EPageOptions, ScreenshotFn } from '@utils/test/playwright';
 
 import type { SelectPopoverOption } from '../select-popover-interface';
 
@@ -18,10 +19,11 @@ export class SelectPopoverPage {
     this.page = page;
   }
 
-  async setup(options: SelectPopoverOption[], multiple = false) {
+  async setup(config: E2EPageOptions, options: SelectPopoverOption[], multiple = false) {
     const { page } = this;
 
-    await page.setContent(`
+    await page.setContent(
+      `
     <ion-popover>
       <ion-select-popover></ion-select-popover>
     </ion-popover>
@@ -30,7 +32,9 @@ export class SelectPopoverPage {
       selectPopover.options = ${JSON.stringify(options)};
       selectPopover.multiple = ${multiple};
     </script>
-    `);
+    `,
+      config
+    );
 
     const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
     this.ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
@@ -45,6 +49,10 @@ export class SelectPopoverPage {
     await ionPopoverDidPresent.next();
   }
 
+  async screenshot(screenshot: ScreenshotFn, name: string) {
+    await expect(this.selectPopover).toHaveScreenshot(screenshot(name));
+  }
+
   async clickOption(value: string) {
     const option = this.getOption(value);
     await option.click();