1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
import { describe, expect, it } from '@jest/globals';
import { userEvent } from '@testing-library/user-event';
import { render, screen as rtlScreen } from '../../../../../tests/utils';
import { COMMENT_ID_PREFIX } from '../../../../utils/constants';
import { ApprovedComment, type CommentAuthor } from './approved-comment';
describe('ApprovedComment', () => {
const user = userEvent.setup();
it('renders the author, the publication date, the comment and a permalink', () => {
const author = {
name: 'Delbert_Jacobi45',
} satisfies CommentAuthor;
const content = 'Repellat ab non et.';
const id = 1;
const publicationDate = '2023';
render(
<ApprovedComment
author={author}
content={content}
id={id}
publicationDate={publicationDate}
/>
);
expect(rtlScreen.getByText(author.name)).toBeInTheDocument();
expect(rtlScreen.getByText(content)).toBeInTheDocument();
expect(
rtlScreen.getByText(new RegExp(publicationDate))
).toBeInTheDocument();
expect(rtlScreen.getByRole('link')).toHaveAttribute(
'href',
`#${COMMENT_ID_PREFIX}${id}`
);
});
it('can render the author avatar', () => {
const author = {
avatar: {
alt: 'enim ut maiores',
src: 'https://picsum.photos/640/480',
},
name: 'Sandra82',
} satisfies CommentAuthor;
render(
<ApprovedComment
author={author}
content="Ab qui aliquam esse."
id={2}
publicationDate="2022-11-03"
/>
);
expect(rtlScreen.getByRole('figure')).toHaveAccessibleName(
author.avatar.alt
);
});
it('can render a link to the author website', () => {
const author = {
name: 'Esmeralda51',
website: 'http://example.net',
} satisfies CommentAuthor;
render(
<ApprovedComment
author={author}
content="Ab qui aliquam esse."
id={2}
publicationDate="2022-11-03"
/>
);
expect(rtlScreen.getByRole('link', { name: author.name })).toHaveAttribute(
'href',
author.website
);
});
it('can render a reply button', async () => {
const id = 6;
const replyBtn = 'dolore recusandae voluptas';
const handleReply = jest.fn((_id: number) => {
// do nothing
});
render(
<ApprovedComment
author={{ name: 'Kurtis5' }}
content="Ab qui aliquam esse."
id={id}
onReply={handleReply}
publicationDate="2022-11-03"
replyBtn={replyBtn}
/>
);
// eslint-disable-next-line @typescript-eslint/no-magic-numbers
expect.assertions(4);
expect(rtlScreen.getByRole('button')).toHaveTextContent(replyBtn);
expect(handleReply).not.toHaveBeenCalled();
await user.click(rtlScreen.getByRole('button'));
expect(handleReply).toHaveBeenCalledTimes(1);
expect(handleReply).toHaveBeenCalledWith(id);
});
});
|
