fix(select): pass click event to popover interface (#17146)

also updates e2e test so that it will continue to take screenshots after mismatches and adds the popover example to avoid future regressions

references #16715 fixes #17142

Author: brandyscarney

core/src/components/select/select.tsx

@@ -139,8 +139,8 @@ export class Select implements ComponentInterface {
   }
 
   @Listen('click')
-  onClick() {
-    this.open();
+  onClick(ev: UIEvent) {
+    this.open(ev);
   }
 
   async componentDidLoad() {

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

@@ -5,28 +5,68 @@ test('select: basic', async () => {
     url: '/src/components/select/test/basic?ionic:_testing=true'
   });
 
-  let compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
+  const compares = [];
+  compares.push(await page.compareScreenshot());
 
+  // Gender Alert Select
   let select = await page.find('#gender');
   await select.click();
 
-  const alert = await page.find('ion-alert');
+  let alert = await page.find('ion-alert');
   await alert.waitForVisible();
   await page.waitFor(250);
 
-  compare = await page.compareScreenshot('should open gender single select');
-  expect(compare).toMatchScreenshot();
+  compares.push(await page.compareScreenshot('should open gender single select'));
 
   await alert.callMethod('dismiss');
 
-  select = await page.find('#customSelect');
+  // Skittles Action Sheet Select
+  select = await page.find('#skittles');
   await select.click();
 
-  const actionSheet = await page.find('ion-action-sheet');
+  let actionSheet = await page.find('ion-action-sheet');
   await actionSheet.waitForVisible();
   await page.waitFor(250);
 
-  compare = await page.compareScreenshot('should open custom action sheet select');
-  expect(compare).toMatchScreenshot();
+  compares.push(await page.compareScreenshot('should open skittles action sheet select'));
+
+  await actionSheet.callMethod('dismiss');
+
+  // Custom Alert Select
+  select = await page.find('#customAlertSelect');
+  await select.click();
+
+  alert = await page.find('ion-alert');
+  await alert.waitForVisible();
+  await page.waitFor(250);
+
+  compares.push(await page.compareScreenshot('should open custom alert select'));
+
+  await alert.callMethod('dismiss');
+
+  // Custom Popover Select
+  select = await page.find('#customPopoverSelect');
+  await select.click();
+
+  const popover = await page.find('ion-popover');
+  await popover.waitForVisible();
+  await page.waitFor(250);
+
+  compares.push(await page.compareScreenshot('should open custom popover select'));
+
+  // Custom Action Sheet Select
+  select = await page.find('#customActionSheetSelect');
+  await select.click();
+
+  actionSheet = await page.find('ion-action-sheet');
+  await actionSheet.waitForVisible();
+  await page.waitFor(250);
+
+  compares.push(await page.compareScreenshot('should open custom action sheet select'));
+
+  await actionSheet.callMethod('dismiss');
+
+  for (const compare of compares) {
+    expect(compare).toMatchScreenshot();
+  }
 });

core/src/components/select/test/basic/index.html

@@ -44,7 +44,7 @@
 
         <ion-item>
           <ion-label>Skittles</ion-label>
-          <ion-select id="customSelect" interface="action-sheet" name="skittles">
+          <ion-select id="skittles" interface="action-sheet" name="skittles">
             <ion-select-option value="red">Red</ion-select-option>
             <ion-select-option value="purple">Purple</ion-select-option>
             <ion-select-option value="yellow">Yellow</ion-select-option>