fix(clerk-js): Add full stop if needed in password feedback messages

fix(clerk-js): Fix falling tests fix(clerk-js): Fix falling tests
clerk · Jul 14, 2023 · f94096f · f94096f
1 parent b26fe80
commit f94096f
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 12 deletions.
diff --git a/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx b/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOne.test.tsx
@@ -190,7 +190,7 @@ describe('SignInFactorOne', () => {
           const { userEvent } = render(<SignInFactorOne />, { wrapper });
           await userEvent.type(screen.getByLabelText('Password'), '123456');
           await userEvent.click(screen.getByText('Continue'));
-          await waitFor(() => expect(screen.getByText('Incorrect Password')).toBeDefined());
+          await waitFor(() => expect(screen.getByText('Incorrect Password.')).toBeDefined());
         });
       });
     });
@@ -402,7 +402,7 @@ describe('SignInFactorOne', () => {
         await runFakeTimers(async () => {
           const { userEvent } = render(<SignInFactorOne />, { wrapper });
           await userEvent.type(screen.getByLabelText(/Enter verification code/i), '123456');
-          await waitFor(() => expect(screen.getByText('Incorrect code')).toBeDefined());
+          await waitFor(() => expect(screen.getByText('Incorrect code.')).toBeDefined());
         });
       });
     });
@@ -481,7 +481,7 @@ describe('SignInFactorOne', () => {
         await runFakeTimers(async () => {
           const { userEvent } = render(<SignInFactorOne />, { wrapper });
           await userEvent.type(screen.getByLabelText(/Enter verification code/i), '123456');
-          await waitFor(() => expect(screen.getByText('Incorrect phone code')).toBeDefined());
+          await waitFor(() => expect(screen.getByText('Incorrect phone code.')).toBeDefined());
         });
       });
     });

diff --git a/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsx b/packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorTwo.test.tsx
@@ -197,7 +197,7 @@ describe('SignInFactorTwo', () => {
         await runFakeTimers(async () => {
           const { userEvent } = render(<SignInFactorTwo />, { wrapper });
           await userEvent.type(screen.getByLabelText(/Enter verification code/i), '123456');
-          await waitFor(() => expect(screen.getByText('Incorrect phone code')).toBeDefined());
+          await waitFor(() => expect(screen.getByText('Incorrect phone code.')).toBeDefined());
         });
       }, 10000);
     });
@@ -255,7 +255,7 @@ describe('SignInFactorTwo', () => {
         await runFakeTimers(async () => {
           const { userEvent } = render(<SignInFactorTwo />, { wrapper });
           await userEvent.type(screen.getByLabelText(/Enter verification code/i), '123456');
-          await waitFor(() => expect(screen.getByText('Incorrect authenticator code')).toBeDefined());
+          await waitFor(() => expect(screen.getByText('Incorrect authenticator code.')).toBeDefined());
         });
       }, 10000);
     });
@@ -346,7 +346,7 @@ describe('SignInFactorTwo', () => {
           const { userEvent, getByLabelText, getByText } = render(<SignInFactorTwo />, { wrapper });
           await userEvent.type(getByLabelText('Backup code'), '123456');
           await userEvent.click(getByText('Continue'));
-          await waitFor(() => expect(screen.getByText('Incorrect backup code')).toBeDefined());
+          await waitFor(() => expect(screen.getByText('Incorrect backup code.')).toBeDefined());
         });
       }, 10000);
     });

diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordPage.test.tsx b/packages/clerk-js/src/ui/components/UserProfile/__tests__/PasswordPage.test.tsx
@@ -244,7 +244,7 @@ describe('PasswordPage', () => {
           screen.getByText(/or more/i);
         });
       });
-    }, 10000);
+    });
 
     it('results in error if the passwords do not match and persists', async () => {
       const { wrapper } = await createFixtures(initConfig);

diff --git a/packages/clerk-js/src/ui/elements/FormControl.tsx b/packages/clerk-js/src/ui/elements/FormControl.tsx
@@ -119,6 +119,14 @@ const useCalculateErrorTextHeight = (config: CalculateConfigProps) => {
   };
 };
 
+const addFullStop = (string: string | undefined) => {
+  if (!string) {
+    return '';
+  }
+  const hasFullStop = string?.split(' ').slice(-1)[0].includes('.') || '';
+  return hasFullStop ? string : string + '.';
+};
+
 type FormFeedbackDescriptorsKeys = 'error' | 'warning' | 'info' | 'success';
 
 type FormFeedbackProps = Partial<ReturnType<typeof useFormControlFeedback>['debounced'] & { id: FieldId }> & {
@@ -137,7 +145,7 @@ export const FormFeedback = (props: FormFeedbackProps) => {
   const messageToDisplay = informationMessage || successMessage || errorMessage || warningMessage;
   const isSomeMessageVisible = !!messageToDisplay;
 
-  const { calculateHeight, height } = useCalculateErrorTextHeight({ recalculate: warningMessage });
+  const { calculateHeight, height } = useCalculateErrorTextHeight({ recalculate: warningMessage || errorMessage });
   const { getFormTextAnimation } = useFormTextAnimation();
   const defaultElementDescriptors = {
     error: descriptors.formFieldErrorText,
@@ -176,7 +184,7 @@ export const FormFeedback = (props: FormFeedbackProps) => {
           ref={calculateHeight}
           sx={getFormTextAnimation(!!props.informationText && !props?.successfulText && !props.warningText)}
         >
-          {informationMessage}
+          {addFullStop(informationMessage)}
         </FormInfoText>
       )}
       {/* Display the error message after the directions is unmounted*/}
@@ -186,7 +194,7 @@ export const FormFeedback = (props: FormFeedbackProps) => {
           ref={calculateHeight}
           sx={getFormTextAnimation(!!props?.errorText)}
         >
-          {errorMessage}
+          {addFullStop(errorMessage)}
         </FormErrorText>
       )}
 
@@ -197,7 +205,7 @@ export const FormFeedback = (props: FormFeedbackProps) => {
           ref={calculateHeight}
           sx={getFormTextAnimation(!!props?.successfulText)}
         >
-          {successMessage}
+          {addFullStop(successMessage)}
         </FormSuccessText>
       )}
 
@@ -207,7 +215,7 @@ export const FormFeedback = (props: FormFeedbackProps) => {
           ref={calculateHeight}
           sx={getFormTextAnimation(!!props.warningText)}
         >
-          {warningMessage}
+          {addFullStop(warningMessage)}
         </FormWarningText>
       )}
     </Box>