Skip to content

Latest commit

 

History

History
123 lines (90 loc) · 4.42 KB

README.md

File metadata and controls

123 lines (90 loc) · 4.42 KB
Raw

Logo

e-Commerce Watch Store


Vue.js Nuxtjs Jest cypress Yarn

Este repositório é um projeto do módulo 2 do curso "Aprenda a testar aplicações JavaScript" do Vedovelli.

Neste módulo usamos o framework Vue com o Nuxt para criar o frontend da loja de relógios.

Para os testes unitários usamos o Jest, e para os testes e2e(end-to-end) usamos o Cypress.

Para não depender de um backend, usamos o Mirage.js para mockar automaticamente todos os produtos, e assim facilitar o aprendizado e a escrita dos testes.

Table of contents

Node Version Manager

Devido haver várias versões de Node, é aconselhável que o desenvolvedor já tenha instalado em sua máquina o Node Version Manager. O projeto roda na versão v18.6.0, e se você tem o NVM instalado, use os comandos abaixo estando no diretório raiz do projeto:

# instala a versão específica do projeto
nvm install 18.6.0 

# altera a versão para 18.6.0
nvm use

Voltar para o topo

Yarn

Lorem ipsum... Voltar para o topo

Editor Config

Lorem Ipsum... Voltar para o topo

Prettier

Lorem ipsum... Voltar para o topo

ESLint

Lorem ipsum... Voltar para o topo

Tailwind CSS

Lorem ipsum... Voltar para o topo

Vue

Lorem ipsum... Voltar para o topo

Nuxt

O Nuxt é um framework desenvolvido em cima do Vue e bastante usado pela comunidade. Permite ter um projeto pré-configurado, e a possibilidade de adicionar plugins via gerenciamento de pacotes como npm ou yarn.

Para criar uma apliação Nuxt é possível usar a ferramenta que a própria equipe disponibiliza, que já vai sugerrir uma estrutura de pastas com todos os arquivos de configuração.

create nuxt-app

yarn create nuxt-app nome-do-projeto

Após esse comando a ferramenta perguntará algumas coisas como:

  • Project name: caso queira que seja diferente do nome da pasta criada

  • Programming language: JavaScript ou TypeScript

  • Package manager: yarn ou npm

  • UI framework: para esse projeto escolhemos Tailwind CSS

  • Nuxt.js modules: pode escolher mais de uma usando a barra de espaço. Nesta opção escolhemos axios e PWA

  • Linting tools: ferramentas de qualidade de código Escolhemos ESLint, Prettier e Lint staged files

  • Testing framework: Jest

  • Rendering mode: Aqui temos a opção de escolher Universal ou Single Page App

    • Universal (SSR / SSG) -> Inclui a opção de primeiro renderizar tudo no servidor e depois devolver o HTML único já com conteúdo. No browser o javascript transforma numa Single Page Application. Temos duas vantagens nisso, performance e projeto pronto para SEO (Search Engine Optimization).

  • Deployment target: server ou static. Escolhemos server.

  • Development tools: none

  • Version control system: Git

Estrutura de pastas

Mirage JS

Lorem ipsum... Voltar para o topo

Jest

Lorem ipsum... Voltar para o topo

Cypress

Lorem ipsum... Voltar para o topo

Teste