test: add FormField-wrapped checkbox interaction test to reproduction

Author: jthrilly

lib/form/components/fields/CheckboxGroupInteraction.stories.tsx

@@ -1,7 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 import { useState } from 'react';
 import { expect, screen, userEvent, waitFor } from 'storybook/test';
+import Field from '~/lib/form/components/Field/Field';
 import CheckboxGroupField from '~/lib/form/components/fields/CheckboxGroup';
+import useFormStore from '~/lib/form/hooks/useFormStore';
+import FormStoreProvider from '~/lib/form/store/formStoreProvider';
 
 function ControlledCheckboxGroup() {
   const [values, setValues] = useState<(string | number)[]>(['a', 'b', 'c']);
@@ -52,6 +55,58 @@ export const ClickCheckbox: Story = {
   },
 };
 
+function FormFieldCheckboxGroup() {
+  return (
+    <FormStoreProvider>
+      <FormFieldInner />
+    </FormStoreProvider>
+  );
+}
+
+function FormFieldInner() {
+  const getFormValues = useFormStore((s) => s.getFormValues);
+  const values = getFormValues();
+
+  return (
+    <div>
+      <Field
+        name="choices"
+        label="Pick options"
+        component={CheckboxGroupField}
+        options={[
+          { value: 'a', label: 'Option A' },
+          { value: 'b', label: 'Option B' },
+          { value: 'c', label: 'Option C' },
+        ]}
+        initialValue={['a', 'b', 'c']}
+      />
+      <div data-testid="form-result">
+        {JSON.stringify(values.choices ?? 'undefined')}
+      </div>
+    </div>
+  );
+}
+
+export const ClickCheckboxInFormField: Story = {
+  render: () => <FormFieldCheckboxGroup />,
+  play: async () => {
+    const checkboxC = await screen.findByRole('checkbox', { name: 'Option C' });
+    await expect(checkboxC).toHaveAttribute('aria-checked', 'true');
+
+    await userEvent.click(checkboxC);
+
+    await waitFor(async () => {
+      await expect(checkboxC).toHaveAttribute('aria-checked', 'false');
+    });
+
+    await waitFor(async () => {
+      await expect(screen.getByTestId('form-result')).toHaveTextContent(
+        '["a","b"]',
+      );
+    });
+  },
+};
+
 export const ClickLabel: Story = {
   play: async () => {
     // Find the text label and click it instead of the checkbox button