Tests for Team

Fixed tests for Team class
Small sdjustments on tests for Member class

src/App.scss

@@ -15,6 +15,15 @@
 			vertical-align: middle;
 			display: table-cell;
 		}
+
+    span {
+			vertical-align: middle;
+			display: table-cell;
+
+      h1 {
+        display: block;
+      }
+		}
 	}
 
 	.back {

src/components/Router.jsx

@@ -12,7 +12,7 @@ history.listen(() => {
 
 export default function Router() {
   // let [team, setTeam] = useState([])
-  let [users, setUsers] = useState([])
+  // let [users, setUsers] = useState([])
   let [memberProps, setMemberProps] = useState({})
   let [teamProps, setTeamProps] = useState({})
 
@@ -30,10 +30,6 @@ export default function Router() {
     })
   }
 
-  let usersCallback = el => {
-    setUsers(el)
-  }
-
   let userIdCallback = (el, teams) => {
     setMemberProps({
       url: config.api + '/user/' + el,
@@ -50,11 +46,7 @@ export default function Router() {
   return (
     <ReactRouter history={history}>
       <Switch>
-        <Route
-          exact
-          path="/"
-          render={props => <Home teamCallback={teamCallback} usersCallback={usersCallback} {...props} />}
-        />
+        <Route exact path="/" render={props => <Home teamCallback={teamCallback} {...props} />} />
 
         <Route exact path="/team" render={() => <Team props={teamProps} />} />
 

src/components/TeamList.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-export default function TeamList({ teams, users, selectTeam, selectUser }) {
+export default function TeamList({ teams, selectTeam }) {
   return (
     <div className="teams">
       <ul className="list">

src/views/Home.jsx

@@ -58,7 +58,6 @@ export default function Home(props) {
 
   let selectTeam = selectedTeam => {
     props.teamCallback(selectedTeam, users, teams)
-    props.usersCallback(users)
     history.push('/team')
   }
 

src/views/Member.jsx

@@ -2,7 +2,6 @@
 import React, { useState, useEffect } from 'react'
 import axios from 'axios'
 import history from '../history.js'
-// import config from '../config.json'
 import './Member.scss'
 
 export default function Member({ props }) {
@@ -48,7 +47,7 @@ export default function Member({ props }) {
         user !== undefined && (
           <div>
             <div className="header">
-              <span data-testid="resolved">
+              <span data-testid="resolved-name">
                 <h1>Member {user.name}</h1>
               </span>
             </div>
@@ -59,7 +58,9 @@ export default function Member({ props }) {
 
             <h2>Username:</h2>
             <div className="username">
-              <p>{user.username}</p>
+              <span data-testid="resolved-username">
+                <p>{user.username}</p>
+              </span>
             </div>
 
             <h2>Member of:</h2>

src/views/Member.test.js

@@ -14,9 +14,6 @@ describe('A members page', () => {
   it('should fetch and display data', async () => {
     const callData = {
       username: 'goodpanda',
-      member_teams: [3],
-      lead_teams: [],
-      id: 15,
       name: 'Charlotte Amsterdan'
     }
 
@@ -24,9 +21,11 @@ describe('A members page', () => {
 
     const address = { url: '/user15' }
     const { getByTestId } = render(<Member props={address} />)
-    const resolvedSpan = await waitForElement(() => getByTestId('resolved'))
+    const resolvedName = await waitForElement(() => getByTestId('resolved-name'))
+    const resolvedUsername = await waitForElement(() => getByTestId('resolved-username'))
 
-    expect(resolvedSpan).toHaveTextContent('Member ' + callData.name)
+    expect(resolvedName).toHaveTextContent('Member ' + callData.name)
+    expect(resolvedUsername).toHaveTextContent(callData.username)
     expect(axiosMock.get).toHaveBeenCalledTimes(1)
     expect(axiosMock.get).toHaveBeenCalledWith(address.url)
   })

src/views/Team.jsx

@@ -7,7 +7,7 @@ import './Team.scss'
 
 export default function Team({ props }) {
   // MARK: State
-  let [team, setTeam] = useState([])
+  let [team, setTeam] = useState(null)
   let [members, setMembers] = useState([])
   let [filteredMembers, setFilteredMembers] = useState([])
 
@@ -16,7 +16,7 @@ export default function Team({ props }) {
   useEffect(() => {
     let fetchData = async () => {
       try {
-        let result = await axios(props.url)
+        let result = await axios.get(props.url)
         if (result.data) {
           setTeam(result.data)
 
@@ -81,22 +81,22 @@ export default function Team({ props }) {
   // MARK: Return
   return (
     <div className="team">
-      {props.team !== undefined && (
-        <div className="header">
-          <h1>Team {props.team.name}</h1>
-        </div>
-      )}
-
-      <div className="back">
-        <button className="back-btn" onClick={navBack}>{`< Back to teams`}</button>
-      </div>
-
-      <FilterForm filterCallback={filterCallback} />
-
-      {team.length === 0 ? (
+      {team === null ? (
         <div data-testid="loading">Loading...</div>
       ) : (
-        team !== undefined && (
+        <div>
+          {props.team !== undefined && (
+            <div className="header">
+              <h1>Team {props.team.name}</h1>
+            </div>
+          )}
+
+          <div className="back">
+            <button className="back-btn" onClick={navBack}>{`< Back to teams`}</button>
+          </div>
+
+          <FilterForm filterCallback={filterCallback} />
+
           <div>
             <h2>Team lead</h2>
 
@@ -116,7 +116,7 @@ export default function Team({ props }) {
               ))}
             </ul>
           </div>
-        )
+        </div>
       )}
     </div>
   )

src/views/Team.test.js

@@ -13,19 +13,22 @@ describe('A team page', () => {
   })
 
   it('should fetch and display data', async () => {
-    const callData = {
-      teamProps: {
-        id: 3
-      },
-      usersProps: [{ name: 'UserName' }]
-    }
+    const callData = { lead: 1, id: 2, name: 'Awesome Tricksters', members: [2, 3, 4] }
 
     axiosMock.get.mockResolvedValueOnce({ data: callData })
 
-    const address = { url: '/team3' }
-    const { getByTestId } = render(<Team props={address} />)
+    const mockProps = {
+      users: [
+        { id: 1, name: 'Leader', username: 'team leader' },
+        { id: 2, name: 'First Member', username: 'first member' },
+        { id: 3, name: 'Second Member', username: 'second member' },
+        { id: 4, name: 'Third Member', username: 'third member' }
+      ]
+    }
+
+    const { getByTestId } = render(<Team props={mockProps} />)
     const resolvedSpan = await waitForElement(() => getByTestId('resolved'))
 
-    expected(resolvedSpan).toHaveContent('Team')
+    expect(resolvedSpan).toHaveTextContent(mockProps.users[0].name)
   })
 })