test(many): replace ionic buttons in e2e tests with native html butto…

…ns (#29422)

Issue number: internal

---------

<!-- 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?
The `ion-button` component is used in several tests to navigate or show
overlays. This causes screenshot diffs in unrelated tests any time the
UI of the `ion-button` is updated.

## What is the new behavior?
Removes the `ion-button` elements from unrelated tests. 

Did not remove the `ion-button`s from the following tests:
- All `ion-button`s in an `ion-buttons` component
- An `ion-button` inside of a menu
- breadcrumbs/test/basic (uses a clear button in a list header, needs to
be moved)
- input/test/slot
- item/test/buttons
- item/test/colors
- item/test/dividers
- item/test/inputs
- item/test/media
- list-header/test/basic
- ripple-effect/test/basic
- router/test/basic
- router/test/guards
- router-outlet/test/basic
- select/test/slot
- textarea/test/slot

Updates the icon/basic test to use the right icon names by comparing
against the v3 names: https://ionicframework.com/docs/v3/ionicons/

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

---------

Co-authored-by: ionitron <[email protected]>

core/src/components/action-sheet/test/a11y/index.html

@@ -19,14 +19,14 @@
  <main class="ion-padding">
  <h1>Action Sheet - A11y</h1>
 
- <ion-button id="bothHeaders" onclick="presentBothHeaders()">Both Headers</ion-button>
- <ion-button id="subHeaderOnly" onclick="presentSubHeaderOnly()">Subheader Only</ion-button>
- <ion-button id="noHeaders" onclick="presentNoHeaders()">No Headers</ion-button>
- <ion-button id="customAria" onclick="presentCustomAria()">Custom Aria</ion-button>
- <ion-button id="ariaLabelButton" onclick="presentAriaLabelButton()">Aria Label Button</ion-button>
- <ion-button id="ariaLabelCancelButton" onclick="presentAriaLabelCancelButton()"
- >Aria Label Cancel Button</ion-button
- >
+ <button class="expand" id="bothHeaders" onclick="presentBothHeaders()">Both Headers</button>
+ <button class="expand" id="subHeaderOnly" onclick="presentSubHeaderOnly()">Subheader Only</button>
+ <button class="expand" id="noHeaders" onclick="presentNoHeaders()">No Headers</button>
+ <button class="expand" id="customAria" onclick="presentCustomAria()">Custom Aria</button>
+ <button class="expand" id="ariaLabelButton" onclick="presentAriaLabelButton()">Aria Label Button</button>
+ <button class="expand" id="ariaLabelCancelButton" onclick="presentAriaLabelCancelButton()">
+ Aria Label Cancel Button
+ </button>
  </main>
 
  <script>

core/src/components/action-sheet/test/basic/index.html

@@ -27,24 +27,18 @@
  </ion-header>
 
  <ion-content class="ion-padding">
- <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
- <ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()"
- >Alert from Action Sheet</ion-button
- >
- <ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>
- <ion-button expand="block" id="custom" onclick="presentWithCssClass()">Custom CSS Class</ion-button>
- <ion-button expand="block" id="icons" onclick="presentIcons()">Icons</ion-button>
- <ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()"
- >No Backdrop Dismiss</ion-button
- >
- <ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
- <ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()"
- >Scroll Without Cancel</ion-button
- >
- <ion-button expand="block" id="customBackdrop" onclick="presentWithCssClass('custom-backdrop')"
- >Custom Backdrop Opacity</ion-button
- >
- <ion-button expand="block" id="buttonData" onclick="presentWithButtonData()">Button data</ion-button>
+ <button class="expand" id="basic" onclick="presentBasic()">Basic</button>
+ <button class="expand" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</button>
+ <button class="expand" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</button>
+ <button class="expand" id="custom" onclick="presentWithCssClass()">Custom CSS Class</button>
+ <button class="expand" id="icons" onclick="presentIcons()">Icons</button>
+ <button class="expand" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</button>
+ <button class="expand" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</button>
+ <button class="expand" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</button>
+ <button class="expand" id="customBackdrop" onclick="presentWithCssClass('custom-backdrop')">
+ Custom Backdrop Opacity
+ </button>
+ <button class="expand" id="buttonData" onclick="presentWithButtonData()">Button data</button>
  </ion-content>
  </ion-app>
 

core/src/components/action-sheet/test/is-open/index.html

@@ -47,11 +47,11 @@
  <div class="grid">
  <div class="grid-item">
  <h2>Default</h2>
- <ion-button id="default" onclick="openActionSheet()">Open ActionSheet</ion-button>
+ <button id="default" onclick="openActionSheet()">Open ActionSheet</button>
  </div>
  <div class="grid-item">
  <h2>Open, then close after 500ms</h2>
- <ion-button id="timeout" onclick="openActionSheet(500)">Open ActionSheet</ion-button>
+ <button id="timeout" onclick="openActionSheet(500)">Open ActionSheet</button>
  </div>
  </div>
 

core/src/components/action-sheet/test/standalone/index.html

@@ -18,28 +18,16 @@
  window.actionSheetController = actionSheetController;
  </script>
  <body>
- <button id="basic" onclick="presentBasic()">Basic</button>
- <button id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</button>
- <button id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</button>
- <button id="scrollableOptions" onclick="presentScroll()">Scrollable Options</button>
- <button id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</button>
- <button id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</button>
- <button id="icons" onclick="presentIcons()">Icons</button>
- <button id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</button>
-
- <style>
- body > button {
- display: block;
- clear: both;
- width: 100%;
- padding: 12px 8px;
- font-size: 1em;
- background: #f8f8f8;
- border: 1px solid #eee;
- border-radius: 4px;
- margin-bottom: 8px;
- }
- </style>
+ <main>
+ <button class="expand" id="basic" onclick="presentBasic()">Basic</button>
+ <button class="expand" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</button>
+ <button class="expand" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</button>
+ <button class="expand" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</button>
+ <button class="expand" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</button>
+ <button class="expand" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</button>
+ <button class="expand" id="icons" onclick="presentIcons()">Icons</button>
+ <button class="expand" id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</button>
+ </main>
 
  <script>
  window.addEventListener('ionActionSheetDidDismiss', function (e) {

core/src/components/action-sheet/test/translucent/index.html

@@ -12,6 +12,50 @@
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+ <style>
+ f {
+ display: block;
+ width: 100%;
+ height: 150px;
+ }
+
+ .red {
+ background-color: #ea445a;
+ }
+
+ .green {
+ background-color: #76d672;
+ }
+
+ .blue {
+ background-color: #3478f6;
+ }
+
+ .yellow {
+ background-color: #ffff80;
+ }
+
+ .pink {
+ background-color: #ff6b86;
+ }
+
+ .purple {
+ background-color: #7e34f6;
+ }
+
+ .black {
+ background-color: #000;
+ }
+
+ .fuchsia {
+ background-color: #cc00ff;
+ }
+
+ .orange {
+ background-color: #f69234;
+ }
+ </style>
  </head>
  <script type="module">
  import { actionSheetController } from '../../../../dist/ionic/index.esm.js';
@@ -26,18 +70,12 @@
  </ion-header>
 
  <ion-content class="ion-padding">
- <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
- <ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()"
- >No Backdrop Dismiss</ion-button
- >
- <ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()"
- >Alert from Action Sheet</ion-button
- >
- <ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
- <ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()"
- >Scroll Without Cancel</ion-button
- >
- <ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>
+ <button class="expand" id="basic" onclick="presentBasic()">Basic</button>
+ <button class="expand" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</button>
+ <button class="expand" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</button>
+ <button class="expand" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</button>
+ <button class="expand" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</button>
+ <button class="expand" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</button>
 
  <ion-grid>
  <ion-row>
@@ -345,49 +383,5 @@
  });
  }
  </script>
-
- <style>
- f {
- display: block;
- width: 100%;
- height: 150px;
- }
-
- .red {
- background-color: #ea445a;
- }
-
- .green {
- background-color: #76d672;
- }
-
- .blue {
- background-color: #3478f6;
- }
-
- .yellow {
- background-color: #ffff80;
- }
-
- .pink {
- background-color: #ff6b86;
- }
-
- .purple {
- background-color: #7e34f6;
- }
-
- .black {
- background-color: #000;
- }
-
- .fuchsia {
- background-color: #cc00ff;
- }
-
- .orange {
- background-color: #f69234;
- }
- </style>
  </body>
 </html>

core/src/components/action-sheet/test/trigger/index.html

@@ -47,11 +47,11 @@
  <div class="grid">
  <div class="grid-item">
  <h2>Default</h2>
- <ion-button id="default">Open ActionSheet</ion-button>
+ <button id="default">Open ActionSheet</button>
  </div>
  <div class="grid-item">
  <h2>Open, then close after 500ms</h2>
- <ion-button id="timeout">Open ActionSheet</ion-button>
+ <button id="timeout">Open ActionSheet</button>
  </div>
  </div>
 

core/src/components/alert/test/a11y/index.html

@@ -9,19 +9,6 @@
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
- <style>
- main > button {
- display: block;
- clear: both;
- width: 100%;
- padding: 12px 8px;
- font-size: 1em;
- background: #f8f8f8;
- border: 1px solid #eee;
- border-radius: 4px;
- margin-bottom: 8px;
- }
- </style>
  </head>
  <script type="module">
  import { alertController } from '../../../../dist/ionic/index.esm.js';
@@ -32,13 +19,13 @@
  <main class="ion-padding">
  <h1>Alert - A11y</h1>
 
- <button id="bothHeaders" onclick="presentBothHeaders()">Both Headers</button>
- <button id="subHeaderOnly" onclick="presentSubHeaderOnly()">Subheader Only</button>
- <button id="noHeaders" onclick="presentNoHeaders()">No Headers</button>
- <button id="noMessage" onclick="presentNoMessage()">No Message</button>
- <button id="customAria" onclick="presentCustomAria()">Custom Aria</button>
- <button id="ariaLabelButton" onclick="presentAriaLabelButton()">Aria Label Button</button>
- <button id="checkbox" onclick="presentAlertCheckbox()">Checkbox</button>
+ <button class="expand" id="bothHeaders" onclick="presentBothHeaders()">Both Headers</button>
+ <button class="expand" id="subHeaderOnly" onclick="presentSubHeaderOnly()">Subheader Only</button>
+ <button class="expand" id="noHeaders" onclick="presentNoHeaders()">No Headers</button>
+ <button class="expand" id="noMessage" onclick="presentNoMessage()">No Message</button>
+ <button class="expand" id="customAria" onclick="presentCustomAria()">Custom Aria</button>
+ <button class="expand" id="ariaLabelButton" onclick="presentAriaLabelButton()">Aria Label Button</button>
+ <button class="expand" id="checkbox" onclick="presentAlertCheckbox()">Checkbox</button>
  </main>
 
  <script>

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

@@ -28,31 +28,21 @@
  </ion-header>
 
  <ion-content class="ion-padding">
- <button class="custom-accordion-button" id="basic" onclick="presentAlert()">Alert</button>
- <button id="longMessage" onclick="presentAlertLongMessage()">Alert Long Message</button>
- <button id="multipleButtons" onclick="presentAlertMultipleButtons()">Multiple Buttons (>2)</button>
- <button id="noMessage" onclick="presentAlertNoMessage()">Alert No Message</button>
- <button id="asyncHandler" onclick="presentAlertAsyncHandler()">Alert Async Handler</button>
- <button id="confirm" onclick="presentAlertConfirm()">Confirm</button>
- <button id="prompt" onclick="presentAlertPrompt()">Prompt</button>
- <button id="radio" onclick="presentAlertRadio()">Radio</button>
- <button id="checkbox" onclick="presentAlertCheckbox()">Checkbox</button>
- <button onclick="presentWithCssClass()">CssClass</button>
+ <button class="expand" class="custom-accordion-button" id="basic" onclick="presentAlert()">Alert</button>
+ <button class="expand" id="longMessage" onclick="presentAlertLongMessage()">Alert Long Message</button>
+ <button class="expand" id="multipleButtons" onclick="presentAlertMultipleButtons()">
+ Multiple Buttons (>2)
+ </button>
+ <button class="expand" id="noMessage" onclick="presentAlertNoMessage()">Alert No Message</button>
+ <button class="expand" id="asyncHandler" onclick="presentAlertAsyncHandler()">Alert Async Handler</button>
+ <button class="expand" id="confirm" onclick="presentAlertConfirm()">Confirm</button>
+ <button class="expand" id="prompt" onclick="presentAlertPrompt()">Prompt</button>
+ <button class="expand" id="radio" onclick="presentAlertRadio()">Radio</button>
+ <button class="expand" id="checkbox" onclick="presentAlertCheckbox()">Checkbox</button>
+ <button class="expand" onclick="presentWithCssClass()">CssClass</button>
  </ion-content>
 
  <style>
- ion-content > button {
- display: block;
- clear: both;
- width: 100%;
- padding: 12px 8px;
- font-size: 1em;
- background: #f8f8f8;
- border: 1px solid #eee;
- border-radius: 4px;
- margin-bottom: 8px;
- }
-
  .my-custom-class {
  --background: lightblue;
  --min-width: 0;

core/src/components/alert/test/is-open/index.html

@@ -11,19 +11,6 @@
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
- <style>
- ion-content > button {
- display: block;
- clear: both;
- width: 100%;
- padding: 12px 8px;
- font-size: 1em;
- background: #f8f8f8;
- border: 1px solid #eee;
- border-radius: 4px;
- margin-bottom: 8px;
- }
- </style>
  </head>
 
  <body>
@@ -35,8 +22,8 @@
  </ion-header>
 
  <ion-content class="ion-padding">
- <button id="default" onclick="openAlert()">Open Alert</button>
- <button id="timeout" onclick="openAlert(500)">Open Alert, Close After 500ms</button>
+ <button class="expand" id="default" onclick="openAlert()">Open Alert</button>
+ <button class="expand" id="timeout" onclick="openAlert(500)">Open Alert, Close After 500ms</button>
 
  <ion-alert header="Alert" message="Hello World!"></ion-alert>
  </ion-content>