diff --git a/src/components/HrTools/PdsGoalCalculator/PdsGoalCalculator.test.tsx b/src/components/HrTools/PdsGoalCalculator/PdsGoalCalculator.test.tsx
index 83ddbae96a..c987c18da4 100644
--- a/src/components/HrTools/PdsGoalCalculator/PdsGoalCalculator.test.tsx
+++ b/src/components/HrTools/PdsGoalCalculator/PdsGoalCalculator.test.tsx
@@ -96,7 +96,9 @@ describe('PdsGoalCalculator', () => {
});
// Switching Pay Type clears payRate, so the user must re-enter it before
// Continue becomes enabled.
- const payRateInput = await findByRole('spinbutton', { name: 'Pay Rate' });
+ const payRateInput = await findByRole('spinbutton', {
+ name: 'Annual Pay Rate',
+ });
userEvent.type(payRateInput, '50000');
await waitFor(() => expect(continueButton).not.toBeDisabled());
diff --git a/src/components/HrTools/PdsGoalCalculator/Setup/SetupStep.test.tsx b/src/components/HrTools/PdsGoalCalculator/Setup/SetupStep.test.tsx
index cf3f404a85..c602db9096 100644
--- a/src/components/HrTools/PdsGoalCalculator/Setup/SetupStep.test.tsx
+++ b/src/components/HrTools/PdsGoalCalculator/Setup/SetupStep.test.tsx
@@ -85,7 +85,9 @@ describe('SetupStep', () => {
userEvent.clear(goalNameInput);
- const payRateInput = await findByRole('spinbutton', { name: 'Pay Rate' });
+ const payRateInput = await findByRole('spinbutton', {
+ name: 'Hourly Pay Rate',
+ });
userEvent.clear(payRateInput);
const hoursInput = await findByRole('spinbutton', {
@@ -182,21 +184,24 @@ describe('SetupStep', () => {
await findByRole('textbox', { name: 'Goal Name' });
expect(
- queryByRole('spinbutton', { name: 'Pay Rate' }),
+ queryByRole('spinbutton', { name: /Pay Rate/ }),
).not.toBeInTheDocument();
});
- it('shows dynamic Pay Rate helper text based on salary type', async () => {
+ it('shows dynamic Pay Rate label and helper text based on salary type', async () => {
const { findByRole, findByText, rerender } = renderSetup({
calculationMock: fullTimeSalariedMock,
});
- await findByRole('spinbutton', { name: 'Pay Rate' });
+ await findByRole('spinbutton', { name: 'Annual Pay Rate' });
expect(await findByText('Enter yearly salary')).toBeInTheDocument();
+ expect(await findByText('per year')).toBeInTheDocument();
rerender(setupTree({ calculationMock: fullTimeHourlyMock }));
+ await findByRole('spinbutton', { name: 'Hourly Pay Rate' });
expect(await findByText('Enter hourly rate')).toBeInTheDocument();
+ expect(await findByText('per hour')).toBeInTheDocument();
});
it('403b field is disabled', async () => {
diff --git a/src/components/HrTools/PdsGoalCalculator/Setup/SetupStep.tsx b/src/components/HrTools/PdsGoalCalculator/Setup/SetupStep.tsx
index ac4ba6cea4..83d60fd6fd 100644
--- a/src/components/HrTools/PdsGoalCalculator/Setup/SetupStep.tsx
+++ b/src/components/HrTools/PdsGoalCalculator/Setup/SetupStep.tsx
@@ -107,6 +107,8 @@ export const SetupStep: React.FC = () => {
const payRateHelperText = isSalaried
? t('Enter yearly salary')
: t('Enter hourly rate');
+ const payRateLabel = isSalaried ? t('Annual Pay Rate') : t('Hourly Pay Rate');
+ const payRateUnitSuffix = isSalaried ? t('per year') : t('per hour');
const handleOpenHoursCalculator = () => {
setRightPanelContent(
@@ -235,11 +237,16 @@ export const SetupStep: React.FC = () => {
,
+ endAdornment: (
+
+ {payRateUnitSuffix}
+
+ ),
}}
/>