diff --git a/src/components/HrTools/PdsGoalCalculator/GoalCard/PdsGoalCard.test.tsx b/src/components/HrTools/PdsGoalCalculator/GoalCard/PdsGoalCard.test.tsx
index f1f26d6487..4e257c3c1b 100644
--- a/src/components/HrTools/PdsGoalCalculator/GoalCard/PdsGoalCard.test.tsx
+++ b/src/components/HrTools/PdsGoalCalculator/GoalCard/PdsGoalCard.test.tsx
@@ -1,5 +1,6 @@
import React from 'react';
import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
import { PdsGoalsList } from '../GoalsList/PdsGoalsList';
import { PdsGoalCalculatorTestWrapper } from '../PdsGoalCalculatorTestWrapper';
@@ -65,6 +66,42 @@ describe('PdsGoalCard', () => {
expect(await findByTestId('date-value')).toHaveTextContent('March 15');
});
+ it('shows the full goal name in a tooltip on hover', async () => {
+ const longName =
+ 'A very long goal name that would otherwise stretch the card';
+ const { findByTestId, findByRole } = render(
+
+
+ ,
+ );
+
+ userEvent.hover(await findByTestId('goal-name'));
+
+ expect(await findByRole('tooltip')).toHaveTextContent(longName);
+ });
+
+ it('shows the unnamed goal fallback in a tooltip on hover', async () => {
+ const { findByTestId, findByRole } = render(
+
+
+ ,
+ );
+
+ userEvent.hover(await findByTestId('goal-name'));
+
+ expect(await findByRole('tooltip')).toHaveTextContent('Unnamed Goal');
+ });
+
it('renders the calculated goal amount', async () => {
const { findByTestId } = render(
({
- minWidth: 350,
+ width: 350,
borderRadius: theme.shape.borderRadius,
}));
@@ -34,6 +35,7 @@ const StyledHeaderBox = styled(Box)(({ theme }) => ({
justifyContent: 'center',
marginBottom: theme.spacing(2),
marginTop: theme.spacing(2),
+ paddingInline: theme.spacing(2),
}));
const StyledContentBox = styled(Box)(({ theme }) => ({
@@ -127,9 +129,16 @@ export const PdsGoalCard: React.FC = ({ goal, onDelete }) => {
-
- {goal.name ?? t('Unnamed Goal')}
-
+
+
+ {goal.name ?? t('Unnamed Goal')}
+
+