# Testes Front End

## Preparação do ambiente
Antes de rodar o front é preciso fazer o setup dos programas necessário, é recomendado o uso do script básico feito pela diretoria de Qualidade, mas se preferir pode instalar os programas separadamente:

* [Script de instalação básica](https://gitlab.com/ecomp-ufpr/utils/instalacao-basica)
* rode com o parametro **web**
* [Vue](https://cli.vuejs.org/guide/installation.html)
* [Node e Npm LTS](https://nodejs.org/en)
* [VisBug](https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc)
* Ótima extenção com diversas ferramentas de debug

### Rodando o projeto
Com o setup pronto podemos rodar o projeto:

#Clona o projeto ou a pasta do front end

$ git clone <url>

#Entre na pasta do front
$ cd front-end/

# Instalar dependencias
$ npm install

# Rodar o projeto
$ npm run dev

Com isso o projeto ira rodar em localhost podendo ser acessado em http://localhost:3000/

## Padrão de código
Verifique se o padrão de códgio estabelecido está sendo seguido:


Variáveis e métodos: **camelCase** em **portugues**
Arquivos: **PascalCase** em **inglês**
Classes css: **kebab-case** em **inglês**

## Formatação

A formatação do código no front é feita com auxilio da extenção pro Vscode **Prettier**, o guia de instalação dele pode ser encontrado [Aqui](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

### Outras recomendações
* Veja se não há plugins desnecessários no projeto e se os que estão instalados estão devidamente documentos.
* Verifique também se o nome dos métodos,arquivos e variáveis fazem sentido e deixão claro para que cada um serve.
* Veja se os componentes estão separados.
* Fora isso, veja se o código segue os padrões de clean code <INSIRA O LINK DO GUIA DE CLEAN CODE AQUI>

## Responsividade

Devemos testar nosso projeto pelo menos no Chrome e no Edge. O navegador não precisa ser o mais atualizado, visto que um usuário comum geralmente não tem a versão mais recente.

### Lista de navegadores que podem/devem ser testados:
* Obrigatórios:
* [Google Chrome](https://www.google.com/chrome/)
* [Microsoft Edge](https://www.microsoft.com/en-us/edge/download?form=MA13FJ&exp=e00)
* Opcionais:
* [Mozilla Firefox](https://www.mozilla.org/en-US/firefox/new/)
* [Opera](https://www.opera.com/pt-br)
* [Safari](https://www.apple.com/safari/)

Como na Ecomp começamos com a parte mobile (mobile-first), devemos nos certificar que o site está de acordo com o layout tanto para o computador quanto para os celulares. Assim, teste para a maioria dos celulares, de preferência o menor (300 pixels), alguns intermediários, e o computador. Você pode tanto diminuir a tela do seu navegador quanto apertar a tecla F12 (inspecionar elemento).

## Formulários
Algumas issues de front requerem que você crie formulários, os quais vão ter ligação com o back. Para testá-los deve-se verificar:

* O formulário é aceito se houver alguma divergência? (Entre o que é pedido pelo back e o que foi digitado?)
* O formulário sinaliza divergência? E o que deve ser reformulado?
* O formulário sinaliza que foi enviado com sucesso? E atualizado? Deletado?
* O que aparece após o envio do formulário respeita o layout? (Ele quebra linha caso seja uma palavra enorme ou um texto muito longo?)

## Imagens
**EM CONSTRUÇÃO**