e-Commerce Watch Store

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

• Yarn

• Editor Config

• Prettier

• ESLint

• Tailwind CSS

• Vue

• Nuxt

  • create nuxt-app
  • Estrutura de pastas

• MirageJS

• Jest

• Cypress

---

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