Skip to content

Commit

Permalink
Merge pull request #209 from xistz/feature/checkbox/value
Browse files Browse the repository at this point in the history
xistz/feature/checkbox/value
  • Loading branch information
Hiromi Kimura authored Nov 17, 2021
2 parents d77ed3e + a469b2d commit f883c4f
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 2 deletions.
2 changes: 1 addition & 1 deletion src/components/Checkbox/Checkbox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
26 changes: 25 additions & 1 deletion src/components/Checkbox/__tests__/Checkbox.test.tsx
Original file line number Diff line number Diff line change
@@ -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', () => {
Expand Down Expand Up @@ -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);
});
});

0 comments on commit f883c4f

Please sign in to comment.