Tests and prettier

Author: RoyEJohnson

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-radiogroup.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import {render, screen, fireEvent} from '@testing-library/preact';
+import FormRadioGroup from '~/components/form-radiogroup/form-radiogroup';
+import userEvent from '@testing-library/user-event';
+
+const adoptionYesNoOptions = [
+    {label: 'Yes', value: 'y'},
+    {label: 'No', value: 'n'}
+];
+
+describe('components/form-radiogroup', () => {
+    const user = userEvent.setup();
+
+    it('displays validation message when required until selected', async () => {
+        render(
+            <FormRadioGroup
+                name="test1"
+                options={adoptionYesNoOptions}
+                required={true}
+            />
+        );
+        const options = screen.getAllByRole('radio');
+
+        expect(document.querySelector('.invalid-message')?.textContent).toBe(
+            'Constraints not satisfied'
+        );
+
+        expect(options).toHaveLength(2);
+        await user.click(options[1]);
+        expect(document.querySelector('.invalid-message')?.textContent).toBe(
+            ''
+        );
+    });
+    it('displays with optional longLabel', () => {
+        render(
+            <FormRadioGroup
+                name="test1"
+                options={adoptionYesNoOptions}
+                longLabel="This is your instruction"
+            />
+        );
+        screen.getByText('This is your instruction');
+    });
+});

test/src/pages/blog/gated-content-dialog.test.tsx

@@ -9,6 +9,9 @@ import GatedContentDialog from '~/pages/blog/gated-content-dialog/gated-content-
 import type {ArticleData} from '~/pages/blog/article/article';
 import userEvent from '@testing-library/user-event';
 
+// @ts-expect-error does not exist on
+const {routerFuture} = global;
+
 const articleData: ArticleData = {
     gatedContent: true,
     heading: 'heading',
@@ -64,7 +67,11 @@ mockUseFormTarget.mockImplementation((fn) => {
 
 function Component({path}: {path: string}) {
     return (
-        <MemoryRouter basename="/blog" initialEntries={[path]}>
+        <MemoryRouter
+            basename="/blog"
+            initialEntries={[path]}
+            future={routerFuture}
+        >
             <ShellContextProvider>
                 <MainClassContextProvider>
                     <BlogContextProvider>
@@ -92,6 +99,8 @@ describe('blog/gated-content-dialog', () => {
         mockClose.mockReset();
     });
 
+    console.debug = jest.fn();
+
     it('displays when gatedContent is set in article data', async () => {
         render(<Component path="/blog/some-post" />);