Skip to content

Commit e2303c7

Browse files
fersirnifersirni
committed
lint and test
1 parent 04b0c56 commit e2303c7

19 files changed

+2780
-412
lines changed

Diff for: ‎.eslintignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
.next
3+
coverage

Diff for: ‎.eslintrc.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ module.exports = {
44
project: 'tsconfig.json',
55
sourceType: 'module',
66
},
7-
plugins: ['@typescript-eslint/eslint-plugin', 'import'],
7+
plugins: ['@typescript-eslint/eslint-plugin', 'import', 'react', 'react-hooks'],
88
extends: [
99
'plugin:@typescript-eslint/recommended',
1010
'plugin:prettier/recommended',

Diff for: ‎__test__/index.test.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { render, screen } from '@testing-library/react'
2+
import Home from '../pages/index'
3+
import '@testing-library/jest-dom'
4+
5+
describe('Home', () => {
6+
it('renders a heading', async () => {
7+
render(<Home />)
8+
const blocksButton = await screen.getByText('Blocks')
9+
expect(blocksButton).toBeInTheDocument()
10+
})
11+
})

Diff for: ‎components/InfoToogle/InfoToogle.tsx

+16-18
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
1-
import * as React from 'react';
21
import Image from 'next/future/image'
3-
import coin from '../../assets/img/ph_coin-vertical-fill.svg'
2+
import * as React from 'react'
43
import time from '../../assets/img/bxs_time.svg'
4+
import coin from '../../assets/img/ph_coin-vertical-fill.svg'
55

66
function Searchbar() {
7-
return (
8-
<>
9-
<div className='ink_infotoogle'>
10-
<div className='ink_infotoogle-dot'>
11-
<Image src={coin} alt="Icon" /> Dot $7.730 (3.82 %)
12-
</div>
13-
<div className='ink_infotoogle-last'>
14-
<Image src={time} alt="Icon" /> Latest Block: 4,363,437 (1m ago)
15-
</div>
16-
<div className='ink_infotoogle-sdk'>
17-
SDK: v.0.1
18-
</div>
19-
</div>
20-
</>
21-
);
7+
return (
8+
<>
9+
<div className="ink_infotoogle">
10+
<div className="ink_infotoogle-dot">
11+
<Image src={coin} alt="Icon" /> Dot $7.730 (3.82 %)
12+
</div>
13+
<div className="ink_infotoogle-last">
14+
<Image src={time} alt="Icon" /> Latest Block: 4,363,437 (1m ago)
15+
</div>
16+
<div className="ink_infotoogle-sdk">SDK: v.0.1</div>
17+
</div>
18+
</>
19+
)
2220
}
2321

24-
export default Searchbar;
22+
export default Searchbar

Diff for: ‎components/SearchBar/SearchBar.tsx

+24-23
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,30 @@
1-
import * as React from 'react';
21
import Image from 'next/future/image'
3-
import Form from 'react-bootstrap/Form';
4-
import InputGroup from 'react-bootstrap/InputGroup';
5-
import { Row, Col } from "react-bootstrap";
2+
import * as React from 'react'
3+
import { Row, Col } from 'react-bootstrap'
4+
import Form from 'react-bootstrap/Form'
5+
import InputGroup from 'react-bootstrap/InputGroup'
66
import icon from '../../assets/img/search-icon.svg'
77

88
function Searchbar() {
9-
return (
10-
<>
11-
<Row>
12-
<Col>
13-
<InputGroup className="mb-3 ink_searchbar">
14-
<InputGroup.Text className='ink_searchbar-icon' id="search"><Image src={icon} alt="Icon"/> </InputGroup.Text>
15-
<Form.Control
16-
placeholder="Search by Address, Tx Hast, Block"
17-
aria-label="search"
18-
aria-describedby="search"
19-
className='ink_searchbar-input'
20-
/>
21-
</InputGroup>
22-
</Col>
23-
24-
</Row>
25-
</>
26-
);
9+
return (
10+
<>
11+
<Row>
12+
<Col>
13+
<InputGroup className="mb-3 ink_searchbar">
14+
<InputGroup.Text className="ink_searchbar-icon" id="search">
15+
<Image src={icon} alt="Icon" />{' '}
16+
</InputGroup.Text>
17+
<Form.Control
18+
placeholder="Search by Address, Tx Hast, Block"
19+
aria-label="search"
20+
aria-describedby="search"
21+
className="ink_searchbar-input"
22+
/>
23+
</InputGroup>
24+
</Col>
25+
</Row>
26+
</>
27+
)
2728
}
2829

29-
export default Searchbar;
30+
export default Searchbar

Diff for: ‎components/Sidebar/Sidebar.tsx

+32-35
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,39 @@
1-
import * as React from 'react';
2-
import { Nav } from "react-bootstrap";
31
import Image from 'next/future/image'
4-
import logo from '../../assets/img/logo.svg'
2+
import Link from 'next/link'
3+
import * as React from 'react'
4+
import { Nav } from 'react-bootstrap'
55
import blocks from '../../assets/img/blocks.svg'
6-
import transaction from '../../assets/img/transaction.svg'
6+
import logo from '../../assets/img/logo.svg'
77
import token from '../../assets/img/token.svg'
8-
import Link from 'next/link'
9-
8+
import transaction from '../../assets/img/transaction.svg'
109

1110
function Navbar() {
12-
return (
13-
<>
14-
<div>
15-
<Image
16-
src={logo}
17-
alt="Logo"
18-
className='ink_sidebar-logo'
19-
/>
20-
<Nav defaultActiveKey="/" className="flex-column">
21-
<Link href="/">
22-
<Nav className='ink_sidebar-item'>
23-
<Image src={blocks} alt="Logo" className='ink_sidebar-icon' /> <span>Blocks</span>
24-
</Nav>
25-
</Link>
26-
<Link href="/transaction">
27-
<Nav className='ink_sidebar-item'><Image src={transaction} alt="Logo" className='ink_sidebar-icon' />
28-
<span>Transaction</span>
29-
</Nav>
30-
</Link>
31-
<Link href="/token">
32-
<Nav className='ink_sidebar-item'><Image src={token} alt="Logo" className='ink_sidebar-icon' />
33-
<span>Token</span>
34-
</Nav>
35-
</Link>
36-
</Nav>
37-
</div>
38-
</>
39-
);
11+
return (
12+
<>
13+
<div>
14+
<Image src={logo} alt="Logo" className="ink_sidebar-logo" />
15+
<Nav defaultActiveKey="/" className="flex-column">
16+
<Link href="/">
17+
<Nav className="ink_sidebar-item">
18+
<Image src={blocks} alt="Logo" className="ink_sidebar-icon" /> <span>Blocks</span>
19+
</Nav>
20+
</Link>
21+
<Link href="/transaction">
22+
<Nav className="ink_sidebar-item">
23+
<Image src={transaction} alt="Logo" className="ink_sidebar-icon" />
24+
<span>Transaction</span>
25+
</Nav>
26+
</Link>
27+
<Link href="/token">
28+
<Nav className="ink_sidebar-item">
29+
<Image src={token} alt="Logo" className="ink_sidebar-icon" />
30+
<span>Token</span>
31+
</Nav>
32+
</Link>
33+
</Nav>
34+
</div>
35+
</>
36+
)
4037
}
4138

42-
export default Navbar;
39+
export default Navbar

Diff for: ‎components/TokenInfo/TokenInfo.tsx

+68-69
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,76 @@
1-
import * as React from 'react';
2-
import { Row, Container, Col, Table } from "react-bootstrap";
31
import Image from 'next/future/image'
4-
import recipent from '../../assets/img/recipent.svg'
2+
import * as React from 'react'
3+
import { Row, Col, Table } from 'react-bootstrap'
54
import profile from '../../assets/img/profile.svg'
5+
import recipent from '../../assets/img/recipent.svg'
66

77
function TokenInfo() {
8-
return (
9-
<>
8+
return (
9+
<>
10+
<Row>
11+
<Col>
12+
<div className=" ink_infotoogle ink_infotoogle-tokeninfo">
1013
<Row>
11-
<Col>
12-
<div className=' ink_infotoogle ink_infotoogle-tokeninfo'>
13-
<Row>
14-
<Col xs="12">
15-
<Image src={recipent} alt="Icon" /> <h5 className='d-inline-block'>Transaction Receipt Event Logs</h5>
16-
</Col>
17-
<Col xs="12" className="mt-3">
18-
<Table className="ink_infotoogle-tokeninfo_table">
19-
<tbody>
20-
<tr>
21-
<td>Name </td>
22-
<td colSpan={3}>Dai</td>
23-
</tr>
24-
<tr>
25-
<td>Creator</td>
26-
<td>Maker : Deployer 4</td>
27-
<td>Substrate Version</td>
28-
<td>0.10.x</td>
29-
</tr>
30-
<tr>
31-
<td>Symbol</td>
32-
<td>DAI</td>
33-
<td>Optimization Enabled</td>
34-
<td>True/False</td>
35-
</tr>
36-
</tbody>
37-
</Table>
38-
</Col>
39-
</Row>
40-
41-
</div>
42-
</Col>
43-
<Col>
44-
<div className=' ink_infotoogle ink_infotoogle-tokeninfo'>
45-
<Row>
46-
<Col xs="12">
47-
<Image src={profile} alt="Icon" /> <h5 className='d-inline-block'>Profile Summary</h5>
48-
</Col>
49-
<Col xs="12" className="mt-3">
50-
<Table className="ink_infotoogle-tokeninfo_table">
51-
<tbody>
52-
<tr>
53-
<td>Contract </td>
54-
<td colSpan={3}>0x6B175474E89094C44Da98b954EedeAC495271d0F</td>
55-
</tr>
56-
<tr>
57-
<td>Decimals</td>
58-
<td colSpan={3}>18</td>
59-
</tr>
60-
<tr>
61-
<td>Official Site</td>
62-
<td>Text</td>
63-
<td>Social</td>
64-
<td>Text</td>
65-
</tr>
66-
</tbody>
67-
</Table>
68-
</Col>
69-
</Row>
70-
</div>
71-
</Col>
14+
<Col xs="12">
15+
<Image src={recipent} alt="Icon" /> <h5 className="d-inline-block">Transaction Receipt Event Logs</h5>
16+
</Col>
17+
<Col xs="12" className="mt-3">
18+
<Table className="ink_infotoogle-tokeninfo_table">
19+
<tbody>
20+
<tr>
21+
<td>Name </td>
22+
<td colSpan={3}>Dai</td>
23+
</tr>
24+
<tr>
25+
<td>Creator</td>
26+
<td>Maker : Deployer 4</td>
27+
<td>Substrate Version</td>
28+
<td>0.10.x</td>
29+
</tr>
30+
<tr>
31+
<td>Symbol</td>
32+
<td>DAI</td>
33+
<td>Optimization Enabled</td>
34+
<td>True/False</td>
35+
</tr>
36+
</tbody>
37+
</Table>
38+
</Col>
39+
</Row>
40+
</div>
41+
</Col>
42+
<Col>
43+
<div className=" ink_infotoogle ink_infotoogle-tokeninfo">
44+
<Row>
45+
<Col xs="12">
46+
<Image src={profile} alt="Icon" /> <h5 className="d-inline-block">Profile Summary</h5>
47+
</Col>
48+
<Col xs="12" className="mt-3">
49+
<Table className="ink_infotoogle-tokeninfo_table">
50+
<tbody>
51+
<tr>
52+
<td>Contract </td>
53+
<td colSpan={3}>0x6B175474E89094C44Da98b954EedeAC495271d0F</td>
54+
</tr>
55+
<tr>
56+
<td>Decimals</td>
57+
<td colSpan={3}>18</td>
58+
</tr>
59+
<tr>
60+
<td>Official Site</td>
61+
<td>Text</td>
62+
<td>Social</td>
63+
<td>Text</td>
64+
</tr>
65+
</tbody>
66+
</Table>
67+
</Col>
7268
</Row>
73-
</>
74-
);
69+
</div>
70+
</Col>
71+
</Row>
72+
</>
73+
)
7574
}
7675

77-
export default TokenInfo;
76+
export default TokenInfo

Diff for: ‎jest.config.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const nextJest = require('next/jest')
2+
3+
const createJestConfig = nextJest({
4+
// Provide the path to your Next.js app to load next.config.js and .env files in your test environment
5+
dir: './',
6+
})
7+
8+
// Add any custom config to be passed to Jest
9+
/** @type {import('jest').Config} */
10+
const customJestConfig = {
11+
// Add more setup options before each test is run
12+
// setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
13+
// if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
14+
moduleDirectories: ['node_modules', '<rootDir>/'],
15+
testEnvironment: 'jest-environment-jsdom',
16+
}
17+
18+
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
19+
module.exports = createJestConfig(customJestConfig)

Diff for: ‎package.json

+7-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
"start:dev": "next dev",
77
"build": "next build",
88
"start": "next start",
9-
"lint": "eslint \"{pages,api,test}/**/*.{ts,tsx}\" --fix"
9+
"lint": "eslint \"{pages,components,tests}/**/*.{ts,tsx}\" --fix",
10+
"test": "jest --watch"
1011
},
1112
"precommit": [
1213
"lint:ci"
@@ -24,10 +25,15 @@
2425
},
2526
"devDependencies": {
2627
"@types/node": "18.7.18",
28+
"@testing-library/jest-dom": "^5.16.5",
29+
"@testing-library/react": "^13.4.0",
30+
"@types/jest": "^29.1.1",
2731
"@types/react": "18.0.20",
2832
"@types/react-dom": "18.0.6",
2933
"@typescript-eslint/eslint-plugin": "^5.32.0",
3034
"@typescript-eslint/parser": "^5.32.0",
35+
"jest": "^29.1.2",
36+
"jest-environment-jsdom": "^29.1.2",
3137
"eslint": "^8.21.0",
3238
"eslint-config-next": "12.3.0",
3339
"eslint-config-prettier": "^8.5.0",

0 commit comments

Comments
 (0)