Permalink
Browse files

Test with mock fetch to get git mob contributors

  • Loading branch information...
rkotze committed May 28, 2018
1 parent 13cf721 commit de44c12c2490838b619b194710ada9f1aff60d68
Showing with 119 additions and 1 deletion.
  1. +2 −1 .babelrc
  2. +64 −0 src/fetch-git-mob-contributors.js
  3. +53 −0 src/fetch-git-mob-contributors.test.js
@@ -1,6 +1,7 @@
{
"presets": [
"react",
"env",
"react"
"stage-1"
]
}
@@ -0,0 +1,64 @@
import React from 'react';
function ContributorProfile({ total, avatar, username }) {
return (<div data-testid="contributor" className="contributor">
<div className="profile">
<img src={avatar} width="60px" />
<p>{username}</p>
</div>
<div className="total">
<p className="number">{total}</p>
commits
</div>
</div>);
}
ContributorProfile.defaultProps = {
total: 0,
avatar: 'https://thesocietypages.org/socimages/files/2009/05/nopic_192.gif',
username: 'unknown'
};
export class FetchGitMobContributors extends React.Component {
constructor() {
super();
this.state = {
contributorList: []
};
}
fetchContributors = () => {
fetch(`https://api.github.com/repos/findmypast-oss/git-mob/stats/contributors`)
.then((data) => data.json())
.then((data) => data.map(({ total, author }) => ({
total: total,
username: author.login,
avatar: author.avatar_url,
id: author.id
})))
.then((contributorList) => {
this.setState({
contributorList
});
});
}
handleClick = () => {
this.fetchContributors();
}
render() {
const { contributorList } = this.state;
return (
<div>
<button data-testid="fetch-button" onClick={this.handleClick}>Fetch Git Mob contributors</button>
<div data-testid="contributors" className="contributors">
{contributorList.map((contributor) => {
return <ContributorProfile key={contributor.id} {...contributor} />
})}
</div>
</div>
)
}
}
@@ -0,0 +1,53 @@
import React from 'react';
import { render, Simulate, wait } from 'react-testing-library'
import 'dom-testing-library/extend-expect';
import { FetchGitMobContributors } from './fetch-git-mob-contributors';
beforeAll(function () {
global.fetch = jest.fn().mockImplementation(async () => {
return {
ok: true,
json: function () {
return [
{
"total": 59,
"author": {
"login": "rkotze",
"id": 1234,
"avatar_url": "https://avatars2.githubusercontent.com/u/1234?v=4"
}
},
{
"total": 122,
"author": {
"login": "dideler",
"id": 4567,
"avatar_url": "https://avatars2.githubusercontent.com/u/4567?v=4"
}
}
]
}
};
});
});
test('Click button to fetch git mob contributors and display in a list', async () => {
const { getByText, getAllByTestId, getByTestId, container } = render(<FetchGitMobContributors />);
Simulate.click(getByText('Fetch Git Mob contributors'));
await wait(() => getByTestId('contributor'));
expect(fetch).toHaveBeenCalledTimes(1);
const contributors = getAllByTestId('contributor');
expect(contributors).toHaveLength(2);
expect(contributors[0]).toHaveTextContent('rkotze')
expect(contributors[0]).toHaveTextContent('59');
expect(contributors[1]).toHaveTextContent('dideler')
expect(contributors[1]).toHaveTextContent('122');
});

0 comments on commit de44c12

Please sign in to comment.