Rodrigoplp/react-hooks-unit-tests
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adjusting transfer of data on callbacks

Browse source
This commit is contained in:
Rodrigo Pedroso 2019-08-26 13:34:20 -04:00
commit 31cf73a501
7 changed files with 108 additions and 194 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/components/FilterForm.jsx
View file

@ -2,11 +2,11 @@ import React from 'react'
import './FilterForm.scss' import './FilterForm.scss'
export default function FilterForm({ filterCallback }) { export default function FilterForm({ filterCallback }) {
return ( return (
<form> <form>
<div className='form-group'> <div className="form-group">
<input placeholder='Filter' onChange={filterCallback} /> <input placeholder="Filter" onChange={filterCallback} />
</div> </div>
</form> </form>
) )
} }

25
src/components/Router.jsx
View file

@ -12,19 +12,19 @@ history.listen(() => {
export default function Router() { export default function Router() {
// let [team, setTeam] = useState([]) // let [team, setTeam] = useState([])
let [allTeams, setAllTeams] = useState([]) let [users, setUsers] = useState([])
// let [users, setUsers] = useState([])
let [memberProps, setMemberProps] = useState({}) let [memberProps, setMemberProps] = useState({})
let [teamProps, setTeamProps] = useState({}) let [teamProps, setTeamProps] = useState({})
let teamCallback = (teamId, users) => { let teamCallback = (teamId, users, teams) => {
// Remove this: // Remove this:
// setTeam(teamId) // setTeam(teamId)
// Leave: // Leave:
setTeamProps({ setTeamProps({
url: config.api + '/team/' + teamId, url: config.api + '/team/' + teamId.id,
team: teamId, team: teamId,
teams: teams,
users: users, users: users,
cb: userIdCallback cb: userIdCallback
}) })
@ -34,17 +34,13 @@ export default function Router() {
setUsers(el) setUsers(el)
} }
let userIdCallback = el => { let userIdCallback = (el, teams) => {
setMemberProps({ setMemberProps({
url: config.api + '/user/' + el, url: config.api + '/user/' + el,
teams: allTeams teams: teams
}) })
} }
let allTeamsCallback = el => {
setAllTeams(el)
}
// <Route // <Route
// exact // exact
// path="/team" // path="/team"
@ -57,14 +53,7 @@ export default function Router() {
<Route <Route
exact exact
path="/" path="/"
render={props => ( render={props => <Home teamCallback={teamCallback} usersCallback={usersCallback} {...props} />}
<Home
teamCallback={teamCallback}
usersCallback={usersCallback}
allTeamsCallback={allTeamsCallback}
{...props}
/>
)}
/> />
<Route exact path="/team" render={() => <Team props={teamProps} />} /> <Route exact path="/team" render={() => <Team props={teamProps} />} />

30
src/components/TeamList.jsx
View file

@ -1,19 +1,19 @@
import React from 'react' import React from 'react'
export default function TeamList({ teams, users, selectTeam, selectUser }) { export default function TeamList({ teams, users, selectTeam, selectUser }) {
return ( return (
<div className='teams'> <div className="teams">
<ul className='list'> <ul className="list">
{teams.map(team => ( {teams.map(team => (
<li className = 'list-item' key={team.id}> <li className="list-item" key={team.id}>
<div> <div>
<button className='selector-btn' onClick={() => selectTeam(team)}> <button className="selector-btn" onClick={() => selectTeam(team)}>
{ team.name } {team.name}
</button> </button>
</div> </div>
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
) )
} }

69
src/views/Attempt.js
View file

@ -1,69 +0,0 @@
import React from 'react'
import axios from 'axios'
import { mount } from 'enzyme'
import Member from './Member.jsx'
jest.mock('axios')
// test('should fetch users', () => {
// const userMock = {
// "username": "goodpanda",
// "member_teams": [
// 3
// ],
// "lead_teams": [],
// "id": 15,
// "name": "Charlotte Amsterdan"
// }
// const resp = {data: userMock}
// axios.get.mockResolvedValue(resp)
// // or you could use the following depending on your use case:
// // axios.get.mockImplementation(() => Promise.resolve(resp))
// return Users.then(data => expect(data).toEqual(userMock))
// })
jest.mock("services/dataService", () => ({
getData: jest.fn(),
}))
let getDataPromise
getData.mockImplementation(() => {
getDataPromise = new MockPromise()
return getDataPromise
})
it('When fetching succeed', async () => {
const wrapper = mount(<Member />)
let loadingNode = wrapper.find('[data-test-id="loading"]')
let dataNoode = wrapper.find('[data-test-id="user"]')
const data = {
"username": "goodpanda",
"member_teams": [
3
],
"lead_teams": [],
"id": 15,
"name": "Charlotte Amsterdan"
}
expect(loadingNode).toHaveLength(1)
expect(loadingNode.text()).toBe("Loading...")
expect(dataNode).toHaveLength(0)
await getDataPromise.resolve(data)
wrapper.update()
loadingNode = wrapper.find('[data-test-id="loading"]')
dataNode = wrapper.find('[data-test-id="user"]')
expect(loadingNode).toHaveLength(0)
expect(dataNode).toHaveLength(1)
expect(dataNode.text()).toBe(data)
})

150
src/views/Home.jsx
View file

@ -1,6 +1,6 @@
// MARK: Definitions // MARK: Definitions
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import history from '../history.js' import history from '../history.js'
import axios from 'axios' import axios from 'axios'
import config from '../config.json' import config from '../config.json'
import TeamList from '../components/TeamList.jsx' import TeamList from '../components/TeamList.jsx'
@ -8,94 +8,88 @@ import FilterForm from '../components/FilterForm.jsx'
import './Home.scss' import './Home.scss'
export default function Home(props) { export default function Home(props) {
// MARK: State // MARK: State
let [loading, setLoading] = useState(true) let [loading, setLoading] = useState(true)
let [loadingUsers, setLoadingUsers] = useState(true) let [loadingUsers, setLoadingUsers] = useState(true)
let [teams, setTeams] = useState([]) let [teams, setTeams] = useState([])
let [users, setUsers] = useState([]) let [users, setUsers] = useState([])
let [filteredTeams, setFilteredTeams] = useState([]) let [filteredTeams, setFilteredTeams] = useState([])
// MARK: Effects // MARK: Effects
// MARK: - Load teams // MARK: - Load teams
useEffect(() => { useEffect(() => {
let fetchData = async() => { let fetchData = async () => {
setLoading(true) setLoading(true)
try { try {
let result = await axios(config.api + '/team/') let result = await axios(config.api + '/team/')
if (result.data) { if (result.data) {
setTeams(result.data) setTeams(result.data)
setFilteredTeams(result.data) setFilteredTeams(result.data)
} }
setLoading(false) setLoading(false)
} } catch (err) {
catch(err) { setLoading(false)
setLoading(false) }
} }
}
fetchData() fetchData()
}, []) }, [])
// MARK: - Load users // MARK: - Load users
useEffect(() => { useEffect(() => {
let fetchData = async() => { let fetchData = async () => {
setLoadingUsers(true) setLoadingUsers(true)
try { try {
let result = await axios(config.api + '/user/') let result = await axios(config.api + '/user/')
if (result.data) { if (result.data) {
setUsers(result.data) setUsers(result.data)
} }
setLoadingUsers(false) setLoadingUsers(false)
} } catch (err) {
catch(err) { setLoadingUsers(false)
setLoadingUsers(false) }
} }
}
fetchData() fetchData()
}, []) }, [])
// MARK: Callbacks // MARK: Callbacks
let selectTeam = (selectedTeam) => { let selectTeam = selectedTeam => {
props.teamCallback(selectedTeam) props.teamCallback(selectedTeam, users, teams)
props.usersCallback(users) props.usersCallback(users)
props.allTeamsCallback(teams) history.push('/team')
history.push('/team') }
}
let selectUser = (selectedUser) => { let selectUser = selectedUser => {
console.log('Selected user ' + selectedUser) console.log('Selected user ' + selectedUser)
} }
let filterCallback = (e) => { let filterCallback = e => {
let filtered = teams.filter(team => { let filtered = teams.filter(team => {
return team.name.toUpperCase().includes(e.target.value.toUpperCase()) return team.name.toUpperCase().includes(e.target.value.toUpperCase())
}) })
setFilteredTeams(filtered) setFilteredTeams(filtered)
} }
// MARK: Return // MARK: Return
return ( return (
<div className='home'> <div className="home">
<div className='header'> <div className="header">
<h1>Tempo teams</h1> <h1>Tempo teams</h1>
</div> </div>
<FilterForm filterCallback = { filterCallback } /> <FilterForm filterCallback={filterCallback} />
{loading || loadingUsers ? (<div>Loading...</div>) : ( {loading || loadingUsers ? (
teams !== undefined && <div>Loading...</div>
<TeamList ) : (
teams = { filteredTeams } teams !== undefined && (
users = { users } <TeamList teams={filteredTeams} users={users} selectTeam={selectTeam} selectUser={selectUser} />
selectTeam = { selectTeam } )
selectUser = { selectUser } )}
/> </div>
)} )
</div>
)
} }

12
src/views/Team.jsx
View file

@ -5,7 +5,7 @@ import history from '../history.js'
import FilterForm from '../components/FilterForm.jsx' import FilterForm from '../components/FilterForm.jsx'
import './Team.scss' import './Team.scss'
export default function Team(props) { export default function Team({ props }) {
// MARK: State // MARK: State
let [team, setTeam] = useState([]) let [team, setTeam] = useState([])
let [members, setMembers] = useState([]) let [members, setMembers] = useState([])
@ -39,7 +39,7 @@ export default function Team(props) {
history.push('/') history.push('/')
} }
} catch (err) { } catch (err) {
console.log('Fetch data error: ' + err) console.log('Fetch data error:', err, JSON.stringify(props))
} }
} }
@ -62,7 +62,7 @@ export default function Team(props) {
} }
let selectUser = id => { let selectUser = id => {
props.cb(id) props.cb(id, props.teams)
history.push('/member') history.push('/member')
} }
@ -93,14 +93,14 @@ export default function Team(props) {
<FilterForm filterCallback={filterCallback} /> <FilterForm filterCallback={filterCallback} />
{team.length == 0 ? ( {team.length === 0 ? (
<div data-testId="loading">Loading...</div> <div data-testid="loading">Loading...</div>
) : ( ) : (
team !== undefined && ( team !== undefined && (
<div> <div>
<h2>Team lead</h2> <h2>Team lead</h2>
<button data-testId="resolved" className="selector-btn" onClick={() => selectUser(team.lead)}> <button data-testid="resolved" className="selector-btn" onClick={() => selectUser(team.lead)}>
{userData(team.lead)} {userData(team.lead)}
</button> </button>

2
src/views/Team.test.js
View file

@ -26,6 +26,6 @@ describe('A team page', () => {
const { getByTestId } = render(<Team props={address} />) const { getByTestId } = render(<Team props={address} />)
const resolvedSpan = await waitForElement(() => getByTestId('resolved')) const resolvedSpan = await waitForElement(() => getByTestId('resolved'))
expeted(resolvedSpan).toHaveContent('Team') expected(resolvedSpan).toHaveContent('Team')
}) })
}) })