57 lines
1.9 KiB
Markdown
57 lines
1.9 KiB
Markdown
# Plan: Agregar guard de `disabled` al handler `onClick` en Button
|
|
|
|
## Contexto
|
|
|
|
El componente `Button` (`src/components/Button/index.tsx`) ya expone una prop `onClick`, pero la implementación no verifica el estado `disabled` antes de ejecutar el handler. El test existente (`Button.test.tsx` línea 21-27) espera que `onClick` **no se llame** cuando el botón está disabled, pero la implementación actual no tiene esa protección.
|
|
|
|
## Cambios
|
|
|
|
### 1. `src/components/Button/index.tsx` — Agregar guard disabled en onClick
|
|
|
|
En el render del `<button>` (línea 80-88), envolver `onClick` para que no se ejecute si `disabled` es true:
|
|
|
|
```tsx
|
|
<button
|
|
className={`btn ${variantClasses[variant]} ${className}`.trim()}
|
|
onClick={disabled ? undefined : onClick}
|
|
type={type}
|
|
disabled={disabled}
|
|
>
|
|
{children}
|
|
</button>
|
|
```
|
|
|
|
También agregar el guard para el caso `file-upload` (línea 71), donde `onChange` del input file también debería respetar `disabled`.
|
|
|
|
### 2. `src/components/Button/__tests__/Button.test.tsx` — Agregar test positivo
|
|
|
|
Agregar un test que verifique que `onClick` **sí se llama** cuando el botón está habilitado y se hace click:
|
|
|
|
```tsx
|
|
it('calls onClick handler when enabled and clicked', () => {
|
|
const handleClick = jest.fn();
|
|
render(<Button onClick={handleClick}>Click me</Button>);
|
|
const button = screen.getByRole('button', { name: /click me/i });
|
|
button.click();
|
|
expect(handleClick).toHaveBeenCalledTimes(1);
|
|
});
|
|
```
|
|
|
|
### 3. `src/components/Button/Button.stories.tsx` — Story de onClick
|
|
|
|
Agregar una Story que demuestre el uso de `onClick` con una función callback simple, para que sea visible en Storybook.
|
|
|
|
## Archivos a modificar
|
|
|
|
- `src/components/Button/index.tsx`
|
|
- `src/components/Button/__tests__/Button.test.tsx`
|
|
- `src/components/Button/Button.stories.tsx`
|
|
|
|
## Verificación
|
|
|
|
```bash
|
|
npm test -- --testPathPattern="Button.test" --coverage
|
|
```
|
|
|
|
Confirmar que todos los tests de Button pasan y que el coverage se mantiene.
|