diff --git a/src/Checkbox/Checkbox.test.tsx b/src/Checkbox/Checkbox.test.tsx new file mode 100644 index 0000000..4adc3bb --- /dev/null +++ b/src/Checkbox/Checkbox.test.tsx @@ -0,0 +1,29 @@ +import { renderToStaticMarkup } from 'react-dom/server' +import { describe, expect, it } from 'vitest' + +import { Checkbox } from './index' + +/** SSR 出力からルートの label の class 属性をクラス名の配列として取り出す */ +const getRootLabelClasses = (html: string): string[] => { + const className = html.match(/^]*\bclass="([^"]*)"/)?.[1] + if (className === undefined) { + throw new Error(`ルートの label に class 属性が見つかりません: ${html}`) + } + return className.split(' ') +} + +describe('Checkbox', () => { + it('渡した className がルートの label にマージされる', () => { + const html = renderToStaticMarkup(ラベル) + const classes = getRootLabelClasses(html) + + expect(classes).toContain('aria-checkbox') + expect(classes).toContain('my-card') + }) + + it('className を渡さない場合は既存のクラスのみが付く', () => { + const html = renderToStaticMarkup(ラベル) + + expect(getRootLabelClasses(html)).toEqual(['aria-checkbox']) + }) +}) diff --git a/src/Checkbox/index.tsx b/src/Checkbox/index.tsx index 43fe752..69a4354 100644 --- a/src/Checkbox/index.tsx +++ b/src/Checkbox/index.tsx @@ -60,7 +60,7 @@ const useCheckboxState = (ref: React.RefObject) => { * * @summary 複数選択用のチェックボックス */ -const Checkbox = ({ children, ...props }: CheckboxProps) => { +const Checkbox = ({ children, className, ...props }: CheckboxProps) => { const ariaRef = useRef(null) const { isSelected, isIndeterminate, isDisabled, isHovered, isFocused } = useCheckboxState(ariaRef) @@ -78,7 +78,7 @@ const Checkbox = ({ children, ...props }: CheckboxProps) => { }) return ( - +
{children && (