Skip to content

Commit 5ec837a

Browse files
basilisSambasilisSam
authored
add tests and fix typescript issues
1 parent 1637235 commit 5ec837a

24 files changed

+17574
-543
lines changed

‎package-lock.json

+16,952-54
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+8-4
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@
66
"@apollo/client": "^3.5.10",
77
"@material-ui/core": "^4.12.3",
88
"@material-ui/icons": "^4.11.2",
9-
"@testing-library/jest-dom": "^5.16.2",
10-
"@testing-library/react": "^12.1.4",
11-
"@testing-library/user-event": "^13.5.0",
129
"@types/jest": "^27.4.1",
1310
"@types/node": "^16.11.26",
1411
"@types/react": "^17.0.39",
@@ -19,6 +16,7 @@
1916
"react-paginate": "^8.1.2",
2017
"react-router-dom": "^6.2.2",
2118
"react-scripts": "5.0.0",
19+
"react-test-renderer": "^17.0.2",
2220
"typescript": "^4.6.2",
2321
"web-vitals": "^2.1.4"
2422
},
@@ -51,8 +49,14 @@
5149
]
5250
},
5351
"devDependencies": {
52+
"@apollo/react-testing": "^4.0.0",
53+
"@testing-library/jest-dom": "^5.16.2",
54+
"@testing-library/react": "^12.1.4",
55+
"@testing-library/user-event": "^13.5.0",
56+
"@types/react-test-renderer": "^17.0.1",
5457
"autoprefixer": "^10.4.2",
5558
"postcss": "^8.4.8",
56-
"tailwindcss": "^3.0.23"
59+
"tailwindcss": "^3.0.23",
60+
"waait": "^1.0.5"
5761
}
5862
}

‎src/App.tsx

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
import { Route, Routes } from 'react-router-dom';
1+
import {Route, Routes} from 'react-router-dom';
22
import './App.css';
33
import Home from './components/Home/Home';
44
import IssueDetails from './components/IssueDetails/IssueDetails';
55
import NavBar from './components/NavBar/NavBar';
66
import NotFound from './components/NotFound/NotFound';
77

88
function App() {
9-
return (
10-
<div className="App">
11-
<NavBar/>
12-
<Routes>
13-
<Route path='/' element={<Home />} />
14-
<Route path='/:issueState/:issueNumber' element={<IssueDetails />} />
15-
<Route path='*' element={<NotFound />} />
16-
</Routes>
17-
</div>
18-
);
9+
return (
10+
<div className="App">
11+
<NavBar/>
12+
<Routes>
13+
<Route path='/' element={<Home/>}/>
14+
<Route path='/:issueNumber' element={<IssueDetails/>}/>
15+
<Route path='*' element={<NotFound/>}/>
16+
</Routes>
17+
</div>
18+
);
1919
}
2020

2121
export default App;

‎src/components/Home/Home.tsx

+54-55
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,72 @@
1-
import { useQuery, useLazyQuery } from "@apollo/client";
2-
import { useEffect, useState } from "react";
3-
import { GET_ISSUES } from "../../queries";
1+
import {useLazyQuery, useQuery} from "@apollo/client";
2+
import {useEffect, useState} from "react";
3+
import {GET_ISSUES} from "../../queries";
44
import "./Home.css";
55
import Spinner from "../Spinner/Spinner";
66
import IssuesTable from "../IssuesTable/IssuesTable";
77

88
function Home() {
99

10-
const PAGE_COUNT = 7
10+
const PAGE_COUNT = 7
1111

12-
const [issueState, setIssueState] = useState("OPEN");
13-
const [currentItems, setCurrentItems] = useState([]);
14-
const [pageCount, setPageCount] = useState(0);
15-
const [endCursor, setEndCursor] = useState("");
12+
const [issueState, setIssueState] = useState("OPEN");
13+
const [currentIssues, setCurrentIssues] = useState([]);
14+
const [pageCount, setPageCount] = useState(0);
15+
const [endCursor, setEndCursor] = useState("");
1616

17-
const handlePageClick = (event: any) => {
18-
getNewIssues();
19-
};
17+
const handlePageClick = (event: any) => {
18+
getNewIssues();
19+
};
2020

21-
const { loading, data } = useQuery(GET_ISSUES, {
22-
variables: { state: issueState, first: PAGE_COUNT },
23-
});
21+
const {loading, data} = useQuery(GET_ISSUES, {
22+
variables: {state: issueState, first: PAGE_COUNT},
23+
});
2424

25-
const [getNewIssues, { data: newData }] = useLazyQuery(GET_ISSUES, {
26-
variables: { state: issueState, first: PAGE_COUNT, after: endCursor }
27-
});
25+
const [getNewIssues, {data: newData}] = useLazyQuery(GET_ISSUES, {
26+
variables: {state: issueState, first: PAGE_COUNT, after: endCursor}
27+
});
2828

2929

30-
const handleStateChange = (state: string) => {
31-
console.log("handleStateChange")
32-
setIssueState(state);
33-
};
30+
const handleStateChange = (state: string) => {
31+
console.log("handleStateChange")
32+
setIssueState(state);
33+
};
3434

35-
useEffect(() => {
36-
if (data) {
37-
console.log('Data:', data)
38-
setCurrentItems(data.repository.issues.edges)
39-
setPageCount(Math.ceil(data.repository.issues.totalCount / PAGE_COUNT));
40-
setEndCursor(data.repository.issues.pageInfo.endCursor);
41-
}
42-
}, [data, issueState]);
35+
useEffect(() => {
36+
if (data) {
37+
setCurrentIssues(data.repository.issues.edges)
38+
setPageCount(Math.ceil(data.repository.issues.totalCount / PAGE_COUNT));
39+
setEndCursor(data.repository.issues.pageInfo.endCursor);
40+
}
41+
}, [data, issueState]);
4342

44-
useEffect(() => {
45-
if (newData) {
46-
setCurrentItems(newData.repository.issues.edges)
47-
setPageCount(
48-
Math.ceil(newData.repository.issues.totalCount / PAGE_COUNT)
49-
);
50-
setEndCursor(newData.repository.issues.pageInfo.endCursor);
51-
}
52-
}, [newData, issueState]);
43+
useEffect(() => {
44+
if (newData) {
45+
setCurrentIssues(newData.repository.issues.edges)
46+
setPageCount(
47+
Math.ceil(newData.repository.issues.totalCount / PAGE_COUNT)
48+
);
49+
setEndCursor(newData.repository.issues.pageInfo.endCursor);
50+
}
51+
}, [newData, issueState]);
5352

54-
return (
55-
<>
56-
{loading ? (
57-
<Spinner />
58-
) : (
59-
<div className="homeWrapper pt-8">
60-
<IssuesTable
61-
handleStateChange={handleStateChange}
62-
issueState={issueState}
63-
handlePageClick={handlePageClick}
64-
pageCount={pageCount}
65-
currentItems={currentItems}
66-
/>
67-
</div>
68-
)}
69-
</>
70-
);
53+
return (
54+
<>
55+
{loading ? (
56+
<Spinner/>
57+
) : (
58+
<div className="homeWrapper pt-8">
59+
<IssuesTable
60+
handleStateChange={handleStateChange}
61+
issueState={issueState}
62+
handlePageClick={handlePageClick}
63+
pageCount={pageCount}
64+
currentIssues={currentIssues}
65+
/>
66+
</div>
67+
)}
68+
</>
69+
);
7170
}
7271

7372
export default Home;

‎src/components/Information/Information.test.tsx

+11-10
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
1-
import { render, screen } from "@testing-library/react";
2-
import { it } from "@jest/globals";
3-
import { MemoryRouter } from "react-router-dom";
1+
import {render, screen} from "@testing-library/react";
2+
import {it} from "@jest/globals";
3+
import {MemoryRouter} from "react-router-dom";
44
import Information from "./Information";
5+
56
;
67

78
it("should render the brand name in the Information", () => {
8-
const title ="Issue not found!"
9-
const description="Sorry there is no such issue."
9+
const title = "Issue not found!"
10+
const description = "Sorry there is no such issue."
1011
render(
11-
<MemoryRouter>
12-
<Information title={title} description={description}/>
13-
</MemoryRouter>
12+
<MemoryRouter>
13+
<Information title={title} description={description}/>
14+
</MemoryRouter>
1415
);
15-
16+
1617
screen.getByText("Issue not found!");
1718
screen.getByText("Sorry there is no such issue.");
1819
screen.getByRole("button")
19-
});
20+
});
2021

‎src/components/Information/Information.tsx

+22-21
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
1-
import { Link } from "react-router-dom";
1+
import {Link} from "react-router-dom";
22

3-
function Information({ title, description }: any) {
4-
return (
5-
<div className="h-screen w-screen flex ">
6-
<div className="container flex flex-col md:flex-row px-5 text-gray-700">
7-
<div className="max-w-md">
8-
<div className="text-5xl font-dark font-bold">{title}</div>
9-
<p className="text-2xl md:text-3xl font-light leading-normal">
10-
{description}
11-
</p>
12-
<p className="mb-8">
13-
But dont worry, you can find plenty of other things on our homepage.
14-
</p>
3+
function Information({title, description}: any) {
4+
return (
5+
<div className="h-screen w-screen flex ">
6+
<div className="container flex flex-col md:flex-row px-5 text-gray-700">
7+
<div className="max-w-md">
8+
<div className="text-5xl font-dark font-bold">{title}</div>
9+
<p className="text-2xl md:text-3xl font-light leading-normal">
10+
{description}
11+
</p>
12+
<p className="mb-8">
13+
But dont worry, you can find plenty of other things on our homepage.
14+
</p>
1515

16-
<Link to="/">
17-
<button className="px-4 inline py-2 text-sm font-medium leading-5 shadow text-white transition-colors duration-150 border border-transparent rounded-lg focus:outline-none focus:shadow-outline-blue bg-blue-600 active:bg-blue-600 hover:bg-blue-700">
18-
back to homepage
19-
</button>
20-
</Link>
16+
<Link to="/">
17+
<button
18+
className="px-4 inline py-2 text-sm font-medium leading-5 shadow text-white transition-colors duration-150 border border-transparent rounded-lg focus:outline-none focus:shadow-outline-blue bg-blue-600 active:bg-blue-600 hover:bg-blue-700">
19+
back to homepage
20+
</button>
21+
</Link>
22+
</div>
23+
</div>
2124
</div>
22-
</div>
23-
</div>
24-
);
25+
);
2526
}
2627

2728
export default Information;

‎src/components/Issue/Issue.css

+13-13
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
.issueWrapper {
2-
@apply bg-gray-50 m-7 px-2 py-1 rounded-full;
3-
}
2+
@apply bg-gray-50 m-7 px-2 py-1 rounded-full;
3+
}
44

5-
.issueTitle {
6-
@apply font-bold text-red-400 ;
7-
}
8-
9-
.createInfoBtn {
10-
@apply flex justify-end mb-5 mr-3 gap-2;
11-
}
12-
13-
.createInfoBtn > .infoButton {
14-
@apply bg-blue-600 text-white text-center w-16 h-10 rounded-lg px-1 py-1 justify-items-end;
15-
}
5+
.issueTitle {
6+
@apply font-bold text-red-400 ;
7+
}
8+
9+
.createInfoBtn {
10+
@apply flex justify-end mb-5 mr-3 gap-2;
11+
}
12+
13+
.createInfoBtn > .infoButton {
14+
@apply bg-blue-600 text-white text-center w-16 h-10 rounded-lg px-1 py-1 justify-items-end;
15+
}
1616

1717

1818

‎src/components/Issue/Issue.test.tsx

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import {render, screen} from "@testing-library/react";
2+
import {it} from "@jest/globals";
3+
import {MemoryRouter} from "react-router-dom";
4+
import {Issue, IssueProps} from "./Issue";
5+
6+
it("should render issue", () => {
7+
const props: IssueProps = {
8+
issueData: {
9+
number: 1,
10+
title: "a title",
11+
createdAt: "2021",
12+
closedAt: "2022"
13+
},
14+
issueState: "OPEN"
15+
}
16+
render(
17+
<MemoryRouter>
18+
<table>
19+
<tbody>
20+
<Issue {...props} />
21+
</tbody>
22+
</table>
23+
</MemoryRouter>
24+
);
25+
26+
screen.getByText("a title");
27+
screen.getByText("#1");
28+
});
29+
30+
it("should render issue with created at description", () => {
31+
const props: IssueProps = {
32+
issueData: {
33+
number: 1,
34+
title: "a title",
35+
createdAt: "2021",
36+
closedAt: "2022"
37+
},
38+
issueState: "OPEN"
39+
}
40+
render(
41+
<MemoryRouter>
42+
<table>
43+
<tbody>
44+
<Issue {...props} />
45+
</tbody>
46+
</table>
47+
</MemoryRouter>
48+
);
49+
50+
screen.findByText("Created at: 2021");
51+
});
52+
53+
it("should render issue with closed at description", () => {
54+
const props: IssueProps = {
55+
issueData: {
56+
number: 1,
57+
title: "a title",
58+
createdAt: "2021",
59+
closedAt: "2022"
60+
},
61+
issueState: "CLOSED"
62+
}
63+
render(
64+
<MemoryRouter>
65+
<table>
66+
<tbody>
67+
<Issue {...props} />
68+
</tbody>
69+
</table>
70+
</MemoryRouter>
71+
);
72+
73+
screen.findByText("Closed at: 2022");
74+
});

0 commit comments

Comments
 (0)