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
|
import { describe, expect, it } from '@jest/globals';
import { render, screen as rtlScreen } from '../../../../tests/utils';
import type { PageLink } from '../../../types';
import { PageFooter } from './page-footer';
describe('PageFooter', () => {
it('renders a list of links', () => {
const links = [
{ id: 1, name: 'Topic 1', url: '/topic1' },
{ id: 2, name: 'Topic 2', url: '/topic2' },
{ id: 3, name: 'Topic 3', url: '/topic3' },
] satisfies PageLink[];
render(<PageFooter readMoreAbout={links} />);
expect(rtlScreen.getByRole('term')).toHaveTextContent(
'Read more posts about:'
);
expect(rtlScreen.getAllByRole('link')).toHaveLength(links.length);
});
it('can renders a list of links with logo', () => {
const links = [
{
id: 1,
logo: {
alt: 'a logo',
height: 480,
width: 640,
src: 'https://picsum.photos/640/480',
},
name: 'Topic 1',
url: '/topic1',
},
{ id: 2, name: 'Topic 2', url: '/topic2' },
{ id: 3, name: 'Topic 3', url: '/topic3' },
] satisfies PageLink[];
render(<PageFooter readMoreAbout={links} />);
expect(rtlScreen.getByRole('term')).toHaveTextContent(
'Read more posts about:'
);
expect(rtlScreen.getAllByRole('link')).toHaveLength(links.length);
expect(rtlScreen.getByRole('img')).toHaveAccessibleName(links[0].logo?.alt);
});
it('does not render a list when the prop length is 0', () => {
const { container } = render(<PageFooter readMoreAbout={[]} />);
expect(container.firstChild).toBeEmptyDOMElement();
});
});
|
