Skip to content

Commit dc764e4

Browse files
ShaneKbrandyscarney
ShaneK
and
brandyscarney
authored
test(react): general navigation improvement (#30602)
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>
1 parent 1cd81b9 commit dc764e4

File tree

9 files changed

+48
-42
lines changed

9 files changed

+48
-42
lines changed

‎packages/react/test/base/src/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const App: React.FC = () => (
4444
<IonApp>
4545
<IonReactRouter>
4646
<IonRouterOutlet>
47-
<Route path="/" component={Main} />
47+
<Route exact path="/" component={Main} />
4848
<Route path="/overlay-hooks" component={OverlayHooks} />
4949
<Route path="/overlay-components" component={OverlayComponents} />
5050
<Route path="/overlay-components/nested-popover" component={IonPopoverNested} />

‎packages/react/test/base/src/pages/Icons.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState } from 'react';
2-
import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonTitle, IonToolbar } from '@ionic/react';
2+
import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonTitle, IonToolbar, IonPage } from '@ionic/react';
33
import { heart, heartCircleOutline, logoApple, logoTwitter, personCircleOutline, star, starOutline, trash } from 'ionicons/icons';
44

55
interface IconsProps {}
@@ -14,10 +14,10 @@ const Icons: React.FC<IconsProps> = () => {
1414
}
1515

1616
return (
17-
<>
17+
<IonPage>
1818
<IonHeader translucent={true}>
1919
<IonToolbar>
20-
<IonButtons>
20+
<IonButtons slot="start">
2121
<IonBackButton></IonBackButton>
2222
</IonButtons>
2323
<IonTitle>Icons</IonTitle>
@@ -88,7 +88,7 @@ const Icons: React.FC<IconsProps> = () => {
8888
</IonItem>
8989
</IonList>
9090
</IonContent>
91-
</>
91+
</IonPage>
9292
);
9393
};
9494

‎packages/react/test/base/src/pages/Inputs.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ const Inputs: React.FC<InputsProps> = () => {
9898
<IonPage data-pageid="inputs">
9999
<IonHeader translucent={true}>
100100
<IonToolbar>
101-
<IonButtons>
101+
<IonButtons slot="start">
102102
<IonBackButton></IonBackButton>
103103
</IonButtons>
104104
<IonTitle>Inputs</IonTitle>

‎packages/react/test/base/src/pages/Main.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,9 @@ const Main: React.FC<MainProps> = () => {
4040
<IonItem routerLink="/tabs-basic">
4141
<IonLabel>Tabs with Basic Navigation</IonLabel>
4242
</IonItem>
43+
<IonItem routerLink="/tabs-direct-navigation">
44+
<IonLabel>Tabs with Direct Navigation</IonLabel>
45+
</IonItem>
4346
<IonItem routerLink="/icons">
4447
<IonLabel>Icons</IonLabel>
4548
</IonItem>

‎packages/react/test/base/src/pages/Tabs.tsx

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
11
import React from 'react';
2-
import { IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
2+
import { IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs, IonPage } from '@ionic/react';
33
import { Route, Redirect } from 'react-router';
44

55
interface TabsProps {}
66

77
const Tabs: React.FC<TabsProps> = () => {
88
return (
9-
<IonTabs>
10-
<IonRouterOutlet>
11-
<Redirect from="/tabs" to="/tabs/tab1" exact />
12-
<Route path="/tabs/tab1" render={() => <IonLabel>Tab 1</IonLabel>} />
13-
</IonRouterOutlet>
14-
<IonTabBar slot="bottom">
15-
<IonTabButton tab="tab1" onClick={() => window.alert('Tab was clicked')}>
16-
<IonLabel>Click Handler</IonLabel>
17-
</IonTabButton>
18-
</IonTabBar>
19-
</IonTabs>
9+
<IonPage>
10+
<IonTabs>
11+
<IonRouterOutlet>
12+
<Redirect from="/tabs" to="/tabs/tab1" exact />
13+
<Route path="/tabs/tab1" render={() => <IonLabel>Tab 1</IonLabel>} />
14+
</IonRouterOutlet>
15+
<IonTabBar slot="bottom">
16+
<IonTabButton tab="tab1" onClick={() => window.alert('Tab was clicked')}>
17+
<IonLabel>Click Handler</IonLabel>
18+
</IonTabButton>
19+
</IonTabBar>
20+
</IonTabs>
21+
</IonPage>
2022
);
2123
};
2224

‎packages/react/test/base/src/pages/TabsBasic.tsx

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { IonLabel, IonTabBar, IonTabButton, IonTabs, IonTab } from '@ionic/react';
2+
import { IonLabel, IonTabBar, IonTabButton, IonTabs, IonTab, IonPage } from '@ionic/react';
33

44
interface TabsProps {}
55

@@ -13,22 +13,24 @@ const TabsBasic: React.FC<TabsProps> = () => {
1313
};
1414

1515
return (
16-
<IonTabs onIonTabsWillChange={onTabWillChange} onIonTabsDidChange={onTabDidChange}>
17-
<IonTab tab="tab1">
18-
<IonLabel>Tab 1 Content</IonLabel>
19-
</IonTab>
20-
<IonTab tab="tab2">
21-
<IonLabel>Tab 2 Content</IonLabel>
22-
</IonTab>
23-
<IonTabBar slot="bottom">
24-
<IonTabButton tab="tab1">
25-
<IonLabel>Tab 1</IonLabel>
26-
</IonTabButton>
27-
<IonTabButton tab="tab2">
28-
<IonLabel>Tab 2</IonLabel>
29-
</IonTabButton>
30-
</IonTabBar>
31-
</IonTabs>
16+
<IonPage>
17+
<IonTabs onIonTabsWillChange={onTabWillChange} onIonTabsDidChange={onTabDidChange}>
18+
<IonTab tab="tab1">
19+
<IonLabel>Tab 1 Content</IonLabel>
20+
</IonTab>
21+
<IonTab tab="tab2">
22+
<IonLabel>Tab 2 Content</IonLabel>
23+
</IonTab>
24+
<IonTabBar slot="bottom">
25+
<IonTabButton tab="tab1">
26+
<IonLabel>Tab 1</IonLabel>
27+
</IonTabButton>
28+
<IonTabButton tab="tab2">
29+
<IonLabel>Tab 2</IonLabel>
30+
</IonTabButton>
31+
</IonTabBar>
32+
</IonTabs>
33+
</IonPage>
3234
);
3335
};
3436

‎packages/react/test/base/src/pages/TabsDirectNavigation.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ const TabsDirectNavigation: React.FC = () => {
7878
</IonTabButton>
7979

8080
<IonTabButton tab="library" href="/tabs-direct-navigation/library" data-testid="library-tab">
81-
<IonIcon icon={libraryOutline}></IonIcon>
81+
<IonIcon icon={libraryOutline}></IonIcon>
8282
<IonLabel>Library</IonLabel>
8383
</IonTabButton>
8484

@@ -91,4 +91,4 @@ const TabsDirectNavigation: React.FC = () => {
9191
);
9292
};
9393

94-
export default TabsDirectNavigation;
94+
export default TabsDirectNavigation;

‎packages/react/test/base/src/pages/navigation/NavComponent.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const PageOne = ({
2727
<IonHeader>
2828
<IonToolbar>
2929
<IonTitle>Page One</IonTitle>
30-
<IonButtons>
30+
<IonButtons slot="start">
3131
<IonBackButton />
3232
</IonButtons>
3333
</IonToolbar>
@@ -57,7 +57,7 @@ const PageTwo = ({ nav, ...rest }: { someValue: string; nav: React.MutableRefObj
5757
<IonHeader>
5858
<IonToolbar>
5959
<IonTitle>Page Two</IonTitle>
60-
<IonButtons>
60+
<IonButtons slot="start">
6161
<IonBackButton />
6262
</IonButtons>
6363
</IonToolbar>
@@ -84,7 +84,7 @@ const PageThree = ({ nav }: { nav: React.MutableRefObject<HTMLIonNavElement> })
8484
<IonHeader>
8585
<IonToolbar>
8686
<IonTitle>Page Three</IonTitle>
87-
<IonButtons>
87+
<IonButtons slot="start">
8888
<IonBackButton />
8989
</IonButtons>
9090
</IonToolbar>

‎packages/react/test/base/tests/e2e/specs/components/tabs-direct-navigation.cy.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,9 @@ describe('Tabs Direct Navigation', () => {
2626
it('should update tab selection when navigating between tabs', () => {
2727
cy.visit('/tabs-direct-navigation/home');
2828
cy.get('[data-testid="home-tab"]').should('have.class', 'tab-selected');
29-
3029
cy.get('[data-testid="radio-tab"]').click();
3130
cy.get('[data-testid="radio-tab"]').should('have.class', 'tab-selected');
3231
cy.get('[data-testid="home-tab"]').should('not.have.class', 'tab-selected');
3332
cy.get('[data-testid="radio-content"]').should('be.visible');
3433
});
35-
});
34+
});

0 commit comments

Comments
 (0)