Skip to content

Commit a771e00

Browse files
committed
test: add unit tests and additional story for as property
1 parent b1746bb commit a771e00

File tree

2 files changed

+73
-0
lines changed

2 files changed

+73
-0
lines changed

src/text-link/text-link.stories.mdx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,14 @@ A component used to create text-based hyperlinks.
2626
<TextLink href="https://www.doist.com/" openInNewTab={true}>
2727
open in new tab
2828
</TextLink>
29+
<TextLink
30+
as="button"
31+
onClick={() => {
32+
alert('clicked')
33+
}}
34+
>
35+
button link
36+
</TextLink>
2937
</Stack>
3038
</Story>
3139
</Canvas>

src/text-link/text-link.test.tsx

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { render, screen } from '@testing-library/react'
2+
import * as React from 'react'
3+
import { TextLink } from './text-link'
4+
5+
describe('TextLink', () => {
6+
it('renders a link with the provided href', () => {
7+
render(<TextLink href="https://example.com">Click me</TextLink>)
8+
9+
const link = screen.getByText('Click me')
10+
expect(link).toHaveAttribute('href', 'https://example.com')
11+
})
12+
13+
it('opens in new tab when openInNewTab is true', () => {
14+
render(
15+
<TextLink href="https://example.com" openInNewTab>
16+
External link
17+
</TextLink>,
18+
)
19+
20+
const link = screen.getByText('External link')
21+
expect(link).toHaveAttribute('target', '_blank')
22+
expect(link).toHaveAttribute('rel', 'noopener noreferrer')
23+
})
24+
25+
it('does not add target or rel attributes when openInNewTab is false', () => {
26+
render(
27+
<TextLink href="https://example.com" openInNewTab={false}>
28+
Internal link
29+
</TextLink>,
30+
)
31+
32+
const link = screen.getByText('Internal link')
33+
expect(link).not.toHaveAttribute('target')
34+
expect(link).not.toHaveAttribute('rel')
35+
})
36+
37+
it('can be rendered as a different element using the as prop', () => {
38+
render(
39+
<TextLink
40+
as="button"
41+
onClick={() => {
42+
// noop
43+
}}
44+
>
45+
Button link
46+
</TextLink>,
47+
)
48+
49+
const button = screen.getByText('Button link')
50+
expect(button.tagName).toBe('BUTTON')
51+
})
52+
53+
it('applies custom className while preserving default styles', () => {
54+
render(
55+
<TextLink href="#" exceptionallySetClassName="custom-class">
56+
Styled link
57+
</TextLink>,
58+
)
59+
60+
const link = screen.getByText('Styled link')
61+
expect(link).toHaveClass('custom-class')
62+
// Verify it still has the default container class
63+
expect(link).toHaveClass('container')
64+
})
65+
})

0 commit comments

Comments
 (0)