Merge pull request #209 from xistz/feature/checkbox/value

xistz/feature/checkbox/value

Author: Hiromi Kimura

src/components/Checkbox/Checkbox.tsx

@@ -11,7 +11,7 @@ export type Props = {
   onClick?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
   children?: React.ReactNode;
   className?: string;
-};
+} & Pick<React.InputHTMLAttributes<HTMLInputElement>, 'value'>;
 
 const CheckboxWrapper = styled.span`
   ${({ theme: { checkbox } }) => css`

src/components/Checkbox/__tests__/Checkbox.test.tsx

@@ -1,5 +1,6 @@
 import { render, fireEvent, screen } from '@testing-library/react';
-import { useState } from 'react';
+import userEvent from '@testing-library/user-event';
+import React, { useState } from 'react';
 import { Checkbox } from '../Checkbox';
 
 describe('Checkbox', () => {
@@ -56,4 +57,27 @@ describe('Checkbox', () => {
     fireEvent.click(screen.getByText('checkbox'));
     expect(screen.getByRole('checkbox')).toBeChecked();
   });
+
+  it('value prop', () => {
+    const onSubmit = jest.fn();
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      const formData = new FormData(e.currentTarget);
+      onSubmit(formData.get('checkbox'));
+    };
+    const value = 'value';
+    render(
+      <form onSubmit={handleSubmit}>
+        <Checkbox value={value} name="checkbox">
+          checkbox
+        </Checkbox>
+        <input type="submit" />
+      </form>
+    );
+
+    userEvent.click(screen.getByRole('checkbox', { name: 'checkbox' }));
+    userEvent.click(screen.getByRole('button', { name: 'Submit' }));
+
+    expect(onSubmit).toBeCalledWith(value);
+  });
 });