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
@ -12,105 +12,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>
|
||||
</head>
|
||||
<script type="module">
|
||||
import { loadingController } from '../../../../../dist/ionic/index.esm.js';
|
||||
window.loadingController = loadingController;
|
||||
</script>
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Loading - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="ion-padding">
|
||||
<ion-button
|
||||
id="basic-loading"
|
||||
expand="block"
|
||||
onclick="openLoading({ message: 'Hellooo', duration: 2000, htmlAttributes: { 'data-testid': 'basic-loading' } })"
|
||||
>Show Loading</ion-button
|
||||
>
|
||||
<ion-button id="default" expand="block" onclick="openLoading({duration: 2000, content: 'Please wait...'})"
|
||||
>Show Default Loading</ion-button
|
||||
>
|
||||
<ion-button
|
||||
id="long-content-loading"
|
||||
expand="block"
|
||||
onclick="openLoading({duration: 2000, message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})"
|
||||
>Show Loading with long message</ion-button
|
||||
>
|
||||
<ion-button
|
||||
id="no-spinner-loading"
|
||||
expand="block"
|
||||
onclick="openLoading({duration: 2000, message: 'Please wait...', spinner: null})"
|
||||
>Show Loading with no spinner</ion-button
|
||||
>
|
||||
<ion-button
|
||||
id="translucent-loading"
|
||||
expand="block"
|
||||
onclick="openLoading({duration: 5000, message: 'Please wait...', translucent: true})"
|
||||
>Show Loading with translucent</ion-button
|
||||
>
|
||||
<ion-button
|
||||
id="custom-class-loading"
|
||||
expand="block"
|
||||
onclick="openLoading({duration: 5000,message: 'Please wait...', spinner: 'lines-sharp', cssClass: 'custom-class custom-loading'})"
|
||||
>Show Loading with cssClass</ion-button
|
||||
>
|
||||
<ion-button id="backdrop-loading" expand="block" onclick="openLoading({backdropDismiss: true})"
|
||||
>Show Backdrop Click Loading</ion-button
|
||||
>
|
||||
<ion-button
|
||||
id="html-content-loading"
|
||||
expand="block"
|
||||
onclick="openLoading({cssClass: 'html-loading', duration: 5000, message: '<ion-button>Click impatiently to load faster</ion-button>'})"
|
||||
>Show Loading with HTML content</ion-button
|
||||
>
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="6">
|
||||
<f class="red"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="green"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="blue"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="yellow"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="pink"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="purple"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="black"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="orange"></f>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
<script>
|
||||
window.Ionic = {
|
||||
config: {
|
||||
innerHTMLTemplatesEnabled: true,
|
||||
},
|
||||
};
|
||||
|
||||
async function openLoading(opts) {
|
||||
const loading = await loadingController.create(opts);
|
||||
await loading.present();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.html-loading {
|
||||
@ -170,5 +71,110 @@
|
||||
background-color: #f69234;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<script type="module">
|
||||
import { loadingController } from '../../../../../dist/ionic/index.esm.js';
|
||||
window.loadingController = loadingController;
|
||||
</script>
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Loading - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="ion-padding">
|
||||
<button
|
||||
id="basic-loading"
|
||||
class="expand"
|
||||
onclick="openLoading({ message: 'Hellooo', duration: 2000, htmlAttributes: { 'data-testid': 'basic-loading' } })"
|
||||
>
|
||||
Show Loading
|
||||
</button>
|
||||
<button id="default" class="expand" onclick="openLoading({duration: 2000, content: 'Please wait...'})">
|
||||
Show Default Loading
|
||||
</button>
|
||||
<button
|
||||
id="long-content-loading"
|
||||
class="expand"
|
||||
onclick="openLoading({duration: 2000, message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})"
|
||||
>
|
||||
Show Loading with long message
|
||||
</button>
|
||||
<button
|
||||
id="no-spinner-loading"
|
||||
class="expand"
|
||||
onclick="openLoading({duration: 2000, message: 'Please wait...', spinner: null})"
|
||||
>
|
||||
Show Loading with no spinner
|
||||
</button>
|
||||
<button
|
||||
id="translucent-loading"
|
||||
class="expand"
|
||||
onclick="openLoading({duration: 5000, message: 'Please wait...', translucent: true})"
|
||||
>
|
||||
Show Loading with translucent
|
||||
</button>
|
||||
<button
|
||||
id="custom-class-loading"
|
||||
class="expand"
|
||||
onclick="openLoading({duration: 5000,message: 'Please wait...', spinner: 'lines-sharp', cssClass: 'custom-class custom-loading'})"
|
||||
>
|
||||
Show Loading with cssClass
|
||||
</button>
|
||||
<button id="backdrop-loading" class="expand" onclick="openLoading({backdropDismiss: true})">
|
||||
Show Backdrop Click Loading
|
||||
</button>
|
||||
<button
|
||||
id="html-content-loading"
|
||||
class="expand"
|
||||
onclick="openLoading({cssClass: 'html-loading', duration: 5000, message: '<button>Click impatiently to load faster</button>'})"
|
||||
>
|
||||
Show Loading with HTML content
|
||||
</button>
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="6">
|
||||
<f class="red"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="green"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="blue"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="yellow"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="pink"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="purple"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="black"></f>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<f class="orange"></f>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
<script>
|
||||
window.Ionic = {
|
||||
config: {
|
||||
innerHTMLTemplatesEnabled: true,
|
||||
},
|
||||
};
|
||||
|
||||
async function openLoading(opts) {
|
||||
const loading = await loadingController.create(opts);
|
||||
await loading.present();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
@ -47,11 +47,11 @@
|
||||
<div class="grid">
|
||||
<div class="grid-item">
|
||||
<h2>Default</h2>
|
||||
<ion-button id="default" onclick="openLoading()">Open Loading</ion-button>
|
||||
<button id="default" onclick="openLoading()">Open Loading</button>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<h2>Open, then close after 500ms</h2>
|
||||
<ion-button id="timeout" onclick="openLoading(500)">Open Loading</ion-button>
|
||||
<button id="timeout" onclick="openLoading(500)">Open Loading</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -18,45 +18,39 @@
|
||||
window.loadingController = loadingController;
|
||||
</script>
|
||||
<body>
|
||||
<button id="basic-loading" onclick="openLoading({ message: 'Hellooo', duration: 5000 })">Show Loading</button>
|
||||
<button
|
||||
id="long-content-loading"
|
||||
onclick="openLoading({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})"
|
||||
>
|
||||
Show Loading with long content
|
||||
</button>
|
||||
<button
|
||||
id="no-spinner-loading"
|
||||
onclick="openLoading({duration: 2000, content: 'Loading Please Wait...', spinner: null})"
|
||||
>
|
||||
Show Loading with no spinner
|
||||
</button>
|
||||
<button
|
||||
id="translucent-loading"
|
||||
onclick="openLoading({duration: 5000, content: 'Loading Please Wait...', translucent: true})"
|
||||
>
|
||||
Show Loading with translucent
|
||||
</button>
|
||||
<button
|
||||
id="custom-class-loading"
|
||||
onclick="openLoading({duration: 5000, content: 'Loading Please Wait...', translucent: true, cssClass: 'custom-class custom-loading'})"
|
||||
>
|
||||
Show Loading with cssClass
|
||||
</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-loading" onclick="openLoading({ message: 'Hellooo', duration: 5000 })">
|
||||
Show Loading
|
||||
</button>
|
||||
<button
|
||||
class="expand"
|
||||
id="long-content-loading"
|
||||
onclick="openLoading({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})"
|
||||
>
|
||||
Show Loading with long content
|
||||
</button>
|
||||
<button
|
||||
class="expand"
|
||||
id="no-spinner-loading"
|
||||
onclick="openLoading({duration: 2000, content: 'Loading Please Wait...', spinner: null})"
|
||||
>
|
||||
Show Loading with no spinner
|
||||
</button>
|
||||
<button
|
||||
class="expand"
|
||||
id="translucent-loading"
|
||||
onclick="openLoading({duration: 5000, content: 'Loading Please Wait...', translucent: true})"
|
||||
>
|
||||
Show Loading with translucent
|
||||
</button>
|
||||
<button
|
||||
class="expand"
|
||||
id="custom-class-loading"
|
||||
onclick="openLoading({duration: 5000, content: 'Loading Please Wait...', translucent: true, cssClass: 'custom-class custom-loading'})"
|
||||
>
|
||||
Show Loading with cssClass
|
||||
</button>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
async function openLoading(opts) {
|
||||
|
||||
@ -47,11 +47,11 @@
|
||||
<div class="grid">
|
||||
<div class="grid-item">
|
||||
<h2>Default</h2>
|
||||
<ion-button id="default">Open Loading</ion-button>
|
||||
<button id="default">Open Loading</button>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<h2>Open, then close after 500ms</h2>
|
||||
<ion-button id="timeout">Open Loading</ion-button>
|
||||
<button id="timeout">Open Loading</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||