javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(back-button): remove unneeded navigation test (#27590)

Browse Source 
Issue number: N/A

---------

<!-- 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?
<!-- Please describe the current behavior that you are modifying. -->

The `navigation` test for `ion-back-button` errors out in the console
and doesn't display when attempting to host it locally.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

Test removed, since it had no E2E file and the functionality appears to
be redundant with the tests for `ion-nav`.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
This commit is contained in:
Amanda Johnston
2023-06-07 09:23:11 -05:00
committed by GitHub
parent 038c8f7ad1
commit 0e7d80cdbd
1 changed files with 0 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
core/src/components/back-button/test/navigation/index.html
View File

@ -1,130 +0,0 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Back Button - Navigation</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script src="../../../../../dist/ionic/ionic.js"></script>
</head>
<body onload="loadFirstPage()">
<ion-app>
<ion-nav></ion-nav>
</ion-app>
</body>
<script>
async function loadFirstPage() {
const nav = document.querySelector('ion-nav');
const firstPage = document.createElement('div');
firstPage.classList.add('first-page');
firstPage.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Page One</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Page One</h1>
<ion-button class="next">Go to Page Two</ion-button>
</ion-content>
`;
await nav.setRoot(firstPage);
// okay cool, we're in the DOM now
const button = firstPage.querySelector('.next');
button.addEventListener('click', async () => {
await goToPageTwo(nav);
});
}
async function goToPageTwo(nav) {
const secondPage = document.createElement('div');
secondPage.classList.add('second-page');
secondPage.innerHTML = `
<ion-header>
<ion-toolbar color="secondary">
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Page Two</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Page Two</h1>
<p>Just an empty <code>ion-back-button</code></p>
<ion-button class="next">Go to Page Three</ion-button>
</ion-content>
`;
// okay cool, we're in the DOM now
await nav.push(secondPage);
const nextButton = secondPage.querySelector('ion-button.next');
nextButton.addEventListener('click', async () => {
await goToPageThree(nav);
});
}
async function goToPageThree(nav) {
const thirdPage = document.createElement('div');
thirdPage.classList.add('third-page');
thirdPage.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button color="danger" text="Text!" icon="add"></ion-back-button>
</ion-buttons>
<ion-title>Page Three</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Page Three</h1>
<p>Custom back button</p>
<ion-button class="next">Go to Page Four</ion-button>
</ion-content>
`;
// okay cool, we're in the DOM now
await nav.push(thirdPage);
const nextButton = thirdPage.querySelector('ion-button.next');
nextButton.addEventListener('click', async () => {
await goToPageFour(nav);
});
}
async function goToPageFour(nav) {
const fourthPage = document.createElement('div');
fourthPage.classList.add('fourth-page');
fourthPage.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
<ion-back-button color="danger"></ion-back-button>
</ion-buttons>
<ion-title>Page Four</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Page Four</h1>
<p>Back button and menu button</p>
</ion-content>
`;
// okay cool, we're in the DOM now
await nav.push(fourthPage);
}
</script>
</html>