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
|
import { describe, expect, it } from '@jest/globals';
import { render, screen as rtlScreen } from '@testing-library/react';
import NextImage from 'next/image';
import { Branding } from './branding';
describe('Branding', () => {
it('renders the brand logo and name', () => {
const altText = 'dolorem aut ullam';
const name = 'ducimus quo enim';
render(
<Branding
logo={
<NextImage
alt={altText}
height={100}
src="https://picsum.photos/100"
width={100}
/>
}
name={<div>{name}</div>}
/>
);
expect(rtlScreen.getByRole('img', { name: altText })).toBeInTheDocument();
expect(rtlScreen.getByText(name)).toBeInTheDocument();
});
it('can render the brand logo, name and baseline', () => {
const altText = 'dolorem aut ullam';
const name = 'ducimus quo enim';
const baseline = 'ab consequatur est';
render(
<Branding
baseline={<div>{baseline}</div>}
logo={
<NextImage
alt={altText}
height={100}
src="https://picsum.photos/100"
width={100}
/>
}
name={<div>{name}</div>}
/>
);
expect(rtlScreen.getByRole('img', { name: altText })).toBeInTheDocument();
expect(rtlScreen.getByText(name)).toBeInTheDocument();
expect(rtlScreen.getByText(baseline)).toBeInTheDocument();
});
it('can render the brand name wrapped in a link', () => {
const altText = 'dolorem aut ullam';
const name = 'ducimus quo enim';
const url = '/velit';
render(
<Branding
logo={
<NextImage
alt={altText}
height={100}
src="https://picsum.photos/100"
width={100}
/>
}
name={<div>{name}</div>}
url={url}
/>
);
expect(rtlScreen.getByRole('img', { name: altText })).toBeInTheDocument();
expect(rtlScreen.getByRole('link', { name })).toHaveAttribute('href', url);
});
});
|
