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 { render, screen as rtlScreen } from '@testing-library/react';
import NextImage from 'next/image';
import { Card } from './card';
import { CardFooter } from './card-footer';
import { CardHeader } from './card-header';
import { CardMeta } from './card-meta';
describe('Card', () => {
it('renders its children', () => {
const body = 'eveniet error voluptas';
render(<Card>{body}</Card>);
expect(rtlScreen.getByText(body)).toBeInTheDocument();
});
it('can render a cover in the card header', () => {
const altTxt = 'quo expedita eveniet';
render(
<Card
cover={
<NextImage
alt={altTxt}
height={480}
src="https://picsum.photos/640/480"
width={640}
/>
}
>
<CardHeader />
</Card>
);
expect(rtlScreen.getByRole('img', { name: altTxt })).toBeInTheDocument();
});
it('does not render a cover without card header', () => {
const body = 'necessitatibus maiores sed';
const altTxt = 'quo expedita eveniet';
render(
<Card
cover={
<NextImage
alt={altTxt}
height={480}
src="https://picsum.photos/640/480"
width={640}
/>
}
>
{body}
</Card>
);
expect(
rtlScreen.queryByRole('img', { name: altTxt })
).not.toBeInTheDocument();
});
it('can render some meta in the card footer', () => {
const term = 'ut';
const desc = 'repudiandae';
render(
<Card
meta={<CardMeta items={[{ id: 'any', label: term, value: desc }]} />}
>
<CardFooter />
</Card>
);
expect(rtlScreen.getByRole('term')).toHaveTextContent(term);
expect(rtlScreen.getByRole('definition')).toHaveTextContent(desc);
});
it('does not render the meta without card footer', () => {
const body = 'rerum dolore et';
const term = 'ut';
const desc = 'repudiandae';
render(
<Card
meta={<CardMeta items={[{ id: 'any', label: term, value: desc }]} />}
>
{body}
</Card>
);
expect(
rtlScreen.queryByRole('term', { name: term })
).not.toBeInTheDocument();
expect(
rtlScreen.queryByRole('definition', { name: desc })
).not.toBeInTheDocument();
});
it('can render a card as link to another page', () => {
const body = 'Et qui harum voluptas est quos qui.';
const cta = 'asperiores optio incidunt';
const target = '#molestiae';
render(
<Card aria-label={cta} linkTo={target}>
{body}
</Card>
);
expect(rtlScreen.getByRole('link', { name: cta })).toHaveAttribute(
'href',
target
);
});
it('can render a card with centered text', () => {
const body = 'Et qui harum voluptas est quos qui.';
const label = 'asperiores optio incidunt';
render(
<Card aria-label={label} isCentered>
{body}
</Card>
);
expect(rtlScreen.getByLabelText(label)).toHaveClass('wrapper--centered');
});
});
|
