-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: update tests for disabled cases, move to children instead of l…
…abel
- Loading branch information
1 parent
62808f8
commit 73cba9e
Showing
7 changed files
with
40 additions
and
78 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,80 +1,51 @@ | ||
| import '@testing-library/jest-dom'; | ||
| import { fireEvent, render, screen } from '@testing-library/react'; | ||
| import { IconType } from '../icon'; | ||
| import { Link } from './link'; | ||
| import { Link, type ILinkProps } from '.'; | ||
|
|
||
| describe('<Link /> component', () => { | ||
| const createTestComponent = (props?: Partial<ILinkProps>) => { | ||
| const completeProps: ILinkProps = { children: 'Default children', href: 'http://default.com', ...props }; | ||
|
|
||
| return <Link {...completeProps} />; | ||
| }; | ||
|
|
||
| describe('Link', () => { | ||
| it('renders correctly with minimum props', () => { | ||
| render(<Link label="Example" href="http://example.com" />); | ||
| const linkElement = screen.getByTestId('link'); | ||
| render(createTestComponent({ children: 'Example', href: 'http://example.com' })); | ||
| const linkElement = screen.getByRole('link', { name: 'Example' }); | ||
| expect(linkElement).toBeInTheDocument(); | ||
| expect(linkElement).toHaveAttribute('href', 'http://example.com'); | ||
| expect(screen.getByText('Example')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('applies correct classes based on disabled prop', () => { | ||
| const { rerender } = render(<Link label="Primary Link" variant="primary" />); | ||
| let linkElement = screen.getByTestId('link'); | ||
|
|
||
| rerender(<Link label="Disabled Link" disabled />); | ||
| linkElement = screen.getByTestId('link'); | ||
| render(createTestComponent({ children: 'Disabled Link', disabled: true })); | ||
| const linkElement = screen.getByLabelText('Disabled Link'); | ||
| expect(linkElement).toHaveClass('truncate text-neutral-300 cursor-not-allowed'); | ||
| }); | ||
|
|
||
| it('prevents default behavior when clicked and disabled', () => { | ||
| const handleClick = jest.fn(); | ||
| render(<Link label="Disabled Link" disabled onClick={handleClick} />); | ||
| const linkElement = screen.getByTestId('link'); | ||
| render(createTestComponent({ children: 'Disabled Link', disabled: true, onClick: handleClick })); | ||
| const linkElement = screen.getByLabelText('Disabled Link'); | ||
| fireEvent.click(linkElement); | ||
| expect(handleClick).not.toHaveBeenCalled(); | ||
| }); | ||
|
|
||
| it('does not have href attribute when disabled', () => { | ||
| render(<Link label="Disabled Link" disabled href="http://example.com" />); | ||
| const linkElement = screen.getByTestId('link'); | ||
| render(createTestComponent({ children: 'Disabled Link', disabled: true, href: 'http://example.com' })); | ||
| const linkElement = screen.getByLabelText('Disabled Link'); | ||
| expect(linkElement).not.toHaveAttribute('href', 'http://example.com'); | ||
| }); | ||
|
|
||
| it('has correct attributes when link is external', () => { | ||
| render(<Link label="External Link" external href="http://example.com" />); | ||
| const linkElement = screen.getByTestId('link'); | ||
| expect(linkElement).toHaveAttribute('target', '_blank'); | ||
| expect(linkElement).toHaveAttribute('rel', 'noopener noreferrer'); | ||
| }); | ||
|
|
||
| it('has correct aria attributes when disabled', () => { | ||
| render(<Link label="Disabled Link" disabled />); | ||
| const linkElement = screen.getByTestId('link'); | ||
| render(createTestComponent({ children: 'Disabled Link', disabled: true })); | ||
| const linkElement = screen.getByLabelText('Disabled Link'); | ||
| expect(linkElement).toHaveAttribute('aria-disabled', 'true'); | ||
| expect(linkElement).toHaveAttribute('tabIndex', '-1'); | ||
| }); | ||
|
|
||
| it('fires click event when not disabled', () => { | ||
| const handleClick = jest.fn(); | ||
| render(<Link label="Clickable Link" href="http://example.com" onClick={handleClick} />); | ||
| const linkElement = screen.getByTestId('link'); | ||
| fireEvent.click(linkElement); | ||
| expect(handleClick).toHaveBeenCalled(); | ||
| }); | ||
|
|
||
| it.each(Object.values(IconType))('renders correctly with %s icon', async (icon) => { | ||
| render(<Link label={`Link with ${icon} icon`} href="http://example.com" iconRight={icon} />); | ||
| const iconElement = await screen.findByTestId(icon); | ||
| expect(iconElement).toBeInTheDocument(); | ||
| expect(screen.getByText(`Link with ${icon} icon`)).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('renders correctly with no icon', () => { | ||
| const label = 'Link without icon'; | ||
| render(<Link label={label} href="http://example.com" />); | ||
| const linkElement = screen.getByTestId('link'); | ||
| expect(linkElement).toHaveTextContent(label); | ||
| }); | ||
|
|
||
| it('receives focus when tabbed to', () => { | ||
| render(<Link label="Clickable Link" href="http://example.com" />); | ||
| const linkElement = screen.getByTestId('link'); | ||
| fireEvent.keyDown(linkElement, { key: 'Tab', code: 'Tab' }); | ||
| expect(linkElement).toHaveClass('test-focus'); | ||
| const children = 'Link without icon'; | ||
| render(createTestComponent({ children, href: 'http://example.com' })); | ||
| const linkElement = screen.getByRole('link', { name: 'Link without icon' }); | ||
| expect(linkElement).toHaveTextContent(children); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters