feat: create more tests and add documentation for check group component

Adds some extra tests for the check group input component, making sure
some extra conditions are covered. Primarily testing submitting a
for with a check input when it has a default value, and making sure that
the form does not submit when the validation for the check input
attribute does not pass.

Also added some documentation for this component, creating a page and
providing an example.

Ref: #37

docs/layouts/main.tsx

@@ -60,6 +60,10 @@ const navData: LinkSetProps[] = [
         title: "List Group",
         href: "/component-list-group",
       },
+      {
+        title: "Check Group",
+        href: "/component-check-group",
+      },
     ],
   },
 ];

docs/pages/component-check-group.mdx

@@ -0,0 +1,25 @@
+import Layout from "../layouts/main";
+
+export const meta = {
+  title: "Components | Check Group",
+};
+
+# Check Group
+
+This input has a customized API to handle a checkbox input type.
+
+```jsx
+import { CheckGroup } from "@adeattwood/react-form";
+
+<CheckGroup attribute="checkMe">
+    {({ props, error }) => (
+        <div>
+          <label htmlFor={props.id}>Check</label>
+          <input {...props} />
+          {error && <p>{error}</p>}
+        </div>
+    )}
+</CheckGroup>
+```
+
+export default ({ children }) => <Layout meta={meta}>{children}</Layout>;

tests/check-group.spec.tsx

@@ -1,8 +1,9 @@
 import React from "react";
-import { render } from "@testing-library/react";
+import { act, fireEvent, render, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import Form from "../src/form";
 import CheckGroup from "../src/check-group";
+import createValidator from "../src/validator";
 
 it("will render and submit with a checkbox attribute", async () => {
   const onSubmit = jest.fn();
@@ -32,3 +33,63 @@ it("will render and submit with a checkbox attribute", async () => {
   expect(onSubmit).toBeCalledTimes(2);
   expect(onSubmit).toBeCalledWith(expect.objectContaining({ formState: { checkMe: false } }));
 });
+
+it("will have a default value and submit", async () => {
+  const onSubmit = jest.fn();
+  const { getByText } = render(
+    <Form initialValues={{ input: true }} onSubmit={onSubmit}>
+      <CheckGroup attribute="input">
+        {({ props }) => (
+          <div>
+            <label htmlFor={props.id}>Check</label>
+            <input {...props} />
+          </div>
+        )}
+      </CheckGroup>
+      <button>Submit</button>
+    </Form>
+  );
+
+  await userEvent.click(getByText("Submit"));
+  await waitFor(() => expect(onSubmit).toBeCalledTimes(1));
+  expect(onSubmit).toBeCalledWith(
+    expect.objectContaining({
+      formState: { input: true },
+    })
+  );
+});
+
+it("will validate on save and prevent submit", async () => {
+  const onSubmit = jest.fn();
+  const { getByText } = render(
+    <Form
+      onSubmit={onSubmit}
+      initialValues={{ input: false }}
+      validator={createValidator({
+        input: [
+          ({ input }) => {
+            if (!input) {
+              return "Input cannot be false";
+            }
+          },
+        ],
+      })}
+    >
+      <CheckGroup attribute="input">
+        {({ props }) => (
+          <div>
+            <label htmlFor={props.id}>Check</label>
+            <input {...props} />
+          </div>
+        )}
+      </CheckGroup>
+      <button>submit</button>
+    </Form>
+  );
+
+  await act(async () => {
+    fireEvent.click(getByText("submit"));
+  });
+
+  expect(onSubmit).toBeCalledTimes(0);
+});