Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: test @shared/ButtonLink.jsx #4672 #4699

Merged
merged 1 commit into from
Dec 20, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions frontend/shared/ButtonLink.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,8 @@ const ButtonLink = ({ clickHandler, children, className = 'usa-button--outline'

ButtonLink.propTypes = {
clickHandler: PropTypes.func.isRequired,
children: PropTypes.node,
children: PropTypes.node.isRequired,
className: PropTypes.string,
};

ButtonLink.defaultProps = {
children: null,
};

export default ButtonLink;
37 changes: 37 additions & 0 deletions frontend/shared/ButtonLink.test.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';

import ButtonLink from './ButtonLink';
const clickHandler = jest.fn();

describe('<ButtonLink />', () => {
it('renders children as expected', () => {
render(<ButtonLink clickHandler={clickHandler}>child text</ButtonLink>);
const buttonElement = screen.getByRole('button');
expect(buttonElement).toHaveTextContent('child text');
});

it('calls the clickHandler when clicked', () => {
render(<ButtonLink clickHandler={clickHandler}>Click Me</ButtonLink>);
const buttonElement = screen.getByText('Click Me');
fireEvent.click(buttonElement);
expect(clickHandler).toHaveBeenCalledTimes(1);
});

it('applies the className as expected', () => {
render(
<ButtonLink clickHandler={clickHandler} className="custom-class">
Class Button
</ButtonLink>,
);
const buttonElement = screen.getByText('Class Button');
expect(buttonElement).toHaveClass('usa-button custom-class');
});

it('defaults to usa-button--outline class if no className is provided', () => {
render(<ButtonLink clickHandler={clickHandler}>No Class</ButtonLink>);
const buttonElement = screen.getByText('No Class');
expect(buttonElement).toHaveClass('usa-button--outline');
});
});
Loading