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} + + ), }} />