Skip to content
This repository was archived by the owner on Apr 26, 2024. It is now read-only.

Commit 1ee4beb

Browse files
sagirkAhmad Awais ⚡️
sagirk
authored and
Ahmad Awais ⚡️
committed
fix: Add tests and make markup semantic (outstanding nits from #215) (#217)
<!-- Please read the [Code of Conduct](https://github.com/nodejs/nodejs.dev/blob/master/CODE_OF_CONDUCT.md) and the [Contributing Guidelines](https://github.com/nodejs/nodejs.dev/blob/master/CONTRIBUTING.md) before opening a pull request. --> ## Description <!-- Write a brief description of the changes introduced by this PR --> This is a follow-up PR to #215. It addresses outstanding nits. ## Related Issues <!-- Link to the issue that is fixed by this PR (if there is one) e.g. Fixes #1234, Addresses #1234, Related to #1234, etc. --> Ref: https://github.com/nodejs/nodejs.dev/issues/209
1 parent 864a750 commit 1ee4beb

7 files changed

Lines changed: 228 additions & 65 deletions

File tree

‎src/components/author.tsx‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import { css } from '@emotion/core';
22
import React from 'react';
33

4+
const list = css`
5+
list-style: none;
6+
`;
7+
48
const link = css`
59
margin-left: 0.5rem;
610
`;
@@ -28,21 +32,23 @@ const Author = ({ username, size = '64' }: Props) => {
2832
const githubImgLink = `https://github.com/${username}.png?size=${size}`;
2933

3034
return (
31-
<a
32-
css={link}
33-
href={githubLink}
34-
title={username}
35-
key={username}
36-
target="_blank"
37-
rel="noopener noreferrer"
38-
>
39-
<img
40-
css={img}
41-
className="author-img"
42-
src={githubImgLink}
43-
alt={username}
44-
/>
45-
</a>
35+
<li css={list}>
36+
<a
37+
css={link}
38+
href={githubLink}
39+
title={username}
40+
key={username}
41+
target="_blank"
42+
rel="noopener noreferrer"
43+
>
44+
<img
45+
css={img}
46+
className="author-img"
47+
src={githubImgLink}
48+
alt={username}
49+
/>
50+
</a>
51+
</li>
4652
);
4753
};
4854

‎src/components/authors-list.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@ const list = css`
99
align-items: center;
1010
color: var(--gray7);
1111
text-transform: uppercase;
12+
padding-left: 0;
1213
13-
span {
14+
h5 {
1415
margin: 0.5rem;
16+
font-weight: normal;
1517
}
1618
`;
1719

@@ -25,14 +27,12 @@ const AuthorsList = ({ authors }: Props) => {
2527
}
2628

2729
return (
28-
<div css={list}>
29-
<span>Contributors</span>
30-
{authors &&
31-
authors.map(
32-
author =>
33-
author && <Author username={author} key={author} size="60" />
34-
)}
35-
</div>
30+
<ul css={list}>
31+
<h5>Contributors</h5>
32+
{authors.map(
33+
author => author && <Author username={author} key={author} size="60" />
34+
)}
35+
</ul>
3636
);
3737
};
3838

‎test/components/__snapshots__/author-link.test.tsx.snap‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎test/components/__snapshots__/author.test.tsx.snap‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Author component renders correctly 1`] = `
4+
<li
5+
css={
6+
Object {
7+
"map": undefined,
8+
"name": "66iazq",
9+
"next": undefined,
10+
"styles": "
11+
list-style: none;
12+
",
13+
}
14+
}
15+
>
16+
<a
17+
css={
18+
Object {
19+
"map": undefined,
20+
"name": "tubh1u",
21+
"next": undefined,
22+
"styles": "
23+
margin-left: 0.5rem;
24+
",
25+
}
26+
}
27+
href="https://github.com/test-author"
28+
rel="noopener noreferrer"
29+
target="_blank"
30+
title="test-author"
31+
>
32+
<img
33+
alt="test-author"
34+
className="author-img"
35+
css={
36+
Object {
37+
"map": undefined,
38+
"name": "nm77gf",
39+
"next": undefined,
40+
"styles": "
41+
height: 30px;
42+
width: 30px;
43+
margin-top: 5px;
44+
border-radius: 100%;
45+
border: 1px solid var(--brand-light);
46+
",
47+
}
48+
}
49+
src="https://github.com/test-author.png?size=60"
50+
/>
51+
</a>
52+
</li>
53+
`;

‎test/components/__snapshots__/authors-list.test.tsx.snap‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`AuthorsList component renders correctly 1`] = `
4+
<ul
5+
css={
6+
Object {
7+
"map": undefined,
8+
"name": "1bnswin",
9+
"next": undefined,
10+
"styles": "
11+
display: flex;
12+
flex-wrap: wrap;
13+
margin: 5rem 0;
14+
align-items: center;
15+
color: var(--gray7);
16+
text-transform: uppercase;
17+
padding-left: 0;
18+
19+
h5 {
20+
margin: 0.5rem;
21+
font-weight: normal;
22+
}
23+
",
24+
}
25+
}
26+
>
27+
<h5>
28+
Contributors
29+
</h5>
30+
<li
31+
css={
32+
Object {
33+
"map": undefined,
34+
"name": "66iazq",
35+
"next": undefined,
36+
"styles": "
37+
list-style: none;
38+
",
39+
}
40+
}
41+
>
42+
<a
43+
css={
44+
Object {
45+
"map": undefined,
46+
"name": "tubh1u",
47+
"next": undefined,
48+
"styles": "
49+
margin-left: 0.5rem;
50+
",
51+
}
52+
}
53+
href="https://github.com/test-author"
54+
rel="noopener noreferrer"
55+
target="_blank"
56+
title="test-author"
57+
>
58+
<img
59+
alt="test-author"
60+
className="author-img"
61+
css={
62+
Object {
63+
"map": undefined,
64+
"name": "nm77gf",
65+
"next": undefined,
66+
"styles": "
67+
height: 30px;
68+
width: 30px;
69+
margin-top: 5px;
70+
border-radius: 100%;
71+
border: 1px solid var(--brand-light);
72+
",
73+
}
74+
}
75+
src="https://github.com/test-author.png?size=60"
76+
/>
77+
</a>
78+
</li>
79+
<li
80+
css={
81+
Object {
82+
"map": undefined,
83+
"name": "66iazq",
84+
"next": undefined,
85+
"styles": "
86+
list-style: none;
87+
",
88+
}
89+
}
90+
>
91+
<a
92+
css={
93+
Object {
94+
"map": undefined,
95+
"name": "tubh1u",
96+
"next": undefined,
97+
"styles": "
98+
margin-left: 0.5rem;
99+
",
100+
}
101+
}
102+
href="https://github.com/another-test-author"
103+
rel="noopener noreferrer"
104+
target="_blank"
105+
title="another-test-author"
106+
>
107+
<img
108+
alt="another-test-author"
109+
className="author-img"
110+
css={
111+
Object {
112+
"map": undefined,
113+
"name": "nm77gf",
114+
"next": undefined,
115+
"styles": "
116+
height: 30px;
117+
width: 30px;
118+
margin-top: 5px;
119+
border-radius: 100%;
120+
border: 1px solid var(--brand-light);
121+
",
122+
}
123+
}
124+
src="https://github.com/another-test-author.png?size=60"
125+
/>
126+
</a>
127+
</li>
128+
</ul>
129+
`;

test/components/author-link.test.tsx renamed to test/components/author.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import renderer from 'react-test-renderer';
33
import Author from '../../src/components/author';
44

5-
describe('AuthorLink component', () => {
5+
describe('Author component', () => {
66
it('renders correctly', () => {
77
const username = 'test-author';
88
const tree = renderer

‎test/components/authors-list.test.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import renderer from 'react-test-renderer';
3+
import AuthorsList from '../../src/components/authors-list';
4+
5+
describe('AuthorsList component', () => {
6+
it('renders correctly', () => {
7+
const authors = ['test-author', 'another-test-author'];
8+
const tree = renderer.create(<AuthorsList authors={authors} />).toJSON();
9+
expect(tree).toMatchSnapshot();
10+
});
11+
it('does not render without an authors list', () => {
12+
const tree = renderer.create(<AuthorsList authors={null} />);
13+
expect(tree.getInstance()).toBeNull();
14+
});
15+
});

0 commit comments

Comments
 (0)