test(react): general navigation improvement

Author: ShaneK

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

@@ -43,7 +43,7 @@ const App: React.FC = () => (
   <IonApp>
     <IonReactRouter>
       <IonRouterOutlet>
-        <Route path="/" component={Main} />
+        <Route exact path="/" component={Main} />
         <Route path="/overlay-hooks" component={OverlayHooks} />
         <Route path="/overlay-components" component={OverlayComponents} />
         <Route path="/overlay-components/nested-popover" component={IonPopoverNested} />

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

@@ -40,6 +40,9 @@ const Main: React.FC<MainProps> = () => {
           <IonItem routerLink="/tabs-basic">
             <IonLabel>Tabs with Basic Navigation</IonLabel>
           </IonItem>
+          <IonItem routerLink="/tabs-direct-navigation">
+            <IonLabel>Tabs with Direct Navigation</IonLabel>
+          </IonItem>
           <IonItem routerLink="/icons">
             <IonLabel>Icons</IonLabel>
           </IonItem>

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

@@ -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>
   );
 };
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IonLabel, IonTabBar, IonTabButton, IonTabs, IonTab } from '@ionic/react';
+import { IonLabel, IonTabBar, IonTabButton, IonTabs, IonTab, IonPage } from '@ionic/react';
 
 interface TabsProps {}
 
@@ -13,22 +13,24 @@ const TabsBasic: React.FC<TabsProps> = () => {
   };
 
   return (
-    <IonTabs onIonTabsWillChange={onTabWillChange} onIonTabsDidChange={onTabDidChange}>
-      <IonTab tab="tab1">
-        <IonLabel>Tab 1 Content</IonLabel>
-      </IonTab>
-      <IonTab tab="tab2">
-        <IonLabel>Tab 2 Content</IonLabel>
-      </IonTab>
-      <IonTabBar slot="bottom">
-        <IonTabButton tab="tab1">
-          <IonLabel>Tab 1</IonLabel>
-        </IonTabButton>
-        <IonTabButton tab="tab2">
-          <IonLabel>Tab 2</IonLabel>
-        </IonTabButton>
-      </IonTabBar>
-    </IonTabs>
+    <IonPage>
+      <IonTabs onIonTabsWillChange={onTabWillChange} onIonTabsDidChange={onTabDidChange}>
+        <IonTab tab="tab1">
+          <IonLabel>Tab 1 Content</IonLabel>
+        </IonTab>
+        <IonTab tab="tab2">
+          <IonLabel>Tab 2 Content</IonLabel>
+        </IonTab>
+        <IonTabBar slot="bottom">
+          <IonTabButton tab="tab1">
+            <IonLabel>Tab 1</IonLabel>
+          </IonTabButton>
+          <IonTabButton tab="tab2">
+            <IonLabel>Tab 2</IonLabel>
+          </IonTabButton>
+        </IonTabBar>
+      </IonTabs>
+    </IonPage>
   );
 };
 

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

@@ -78,17 +78,17 @@ const TabsDirectNavigation: React.FC = () => {
         </IonTabButton>
 
         <IonTabButton tab="library" href="/tabs-direct-navigation/library" data-testid="library-tab">
-          <IonIcon icon={libraryOutline}></IonIcon>  
+          <IonIcon icon={libraryOutline}></IonIcon>
           <IonLabel>Library</IonLabel>
         </IonTabButton>
 
         <IonTabButton tab="search" href="/tabs-direct-navigation/search" data-testid="search-tab">
           <IonIcon icon={searchOutline}></IonIcon>
           <IonLabel>Search</IonLabel>
         </IonTabButton>
-      </IonTabBar>
-    </IonTabs>
+        </IonTabBar>
+      </IonTabs>
   );
 };
 
-export default TabsDirectNavigation;
+export default TabsDirectNavigation;

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

@@ -26,10 +26,9 @@ describe('Tabs Direct Navigation', () => {
   it('should update tab selection when navigating between tabs', () => {
     cy.visit('/tabs-direct-navigation/home');
     cy.get('[data-testid="home-tab"]').should('have.class', 'tab-selected');
-    
     cy.get('[data-testid="radio-tab"]').click();
     cy.get('[data-testid="radio-tab"]').should('have.class', 'tab-selected');
     cy.get('[data-testid="home-tab"]').should('not.have.class', 'tab-selected');
     cy.get('[data-testid="radio-content"]').should('be.visible');
   });
-});
+});