Tests and prettier

Author: RoyEJohnson

src/app/components/form-header/form-header.tsx

@@ -5,7 +5,10 @@ import useLanguageContext from '~/contexts/language';
 
 import './form-header.scss';
 
-function FormHeader({data, prefix}: {
+function FormHeader({
+    data,
+    prefix
+}: {
     data: Record<string, string>;
     prefix: string;
 }) {
@@ -28,7 +31,5 @@ export default function FormHeaderLoader({prefix}: {prefix: string}) {
     const {language} = useLanguageContext();
     const slug = `${slugBase}?locale=${language}`;
 
-    return (
-        <LoaderPage slug={slug} Child={FormHeader} props={{prefix}} />
-    );
+    return <LoaderPage slug={slug} Child={FormHeader} props={{prefix}} />;
 }

src/app/components/form-input/form-input.tsx

@@ -4,9 +4,18 @@ import {useMainSticky} from '~/helpers/main-class-hooks';
 import cn from 'classnames';
 import './form-input.scss';
 
+// Accessibility issues here:
+// https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-autocomplete
+
 const LIMIT_SUGGESTIONS = 400;
 
-function SuggestionItem({value, accept, index, activeIndex, setActiveIndex}: {
+function SuggestionItem({
+    value,
+    accept,
+    index,
+    activeIndex,
+    setActiveIndex
+}: {
     value: string;
     accept: (v: string) => void;
     index: number;
@@ -24,30 +33,42 @@ function SuggestionItem({value, accept, index, activeIndex, setActiveIndex}: {
 
     return (
         <div
-            className={cn('suggestion', {active})} ref={ref}
+            className={cn('suggestion', {active})}
+            ref={ref}
             onClick={() => accept(value)}
             onMouseMove={() => setActiveIndex(index)}
-        >{value}</div>
+        >
+            {value}
+        </div>
     );
 }
 
-function useMatches(pattern: string, suggestions: string[]=[]) {
+function useMatches(pattern: string, suggestions: string[] = []) {
     const matches = React.useMemo(
-        () => pattern.length > 1 ?
-            suggestions.filter((s) => s.toLowerCase().includes(pattern)) :
-            [],
+        () =>
+            pattern.length > 1
+                ? suggestions.filter((s) => s.toLowerCase().includes(pattern))
+                : [],
         [pattern, suggestions]
     );
     const exactMatch = React.useMemo(
-        () => matches.includes(pattern) ||
+        () =>
+            matches.includes(pattern) ||
             (matches.length === 1 && pattern === matches[0].toLowerCase()),
         [matches, pattern]
     );
 
     return [matches, exactMatch] as const;
 }
 
-function SuggestionBox({matches, exactMatch, accepted, accept, activeIndex, setActiveIndex}: {
+function SuggestionBox({
+    matches,
+    exactMatch,
+    accepted,
+    accept,
+    activeIndex,
+    setActiveIndex
+}: {
     matches: string[];
     exactMatch: boolean;
     accepted: boolean;
@@ -63,27 +84,40 @@ function SuggestionBox({matches, exactMatch, accepted, accept, activeIndex, setA
     return (
         <div className="suggestions">
             <div className="suggestion-box">
-                {
-                    !exactMatch && !accepted && matches.slice(0, LIMIT_SUGGESTIONS).map((match, i) =>
-                        <SuggestionItem
-                            value={match} accept={accept} index={i}
-                            activeIndex={activeIndex} setActiveIndex={setActiveIndex}
-                            key={match}
-                        />)
-                }
-                {
-                    matches.length > LIMIT_SUGGESTIONS &&
-                    <div className="suggestion"><i>List truncated</i></div>
-                }
+                {!exactMatch &&
+                    !accepted &&
+                    matches
+                        .slice(0, LIMIT_SUGGESTIONS)
+                        .map((match, i) => (
+                            <SuggestionItem
+                                value={match}
+                                accept={accept}
+                                index={i}
+                                activeIndex={activeIndex}
+                                setActiveIndex={setActiveIndex}
+                                key={match}
+                            />
+                        ))}
+                {matches.length > LIMIT_SUGGESTIONS && (
+                    <div className="suggestion">
+                        <i>List truncated</i>
+                    </div>
+                )}
             </div>
         </div>
     );
 }
 
-type InputProps = {Tag?: keyof JSX.IntrinsicElements}
-    & React.InputHTMLAttributes<HTMLInputElement>;
+type InputProps = {
+    Tag?: keyof JSX.IntrinsicElements;
+} & React.InputHTMLAttributes<HTMLInputElement>;
 
-function ValidatingInput({value, inputProps, onChange, accepted}: {
+function ValidatingInput({
+    value,
+    inputProps,
+    onChange,
+    accepted
+}: {
     value: string;
     inputProps: InputProps;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -112,22 +146,32 @@ function ValidatingInput({value, inputProps, onChange, accepted}: {
 }
 
 // eslint-disable-next-line complexity
-export default function FormInput({label, longLabel, inputProps, suggestions}: {
+export default function FormInput({
+    label,
+    longLabel,
+    inputProps,
+    suggestions
+}: {
     label: string;
     longLabel?: string;
     inputProps: InputProps;
     suggestions?: string[];
 }) {
     const [value, setValue] = useState(inputProps.value?.toString() ?? '');
     const {onChange: otherOnChange, ...otherProps} = inputProps;
-    const [matches, exactMatch] = useMatches(value.toString().toLowerCase(), suggestions);
+    const [matches, exactMatch] = useMatches(
+        value.toString().toLowerCase(),
+        suggestions
+    );
     const [accepted, setAccepted] = useState(!suggestions?.length);
     const accept = React.useCallback(
         (item: string) => {
             setValue(item);
             setAccepted(true);
             if (otherOnChange) {
-                otherOnChange({target: {value: item}} as React.ChangeEvent<HTMLInputElement>);
+                otherOnChange({
+                    target: {value: item}
+                } as React.ChangeEvent<HTMLInputElement>);
             }
         },
         [otherOnChange]
@@ -167,23 +211,25 @@ export default function FormInput({label, longLabel, inputProps, suggestions}: {
         <label className="form-input">
             <div className="control-group">
                 {label && <label className="field-label">{label}</label>}
-                {longLabel && <label className="field-long-label">{longLabel}</label>}
+                {longLabel && (
+                    <label className="field-long-label">{longLabel}</label>
+                )}
                 <ValidatingInput
                     value={value}
                     inputProps={{onKeyDown, ...otherProps}}
                     onChange={onChange}
                     accepted={accepted}
                 />
-                {
-                    suggestions &&
-                        <SuggestionBox
-                            matches={matches}
-                            exactMatch={exactMatch}
-                            accepted={accepted}
-                            accept={accept} activeIndex={activeIndex}
-                            setActiveIndex={setActiveIndex}
-                        />
-                }
+                {suggestions && (
+                    <SuggestionBox
+                        matches={matches}
+                        exactMatch={exactMatch}
+                        accepted={accepted}
+                        accept={accept}
+                        activeIndex={activeIndex}
+                        setActiveIndex={setActiveIndex}
+                    />
+                )}
             </div>
         </label>
     );

src/app/components/form-radiogroup/form-radiogroup.tsx

@@ -5,9 +5,15 @@ type OptionItem = {
     value: string;
     label: string;
     checked?: boolean;
-}
+};
 
-function Option({item, name, required, selectedValue, onChange}: {
+function Option({
+    item,
+    name,
+    required,
+    selectedValue,
+    onChange
+}: {
     item: OptionItem;
     name: string;
     required?: boolean;
@@ -33,10 +39,13 @@ function Option({item, name, required, selectedValue, onChange}: {
 
 type InputElementWithValidationMessage = HTMLInputElement & {
     validationMessage: string;
-}
+};
 
 export default function FormRadioGroup({
-    longLabel, name, options, required
+    longLabel,
+    name,
+    options,
+    required
 }: {
     longLabel?: string;
     name: string;
@@ -47,14 +56,14 @@ export default function FormRadioGroup({
     const [validationMessage, setValidationMessage] = useState('');
     const checkedValue = options.find((opt) => opt.checked)?.value;
     const [selectedValue, setSelectedValue] = useState(checkedValue);
-    const validate = React.useCallback(
-        () => {
-            const invalid = ref.current?.querySelector<InputElementWithValidationMessage>(':invalid');
+    const validate = React.useCallback(() => {
+        const invalid =
+            ref.current?.querySelector<InputElementWithValidationMessage>(
+                ':invalid'
+            );
 
-            setValidationMessage(invalid ? invalid.validationMessage : '');
-        },
-        []
-    );
+        setValidationMessage(invalid ? invalid.validationMessage : '');
+    }, []);
     const onChange = React.useCallback(
         ({target: {value}}: React.ChangeEvent<HTMLInputElement>) => {
             setSelectedValue(value);
@@ -70,10 +79,14 @@ export default function FormRadioGroup({
     React.useEffect(validate, [validate]);
 
     return (
-        <div className='form-radiogroup'>
-            {longLabel && <label className="field-long-label">{longLabel}</label>}
+        <div className="form-radiogroup">
+            {longLabel && (
+                <label className="field-long-label">{longLabel}</label>
+            )}
             <div ref={ref}>
-                {options.map((item) => <Option item={item} {...passThruProps} key={item.value} />)}
+                {options.map((item) => (
+                    <Option item={item} {...passThruProps} key={item.value} />
+                ))}
             </div>
             <div className="invalid-message">{validationMessage}</div>
         </div>

test/src/components/form-input.test.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {render, screen, fireEvent} from '@testing-library/preact';
+import FormInput from '~/components/form-input/form-input';
+import userEvent from '@testing-library/user-event';
+
+jest.mock('~/helpers/main-class-hooks');
+
+describe('components/form-input', () => {
+    const user = userEvent.setup();
+
+    it('handles various key-downs', async () => {
+        render(
+            <FormInput
+                label="label"
+                inputProps={{}}
+                longLabel="this is a long label"
+            />
+        );
+        const input = screen.getByRole('textbox');
+
+        fireEvent.keyDown(input, {key: ' '});
+        fireEvent.keyDown(input, {key: 'Escape'});
+        input.focus();
+        await user.keyboard('Rice');
+    });
+    it('handles selection of suggestion', () => {
+        const onChange = jest.fn();
+
+        render(
+            <FormInput
+                label="label"
+                inputProps={{value: 'on', onChange}}
+                suggestions={['one', 'two', 'three']}
+            />
+        );
+        const input = screen.getByRole('textbox');
+
+        fireEvent.keyDown(input, {key: 'ArrowDown'});
+        fireEvent.keyDown(input, {key: 'Enter'});
+    });
+    it('handles over-long list of suggestions', async () => {
+        const suggestions = [];
+
+        for (let i=0; i < 420; ++i) {
+            suggestions[i] = `item ${i}`;
+        }
+        render(
+            <FormInput
+                label="label"
+                inputProps={{value: 'item'}}
+                suggestions={suggestions}
+            />
+        );
+        const suggestion = screen.getByText('item 20');
+
+        // Mouse-interacts with suggestion items
+        fireEvent.mouseMove(suggestion);
+        await user.click(suggestion);
+    });
+});