From 30dcfd1b4c37ca2a09b188a01ec339538320e6db Mon Sep 17 00:00:00 2001
From: Sarah Rudder <sarah.rudder@gsa.gov>
Date: Fri, 20 Dec 2024 14:03:14 -0600
Subject: [PATCH] chore: test @shared/ButtonLink.jsx #4672

---
 frontend/shared/ButtonLink.jsx      |  6 +----
 frontend/shared/ButtonLink.test.jsx | 37 +++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 5 deletions(-)
 create mode 100644 frontend/shared/ButtonLink.test.jsx

diff --git a/frontend/shared/ButtonLink.jsx b/frontend/shared/ButtonLink.jsx
index e2884418b..43a0efa21 100644
--- a/frontend/shared/ButtonLink.jsx
+++ b/frontend/shared/ButtonLink.jsx
@@ -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;
diff --git a/frontend/shared/ButtonLink.test.jsx b/frontend/shared/ButtonLink.test.jsx
new file mode 100644
index 000000000..4751281f1
--- /dev/null
+++ b/frontend/shared/ButtonLink.test.jsx
@@ -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');
+  });
+});