Skip to content

Commit 5d8b717

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

File tree

6 files changed

+86
-61
lines changed

6 files changed

+86
-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: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,39 @@
11
describe('Tabs Direct Navigation', () => {
22
it('should select the correct tab when navigating directly to home route', () => {
33
cy.visit('/tabs-direct-navigation/home');
4+
cy.wait(500);
45
cy.get('[data-testid="home-tab"]').should('have.class', 'tab-selected');
56
cy.get('[data-testid="home-content"]').should('be.visible');
67
});
78

89
it('should select the correct tab when navigating directly to radio route', () => {
910
cy.visit('/tabs-direct-navigation/radio');
11+
cy.wait(500);
1012
cy.get('[data-testid="radio-tab"]').should('have.class', 'tab-selected');
1113
cy.get('[data-testid="radio-content"]').should('be.visible');
1214
});
1315

1416
it('should select the correct tab when navigating directly to library route', () => {
1517
cy.visit('/tabs-direct-navigation/library');
18+
cy.wait(500);
1619
cy.get('[data-testid="library-tab"]').should('have.class', 'tab-selected');
1720
cy.get('[data-testid="library-content"]').should('be.visible');
1821
});
1922

2023
it('should select the correct tab when navigating directly to search route', () => {
2124
cy.visit('/tabs-direct-navigation/search');
25+
cy.wait(500);
2226
cy.get('[data-testid="search-tab"]').should('have.class', 'tab-selected');
2327
cy.get('[data-testid="search-content"]').should('be.visible');
2428
});
2529

2630
it('should update tab selection when navigating between tabs', () => {
2731
cy.visit('/tabs-direct-navigation/home');
32+
cy.wait(500);
2833
cy.get('[data-testid="home-tab"]').should('have.class', 'tab-selected');
29-
3034
cy.get('[data-testid="radio-tab"]').click();
3135
cy.get('[data-testid="radio-tab"]').should('have.class', 'tab-selected');
3236
cy.get('[data-testid="home-tab"]').should('not.have.class', 'tab-selected');
3337
cy.get('[data-testid="radio-content"]').should('be.visible');
3438
});
35-
});
39+
});

0 commit comments

Comments
 (0)