# Tester Quasar

Este é um documento com o objetivo de padronizar os testes em sites, APPs e Web APPs.

## ASANA
O gerenciamento de projetos da quasar é feito pelo app [Asana](https://app.asana.com/) seguindo uma estrutura padronizada

- Na primeira coluna **Informações** temos três cards fixos **Acessos**, **Documentos** e **Servidor de deploy**.
- Em **Acessos** terá as rotas do ambiente criado para teste, onde encontrará o link da versão para desenvolvimento.
- Em **Documentos** podemos encontrar o design das paginas (normalmente usando , o fluxo de usuário

# Testes
Os testes das aplicações serão feitos quando o card estiver na coluna **Testing**. Onde deverá ser comentado as correções a serem feitas. Caso tenha correções deve ser alterado o *Feedback* para **Mudanças Necessárias** e movido para a coluna **To Do**

## Primeira Avaliação
A primeira avaliação é feita visualmente, comparando a pagina, ou item do card, com o projeto de design (no card Documentos)

- Verificar Fontes
- [ ] Tamanho
- [ ] Cor
- [ ] Família da Fonte
- [ ] Peso da fonte
- [ ] Espaçamento entre Textos
- [ ] Espaçamento entre Componentes

Se encontrar algo diferente deve tirar print e circular ou apontar na imagem para melhor descrever no feedback.

> Nota: Aconselho usar softwares que permitam marcar no print de forma rápida, por exemplo: [Lightshot](https://app.prntscr.com/pt-br/download.html) ou [Flameshot](https://flameshot.org/).

## Teste Especializado
Inspecionar os elementos do site (Ctrl + Shift + I), Assim pode se ver as configurações dos elementos
Ao clicar no ícone de selecionar um elemento da pagina para inspecionar (ctrl + shift +C) e passar o mouse sobre um elemento, pode-se ver detalhes sobre ele como fonte, cor, tamanho e até classe.
Ao clicar sobre o elemento na guia Elements, e na subguia styles pode-se ver as formatações de classes.

Ao descer até o final de Styles pode ver o tamanho, padding e margem.

Nesse modo de inspeção pode ser feito também a troca para o modo mobile e verificar a responsividade por meio do botão *toggle device toolbar* ou pelo atalho (Ctrl + Shift + M)

Nessa teste que devemos avaliar o que foi aplicado de fato pelo programador, Responsividade e funcionalidade:

- Design
- [ ] Responsividade para mobile
- [ ] Responsividade para Desk (chorme, Firefox, Edge, Safari)
- Verificar Fontes
- [ ] Tamanho
- [ ] Cor
- [ ] Fonte
- [ ] Espaçamento entre Textos
- [ ] Espaçamento entre Componentes
- [ ] Tamanho de imagens
- [ ] Tamanho de Caixas
- [ ] Texto digitado
- [ ] Alinhamento
- **Funcionalidade**
- [ ] Funcionamento de botões
- [ ] Funcionamento de Filtros
- [ ] Transições entre páginas
- [ ] Preenchimento
- [ ] Máscara de dinheiro (preenchimento de trás para frente)
- [ ] Máscara de banco (preenchimento de trás para frente ex.: Ag, conta, ...)
- [ ] Verificar se o que deve ser dinâmico está dinâmico
- [ ] Verificar se o que deve estar estático está estático

## Feedback
O feedback deve ser colocado no comentário do card no Asana de forma padrão da seguinte forma:

1. Marcar o programador responsável para fazer as alterações, ele está designado para o card.
2. Escrever a data do feedback (em negrito)
3. Colocar o link da tela testada
4. Enumerar as divergências ou bugs encontrados
5. Anexar as imagens (de preferencia com as numerações da lista nelas para agilizar o entendimento do programador

Após isso marcar em feedback **Mudanças necessária** E voltar o card para **To Do**

Caso esteja conforme. Mudar o feedback para **Aceito** e Mover para a coluna seguinte de **Client Review**. Aonde será mostrado para o cliente.

# Planos futuros
A parte de teste num software, site, ou até mesmo produto se trata do controle de qualidade da empresa. Sendo assim devemos ter em mente o lema da qualidade **MELHORIA CONTÍNUA**.
Para isso devemos buscar formas melhores, mais rápidas e mais eficientes de testar nossos produtos.
Estamos em busca de testes automatizados, de preferencia com planos gratuitos. Sempre bom aprender mais:
- https://www.cypress.io/

> "Jamais se acomode, busque sempre mais. Conhecimento é algo que você carrega consigo, é pessoal e enriquecedor !!"

# Dica Aprendizado de Programação
Ao inspecionar um elemento e ver as formatações nas classes na guia *styles* você tem a possibilidade de alterar esses valores, adicionar formatações CSS nas classes, ou remove-las, assim pode saber como deveria ser ou até dizer diretamente ao programador onde alterar (lembrando é claro de sugerir, caso não tenha 100% de certeza sobre o assunto)

## Links úteis

- [https://www.w3schools.com/](https://www.w3schools.com/)
- [https://css-tricks.com/](https://css-tricks.com/)
- https://paletton.com/
- [Extensão do chrome colorzilla ](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=pt-BR)
- [Extensão do chrome Perfect Pixel](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=pt-BR)
- [https://blog.qaninja.io/](https://blog.qaninja.io/)