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

test(react): general navigation improvement (#30602)

Browse Source 
Issue number: resolves 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?

Manual navigation in the react tests is very finnicky

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

Improved react test navigation so it more consistently moves from page
to page if you're manually reviewing react tests. This was done mostly
by adding missing `ion-page` components, but also by adding an exact
match to the main component. They're still pretty shaky and not great,
but better than before.

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
This commit is contained in:
Shane
2025-08-05 10:11:52 -07:00
committed by GitHub
parent 1cd81b9230
commit dc764e45e9
9 changed files with 48 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
packages/react/test/base/src/pages/Tabs.tsx
View File

@ -1,22 +1,24 @@
import React from 'react';
import { IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
import { IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs, IonPage } from '@ionic/react';
import { Route, Redirect } from 'react-router';
interface TabsProps {}
const Tabs: React.FC<TabsProps> = () => {
return (
<IonTabs>
<IonRouterOutlet>
<Redirect from="/tabs" to="/tabs/tab1" exact />
<Route path="/tabs/tab1" render={() => <IonLabel>Tab 1</IonLabel>} />
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" onClick={() => window.alert('Tab was clicked')}>
<IonLabel>Click Handler</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
<IonPage>
<IonTabs>
<IonRouterOutlet>
<Redirect from="/tabs" to="/tabs/tab1" exact />
<Route path="/tabs/tab1" render={() => <IonLabel>Tab 1</IonLabel>} />
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" onClick={() => window.alert('Tab was clicked')}>
<IonLabel>Click Handler</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
</IonPage>
);
};