{"id":47,"date":"2020-01-23T14:33:00","date_gmt":"2020-01-23T14:33:00","guid":{"rendered":"https:\/\/backbonejsdescomplicado.com.br\/?p=47"},"modified":"2024-04-16T03:34:29","modified_gmt":"2024-04-16T03:34:29","slug":"uma-rapida-introducao-a-testes-com-jasmine","status":"publish","type":"post","link":"https:\/\/escolhadev.com.br\/javascript\/uma-rapida-introducao-a-testes-com-jasmine\/","title":{"rendered":"Uma r\u00e1pida introdu\u00e7\u00e3o \u00e0 testes com Jasmine"},"content":{"rendered":"\n<p>Manter um projeto JavaScript complexo \u00e9 desafiador devido a sua natureza din\u00e2mica. Por isso quero compartilhar uma r\u00e1pida introdu\u00e7\u00e3o ao framework de testes Jasmine &#8211; pois acredito que a utiliza\u00e7\u00e3o de testes pode ajudar voc\u00ea manter os seus projetos JavaScript sob controle.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Jasmine &amp; Behavior-Driven<\/h2>\n\n\n\n<p>O Jasmine \u00e9 um framework para escrever testes orientados \u00e0 comportamento &#8211; Behavior-Driven Development. Por utilizar BDD o Jasmine entrega uma sa\u00edda semelhante a um documento contendo as especifica\u00e7\u00f5es que devem ser atendidas pelo c\u00f3digo sendo testado.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/escolhadev.com.br\/wp-content\/uploads\/sites\/2\/2023\/09\/Jasmine-Standalone-Saida.webp\" alt=\"\" class=\"wp-image-635\" \/><figcaption class=\"wp-element-caption\">Exemplo de sa\u00edda gerado por testes executados pelo Jasmine.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Download &amp; Configura\u00e7\u00e3o<\/h2>\n\n\n\n<p>Para realizar o download acessei a p\u00e1gina de <a href=\"https:\/\/github.com\/jasmine\/jasmine\/releases\">releases do Jasmine<\/a> no github e escolhi a \u00faltima vers\u00e3o dispon\u00edvel &#8211; <em>jasmine-standalone-3.5.0.zip<\/em> no meu caso.<\/p>\n\n\n\n<p>O ambiente para executar os testes \u00e9 um HTML que criei usando o SpecRunner.html como refer\u00eancia. Comecei com a defini\u00e7\u00e3o de um Favicon e importa\u00e7\u00e3o do CSS.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"shortcut icon\" type=\"image\/png\" href=\"jasmine-3.5.0\/jasmine_favicon.png\"&gt;\n&lt;link rel=\"stylesheet\" href=\"jasmine-3.5.0\/jasmine.css\"&gt;<\/code><\/pre>\n\n\n\n<p>Na sequ\u00eancia coloquei as bibliotecas respons\u00e1veis por iniciar o framework Jasmine.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\"jasmine-3.5.0\/jasmine.js\"&gt;&lt;\/script&gt;\n&lt;script src=\"jasmine-3.5.0\/jasmine-html.js\"&gt;&lt;\/script&gt;\n&lt;script src=\"jasmine-3.5.0\/boot.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Por fim adicionei os scripts que carregam o c\u00f3digo \u00e0 ser testado junto com seu respectivo teste.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\"src\/app-incrementor.js\"&gt;&lt;\/script&gt;\n&lt;script src=\"spec\/app-incrementor-spec.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">O Incrementador<\/h2>\n\n\n\n<p>A funcionalidade \u00e0 ser testada vou pegar emprestado de <a href=\"https:\/\/escolhadev.com.br\/javascript-revealing-module-pattern-2-exemplos-praticos\/\" data-type=\"post\" data-id=\"40\">outro artigo<\/a> deste blog. O modulo produz um objeto que \u00e9 atribu\u00eddo \u00e0 constante <code>incrementor<\/code>. O <code>incrementor<\/code> exp\u00f5e o m\u00e9todo <code>incrementor.next<\/code> que a cada execu\u00e7\u00e3o incrementa <code>counter<\/code> retornando em seguida seu novo valor.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const incrementor = (function() {\n  \"use strict\";\n\n  let counter = 0;\n\n  const next = function() {\n    return ++counter;\n  };\n\n  return {\n    next,\n  };\n\n})();<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">O Incrementador Spec<\/h2>\n\n\n\n<p>Para ajudar na cria\u00e7\u00e3o de testes com BDD s\u00e3o pelo menos 3 fun\u00e7\u00f5es \u00fateis que o framework Jasmine exp\u00f5e no escopo global. <\/p>\n\n\n\n<ul>\n<li><strong>describe<\/strong> &#8211; utilizado para agrupar os testes<\/li>\n\n\n\n<li><strong>it<\/strong> &#8211; define os testes que ir\u00e3o compor nossa suite<\/li>\n\n\n\n<li><strong>expect<\/strong> &#8211; verifica se uma expectativa foi ou n\u00e3o atendida<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>describe('when using the incrementor', function() {\n\n  const first = incrementor.next();\n  const second = incrementor.next();\n\n  it('the first increment must return 1', function() {\n    expect(first).toBe(1);\n  });\n\n  it('the second increment must return 2', function() {\n    expect(second).toBe(2);\n  });\n\n});<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclus\u00e3o<\/h2>\n\n\n\n<p>Neste artigo fiz uma r\u00e1pida introdu\u00e7\u00e3o ao framework de testes Jasmine al\u00e9m de mostrar os passos necess\u00e1rios para realizar seu download e configura\u00e7\u00e3o. Demonstrei o uso do modo standalone que \u00e9 a maneira mais f\u00e1cil para come\u00e7ar a escrever testes automatizados com o framework.<\/p>\n\n\n\n<p>Tamb\u00e9m reusei um modulo desenvolvido no artigo <a href=\"https:\/\/escolhadev.com.br\/javascript-revealing-module-pattern-2-exemplos-praticos\/\" data-type=\"post\" data-id=\"40\">JavaScript Revealing Module Pattern<\/a> para demonstrar a cria\u00e7\u00e3o de testes utilizando o framewok Jasmine.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Manter um projeto JavaScript complexo \u00e9 desafiador devido a sua natureza din\u00e2mica. Por isso quero compartilhar uma r\u00e1pida introdu\u00e7\u00e3o ao framework de testes Jasmine &#8211; pois acredito que a utiliza\u00e7\u00e3o de testes pode ajudar voc\u00ea manter os seus projetos JavaScript sob controle.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/posts\/47"}],"collection":[{"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/comments?post=47"}],"version-history":[{"count":1,"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/posts\/47\/revisions"}],"predecessor-version":[{"id":761,"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/posts\/47\/revisions\/761"}],"wp:attachment":[{"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/media?parent=47"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/categories?post=47"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/tags?post=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}