Added tests for filter input field in Home

src/components/Router.jsx

@@ -24,6 +24,12 @@ export default function Router() {
     })
   }
 
+  let homeProps = {
+    teamUrl: config.api + '/team/',
+    userUrl: config.api + '/user/',
+    cb: teamCallback
+  }
+
   let userIdCallback = (el, teams) => {
     setMemberProps({
       url: config.api + '/user/' + el,
@@ -34,7 +40,7 @@ export default function Router() {
   return (
     <ReactRouter history={history}>
       <Switch>
-        <Route exact path="/" render={() => <Home props={teamCallback} />} />
+        <Route exact path="/" render={() => <Home props={homeProps} />} />
 
         <Route exact path="/team" render={() => <Team props={teamProps} />} />
 

src/views/Home.jsx

@@ -2,17 +2,14 @@
 import React, { useState, useEffect } from 'react'
 import history from '../history.js'
 import axios from 'axios'
-import config from '../config.json'
 import TeamList from '../components/TeamList.jsx'
 import FilterForm from '../components/FilterForm.jsx'
 import './Home.scss'
 
 export default function Home({ props }) {
   // MARK: State
-  let [loading, setLoading] = useState(true)
+  let [teams, setTeams] = useState(null)
-  let [loadingUsers, setLoadingUsers] = useState(true)
+  let [users, setUsers] = useState(null)
-  let [teams, setTeams] = useState([])
-  let [users, setUsers] = useState([])
   let [filteredTeams, setFilteredTeams] = useState([])
 
   // MARK: Effects
@@ -20,51 +17,43 @@ export default function Home({ props }) {
   // MARK: - Load teams
   useEffect(() => {
     let fetchData = async () => {
-      setLoading(true)
       try {
-        let result = await axios(config.api + '/team/')
+        let result = await axios.get(props.teamUrl)
         if (result.data) {
           setTeams(result.data)
           setFilteredTeams(result.data)
         }
-        setLoading(false)
       } catch (err) {
-        setLoading(false)
+        console.log('Error loading users', err)
       }
     }
 
     fetchData()
-  }, [])
+  }, [props])
 
   // MARK: - Load users
   useEffect(() => {
     let fetchData = async () => {
-      setLoadingUsers(true)
       try {
-        let result = await axios(config.api + '/user/')
+        let result = await axios.get(props.userUrl)
         if (result.data) {
           setUsers(result.data)
         }
-        setLoadingUsers(false)
       } catch (err) {
-        setLoadingUsers(false)
+        console.log('Error loading teams', err)
       }
     }
 
     fetchData()
-  }, [])
+  }, [props])
 
   // MARK: Callbacks
 
   let selectTeam = selectedTeam => {
-    props(selectedTeam, users, teams)
+    props.cb(selectedTeam, users, teams)
     history.push('/team')
   }
 
-  let selectUser = selectedUser => {
-    console.log('Selected user ' + selectedUser)
-  }
-
   let filterCallback = e => {
     let filtered = teams.filter(team => {
       return team.name.toUpperCase().includes(e.target.value.toUpperCase())
@@ -73,20 +62,24 @@ export default function Home({ props }) {
     setFilteredTeams(filtered)
   }
 
+  //
+
   // MARK: Return
   return (
     <div className="home">
-      <div className="header">
+      {users === null || teams === null ? (
-        <h1>Tempo teams</h1>
+        <div data-testid="loading">Loading...</div>
-      </div>
-
-      <FilterForm filterCallback={filterCallback} />
-
-      {loading || loadingUsers ? (
-        <div>Loading...</div>
       ) : (
         teams !== undefined && (
-          <TeamList teams={filteredTeams} users={users} selectTeam={selectTeam} selectUser={selectUser} />
+          <div data-testid="content">
+            <div data-testid="resolved" className="header">
+              <h1>Tempo teams</h1>
+            </div>
+
+            <FilterForm filterCallback={filterCallback} />
+
+            <TeamList teams={filteredTeams} selectTeam={selectTeam} />
+          </div>
         )
       )}
     </div>

src/views/Home.test.js

@@ -0,0 +1,83 @@
+import React from 'react'
+import { fireEvent, render, waitForElement } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/react/cleanup-after-each'
+import axiosMock from 'axios'
+import Home from './Home'
+
+describe('A Home page', () => {
+  it('should render without crashing', () => {
+    const { getByTestId } = render(<Home />)
+
+    expect(getByTestId('loading')).toHaveTextContent('Loading...')
+  })
+
+  it('should fetch data and display teams', async () => {
+    let callData = [
+      { name: 'Mock team 1', id: 1 },
+      { name: 'Mock team 2', id: 2 },
+      { name: 'Mock team 3', id: 3 },
+      { name: 'Mock team 4', id: 4 },
+      { name: 'Mock team 5', id: 5 }
+    ]
+
+    axiosMock.get.mockResolvedValueOnce({ data: callData })
+
+    const mockProps = {
+      selectTeam: 'testing'
+    }
+
+    const { getByTestId, getByText } = render(<Home props={mockProps} />)
+    const resolved = await waitForElement(() => getByTestId('resolved'))
+
+    expect(resolved).toHaveTextContent('Tempo teams')
+    expect(getByText(callData[2].name)).toBeInTheDocument()
+  })
+
+  it('should display correct filtered results', async () => {
+    let callData = [
+      { name: 'Mock team 1', id: 1 },
+      { name: 'Mock team 2', id: 2 },
+      { name: 'Mock team 3', id: 3 },
+      { name: 'Mock team 4', id: 4 },
+      { name: 'Mock team 5', id: 5 }
+    ]
+
+    axiosMock.get.mockResolvedValueOnce({ data: callData })
+
+    const mockProps = {
+      selectTeam: 'testing'
+    }
+
+    const { getByPlaceholderText, getByText } = render(<Home props={mockProps} />)
+    const resolved = await waitForElement(() => getByPlaceholderText('Filter'))
+
+    fireEvent.change(resolved, { target: { value: '2' } })
+    expect(getByText(callData[1].name)).toBeInTheDocument()
+  })
+
+  it('should not display filtered out results', async () => {
+    let callData = [
+      { name: 'Mock team 1', id: 1 },
+      { name: 'Mock team 2', id: 2 },
+      { name: 'Mock team 3', id: 3 },
+      { name: 'Mock team 4', id: 4 },
+      { name: 'Mock team 5', id: 5 }
+    ]
+
+    axiosMock.get.mockResolvedValueOnce({ data: callData })
+
+    const mockProps = {
+      selectTeam: 'testing'
+    }
+
+    const { getByPlaceholderText, getByTestId } = render(<Home props={mockProps} />)
+    const resolved = await waitForElement(() => getByPlaceholderText('Filter'))
+
+    fireEvent.change(resolved, { target: { value: '2' } })
+    expect(getByTestId('content')).not.toHaveTextContent(callData[0].name)
+    expect(getByTestId('content')).not.toHaveTextContent(callData[2].name)
+    expect(getByTestId('content')).not.toHaveTextContent(callData[3].name)
+    expect(getByTestId('content')).not.toHaveTextContent(callData[4].name)
+  })
+})

src/views/Team.test.js

@@ -27,7 +27,6 @@ describe('A team page', () => {
     }
 
     const { getByTestId, getByText } = render(<Team props={mockProps} />)
-
     const resolvedLead = await waitForElement(() => getByTestId('resolved-lead'))
 
     expect(resolvedLead).toHaveTextContent(mockProps.users[0].name)