Skip to content

Commit 10b0e53

Browse files
ShaneKShaneK
committed
test(react): general navigation improvement
1 parent a2e803a commit 10b0e53

File tree

6 files changed

+96
-61
lines changed

6 files changed

+96
-61
lines changed

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

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

‎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: 43 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,16 @@
1-
import { IonContent, IonHeader, IonIcon, IonLabel, IonPage, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs, IonTitle, IonToolbar } from '@ionic/react';
1+
import {
2+
IonContent,
3+
IonHeader,
4+
IonIcon,
5+
IonLabel,
6+
IonPage,
7+
IonRouterOutlet,
8+
IonTabBar,
9+
IonTabButton,
10+
IonTabs,
11+
IonTitle,
12+
IonToolbar,
13+
} from '@ionic/react';
214
import { homeOutline, radioOutline, libraryOutline, searchOutline } from 'ionicons/icons';
315
import React from 'react';
416
import { Route, Redirect } from 'react-router-dom';
@@ -57,38 +69,40 @@ const SearchPage: React.FC = () => (
5769

5870
const TabsDirectNavigation: React.FC = () => {
5971
return (
60-
<IonTabs data-testid="tabs-direct-navigation">
61-
<IonRouterOutlet>
62-
<Redirect exact path="/tabs-direct-navigation" to="/tabs-direct-navigation/home" />
63-
<Route path="/tabs-direct-navigation/home" render={() => <HomePage />} exact={true} />
64-
<Route path="/tabs-direct-navigation/radio" render={() => <RadioPage />} exact={true} />
65-
<Route path="/tabs-direct-navigation/library" render={() => <LibraryPage />} exact={true} />
66-
<Route path="/tabs-direct-navigation/search" render={() => <SearchPage />} exact={true} />
67-
</IonRouterOutlet>
72+
<IonPage>
73+
<IonTabs data-testid="tabs-direct-navigation">
74+
<IonRouterOutlet>
75+
<Redirect exact path="/tabs-direct-navigation" to="/tabs-direct-navigation/home" />
76+
<Route path="/tabs-direct-navigation/home" render={() => <HomePage />} exact={true} />
77+
<Route path="/tabs-direct-navigation/radio" render={() => <RadioPage />} exact={true} />
78+
<Route path="/tabs-direct-navigation/library" render={() => <LibraryPage />} exact={true} />
79+
<Route path="/tabs-direct-navigation/search" render={() => <SearchPage />} exact={true} />
80+
</IonRouterOutlet>
6881

69-
<IonTabBar slot="bottom" data-testid="tab-bar">
70-
<IonTabButton tab="home" href="/tabs-direct-navigation/home" data-testid="home-tab">
71-
<IonIcon icon={homeOutline}></IonIcon>
72-
<IonLabel>Home</IonLabel>
73-
</IonTabButton>
82+
<IonTabBar slot="bottom" data-testid="tab-bar">
83+
<IonTabButton tab="home" href="/tabs-direct-navigation/home" data-testid="home-tab">
84+
<IonIcon icon={homeOutline}></IonIcon>
85+
<IonLabel>Home</IonLabel>
86+
</IonTabButton>
7487

75-
<IonTabButton tab="radio" href="/tabs-direct-navigation/radio" data-testid="radio-tab">
76-
<IonIcon icon={radioOutline}></IonIcon>
77-
<IonLabel>Radio</IonLabel>
78-
</IonTabButton>
88+
<IonTabButton tab="radio" href="/tabs-direct-navigation/radio" data-testid="radio-tab">
89+
<IonIcon icon={radioOutline}></IonIcon>
90+
<IonLabel>Radio</IonLabel>
91+
</IonTabButton>
7992

80-
<IonTabButton tab="library" href="/tabs-direct-navigation/library" data-testid="library-tab">
81-
<IonIcon icon={libraryOutline}></IonIcon>
82-
<IonLabel>Library</IonLabel>
83-
</IonTabButton>
93+
<IonTabButton tab="library" href="/tabs-direct-navigation/library" data-testid="library-tab">
94+
<IonIcon icon={libraryOutline}></IonIcon>
95+
<IonLabel>Library</IonLabel>
96+
</IonTabButton>
8497

85-
<IonTabButton tab="search" href="/tabs-direct-navigation/search" data-testid="search-tab">
86-
<IonIcon icon={searchOutline}></IonIcon>
87-
<IonLabel>Search</IonLabel>
88-
</IonTabButton>
89-
</IonTabBar>
90-
</IonTabs>
98+
<IonTabButton tab="search" href="/tabs-direct-navigation/search" data-testid="search-tab">
99+
<IonIcon icon={searchOutline}></IonIcon>
100+
<IonLabel>Search</IonLabel>
101+
</IonTabButton>
102+
</IonTabBar>
103+
</IonTabs>
104+
</IonPage>
91105
);
92106
};
93107

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

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

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,49 @@
11
describe('Tabs Direct Navigation', () => {
2+
beforeEach(() => {
3+
// Disable animations for this test suite to prevent CI timing issues
4+
cy.window().then((win) => {
5+
const ionicConfig = (win as any).Ionic?.config;
6+
if (ionicConfig) {
7+
ionicConfig.set('animated', false);
8+
}
9+
});
10+
});
11+
212
it('should select the correct tab when navigating directly to home route', () => {
313
cy.visit('/tabs-direct-navigation/home');
14+
cy.wait(500);
415
cy.get('[data-testid="home-tab"]').should('have.class', 'tab-selected');
516
cy.get('[data-testid="home-content"]').should('be.visible');
617
});
718

819
it('should select the correct tab when navigating directly to radio route', () => {
920
cy.visit('/tabs-direct-navigation/radio');
21+
cy.wait(500);
1022
cy.get('[data-testid="radio-tab"]').should('have.class', 'tab-selected');
1123
cy.get('[data-testid="radio-content"]').should('be.visible');
1224
});
1325

1426
it('should select the correct tab when navigating directly to library route', () => {
1527
cy.visit('/tabs-direct-navigation/library');
28+
cy.wait(500);
1629
cy.get('[data-testid="library-tab"]').should('have.class', 'tab-selected');
1730
cy.get('[data-testid="library-content"]').should('be.visible');
1831
});
1932

2033
it('should select the correct tab when navigating directly to search route', () => {
2134
cy.visit('/tabs-direct-navigation/search');
35+
cy.wait(500);
2236
cy.get('[data-testid="search-tab"]').should('have.class', 'tab-selected');
2337
cy.get('[data-testid="search-content"]').should('be.visible');
2438
});
2539

2640
it('should update tab selection when navigating between tabs', () => {
2741
cy.visit('/tabs-direct-navigation/home');
42+
cy.wait(500);
2843
cy.get('[data-testid="home-tab"]').should('have.class', 'tab-selected');
29-
3044
cy.get('[data-testid="radio-tab"]').click();
3145
cy.get('[data-testid="radio-tab"]').should('have.class', 'tab-selected');
3246
cy.get('[data-testid="home-tab"]').should('not.have.class', 'tab-selected');
3347
cy.get('[data-testid="radio-content"]').should('be.visible');
3448
});
35-
});
49+
});

0 commit comments

Comments
 (0)