Add unit tests for group form

website/src/components/Group/GroupForm.spec.tsx

@@ -0,0 +1,58 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+
+import { GroupForm } from './GroupForm';
+
+const noOpSubmit = () => {
+    throw new Error('Not implemented');
+};
+
+describe('GroupForm', () => {
+    test('test empty form', () => {
+        const formTitle = 'Create group';
+        const buttonText = 'Submit';
+
+        render(<GroupForm title={formTitle} buttonText={buttonText} onSubmit={noOpSubmit} />);
+
+        expect(screen.getByRole('heading', { name: formTitle })).toBeVisible();
+        expect(screen.getByRole('button', { name: buttonText })).toBeVisible();
+        // all text fields by default empty
+        screen.getAllByRole('textbox').forEach((field) => expect(field).toHaveValue(''));
+        expect(screen.getByRole('combobox')).toHaveValue('Choose a country...');
+    });
+
+    test('defaults load correctly', () => {
+        const groupName = 'Group Name';
+        const institution = 'institution';
+        const contactEmail = 'contact@mail.com';
+        const line1 = 'AddressLine1';
+        const line2 = 'AddressLine2';
+        const city = 'City';
+        const state = 'state';
+        const postalCode = '12345';
+        const country = 'Zimbabwe';
+        render(
+            <GroupForm
+                title=''
+                buttonText=''
+                onSubmit={noOpSubmit}
+                defaultGroupData={{
+                    groupName,
+                    institution,
+                    contactEmail,
+                    address: { line1, line2, city, state, postalCode, country },
+                }}
+            />,
+        );
+
+        expect(screen.getByLabelText(/group name/i)).toHaveValue(groupName);
+        expect(screen.getByLabelText(/institution/i)).toHaveValue(institution);
+        expect(screen.getByLabelText(/contact/i)).toHaveValue(contactEmail);
+        expect(screen.getByLabelText(/line 1/i)).toHaveValue(line1);
+        expect(screen.getByLabelText(/line 2/i)).toHaveValue(line2);
+        expect(screen.getByLabelText(/city/i)).toHaveValue(city);
+        expect(screen.getByLabelText(/state/i)).toHaveValue(state);
+        expect(screen.getByLabelText(/postal/i)).toHaveValue(postalCode);
+        expect(screen.getByLabelText(/country/i)).toHaveValue(country);
+    });
+});

website/src/components/Group/GroupForm.tsx

@@ -18,9 +18,23 @@ import type { NewGroup } from '../../types/backend';
 import { ErrorFeedback } from '../ErrorFeedback.tsx';
 
 interface GroupFormProps {
+    /**
+     * The title above the form fields.
+     */
     title: string;
+    /**
+     * The text on the button at the bottom of the field (i.e. "create" or "update").
+     */
     buttonText: string;
+    /**
+     * The default values to fill into the fields of the form.
+     */
     defaultGroupData?: NewGroup;
+    /**
+     * A handler to call when the button is clicked (i.e. create or update a group).
+     * @param group The new group information entered into the form.
+     * @returns A submit success or error.
+     */
     onSubmit: (group: NewGroup) => Promise<GroupSubmitResult>;
 }