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>

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

@@ -44,7 +44,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/Icons.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonTitle, IonToolbar } from '@ionic/react';
+import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonTitle, IonToolbar, IonPage } from '@ionic/react';
 import { heart, heartCircleOutline, logoApple, logoTwitter, personCircleOutline, star, starOutline, trash } from 'ionicons/icons';
 
 interface IconsProps {}
@@ -14,10 +14,10 @@ const Icons: React.FC<IconsProps> = () => {
   }
 
   return (
-    <>
+    <IonPage>
       <IonHeader translucent={true}>
         <IonToolbar>
-          <IonButtons>
+          <IonButtons slot="start">
             <IonBackButton></IonBackButton>
           </IonButtons>
           <IonTitle>Icons</IonTitle>
@@ -88,7 +88,7 @@ const Icons: React.FC<IconsProps> = () => {
           </IonItem>
         </IonList>
       </IonContent>
-    </>
+    </IonPage>
   );
 };
 

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

@@ -98,7 +98,7 @@ const Inputs: React.FC<InputsProps> = () => {
     <IonPage data-pageid="inputs">
       <IonHeader translucent={true}>
         <IonToolbar>
-          <IonButtons>
+          <IonButtons slot="start">
             <IonBackButton></IonBackButton>
           </IonButtons>
           <IonTitle>Inputs</IonTitle>

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,11 +1,12 @@
 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 (
+    <IonPage>
       <IonTabs>
         <IonRouterOutlet>
           <Redirect from="/tabs" to="/tabs/tab1" exact />
@@ -17,6 +18,7 @@ const Tabs: React.FC<TabsProps> = () => {
           </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,6 +13,7 @@ const TabsBasic: React.FC<TabsProps> = () => {
   };
 
   return (
+    <IonPage>
       <IonTabs onIonTabsWillChange={onTabWillChange} onIonTabsDidChange={onTabDidChange}>
         <IonTab tab="tab1">
           <IonLabel>Tab 1 Content</IonLabel>
@@ -29,6 +30,7 @@ const TabsBasic: React.FC<TabsProps> = () => {
           </IonTabButton>
         </IonTabBar>
       </IonTabs>
+    </IonPage>
   );
 };
 

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

@@ -27,7 +27,7 @@ const PageOne = ({
       <IonHeader>
         <IonToolbar>
           <IonTitle>Page One</IonTitle>
-          <IonButtons>
+          <IonButtons slot="start">
             <IonBackButton />
           </IonButtons>
         </IonToolbar>
@@ -57,7 +57,7 @@ const PageTwo = ({ nav, ...rest }: { someValue: string; nav: React.MutableRefObj
       <IonHeader>
         <IonToolbar>
           <IonTitle>Page Two</IonTitle>
-          <IonButtons>
+          <IonButtons slot="start">
             <IonBackButton />
           </IonButtons>
         </IonToolbar>
@@ -84,7 +84,7 @@ const PageThree = ({ nav }: { nav: React.MutableRefObject<HTMLIonNavElement> })
       <IonHeader>
         <IonToolbar>
           <IonTitle>Page Three</IonTitle>
-          <IonButtons>
+          <IonButtons slot="start">
             <IonBackButton />
           </IonButtons>
         </IonToolbar>

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

@@ -26,7 +26,6 @@ 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');