aceleradora-TW / aceleradora-TW/descarte-certo

[Melhoria] Remover os warnings

Đang mở
#157 0 bình luận 0 reaction 3 người được giao Được @estevandh nhận Xem trên GitHub
Front-End
Ngôn ngữ chính
JavaScript
Star
15
Fork
6
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Mô tả

- **IMPORTANTE**: após a implementação desse card, deve se adicionar ao passo de desenvolvimento e QA a monitoração de novos warnings. Ou seja, durante o desenvolvimento dos futuros cards, os pares devem sempre analisar se sua implementação criou um novo warning, se sim, o par deve resolver os warnings produzidos. E ja em QA, não publicar em produção implementações que contem novos warnings

## Descrição
Atualmente temos uma série de warnings na nossa aplicação frontend que precisam ser removidos.

Quando inicializamos a aplicação pelo terminal conseguimos ver todos eles:
![Screen Shot 2021-06-12 at 06 04 42](https://user-images.githubusercontent.com/359991/121771418-a36ddc00-cb45-11eb-9177-317222e97974.png)

E no navegador, inspecionando também conseguimos ver outros que não aparecem no terminal:
![Screen Shot 2021-06-12 at 06 08 13](https://user-images.githubusercontent.com/359991/121771429-bb456000-cb45-11eb-97c6-31fe57759c52.png)

A ideia por trás dessa tarefa é ensinar como manter o projeto limpo de erros e warnings seguindo as boas práticas do framework (react).

## Nota técnica
- Para desenvolver essa card será necessário entender a mensagem de warning:
1) Saber aonde se encontra o warning
2) Entender a sugestão de conserto dada pela warning

Exemplo:
Essa é uma mensagem de warning que aparece no terminal:
![Screen Shot 2021-06-12 at 06 23 02](https://user-images.githubusercontent.com/359991/121771593-aa491e80-cb46-11eb-954e-06a0e669b56b.png)

ONDE "**./src/components/NavBar/index.js**" é o caminho para encontrar o **ARQUIVO**
E "**Line 10:36:**" diz a **LINHA** onde se encontra o warning, no caso, é a linha 10
E "**img elements must have an alt prop, either with meaningful text, or an empty string for decorative images**" diz qual a solução que pode ser feita para solucionar o problema.

- Nesse caso a mensagem de solução explica que o elemento **IMG** deve ter uma propriedade "alt", essa propriedade geralmente recebe uma descrição breve da imagem **alt="Logotipo 5marias"**
- Resolução: ```Logo 5marias```
- Então, agora aprendemos que todas as imagens criadas com a tag devem ter por obrigação uma propriedade "alt".
- O impacto dessa solução está na acessibilidade, assim, tornamos nossa aplicação mais amigável para pessoas que utilizam leitores de tela.

## Critério de aceitação

- [ ] Não devem aparecer warnings no terminal
- [ ] Não devem aparecer warnings no navegador
- [ ] E também não devem aparecer mensagens de "console.log" no navegador

## Como testar

- [ ] Acessar a página das 5marias em ambiente QA
- [ ] Abrir o inspecionar, na aba "**Console**"
- [ ] Verificar que nenhuma mensagem de warning ou console.log seja exibida

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.