diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx index 09f6d6b..a9498d9 100644 --- a/src/components/ui/Button.tsx +++ b/src/components/ui/Button.tsx @@ -1,16 +1,12 @@ -import { type ReactNode } from 'react'; +import { type ReactNode, type ButtonHTMLAttributes } from 'react'; import { motion } from 'motion/react'; import styles from './Button.module.css'; -interface ButtonProps { +interface ButtonProps extends ButtonHTMLAttributes { variant?: 'primary' | 'secondary' | 'outline'; size?: 'sm' | 'md' | 'lg'; children: ReactNode; isLoading?: boolean; - disabled?: boolean; - className?: string; - type?: 'button' | 'submit' | 'reset'; - onClick?: () => void; } export function Button({ @@ -18,10 +14,10 @@ export function Button({ size = 'md', children, isLoading, - disabled, className, + disabled, type = 'button', - onClick, + ...props }: ButtonProps) { return ( {isLoading ? ( diff --git a/src/components/ui/__tests__/Button.test.tsx b/src/components/ui/__tests__/Button.test.tsx new file mode 100644 index 0000000..d97e8a2 --- /dev/null +++ b/src/components/ui/__tests__/Button.test.tsx @@ -0,0 +1,23 @@ +// @vitest-environment jsdom +import { render, screen, cleanup } from '@testing-library/react'; +import { describe, it, expect, afterEach } from 'vitest'; +import { Button } from '../Button'; +import React from 'react'; + +describe('Button', () => { + afterEach(() => { + cleanup(); + }); + + it('passes aria-label to the button element', () => { + render(); + const button = screen.getByRole('button', { name: /test label/i }); + expect(button).toBeTruthy(); + }); + + it('passes other HTML attributes', () => { + render(); + const button = screen.getByTestId('custom-button'); + expect(button).toBeTruthy(); + }); +});