test(select): add checks for cancel text prop

Author: thetaPC

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

@@ -72,5 +72,91 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       const wrapper = page.locator('.wrapper');
       await expect(wrapper).toHaveScreenshot(screenshot(`select-custom-parts-diff`));
     });
+
+    test('should render custom cancel text when prop is provided with alert interface', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-select label="Fruit" interface="alert" value="bananas" cancel-text="Close me">
+          <ion-select-option value="apples">Apples</ion-select-option>
+          <ion-select-option value="bananas">Bananas</ion-select-option>
+          <ion-select-option value="oranges">Oranges</ion-select-option>
+        </ion-select>
+      `,
+        config
+      );
+
+      const select = page.locator('ion-select');
+      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+
+      await select.click();
+      await ionAlertDidPresent.next();
+
+      await page.waitForChanges();
+
+      const alert = page.locator('ion-alert');
+      const cancelButton = alert.locator('.alert-button-role-cancel');
+
+      // Verify the cancel button text
+      await expect(cancelButton).toHaveText('Close me');
+    });
+
+    test('should render custom cancel text when prop is provided with action sheet interface', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-select label="Fruit" interface="action-sheet" value="bananas" cancel-text="Close me">
+          <ion-select-option value="apples">Apples</ion-select-option>
+          <ion-select-option value="bananas">Bananas</ion-select-option>
+          <ion-select-option value="oranges">Oranges</ion-select-option>
+        </ion-select>
+      `,
+        config
+      );
+
+      const select = page.locator('ion-select');
+      const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+
+      await select.click();
+      await ionActionSheetDidPresent.next();
+
+      await page.waitForChanges();
+
+      const actionSheet = page.locator('ion-action-sheet');
+      const cancelButton = actionSheet.locator('.action-sheet-cancel');
+
+      // Verify the cancel button text
+      await expect(cancelButton).toHaveText('Close me');
+    });
+
+    test('should render custom cancel text when prop is provided with modal interface', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30295',
+      });
+
+      await page.setContent(
+        `
+        <ion-select label="Fruit" interface="modal" value="bananas" cancel-text="Close me">
+          <ion-select-option value="apples">Apples</ion-select-option>
+          <ion-select-option value="bananas">Bananas</ion-select-option>
+          <ion-select-option value="oranges">Oranges</ion-select-option>
+        </ion-select>
+      `,
+        config
+      );
+
+      const select = page.locator('ion-select');
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await select.click();
+      await ionModalDidPresent.next();
+
+      await page.waitForChanges();
+
+      const modal = page.locator('ion-modal');
+      const cancelButton = modal.locator('ion-button');
+
+      // Verify the cancel button text
+      await expect(cancelButton).toHaveText('Close me');
+    });
   });
 });