Migrated CreateServer test to react testing library

src/utils/forms/InputFormGroup.tsx

@@ -1,6 +1,7 @@
 import { FC, PropsWithChildren } from 'react';
 import { InputType } from 'reactstrap/types/lib/Input';
 import { LabeledFormGroup } from './LabeledFormGroup';
+import { useDomId } from '../helpers/hooks';
 
 export type InputFormGroupProps = PropsWithChildren<{
   value: string;
@@ -14,15 +15,20 @@ export type InputFormGroupProps = PropsWithChildren<{
 
 export const InputFormGroup: FC<InputFormGroupProps> = (
   { children, value, onChange, type, required, placeholder, className, labelClassName },
-) => (
-  <LabeledFormGroup label={<>{children}:</>} className={className ?? ''} labelClassName={labelClassName}>
-    <input
-      className="form-control"
-      type={type ?? 'text'}
-      value={value}
-      required={required ?? true}
-      placeholder={placeholder}
-      onChange={(e) => onChange(e.target.value)}
-    />
-  </LabeledFormGroup>
-);
+) => {
+  const id = useDomId();
+
+  return (
+    <LabeledFormGroup label={<>{children}:</>} className={className ?? ''} labelClassName={labelClassName} id={id}>
+      <input
+        id={id}
+        className="form-control"
+        type={type ?? 'text'}
+        value={value}
+        required={required ?? true}
+        placeholder={placeholder}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    </LabeledFormGroup>
+  );
+};

src/utils/forms/LabeledFormGroup.tsx

@@ -5,14 +5,15 @@ type LabeledFormGroupProps = PropsWithChildren<{
   noMargin?: boolean;
   className?: string;
   labelClassName?: string;
+  id?: string;
 }>;
 
 /* eslint-disable jsx-a11y/label-has-associated-control */
 export const LabeledFormGroup: FC<LabeledFormGroupProps> = (
-  { children, label, className = '', labelClassName = '', noMargin = false },
+  { children, label, className = '', labelClassName = '', noMargin = false, id },
 ) => (
   <div className={`${className} ${noMargin ? '' : 'mb-3'}`}>
-    <label className={`form-label ${labelClassName}`}>{label}</label>
+    <label className={`form-label ${labelClassName}`} htmlFor={id}>{label}</label>
     {children}
   </div>
 );