qwen3-6-lora/data/raw/sanitized/plans/en-el-worktree-home-aleleba-projects-bl-pure-cook.md

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:

<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:

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

npm test -- --testPathPattern="Button.test" --coverage

Confirmar que todos los tests de Button pasan y que el coverage se mantiene.