No começo, havia uma função e a chamava em um só lugar. Em seguida, queríamos chamá-la em outro lugar com novos recursos e atualizá-la. Gostamos tanto desse resultado que o chamamos em terceiro lugar e ainda fizemos edições funcionais e ... em primeiro lugar, algo deu errado. Como descobrir? Verifique em todos os lugares onde usamos essa função, tudo funciona corretamente? É possível, mas é melhor usar testes de unidade.
Olá pessoal. Anônimo conectado a partir da sandbox. Você pode encontrar a maneira correta de testar seu código nas primeiras linhas do mecanismo de pesquisa, mas precisa ajustar a configuração do ambiente. Hoje, hoje, quero ajudar desenvolvedores iniciantes a configurar o ambiente para testar o código de suas unidades.
PS - faz sentido ler mais o artigo se o leitor tiver dominado o trabalho com o npm ou um gerenciador de pacotes semelhante.
Vamos começar com pequenas definições:
- O teste de unidade é uma tecnologia cujo objetivo é reduzir a probabilidade de erros e efeitos colaterais (quando outro bug é introduzido ao corrigir um bug).
- O karma é uma ferramenta que permite executar testes de java-script em navegadores.
- jasmine é uma estrutura para testar o código javasctript.
As instruções de instalação do Karma (como muitas outras) dizem que os pacotes devem ser instalados localmente no projeto.
# Install Karma: $ npm install karma --save-dev
# Install plugins that your project needs: $ npm install karma-jasmine karma-chrome-launcher jasmine-core --save-dev
Por conveniência, também podemos instalar o karma-cli npm install -g karma-cli , caso contrário, os comandos estarão disponíveis no terminal assim ./node_modules/karma/bin/karma .
Em seguida, podemos criar um arquivo de configuração:
karma init karma.conf.js
- Primeiro, ser-nos-á pedido o framework de teste usado. (jasmim)
- Nós usamos o carregador de arquivo / módulo Require.js. (Não)
- Quais navegadores queremos ver (Chrome)
- Quais arquivos estamos ouvindo. (* [Ss] pec.js)
- Todos os arquivos devem ser excluídos
- Devo monitorar as alterações de teste (sim)
Depois de responder às perguntas, teremos um arquivo de configuração.
Arquivo de configuração // Karma configuration // Generated on Thu May 09 2019 18:54:02 GMT+0300 (RTZ 2 ()) module.exports = function(config) { config.set({ // base path that will be used to resolve all patterns (eg. files, exclude) basePath: '', // frameworks to use // available frameworks: https://npmjs.org/browse/keyword/karma-adapter frameworks: ['jasmine'], // list of files / patterns to load in the browser files: [ '*[Ss]pec.js' ], // list of files / patterns to exclude exclude: [ ], // preprocess matching files before serving them to the browser // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor preprocessors: { }, // test results reporter to use // possible values: 'dots', 'progress' // available reporters: https://npmjs.org/browse/keyword/karma-reporter reporters: ['progress'], // web server port port: 9876, // enable / disable colors in the output (reporters and logs) colors: true, // level of logging // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG logLevel: config.LOG_INFO, // enable / disable watching file and executing tests whenever any file changes autoWatch: true, // start these browsers // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher browsers: ['Chrome'], // Continuous Integration mode // if true, Karma captures browsers, runs the tests and exits singleRun: false, // Concurrency level // how many browser should be started simultaneous concurrency: Infinity }) }
Crie outro arquivo de teste.
Arquivo de teste // test.spec.js describe("A suite is just a function", function() { var a; it("and so is a spec", function() { a = true; expect(a).toBe(true); }); it("and so is a spec", function() { a = true; expect(a).toBe(false); }); });
Já podemos ver como nosso teste funciona executando o karma start karma.conf.js , mas recomendo aguardar um pouco e fazer complementos adicionais.
Instale o pacote npm i -D karma-jasmine-html-reporter , que exibe dinamicamente os resultados do teste no navegador. Vamos adicionar a configuração de karma:
... reporters: ['progress', 'kjhtml'], client: { clearContext: false // leave Jasmine Spec Runner output visible in browser }, ...
Agora estamos todos prontos. Lançamos o karma start karma.conf.js e prosseguimos para o nosso primeiro teste: D