fix(FormLabel): remove span from Label for required input. (#286)

Co-authored-by: Nathan Young <[email protected]>

src/components/FormLabel/FormLabel.test.jsx

@@ -20,8 +20,8 @@ describe('FormLabel', () => {
 
   test('Label correctly renders with askterisk if field is required', () => {
     render(<FormLabel inputId="myId" isFieldRequired>my label</FormLabel>);
-    const labelElement = screen.getByText('my label');
-    expect(labelElement).toHaveTextContent('*');
+    const labelElement = screen.getByText('my label *');
+    expect(labelElement).toBeInTheDocument();
   });
 
   test('Label correctly renders with error class if field has eror', () => {

src/components/FormLabel/FormLabel.tsx

@@ -64,7 +64,7 @@ const FormLabel: FC<FormLabelProps> = ({
   return (
     <label id={`${inputId}Label`} className={labelClasses} htmlFor={inputId}>
       {children}
-      {isFieldRequired && <span>&nbsp;*</span>}
+      {isFieldRequired && <>&nbsp;*</>}
       {helpText && (
         <Box as="p" display="block" fontSize="sm" color="grey" className={styles['help-text']}>
           {helpText}

src/components/Formik/FormikSelectInput/FormikSelectInput.test.jsx

@@ -116,8 +116,7 @@ describe('SelectInput', () => {
       test('it renders an asterisk in the label', () => {
         render(renderForm([], { isRequired: true }));
 
-        expect(screen.getByText(testLabelName)).toBeInTheDocument();
-        expect(screen.getByText('*')).toBeInTheDocument();
+        expect(screen.getByText(`${testLabelName} *`)).toBeInTheDocument();
       });
     });
 

src/components/Formik/FormikTextInput/FormikTextInput.test.jsx

@@ -136,9 +136,9 @@ describe('FormikTextInput', () => {
       test('Input correctly passes props to dependency label component', async () => {
         const { getByText } = render(renderForm('', { isRequired: true }));
         const submitButton = getByText('submit');
-        const labelElement = getByText(testLabelName);
+        const labelElement = getByText(`${testLabelName} *`);
         expect(labelElement).toHaveAttribute('for', testLabelName);
-        expect(labelElement).toHaveTextContent('*');
+        expect(labelElement).toBeInTheDocument();
 
         fireEvent.click(submitButton);
         await waitFor(() => {

src/components/Formik/FormikTextareaInput/FormikTextareaInput.test.tsx

@@ -151,9 +151,9 @@ describe('FormikTextareaInput', () => {
       test('Input correctly passes props to dependency label component', async () => {
         const { getByText } = render(renderForm('', { isRequired: true }));
         const submitButton = getByText('submit');
-        const labelElement = getByText(testLabelName);
+        const labelElement = getByText(`${testLabelName} *`);
         expect(labelElement).toHaveAttribute('for', testLabelName);
-        expect(labelElement).toHaveTextContent('*');
+        expect(labelElement).toBeInTheDocument();
 
         fireEvent.click(submitButton);
         await waitFor(() => {

src/components/SelectInput/SelectInput.test.jsx

@@ -206,8 +206,7 @@ describe('SelectInput', () => {
           />,
         );
 
-        expect(screen.getByText('Select Label')).toBeInTheDocument();
-        expect(screen.getByText('*')).toBeInTheDocument();
+        expect(screen.getByText('Select Label *')).toBeInTheDocument();
       });
     });
 

src/components/TextInput/TextInput.test.tsx

@@ -144,9 +144,9 @@ describe('TextInput', () => {
       test('it\'s label renders an asterisk indicating that it\'s required', () => {
         render(<TextInput {...baseProps} isRequired />);
 
-        const labelElement = screen.getByText(baseProps.label);
+        const labelElement = screen.getByText(`${baseProps.label} *`);
 
-        expect(labelElement).toHaveTextContent('*');
+        expect(labelElement).toBeInTheDocument();
       });
     });
 

src/components/TextareaInput/TextareaInput.test.tsx

@@ -116,9 +116,9 @@ describe('TextareaInput', () => {
       test("it's label renders an asterisk indicating that it's required", () => {
         render(<TextareaInput {...baseProps} isRequired />);
 
-        const labelElement = screen.getByText(baseProps.label);
+        const labelElement = screen.getByText(`${baseProps.label} *`);
 
-        expect(labelElement).toHaveTextContent('*');
+        expect(labelElement).toBeInTheDocument();
       });
     });