Remove snapshot tests for app.tsx and change routing logic #54

RGPosadas · Nov 27, 2020 · 2bc04f6 · 2bc04f6
1 parent e198e65
commit 2bc04f6
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 164 deletions.
diff --git a/apps/mull-ui/src/app/__snapshots__/app.spec.tsx.snap b/apps/mull-ui/src/app/__snapshots__/app.spec.tsx.snap
diff --git a/apps/mull-ui/src/app/app.spec.tsx b/apps/mull-ui/src/app/app.spec.tsx
@@ -16,15 +16,4 @@ describe('App', () => {
 
     expect(baseElement).toBeTruthy();
   });
-
-  it('should match snapshot', () => {
-    const tree = renderer
-      .create(
-        <BrowserRouter>
-          <App />
-        </BrowserRouter>
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
 });
diff --git a/apps/mull-ui/src/app/app.tsx b/apps/mull-ui/src/app/app.tsx
@@ -44,11 +44,13 @@ export const App = () => {
             <EventPage event={dummyEvent} prevPage={'Review'} />
           </div>
         </Route>
-        <SwipeableRoutes>
-          <Route exact path="/discover" component={SubNavigationBar} />
-          <Route exact path="/upcoming" component={SubNavigationBar} />
-          <Route exact path="/myevents" component={SubNavigationBar} />
-        </SwipeableRoutes>
+        <Route exact path={['/home', `${ROUTES.HOME}/:id`]}>
+          <SwipeableRoutes>
+            <Route path="/home" component={SubNavigationBar} />
+            <Route path="/home/upcoming" component={SubNavigationBar} />
+            <Route path="/home/myevents" component={SubNavigationBar} />
+          </SwipeableRoutes>
+        </Route>
         <Route exact path={ROUTES.LOGIN} component={LoginPage} />
         <Route exact path={ROUTES.REGISTER} component={RegisterPage} />
       </Switch>

diff --git a/...ull-ui/src/app/components/subnavigation-bar/__snapshots__/subnavigation-bar.spec.tsx.snap b/...ull-ui/src/app/components/subnavigation-bar/__snapshots__/subnavigation-bar.spec.tsx.snap
@@ -10,23 +10,23 @@ exports[`SubNavigationBar should match snapshot 1`] = `
     <a
       aria-current={null}
       className="subnavigation-link"
-      href="/discover"
+      href="/home"
       onClick={[Function]}
     >
       Discover
     </a>
     <a
       aria-current={null}
       className="subnavigation-link"
-      href="/upcoming"
+      href="/home/upcoming"
       onClick={[Function]}
     >
       Upcoming
     </a>
     <a
       aria-current={null}
       className="subnavigation-link"
-      href="/myevents"
+      href="/home/myevents"
       onClick={[Function]}
     >
       My Events

diff --git a/apps/mull-ui/src/app/components/subnavigation-bar/subnavigation-bar.tsx b/apps/mull-ui/src/app/components/subnavigation-bar/subnavigation-bar.tsx
@@ -4,16 +4,22 @@ import { NavLink, useRouteMatch } from 'react-router-dom';
 import './subnavigation-bar.scss';
 
 export const SubNavigationBar = () => {
+  let { path } = useRouteMatch<{}>();
+
   return (
     <div className="page-container">
       <div className="subnavigation-container">
-        <NavLink to={`/discover`} className="subnavigation-link" activeClassName="active">
+        <NavLink
+          to={`/home`}
+          isActive={() => ['/home'].includes(path)} // Manually override the isActive functionality to prevent /home from always being active
+          className="subnavigation-link"
+        >
           Discover
         </NavLink>
-        <NavLink to={`/upcoming`} className="subnavigation-link" activeClassName="active">
+        <NavLink to={`/home/upcoming`} className="subnavigation-link" activeClassName="active">
           Upcoming
         </NavLink>
-        <NavLink to={`/myevents`} className="subnavigation-link" activeClassName="active">
+        <NavLink to={`/home/myevents`} className="subnavigation-link" activeClassName="active">
           My Events
         </NavLink>
       </div>