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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
import { describe, expect, it } from '@jest/globals';
import NextImage from 'next/image';
import { render, screen as rtlScreen } from '../../../../tests/utils';
import { type OverviewMeta, ProjectOverview } from './project-overview';
import { SocialLink } from 'src/components/atoms';
describe('ProjectOverview', () => {
it('can render a meta for the creation date', () => {
const meta = {
creationDate: '2023-11-01',
} satisfies Partial<OverviewMeta>;
render(<ProjectOverview meta={meta} name="quo" />);
expect(rtlScreen.getByRole('term')).toHaveTextContent('Created on:');
});
it('can render a meta for the update date', () => {
const meta = {
lastUpdateDate: '2023-11-02',
} satisfies Partial<OverviewMeta>;
render(<ProjectOverview meta={meta} name="quo" />);
expect(rtlScreen.getByRole('term')).toHaveTextContent('Updated on:');
});
it('can render a meta for the license', () => {
const meta = {
license: 'MIT',
} satisfies Partial<OverviewMeta>;
render(<ProjectOverview meta={meta} name="quo" />);
expect(rtlScreen.getByRole('term')).toHaveTextContent('License:');
expect(rtlScreen.getByRole('definition')).toHaveTextContent(meta.license);
});
it('can render a meta for the popularity', () => {
const meta = {
popularity: '5 stars',
} satisfies Partial<OverviewMeta>;
render(<ProjectOverview meta={meta} name="quo" />);
expect(rtlScreen.getByRole('term')).toHaveTextContent('Popularity:');
expect(rtlScreen.getByRole('definition')).toHaveTextContent(
meta.popularity
);
});
it('can render a meta for the technologies', () => {
const meta = {
technologies: ['Javascript', 'React'].map((techno) => {
return {
id: techno,
value: techno,
};
}),
} satisfies Partial<OverviewMeta>;
render(<ProjectOverview meta={meta} name="quo" />);
expect(rtlScreen.getByRole('term')).toHaveTextContent('Technologies:');
expect(rtlScreen.getAllByRole('definition')).toHaveLength(
meta.technologies.length
);
});
it('can render a meta for the repositories', () => {
const repos = [{ id: 'Github' as const, label: 'Github', url: '#github' }];
const meta = {
repositories: repos.map((repo) => {
return {
id: repo.id,
value: (
<SocialLink
icon={repo.id}
key={repo.id}
label={repo.label}
url={repo.url}
/>
),
};
}),
} satisfies Partial<OverviewMeta>;
render(<ProjectOverview meta={meta} name="quo" />);
expect(rtlScreen.getByRole('term')).toHaveTextContent('Repositories:');
expect(rtlScreen.getAllByRole('definition')).toHaveLength(
meta.repositories.length
);
expect(
rtlScreen.getByRole('link', { name: repos[0].label })
).toHaveAttribute('href', repos[0].url);
});
it('can render a cover', () => {
const altTxt = 'id qui nisi';
render(
<ProjectOverview
cover={
<NextImage
alt={altTxt}
height={480}
src="https://picsum.photos/640/480"
width={640}
/>
}
meta={{}}
name="qui"
/>
);
expect(rtlScreen.getByRole('img')).toHaveAccessibleName(altTxt);
});
it('does not render a meta if the key is undefined', () => {
const meta = {
creationDate: undefined,
} satisfies Partial<OverviewMeta>;
render(<ProjectOverview meta={meta} name="quo" />);
expect(rtlScreen.queryByRole('term')).not.toBeInTheDocument();
});
});
|
