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>
Brandy Carney
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 23 KiB |
@ -20,6 +20,86 @@
|
||||
--ion-safe-area-left: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-menu content-id="main">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>First</ion-item>
|
||||
<ion-item>Second</ion-item>
|
||||
<ion-item>Third</ion-item>
|
||||
<ion-item>Fourth</ion-item>
|
||||
<ion-item>Fifth</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar color="primary">
|
||||
<ion-title>App - Safe Area</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="main">
|
||||
<ion-card>
|
||||
<ion-card-header>
|
||||
<ion-card-title>Card</ion-card-title>
|
||||
</ion-card-header>
|
||||
<ion-card-content>
|
||||
<button class="expand" id="show-action-sheet" onclick="showActionSheet()">Show Action Sheet</button>
|
||||
<button class="expand" id="show-menu" onclick="showMenu()">Show Menu</button>
|
||||
<button class="expand" id="show-picker" onclick="showPicker()">Show Picker</button>
|
||||
<button class="expand" id="show-toast" onclick="showToast()">Show Toast</button>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
<ion-label>List Header</ion-label>
|
||||
</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-label>Item</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-divider>
|
||||
<ion-label>Item Divider</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item-sliding>
|
||||
<ion-item>
|
||||
<ion-label>Item Sliding</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options side="start">
|
||||
<ion-item-option>Start</ion-item-option>
|
||||
</ion-item-options>
|
||||
<ion-item-options side="end">
|
||||
<ion-item-option>End</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
</ion-list>
|
||||
|
||||
<ion-fab vertical="bottom" horizontal="end">
|
||||
<ion-fab-button color="danger">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
</ion-content>
|
||||
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
<ion-title>Footer</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
|
||||
<ion-picker-controller></ion-picker-controller>
|
||||
<ion-toast-controller></ion-toast-controller>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
async function showActionSheet() {
|
||||
const actionSheet = Object.assign(document.createElement('ion-action-sheet'), {
|
||||
@ -64,84 +144,5 @@
|
||||
await toast.present();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-menu content-id="main">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>First</ion-item>
|
||||
<ion-item>Second</ion-item>
|
||||
<ion-item>Third</ion-item>
|
||||
<ion-item>Fourth</ion-item>
|
||||
<ion-item>Fifth</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar color="primary">
|
||||
<ion-title>App - Safe Area</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="main">
|
||||
<ion-card>
|
||||
<ion-card-header>
|
||||
<ion-card-title>Card</ion-card-title>
|
||||
</ion-card-header>
|
||||
<ion-card-content>
|
||||
<ion-button expand="block" id="show-action-sheet" onclick="showActionSheet()">Show Action Sheet</ion-button>
|
||||
<ion-button expand="block" id="show-menu" onclick="showMenu()">Show Menu</ion-button>
|
||||
<ion-button expand="block" id="show-picker" onclick="showPicker()">Show Picker</ion-button>
|
||||
<ion-button expand="block" id="show-toast" onclick="showToast()">Show Toast</ion-button>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
<ion-label>List Header</ion-label>
|
||||
</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-label>Item</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-divider>
|
||||
<ion-label>Item Divider</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item-sliding>
|
||||
<ion-item>
|
||||
<ion-label>Item Sliding</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options side="start">
|
||||
<ion-item-option>Start</ion-item-option>
|
||||
</ion-item-options>
|
||||
<ion-item-options side="end">
|
||||
<ion-item-option>End</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
</ion-list>
|
||||
|
||||
<ion-fab vertical="bottom" horizontal="end">
|
||||
<ion-fab-button color="danger">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
</ion-content>
|
||||
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
<ion-title>Footer</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
|
||||
<ion-picker-controller></ion-picker-controller>
|
||||
<ion-toast-controller></ion-toast-controller>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
|
||||