mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 15:51:16 +08:00
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
@ -12,6 +12,13 @@
|
||||
<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>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-nav root="page-one"></ion-nav>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
class PageOne extends HTMLElement {
|
||||
connectedCallback() {
|
||||
@ -27,7 +34,7 @@
|
||||
<ion-content class="ion-padding">
|
||||
<h1>Page One</h1>
|
||||
<ion-nav-link router-direction="forward" component="page-two">
|
||||
<ion-button class="next">Go to Page Two</ion-button>
|
||||
<button class="next">Go to Page Two</button>
|
||||
</ion-nav-link>
|
||||
</ion-content>
|
||||
`;
|
||||
@ -48,7 +55,7 @@
|
||||
<h1>Page Two</h1>
|
||||
<div>
|
||||
<ion-nav-link router-direction="forward" component="page-three">
|
||||
<ion-button class="next">Go to Page Three</ion-button>
|
||||
<button class="next">Go to Page Three</button>
|
||||
</ion-nav-link>
|
||||
</div>
|
||||
</ion-content>
|
||||
@ -76,11 +83,5 @@
|
||||
customElements.define('page-two', PageTwo);
|
||||
customElements.define('page-three', PageThree);
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-nav root="page-one"></ion-nav>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -21,14 +21,14 @@
|
||||
<ion-title>Modal Navigation</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-button id="openModal">Open Modal</ion-button>
|
||||
<ion-content class="ion-padding">
|
||||
<button id="openModal">Open Modal</button>
|
||||
<ion-modal trigger="openModal">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Modal</ion-title>
|
||||
<ion-buttons slot="end">
|
||||
<ion-button onclick="dismiss()"> Close </ion-button>
|
||||
<ion-button onclick="dismiss()">Close</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
@ -66,7 +66,7 @@
|
||||
this.innerHTML = `
|
||||
<ion-content class="ion-padding">
|
||||
<h1>Page One</h1>
|
||||
<ion-button id="goto-page-two" onclick="navigate('page-two')">Go to Page Two</ion-button>
|
||||
<button id="goto-page-two" onclick="navigate('page-two')">Go to Page Two</button>
|
||||
</ion-content>
|
||||
`;
|
||||
}
|
||||
@ -77,7 +77,7 @@
|
||||
this.innerHTML = `
|
||||
<ion-content class="ion-padding">
|
||||
<h1>Page Two</h1>
|
||||
<ion-button id="goto-page-three" onclick="navigate('page-three')">Go to Page Three</ion-button>
|
||||
<button id="goto-page-three" onclick="navigate('page-three')">Go to Page Three</button>
|
||||
</ion-content>
|
||||
`;
|
||||
}
|
||||
@ -88,8 +88,8 @@
|
||||
this.innerHTML = `
|
||||
<ion-content class="ion-padding">
|
||||
<h1>Page Three</h1>
|
||||
<ion-button id="go-back" onclick="navigateBack()">Go Back</ion-button>
|
||||
<ion-button id="goto-root"onclick="navigateToRoot()">Go to Root</ion-button>
|
||||
<button id="go-back" onclick="navigateBack()">Go Back</button>
|
||||
<button id="goto-root"onclick="navigateToRoot()">Go to Root</button>
|
||||
</ion-content>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -12,6 +12,13 @@
|
||||
<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>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-nav root="page-one"></ion-nav>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
class PageOne extends HTMLElement {
|
||||
connectedCallback() {
|
||||
@ -24,7 +31,7 @@
|
||||
<ion-content class="ion-padding">
|
||||
<h1>Page 1</h1>
|
||||
<ion-nav-link router-direction="forward" component="page-two">
|
||||
<ion-button class="next">Go to Page 2</ion-button>
|
||||
<button class="next">Go to Page 2</button>
|
||||
</ion-nav-link>
|
||||
</ion-content>
|
||||
`;
|
||||
@ -54,7 +61,7 @@
|
||||
<h1>Page 2.1</h1>
|
||||
<div>
|
||||
<ion-nav-link router-direction="forward" component="page-two-two">
|
||||
<ion-button class="next">Go to Page 2.2</ion-button>
|
||||
<button class="next">Go to Page 2.2</button>
|
||||
</ion-nav-link>
|
||||
</div>
|
||||
</ion-content>
|
||||
@ -77,7 +84,7 @@
|
||||
<h1>Page 2.2</h1>
|
||||
<div>
|
||||
<ion-nav-link router-direction="forward" component="page-three">
|
||||
<ion-button class="next">Go to Page 3</ion-button>
|
||||
<button class="next">Go to Page 3</button>
|
||||
</ion-nav-link>
|
||||
</div>
|
||||
</ion-content>
|
||||
@ -109,11 +116,5 @@
|
||||
customElements.define('page-two-two', PageTwoTwo);
|
||||
customElements.define('page-three', PageThree);
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-nav root="page-one"></ion-nav>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -12,6 +12,19 @@
|
||||
<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>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-router>
|
||||
<ion-route url="/" component="page-root"></ion-route>
|
||||
<ion-route url="/page-one" component="page-one"></ion-route>
|
||||
<ion-route url="/page-two" component="page-two"></ion-route>
|
||||
<ion-route url="/page-three" component="page-three"></ion-route>
|
||||
</ion-router>
|
||||
<ion-nav></ion-nav>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
class PageRoot extends HTMLElement {
|
||||
connectedCallback() {
|
||||
@ -25,7 +38,7 @@
|
||||
<h1>Root</h1>
|
||||
<div>
|
||||
<ion-nav-link router-direction="forward" component="page-one">
|
||||
<ion-button class="next">Go to Page One</ion-button>
|
||||
<button class="next">Go to Page One</button>
|
||||
</ion-nav-link>
|
||||
</div>
|
||||
</ion-content>
|
||||
@ -46,7 +59,7 @@
|
||||
<ion-content class="ion-padding">
|
||||
<h1>Page One</h1>
|
||||
<ion-nav-link router-direction="forward" component="page-two">
|
||||
<ion-button class="next">Go to Page Two</ion-button>
|
||||
<button class="next">Go to Page Two</button>
|
||||
</ion-nav-link>
|
||||
</ion-content>
|
||||
`;
|
||||
@ -67,7 +80,7 @@
|
||||
<h1>Page Two</h1>
|
||||
<div>
|
||||
<ion-nav-link router-direction="forward" component="page-three">
|
||||
<ion-button class="next">Go to Page Three</ion-button>
|
||||
<button class="next">Go to Page Three</button>
|
||||
</ion-nav-link>
|
||||
</div>
|
||||
</ion-content>
|
||||
@ -96,17 +109,5 @@
|
||||
customElements.define('page-two', PageTwo);
|
||||
customElements.define('page-three', PageThree);
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-router>
|
||||
<ion-route url="/" component="page-root"></ion-route>
|
||||
<ion-route url="/page-one" component="page-one"></ion-route>
|
||||
<ion-route url="/page-two" component="page-two"></ion-route>
|
||||
<ion-route url="/page-three" component="page-three"></ion-route>
|
||||
</ion-router>
|
||||
<ion-nav></ion-nav>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user