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 { ButtonLink } from './button-link';
describe('ButtonLink', () => {
it('renders a link with anchor and href', () => {
const target = 'eum';
const body = 'est eaque nostrum';
render(<ButtonLink to={target}>{body}</ButtonLink>);
expect(rtlScreen.getByRole('link', { name: body })).toHaveAttribute(
'href',
target
);
});
it('renders an external link', () => {
const target = 'voluptatem';
const body = 'impedit';
render(
<ButtonLink isExternal to={target}>
{body}
</ButtonLink>
);
expect(rtlScreen.getByRole('link', { name: body })).toHaveAttribute(
'rel',
expect.stringContaining('external')
);
});
it('renders a primary button', () => {
const target = 'vero';
const body = 'iure';
render(
// eslint-disable-next-line react/jsx-no-literals -- Ignore kind.
<ButtonLink kind="primary" to={target}>
{body}
</ButtonLink>
);
expect(rtlScreen.getByRole('link', { name: body })).toHaveClass(
'btn--primary'
);
});
it('renders a secondary button', () => {
const target = 'voluptatem';
const body = 'et';
render(
// eslint-disable-next-line react/jsx-no-literals -- Ignore kind.
<ButtonLink kind="secondary" to={target}>
{body}
</ButtonLink>
);
expect(rtlScreen.getByRole('link', { name: body })).toHaveClass(
'btn--secondary'
);
});
it('renders a tertiary button', () => {
const target = 'vitae';
const body = 'quo';
render(
// eslint-disable-next-line react/jsx-no-literals -- Ignore kind.
<ButtonLink kind="tertiary" to={target}>
{body}
</ButtonLink>
);
expect(rtlScreen.getByRole('link', { name: body })).toHaveClass(
'btn--tertiary'
);
});
it('renders a circle button', () => {
const target = 'praesentium';
const body = 'laudantium';
render(
// eslint-disable-next-line react/jsx-no-literals -- Ignore kind.
<ButtonLink shape="circle" to={target}>
{body}
</ButtonLink>
);
expect(rtlScreen.getByRole('link', { name: body })).toHaveClass(
'btn--circle'
);
});
it('renders a rectangle button', () => {
const target = 'tempora';
const body = 'ut';
render(
// eslint-disable-next-line react/jsx-no-literals -- Ignore kind.
<ButtonLink shape="rectangle" to={target}>
{body}
</ButtonLink>
);
expect(rtlScreen.getByRole('link', { name: body })).toHaveClass(
'btn--rectangle'
);
});
it('renders a square button', () => {
const target = 'quia';
const body = 'non';
render(
// eslint-disable-next-line react/jsx-no-literals -- Ignore kind.
<ButtonLink shape="square" to={target}>
{body}
</ButtonLink>
);
expect(rtlScreen.getByRole('link', { name: body })).toHaveClass(
'btn--square'
);
});
});
|
