Testar componente SmartForm

Open Beginner friendly
#41 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
82/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Quiet
Tech stack
react, typescript
Domain
accessibility, frontend, testing

Research direction

Read src/components/form/SmartForm/index.tsx and compare the test structure in TextInput.test.tsx. Create src/components/form/SmartForm/index.test.tsx with a manually constructed formState and cover field rendering, submit handling, loading, disabled state, and axe accessibility checks. Run npm run test and confirm the component meets the 85% coverage threshold.

Written by the indexing model from the issue text.

Description

size:S status:backlog type:tech

O que fazer

Criar testes unitários e de acessibilidade para o componente orquestrador SmartForm.

Arquivos a modificar

  • src/components/form/SmartForm/index.test.tsx — criação

Abordagem técnica

Seguir padrão de TextInput.test.tsx. formState é recebido via prop (UseSmartFormReturn), então não é necessário mockar useSmartForm — basta construir um objeto formState manualmente com os campos necessários (data, errors, loading, handleChangeValue, handleSubmit, serializedFields, disabled), todos como vi.fn()/valores simples.

Casos a cobrir (ver src/components/form/SmartForm/index.tsx):

  • Renderiza um SmartField por item de formState.serializedFields, passando error, value, disabled e options corretos.
  • Submit do <form> (ex: clicar no botão de submit) chama formState.handleSubmit.
  • formState.loading: true renderiza o indicador de Loading dentro do botão de submit.
  • formState.disabled: true desabilita o botão de submit.
  • Teste de acessibilidade: renderizar com um formState mínimo (1-2 campos simples) e rodar expect(await axe(container)).toHaveNoViolations().

Testes esperados

  • Renderiza um campo por item de serializedFields
  • Submete o formulário chamando formState.handleSubmit
  • Exibe indicador de loading quando formState.loading é true
  • Desabilita botão de submit quando formState.disabled é true
  • Sem violações de acessibilidade (toHaveNoViolations)

Critérios de Aceite

  • SmartForm/index.tsx atinge cobertura consistente com o threshold de 85%
  • npm run test passa sem falhas, incluindo o teste de a11y

Referências

Dominant language
TypeScript
Stars
1
Forks
0
Avg merge
2m
Merged PRs (30d)
1

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from zjefersound/react-essentials

All issues in zjefersound/react-essentials

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.