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>
 );

src/utils/helpers/hooks.ts

@@ -6,12 +6,12 @@ import { parseQuery, stringifyQuery } from './query';
 
 const DEFAULT_DELAY = 2000;
 
-export type StateFlagTimeout = (initialValue?: boolean, delay?: number) => [ boolean, () => void ];
+export type TimeoutToggle = (initialValue?: boolean, delay?: number) => [boolean, () => void];
 
-export const useStateFlagTimeout = (
+export const useTimeoutToggle = (
   setTimeout: (callback: Function, timeout: number) => number,
   clearTimeout: (timer: number) => void,
-): StateFlagTimeout => (initialValue = false, delay = DEFAULT_DELAY) => {
+): TimeoutToggle => (initialValue = false, delay = DEFAULT_DELAY) => {
   const [flag, setFlag] = useState<boolean>(initialValue);
   const timeout = useRef<number | undefined>(undefined);
   const callback = () => {
@@ -31,7 +31,6 @@ type ToggleResult = [ boolean, () => void, () => void, () => void ];
 
 export const useToggle = (initialValue = false): ToggleResult => {
   const [flag, setFlag] = useState<boolean>(initialValue);
-
   return [flag, () => setFlag(!flag), () => setFlag(true), () => setFlag(false)];
 };
 
@@ -80,7 +79,6 @@ export const useEffectExceptFirstTime = (callback: EffectCallback, deps: Depende
 
 export const useGoBack = () => {
   const navigate = useNavigate();
-
   return () => navigate(-1);
 };
 

src/utils/services/provideServices.ts

@@ -1,5 +1,5 @@
 import Bottle from 'bottlejs';
-import { useStateFlagTimeout } from '../helpers/hooks';
+import { useTimeoutToggle } from '../helpers/hooks';
 import { LocalStorage } from './LocalStorage';
 import { ColorGenerator } from './ColorGenerator';
 import { csvToJson, jsonToCsv } from '../helpers/csvjson';
@@ -14,7 +14,7 @@ const provideServices = (bottle: Bottle) => {
 
   bottle.constant('setTimeout', global.setTimeout);
   bottle.constant('clearTimeout', global.clearTimeout);
-  bottle.serviceFactory('useStateFlagTimeout', useStateFlagTimeout, 'setTimeout', 'clearTimeout');
+  bottle.serviceFactory('useTimeoutToggle', useTimeoutToggle, 'setTimeout', 'clearTimeout');
 };
 
 export default provideServices;