fix: subheader active link changes depending on the route

bcgov · Jul 23, 2020 · eef241f · eef241f
1 parent 88f8dc8
commit eef241f
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 96 deletions.
diff --git a/app/components/Layout/Subheader.tsx b/app/components/Layout/Subheader.tsx
@@ -1,92 +1,101 @@
 import React from 'react';
 import Link from 'next/link';
-const Subheader = () => (
-  <div>
-    <nav className="navigation-main" id="navbar">
-      <div className="container">
-        <ul>
-          <li className="active">
-            <Link
-              href={{
-                pathname: '/reporter'
-              }}
-            >
-              <a>My Dashboard</a>
-            </Link>
-          </li>
-          <li>
-            <Link
-              href={{
-                pathname: '/reporter/facilities'
-              }}
-            >
-              <a>My Applications</a>
-            </Link>
-          </li>
-        </ul>
-      </div>
-      <style jsx>{`
-        .navigation-main {
-          color: #fcba19;
-          background-color: #38598a;
-          width: 100%;
-          -webkit-box-shadow: 0 6px 8px -4px #b3b1b3;
-          -moz-box-shadow: 0 6px 8px -4px #b3b1b3;
-          box-shadow: 0 6px 8px -4px #b3b1b3;
-          padding: 10px 0 10px 50px;
-        }
-        .navigation-main ul {
-          display: flex;
-          flex-direction: row;
-          margin: 0;
-          color: #fff;
-          list-style: none;
-          margin-left: -75px;
-        }
-        .navigation-main ul li a {
-          display: flex;
-          font-size: 17px;
-          font-weight: normal; /* 400 */
-          color: #fff !important;
-          padding: 0 15px 0 15px;
-          text-decoration: none;
-        }
-        .navigation-main ul li a:hover {
-          text-decoration: underline;
-        }
-        .navigation-main ul .active {
-          text-decoration: underline;
-          font-weight: bold;
-        }
-        .navigation-main ul > li.active a {
-          color: #ffc107 !important;
-        }
+import {useRouter} from 'next/router';
 
-        :focus {
-          outline: 4px solid #3b99fc;
-          outline-offset: 1px;
-        }
+const DASHBOARD_PATH = '/reporter';
+const APPLICATIONS_PATH = '/reporter/facilities';
 
-        @media screen and (min-width: 768px) {
+const Subheader = () => {
+  const {asPath} = useRouter();
+
+  return (
+    <div>
+      <nav className="navigation-main" id="navbar">
+        <div className="container">
+          <ul>
+            <li className={asPath === DASHBOARD_PATH ? 'active' : ''}>
+              <Link
+                href={{
+                  pathname: DASHBOARD_PATH
+                }}
+              >
+                <a>My Dashboard</a>
+              </Link>
+            </li>
+            <li className={asPath === APPLICATIONS_PATH ? 'active' : ''}>
+              <Link
+                href={{
+                  pathname: APPLICATIONS_PATH
+                }}
+              >
+                <a>My Applications</a>
+              </Link>
+            </li>
+          </ul>
+        </div>
+        <style jsx>{`
           .navigation-main {
-            display: block;
+            color: #fcba19;
+            background-color: #38598a;
+            width: 100%;
+            -webkit-box-shadow: 0 6px 8px -4px #b3b1b3;
+            -moz-box-shadow: 0 6px 8px -4px #b3b1b3;
+            box-shadow: 0 6px 8px -4px #b3b1b3;
+            padding: 10px 0 10px 50px;
           }
-
           .navigation-main ul {
+            display: flex;
             flex-direction: row;
+            margin: 0;
+            color: #fff;
+            list-style: none;
+            margin-left: -75px;
+          }
+          .navigation-main ul li a {
+            display: flex;
+            font-size: 17px;
+            font-weight: normal; /* 400 */
+            color: #fff !important;
+            padding: 0 15px 0 15px;
+            text-decoration: none;
+          }
+          .navigation-main ul li a:hover {
+            text-decoration: underline;
+          }
+          .navigation-main ul .active {
+            text-decoration: underline;
+            font-weight: bold;
+          }
+          .navigation-main ul > li.active a {
+            color: #ffc107 !important;
           }
 
-          .navigation-main ul li {
-            margin: 0;
+          :focus {
+            outline: 4px solid #3b99fc;
+            outline-offset: 1px;
           }
 
-          .navigation-main ul li a {
-            border-right: 1px solid #9b9b9b;
+          @media screen and (min-width: 768px) {
+            .navigation-main {
+              display: block;
+            }
+
+            .navigation-main ul {
+              flex-direction: row;
+            }
+
+            .navigation-main ul li {
+              margin: 0;
+            }
+
+            .navigation-main ul li a {
+              border-right: 1px solid #9b9b9b;
+            }
           }
-        }
-      `}</style>
-    </nav>
-  </div>
-);
+        `}</style>
+      </nav>
+    </div>
+  );
+};
 
 export default Subheader;
diff --git a/app/stories/Pages.stories.tsx b/app/stories/Pages.stories.tsx
@@ -58,6 +58,10 @@ export default {
   decorators: [withA11y]
 };
 
+const useRouter = jest.spyOn(require('next/router'), 'useRouter');
+useRouter.mockImplementation(() => ({
+  asPath: '/reporter'
+}));
 export const admin = () => render(Admin);
 export const registration = () => render(Registration);
 export const user_dashboard = () => render(Reporter);

diff --git a/app/tests/integration/__snapshots__/Storyshots.test.ts.snap b/app/tests/integration/__snapshots__/Storyshots.test.ts.snap
@@ -1114,20 +1114,20 @@ Array [
       </header>
       <div>
         <nav
-          className="jsx-1103754433 navigation-main"
+          className="jsx-1717546368 navigation-main"
           id="navbar"
         >
           <div
-            className="jsx-1103754433 container"
+            className="jsx-1717546368 container"
           >
             <ul
-              className="jsx-1103754433"
+              className="jsx-1717546368"
             >
               <li
-                className="jsx-1103754433 active"
+                className="jsx-1717546368 active"
               >
                 <a
-                  className="jsx-1103754433"
+                  className="jsx-1717546368"
                   href="/reporter"
                   onClick={[Function]}
                   onMouseEnter={[Function]}
@@ -1136,10 +1136,10 @@ Array [
                 </a>
               </li>
               <li
-                className="jsx-1103754433"
+                className="jsx-1717546368 "
               >
                 <a
-                  className="jsx-1103754433"
+                  className="jsx-1717546368"
                   href="/reporter/facilities"
                   onClick={[Function]}
                   onMouseEnter={[Function]}

diff --git a/app/tests/unit/components/Layout/Subheader.test.tsx b/app/tests/unit/components/Layout/Subheader.test.tsx
@@ -2,9 +2,28 @@ import React from 'react';
 import {render} from 'enzyme';
 import Subheader from 'components/Layout/Subheader';
 
-// It renders the SubHeader
+describe('The Subheader', () => {
+  it('matches the last accepted Snapshot', () => {
+    const useRouter = jest.spyOn(require('next/router'), 'useRouter');
+    useRouter.mockImplementationOnce(() => ({
+      asPath: '/reporter'
+    }));
+    const wrapper = render(<Subheader />);
+    expect(wrapper).toMatchSnapshot();
+  });
 
-it('It matches the last accepted Snapshot', () => {
-  const wrapper = render(<Subheader />);
-  expect(wrapper).toMatchSnapshot();
+  it('changes the active menu item depending on the current route', () => {
+    const useRouter = jest.spyOn(require('next/router'), 'useRouter');
+    useRouter
+      .mockImplementationOnce(() => ({
+        asPath: '/reporter'
+      }))
+      .mockImplementationOnce(() => ({
+        asPath: '/reporter/facilities'
+      }));
+    let wrapper = render(<Subheader />);
+    expect(wrapper.find('.active a').text()).toBe('My Dashboard');
+    wrapper = render(<Subheader />);
+    expect(wrapper.find('.active a').text()).toBe('My Applications');
+  });
 });
diff --git a/app/tests/unit/components/Layout/__snapshots__/Subheader.test.tsx.snap b/app/tests/unit/components/Layout/__snapshots__/Subheader.test.tsx.snap
@@ -1,32 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`It matches the last accepted Snapshot 1`] = `
+exports[`The Subheader matches the last accepted Snapshot 1`] = `
 <div>
   <nav
-    class="jsx-1103754433 navigation-main"
+    class="jsx-1717546368 navigation-main"
     id="navbar"
   >
     <div
-      class="jsx-1103754433 container"
+      class="jsx-1717546368 container"
     >
       <ul
-        class="jsx-1103754433"
+        class="jsx-1717546368"
       >
         <li
-          class="jsx-1103754433 active"
+          class="jsx-1717546368 active"
         >
           <a
-            class="jsx-1103754433"
+            class="jsx-1717546368"
             href="/reporter"
           >
             My Dashboard
           </a>
         </li>
         <li
-          class="jsx-1103754433"
+          class="jsx-1717546368 "
         >
           <a
-            class="jsx-1103754433"
+            class="jsx-1717546368"
             href="/reporter/facilities"
           >
             My Applications