blob: ecf8d770c82895e986254e7251b1817ea3ad05c9 (
plain)
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
|
import { describe, expect, it } from '@jest/globals';
import { render, screen as rtlScreen } from '@testing-library/react';
import NextImage from 'next/image';
import { Heading } from '../../../atoms';
import { ImageWidget } from './image-widget';
describe('ImageWidget', () => {
it('render the widget heading and an image', () => {
const heading = 'quam tempore ea';
const headingLvl = 3;
const altTxt = 'enim';
render(
<ImageWidget
heading={<Heading level={headingLvl}>{heading}</Heading>}
img={
<NextImage
alt={altTxt}
height={480}
src="https://picsum.photos/640/480"
width={640}
/>
}
/>
);
expect(
rtlScreen.getByRole('heading', { level: headingLvl })
).toHaveTextContent(heading);
expect(rtlScreen.getByRole('img')).toHaveAccessibleName(altTxt);
});
it('can render an image wrapped in a link', () => {
const heading = 'quam tempore ea';
const headingLvl = 3;
const altTxt = 'enim';
const url = 'https://example.test';
render(
<ImageWidget
heading={<Heading level={headingLvl}>{heading}</Heading>}
img={
<NextImage
alt={altTxt}
height={480}
src="https://picsum.photos/640/480"
width={640}
/>
}
url={url}
/>
);
expect(rtlScreen.getByRole('link')).toHaveAttribute('href', url);
expect(rtlScreen.getByRole('img')).toHaveAccessibleName(altTxt);
});
it('can render an image with a description', () => {
const heading = 'quam tempore ea';
const headingLvl = 3;
const altTxt = 'enim';
const desc = 'itaque laudantium ut';
render(
<ImageWidget
description={desc}
heading={<Heading level={headingLvl}>{heading}</Heading>}
img={
<NextImage
alt={altTxt}
height={480}
src="https://picsum.photos/640/480"
width={640}
/>
}
/>
);
expect(rtlScreen.getByRole('figure')).toHaveAccessibleName(desc);
});
});
|
