test(many): replace ionic buttons in e2e tests with native html buttons (#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 <hi@ionicframework.com>
This commit is contained in:
Brandy Carney
2024-05-02 15:20:48 -04:00
committed by GitHub
parent ba5cebf254
commit 0124f3b0b3
669 changed files with 1131 additions and 1246 deletions

View File

@ -12,6 +12,33 @@
<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>
h1 {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
font-weight: normal;
color: #a1a7b0;
margin-top: 10px;
margin-left: 5px;
}
hr {
background: #eff1f3;
margin-top: 18px;
margin-bottom: 25px;
}
ion-content ion-breadcrumbs {
padding: 3px 5px;
}
</style>
</head>
<body>
<ion-app>
@ -366,32 +393,5 @@
await popover.present();
}
</script>
<style>
h1 {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
font-weight: normal;
color: #a1a7b0;
margin-top: 10px;
margin-left: 5px;
}
hr {
background: #eff1f3;
margin-top: 18px;
margin-bottom: 25px;
}
ion-content ion-breadcrumbs {
padding: 3px 5px;
}
</style>
</body>
</html>

View File

@ -30,8 +30,8 @@
<ion-breadcrumb href="#"> Photos </ion-breadcrumb>
</ion-breadcrumbs>
<ion-button id="add-btn" onclick="addItem()">Add Item</ion-button>
<ion-button id="remove-btn" onclick="removeItem()">Remove Item</ion-button>
<button id="add-btn" onclick="addItem()">Add Item</button>
<button id="remove-btn" onclick="removeItem()">Remove Item</button>
</ion-content>
</ion-app>