Merge pull request #461 from raft-tech/front/119/reports

Front/119/reports

tdrs-frontend/src/actions/reports.js

@@ -0,0 +1,5 @@
+export const SET_YEAR = 'SET_YEAR'
+
+export const setYear = (year) => (dispatch) => {
+  dispatch({ type: SET_YEAR, payload: { year } })
+}

tdrs-frontend/src/actions/reports.test.js

@@ -0,0 +1,19 @@
+import thunk from 'redux-thunk'
+import configureStore from 'redux-mock-store'
+
+import { setYear, SET_YEAR } from './reports'
+
+describe('actions/setYear', () => {
+  const mockStore = configureStore([thunk])
+
+  it('should dispatch SET_YEAR', async () => {
+    const store = mockStore()
+
+    await store.dispatch(setYear(2020))
+
+    const actions = store.getActions()
+
+    expect(actions[0].type).toBe(SET_YEAR)
+    expect(actions[0].payload).toStrictEqual({ year: 2020 })
+  })
+})

tdrs-frontend/src/actions/sttList.test.js

@@ -85,5 +85,8 @@ describe('actions/stts.js', () => {
     const actions = store.getActions()
     expect(actions[0].type).toBe(FETCH_STTS)
     expect(actions[1].type).toBe(SET_STTS_ERROR)
+    expect(actions[1].payload).toStrictEqual({
+      error: Error({ message: 'something went wrong' }),
+    })
   })
 })

tdrs-frontend/src/components/EditProfile/EditProfile.jsx

@@ -139,76 +139,76 @@ function EditProfile() {
     return <Redirect to="/request" />
   }
 
-    return (
-        <>
-          <p className="margin-top-1 margin-bottom-4">
-            Please enter your information to request access from an OFA
-            administrator
-          </p>
-          <form className="usa-form" onSubmit={handleSubmit}>
-            <div
-              className={`usa-error-message ${
+  return (
+    <>
+      <p className="margin-top-1 margin-bottom-4">
+        Please enter your information to request access from an OFA
+        administrator
+      </p>
+      <form className="usa-form" onSubmit={handleSubmit}>
+        <div
+          className={`usa-error-message ${
             !!Object.keys(errors).length && !!Object.keys(touched).length
               ? 'display-block'
               : 'display-none'
           }`}
-              ref={errorRef}
-              tabIndex="-1"
-              role="alert"
-            >
-              There are {Object.keys(errors).length} errors in this form
-            </div>
-            <FormGroup
-              error={errors.firstName}
-              name="firstName"
-              label="First Name"
-              inputValue={profileInfo.firstName}
-              handleChange={handleChange}
-              handleBlur={handleBlur}
-            />
-            <FormGroup
-              error={errors.lastName}
-              name="lastName"
-              label="Last Name"
-              inputValue={profileInfo.lastName}
-              handleChange={handleChange}
-              handleBlur={handleBlur}
-            />
-            <div
-              className={`usa-form-group ${
+          ref={errorRef}
+          tabIndex="-1"
+          role="alert"
+        >
+          There are {Object.keys(errors).length} errors in this form
+        </div>
+        <FormGroup
+          error={errors.firstName}
+          name="firstName"
+          label="First Name"
+          inputValue={profileInfo.firstName}
+          handleChange={handleChange}
+          handleBlur={handleBlur}
+        />
+        <FormGroup
+          error={errors.lastName}
+          name="lastName"
+          label="Last Name"
+          inputValue={profileInfo.lastName}
+          handleChange={handleChange}
+          handleBlur={handleBlur}
+        />
+        <div
+          className={`usa-form-group ${
             errors.stt ? 'usa-form-group--error' : ''
           }`}
-            >
-              <ComboBox
-                name="stt"
-                error={errors.stt}
-                handleSelect={setStt}
-                selected={
-                    profileInfo.stt &&
-                        profileInfo.stt.name &&
-                        profileInfo.stt.name.toLowerCase()
-                }
-                handleBlur={handleBlur}
-                placeholder="- Select or Search -"
+        >
+          <ComboBox
+            name="stt"
+            error={errors.stt}
+            handleSelect={setStt}
+            selected={
+              profileInfo.stt &&
+              profileInfo.stt.name &&
+              profileInfo.stt.name.toLowerCase()
+            }
+            handleBlur={handleBlur}
+            placeholder="- Select or Search -"
+          >
+            <option value="">Select an STT</option>
+            {sttList.map((stt) => (
+              <option
+                className="sttOption"
+                key={stt.id}
+                value={stt.name.toLowerCase()}
               >
-                <option value="">Select an STT</option>
-                {sttList.map((stt) => (
-                    <option
-                      className="sttOption"
-                      key={stt.id}
-                      value={stt.name.toLowerCase()}
-                    >
-                      {stt.name}
-                    </option>
-                ))}
-              </ComboBox>
-            </div>
-            <Button type="submit" className="width-full request-access-button">
-              Request Access
-            </Button>
-          </form>
-        </>
-    )
+                {stt.name}
+              </option>
+            ))}
+          </ComboBox>
+        </div>
+        <Button type="submit" className="width-full request-access-button">
+          Request Access
+        </Button>
+      </form>
+    </>
+  )
 }
 
 export default EditProfile

tdrs-frontend/src/components/Header/Header.jsx

@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux'
 import closeIcon from 'uswds/dist/img/close.svg'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faSignOutAlt, faUserCircle } from '@fortawesome/free-solid-svg-icons'
+import NavItem from '../NavItem/NavItem'
 
 /**
  * This component is rendered on every page and contains the navigation bar.
@@ -41,17 +42,14 @@ function HeaderComp() {
               <img src={closeIcon} alt="close" />
             </button>
             <ul className="usa-nav__primary usa-accordion">
-              <li className="usa-nav__primary-item">
-                <a
-                  href="/"
-                  key="welcome"
-                  className={`usa-nav__link ${
-                    pathname === '/edit-profile' ? 'usa-current' : ''
-                  }`}
-                >
-                  <span>Welcome</span>
-                </a>
-              </li>
+              <NavItem pathname={pathname} tabTitle="Welcome" href="/welcome" />
+              <NavItem pathname={pathname} tabTitle="Reports" href="/reports" />
+              <NavItem
+                pathname={pathname}
+                tabTitle="Profile"
+                href="/edit-profile"
+              />
+              <NavItem pathname={pathname} tabTitle="Admin" href="/admin" />
             </ul>
             <div className="usa-nav__secondary">
               <ul className="usa-nav__secondary-links">

tdrs-frontend/src/components/Header/Header.test.js

@@ -26,18 +26,54 @@ describe('Header', () => {
     expect(title).toIncludeText('TANF Data Portal')
   })
 
-  it('should have a primary navigation', () => {
+  it('should have a navigation link for Welcome', () => {
     const store = mockStore(initialState)
     const wrapper = mount(
       <Provider store={store}>
         <Header />
       </Provider>
     )
-    const welcomeLink = wrapper.find('.usa-nav__link')
+    const welcomeLink = wrapper.find('#welcome')
     expect(welcomeLink).toExist()
     expect(welcomeLink).toIncludeText('Welcome')
   })
 
+  it('should have a navigation link for Reports', () => {
+    const store = mockStore(initialState)
+    const wrapper = mount(
+      <Provider store={store}>
+        <Header />
+      </Provider>
+    )
+    const reportsLink = wrapper.find('#reports')
+    expect(reportsLink).toExist()
+    expect(reportsLink).toIncludeText('Reports')
+  })
+
+  it('should have a navigation link for Profile', () => {
+    const store = mockStore(initialState)
+    const wrapper = mount(
+      <Provider store={store}>
+        <Header />
+      </Provider>
+    )
+    const profileLink = wrapper.find('#profile')
+    expect(profileLink).toExist()
+    expect(profileLink).toIncludeText('Profile')
+  })
+
+  it('should have a navigation link for Admin', () => {
+    const store = mockStore(initialState)
+    const wrapper = mount(
+      <Provider store={store}>
+        <Header />
+      </Provider>
+    )
+    const adminLink = wrapper.find('#admin')
+    expect(adminLink).toExist()
+    expect(adminLink).toIncludeText('Admin')
+  })
+
   it('should find menu button', () => {
     const store = mockStore(initialState)
     const wrapper = mount(
@@ -49,29 +85,93 @@ describe('Header', () => {
     expect(menuBtn).toExist()
   })
 
-  it("should add usa-current class to Welcome tab when on '/edit-profile'", () => {
-    const store = mockStore(initialState)
+  it("should add usa-current class to Welcome tab when on '/welcome'", () => {
+    const store = mockStore({
+      ...initialState,
+      router: { location: { pathname: '/welcome' } },
+    })
     const wrapper = mount(
       <Provider store={store}>
         <Header />
       </Provider>
     )
 
-    const welcomeTab = wrapper.find('.usa-nav__link')
+    const welcomeTab = wrapper.find('#welcome')
 
     expect(welcomeTab.hasClass('usa-current')).toEqual(true)
   })
 
-  it("should not add usa-current class to Welcome tab when not on '/edit-profile'", () => {
-    initialState = { ...initialState, router: { location: '/' } }
+  it("should add usa-current class to Reports tab when on '/reports'", () => {
+    const store = mockStore({
+      ...initialState,
+      router: { location: { pathname: '/reports' } },
+    })
+    const wrapper = mount(
+      <Provider store={store}>
+        <Header />
+      </Provider>
+    )
+
+    const reportsTab = wrapper.find('#reports')
+
+    expect(reportsTab.hasClass('usa-current')).toEqual(true)
+  })
+
+  it("should add usa-current class to Reports tab when on '/reports/*'", () => {
+    const store = mockStore({
+      ...initialState,
+      router: { location: { pathname: '/reports/upload' } },
+    })
+    const wrapper = mount(
+      <Provider store={store}>
+        <Header />
+      </Provider>
+    )
+
+    const reportsTab = wrapper.find('#reports')
+
+    expect(reportsTab.hasClass('usa-current')).toEqual(true)
+  })
+
+  it("should add usa-current class to Profile tab when on '/edit-profile'", () => {
+    const store = mockStore(initialState)
+    const wrapper = mount(
+      <Provider store={store}>
+        <Header />
+      </Provider>
+    )
+
+    const profileTab = wrapper.find('#profile')
+
+    expect(profileTab.hasClass('usa-current')).toEqual(true)
+  })
+
+  it("should add usa-current class to Admin tab when on '/admin'", () => {
+    const store = mockStore({
+      ...initialState,
+      router: { location: { pathname: '/admin' } },
+    })
+    const wrapper = mount(
+      <Provider store={store}>
+        <Header />
+      </Provider>
+    )
+
+    const adminTab = wrapper.find('#admin')
+
+    expect(adminTab.hasClass('usa-current')).toEqual(true)
+  })
+
+  it("should not add usa-current class to Welcome tab when not on '/'", () => {
+    initialState = { ...initialState, router: { location: { pathname: '/' } } }
     const store = mockStore(initialState)
     const wrapper = mount(
       <Provider store={store}>
         <Header />
       </Provider>
     )
 
-    const welcomeTab = wrapper.find('.usa-nav__link')
+    const welcomeTab = wrapper.find('#welcome')
 
     expect(welcomeTab.hasClass('usa-current')).toEqual(false)
   })