Cypress Samurai Barber Shop


Índice: 📋


  • Node.js e NPM - Node.js como ambiente de execução para criar e executar aplicações em Javascript. E o NPM para: instalação de pacotes, gerenciamento de versões e dependências.

  • Yarn - para instalação de pacotes, gerenciamento de versões e dependências.


  • Pelo terminal, navegue até a pasta samurai-barber-shop/tests e execute o comando yarn test, para abrir a guia do Cypress e por ela executar os testes.

  • Yarn init - dentro da pasta samurai-barber-shop/tests execute o comando yarn init e responda as perguntas de acordo com o quadro abaixo:

    PERGUNTA RESPOSTA
    question name (tests): samuraibs-tests
    question version (1.0.0): Tecle Enter para manter 1.0.0
    question description: Projeto de testes de aceitação E2E em Cypress
    question entry point (index.js): Tecle Enter para manter index.js
    question repository url: Tecle Enter
    question author: Seu nome e sobrenome
    question license (MIT): Tecle Enter
    question private: Tecle Enter
  • Cypress - como ferramenta de teste.

    • Instalação do Cypress ⚙️

      • Pelo terminal, navegue até a pasta samurai-barber-shop/tests e execute o comando yarn add cypress -D para instalar as dependências do Cypress na versão mais recente.
      • Em seguida, na pasta samurai-barber-shop/tests execute o comando npx cypress open.
      • Por fim, na pasta samurai-barber-shop/tests execute o comando rm -r cypress/integration/**, para remover pastas e arquivos criados por padrão pelo Cypress dentro da pasta cypress/integration
  • Instalação eslint ⚙️

    • Navegue até a pasta samurai-barber-shop/tests do projeto samurai-barber-shop, execute o comando yarn add eslint -D para instalar o eslint como uma dependência de desenvolvimento do projeto.

    • Navegue até a pasta samurai-barber-shop/tests do projeto samurai-barber-shop, execute o comando node_modules/.bin/eslint --init abaixo para configurar o eslint, em seguida responda as seguintes perguntas abaixo, conforme respostas exibidas:

      PERGUNTA RESPOSTA
      How would you like to use ESLint? To check syntax, find problems, and enforce code style
      What type of modules does your project use? CommonJS (require/exports)
      Which framework does your project use? None of these
      Does your project use TypeScript? No
      Where does your code run? Node (press <a> to toggle all)
      How would you like to define a style for your project? Use a popular style guide
      Which style guide do you want to follow? Airbnb: http://github.com/airbnb/javascript
      What format do you want your config file to be in? JSON
      Would you like to install them now with npm? Yes
    • Execute o comando yarn add eslint-plugin-cypress -D para instalar o eslint específico para o Cypress no projeto.

    • No arquivo .eslintrc.json adicione as seguintes chaves:

      • Dentro da chave env, adicione mais uma para definir o plugin do Cypress como global:
        "env": {
          "browser": true,
          "commonjs": true,
          "es2021": true,
          "node": true,
          "cypress/globals": true
        }
        
      • Adicione à chave de plugins o valor do Cypress:
        "plugins": [
            "cypress"
        ]
        
    • Por fim, no arquivo package.json, adicione na chave scripts, os novo scripts:

      • "check-lint": "eslint cypress/integration/**". Assim, quando for executado na raiz do projeto o comando yarn check-lint, serão verificados todos os arquivos dentro da pasta cypress/integration pelo eslint.

      • "fix-lint": "eslint cypress/integration/** --fix". Desta forma, quando for executado na raiz do projeto o comando yarn fix-lint, serão corrigidas as infrações que o eslint considera como autocorrigível de acordo com o guide Airbnb que foi configurado anteriomente.

  • Eslint plugin - Plugin do eslint para o VSCode.

  • Husky - Para realização de tarefas antes do commit, por exemplo: varredura do lint e execução dos testes.

    • Instalação do Husky ⚙️ (apenas se seu projeto for um projeto já tiver inicializado com o git)

      • Execute o comando yarn add husky@7.0.4 -D para instalar as dependências do Husky no ambiente de desenvolvimento, na versão 7.0.4 sem atualização automática no futuro.

      • No arquivo package.json dentro da chave script adicione a chave "prepare": "husky install"

      • Agora, execute os comandos abaixo os quais irão realizar as seguintes tarefas:

        • Exeutar o script prepare para ativar o hook no git
        • Criar o arquivo pre-commit, no qual serão gravadas pelo Husky as tarefas a serem realizadas antes do commit.
          yarn prepare &&
          yarn husky add .husky/pre-commit "yarn check-lint" &&
          git add .husky/pre-commit
          

  • Faker - para geração de dados fictícios para teste.

    • Instalação do Faker ⚙️

      • Execute o comando yarn add @faker-js/faker -D para instalar as dependências do Faker na versão mais recente.
  • Pg - cliente para acessar o banco postgres da API via node.

    • Instalação do Postgresql ⚙️

      • Execute o comando yarn add pg -D para instalar as dependências do Postgresql na versão mais recente.
  • Moment - biblioteca utilizada para formatar datas em JavaScript.

    • Instalação do Moment ⚙️

      • Execute o comando yarn add moment -D para instalar as dependências do Moment na versão mais recente.
  • Moment Business Day - biblioteca utilizada para verificar os dias úteis da semana.

    • Instalação do Moment Business Day ⚙️

      • Execute o comando yarn add moment-business-days -D para instalar as dependências do Moment Business Day na versão mais recente.
  • Underscore - biblioteca que entre suas várias funcionalidades, aqui ela é utilizada para sortear valor(es) aleatório(s) em uma lista.

    • Instalação do Underscore ⚙️

      • Execute o comando yarn add underscore -D para instalar as dependências do Underscore na versão mais recente.