{"id":981,"date":"2018-02-03T14:49:06","date_gmt":"2018-02-03T14:49:06","guid":{"rendered":"http:\/\/www.andrefelizardo.com.br\/blog\/?p=981"},"modified":"2018-02-03T14:53:45","modified_gmt":"2018-02-03T14:53:45","slug":"jasmine-testando-seu-codigo-javascript","status":"publish","type":"post","link":"https:\/\/www.andrefelizardo.com.br\/blog\/jasmine-testando-seu-codigo-javascript\/","title":{"rendered":"Jasmine &#8211; Testando seu c\u00f3digo JavaScript"},"content":{"rendered":"<p>Conforme evolu\u00edmos na complexidade das aplica\u00e7\u00f5es de front-end que desenvolvemos, uma necessidade come\u00e7a a se tornar \u00f3bvia: testar o c\u00f3digo <a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/javascript-comecando-do-jeito-certo\/\" target=\"_blank\" rel=\"noopener\">JavaScript<\/a>. Jasmine \u00e9 um framework exatamente para resolver essa necessidade.<\/p>\n<p>Jasmine \u00e9 um framework de testes para o c\u00f3digo JavaScript, que adere aos conceitos<!--more--> de Behavior Driven Development.<\/p>\n<ul>\n<li><a href=\"#bdd\">BDD<\/a><\/li>\n<li><a href=\"#jasmine\">Jasmine<\/a><\/li>\n<li><a href=\"#jasmine-standalone\">Jasmine Standalone<\/a><\/li>\n<li><a href=\"#criando\">Criando primeiro teste em Jasmine<\/a>\n<ul>\n<li><a href=\"#spec\">Criando a especifica\u00e7\u00e3o de teste<\/a><\/li>\n<li><a href=\"#src\">Criando nosso source<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><a name=\"bdd\"><\/a><\/p>\n<h2>BDD<\/h2>\n<p>Behavior Driven Development (Desenvolvimento Guiado por Comportamento) \u00e9 uma t\u00e9cnica que incentiva a colabora\u00e7\u00e3o da equipe de testes, de desenvolvimento e at\u00e9 n\u00e3o-t\u00e9cnicos num projeto de software. Podemos dizer que \u00e9 uma melhoria de <a href=\"http:\/\/tdd.caelum.com.br\/\" target=\"_blank\" rel=\"noopener\">TDD<\/a>.<br \/>\n<a name=\"jasmine\"><\/a><\/p>\n<h2>Jasmine<\/h2>\n<p>Quando trabalhamos com Jasmine, definimos comportamentos, que s\u00e3o conhecidos como\u00a0<em>specs<\/em>. As especifica\u00e7\u00f5es s\u00e3o os testes, que mapeamos para o nosso c\u00f3digo-fonte JavaScript.<\/p>\n<p>Existem algumas formas de baixar e implantar o ambiente de teste Jasmine. Jasmine est\u00e1 no <a href=\"https:\/\/github.com\/jasmine\/jasmine\" target=\"_blank\" rel=\"noopener\">Github<\/a>\u00a0e voc\u00ea pode instalar via\u00a0<em>npm<\/em> direto no seu projeto, ou pode baixar a vers\u00e3o desejada e fazer Standalone.<br \/>\n<a name=\"jasmine-standalone\"><\/a><\/p>\n<h2>Jasmine Standalone<\/h2>\n<ol>\n<li>Vamos entrar na <a href=\"https:\/\/github.com\/jasmine\/jasmine\/releases\" target=\"_blank\" rel=\"noopener\">p\u00e1gina de releases<\/a>, e baixar a vers\u00e3o mais recente (que no momento \u00e9 a 2.9.1).<\/li>\n<li>Crie uma pasta para o projeto de testes<\/li>\n<li>Descompacte a release baixada na pasta que acabou de criar.<\/li>\n<\/ol>\n<p>Ao descompactar voc\u00ea ter\u00e1 uma estrutura como essa:<\/p>\n<p><a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-folder.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"aligncenter wp-image-983 size-medium lazyload\" data-src=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-folder-300x170.png\" alt=\"Arquivos Jasmine standlone\" width=\"300\" height=\"170\" data-srcset=\"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-folder-300x170.png 300w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-folder-768x436.png 768w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-folder-1024x581.png 1024w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-folder.png 1530w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/170;\" \/><\/a><\/p>\n<p>Na pasta\u00a0<em>lib<\/em> ficam os arquivos necess\u00e1rios para o funcionamento do framework,\u00a0<em>spec<\/em> \u00e9 o diret\u00f3rio onde ficar\u00e3o nossos testes e\u00a0<em>src<\/em> \u00e9 o diret\u00f3rio onde fica o c\u00f3digo-fonte que estamos testando.<\/p>\n<p>O arquivo\u00a0<em>SpecRunner.html\u00a0<\/em>\u00e9 o arquivo HTML que ser\u00e1 executado no nosso navegador para executar o teste. Portanto, abra este arquivo no seu navegador.<\/p>\n<p><a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-specrunner-default.png\"><img decoding=\"async\" class=\"aligncenter wp-image-984 size-medium lazyload\" data-src=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-specrunner-default-300x108.png\" alt=\"Teste executado\" width=\"300\" height=\"108\" data-srcset=\"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-specrunner-default-300x108.png 300w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-specrunner-default-768x277.png 768w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-specrunner-default-1024x369.png 1024w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-specrunner-default.png 1422w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/108;\" \/><\/a><\/p>\n<p>Vamos agora abrir o c\u00f3digo do arquivo\u00a0<em>SpecRunner<\/em>, para entender como essa p\u00e1gina foi gerada.<\/p>\n<p><a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-specrunner.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"aligncenter wp-image-985 size-medium lazyload\" data-src=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-specrunner-300x201.png\" alt=\"Specrunner.html\" width=\"300\" height=\"201\" data-srcset=\"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-specrunner-300x201.png 300w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-specrunner-768x514.png 768w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-specrunner-1024x685.png 1024w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/201;\" \/><\/a><\/p>\n<p>Na primeira \u00e1rea demarcada s\u00e3o importados os arquivos de c\u00f3digo fonte que ser\u00e3o testados <em>(src).<\/em> E na segunda \u00e1rea demarcada s\u00e3o importados os arquivos de especifica\u00e7\u00e3o, que s\u00e3o os testes (<em>spec<\/em>).<\/p>\n<p>Os arquivos acima, s\u00e3o os arquivos do framework, necess\u00e1rios para executar os testes e formatar a p\u00e1gina da forma como vimos acima.<br \/>\n<a name=\"criando\"><\/a><\/p>\n<h2>Criando primeiro teste em Jasmine<\/h2>\n<p>Vamos criar o nosso Hello World, de uma forma bem simples. Dentro da pasta\u00a0<em>src<\/em>, crie um arquivo com o nome de <span style=\"text-decoration: underline;\">Hello.js<\/span>. J\u00e1 dentro da pasta\u00a0<em>spec<\/em> crie um arquivo com o nome de\u00a0<span style=\"text-decoration: underline;\">hello.spec.js<\/span>.<\/p>\n<p>Vamos atualizar tamb\u00e9m o nosso arquivo\u00a0<em>SpecRunner<\/em> retirando a chamada dos arquivos de exemplo (Player e Song) e importando os arquivos que acabamos de criar. Ele vai ficar dessa forma:<\/p>\n<p><a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-specrunner-editado.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"aligncenter wp-image-986 size-medium lazyload\" data-src=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-specrunner-editado-300x209.png\" alt=\"SpecRunner editado\" width=\"300\" height=\"209\" data-srcset=\"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-specrunner-editado-300x209.png 300w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-specrunner-editado-768x535.png 768w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-specrunner-editado-1024x714.png 1024w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-specrunner-editado.png 2012w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/209;\" \/><\/a><\/p>\n<p>Como nossos arquivos ainda est\u00e3o vazios, se voc\u00ea atualizar o SpecRunner no navegador, ver\u00e1 a informa\u00e7\u00e3o de que n\u00e3o tem nenhum teste (spec) definido.<br \/>\n<a name=\"spec\"><\/a><\/p>\n<h3>Criando a especifica\u00e7\u00e3o de teste<\/h3>\n<p>Vamos criar um teste muito simples. Esse teste deve validar se ao enviar uma string, \u00e9 retornada uma string que inclua o nome que enviamos.<\/p>\n<p>Um grupo de testes, \u00e9 definido como\u00a0<em>describe<\/em>. Dentro do describe inserimos uma fun\u00e7\u00e3o com as vari\u00e1veis, fun\u00e7\u00f5es e os testes que desejamos executar. Cada teste, \u00e9 definido como\u00a0<em>it<\/em>. Dentro de cada it inserimos uma fun\u00e7\u00e3o com a valida\u00e7\u00e3o desejada.<\/p>\n<p><script async src=\"\/\/jsfiddle.net\/andrefelizardo\/cjtecfe4\/embed\/js\/dark\/\"><\/script><\/p>\n<p>Depois de salvar, podemos voltar no nosso navegador e executar. Veremos que nosso teste n\u00e3o passou. A mensagem de erro diz: &#8220;hello is not defined&#8221;&#8221;<\/p>\n<p>Ent\u00e3o vamos corrigir isso, declarando hello.<\/p>\n<p>&nbsp;<\/p>\n<p><script async src=\"\/\/jsfiddle.net\/andrefelizardo\/cjtecfe4\/1\/embed\/js\/dark\/\"><\/script><\/p>\n<p>&nbsp;<\/p>\n<p>Mesmo assim o erro continua, mas agora ele diz que encontrou uma exce\u00e7\u00e3o de declara\u00e7\u00e3o. Claro, n\u00f3s n\u00e3o criamos um objeto hello, mas estamos instanciando ele. Ent\u00e3o vamos criar nosso objeto Hello.<br \/>\n<a name=\"src\"><\/a><\/p>\n<h3>Criando nosso source<\/h3>\n<p>Abra o arquivo Hello.js, dentro da pasta\u00a0<em>src<\/em> e vamos criar o construtor do objeto Hello.<\/p>\n<p>&nbsp;<\/p>\n<p><script async src=\"\/\/jsfiddle.net\/andrefelizardo\/6sb1ow8v\/1\/embed\/js\/dark\/\"><\/script><\/p>\n<p>Estamos quase l\u00e1. Atualizando o teste no navegador, agora ele diz que\u00a0<em>hello.digaOi\u00a0<\/em>n\u00e3o \u00e9 uma fun\u00e7\u00e3o. E faz sentido, n\u00f3s realmente n\u00e3o criamos essa fun\u00e7\u00e3o ainda. Vamos cria-l\u00e1 ent\u00e3o. Al\u00e9m de criar a fun\u00e7\u00e3o, vamos fazer ela retornar a mensagem que desejamos.<\/p>\n<p>&nbsp;<\/p>\n<p><script async src=\"\/\/jsfiddle.net\/andrefelizardo\/6sb1ow8v\/embed\/js\/dark\/\"><\/script><\/p>\n<p>Depois de salvar! Tchar\u00e3n. Atualizando o navegador, agora est\u00e1 tudo verde! 1 spec, 0 failures. Isso quer dizer que nosso teste aconteceu como o esperado! No mesmo arquivo de spec, voc\u00ea pode ter v\u00e1rios conjuntos de testes e v\u00e1rios testes.<\/p>\n<p>Esse foi s\u00f3 o in\u00edcio, mas Jasmine tem muitos outros recursos para controlar o escopo dos testes, criar <em>espi\u00f5es<\/em> e v\u00e1rios outros. Para aprofundar mais, voc\u00ea pode olhar a <a href=\"https:\/\/jasmine.github.io\/api\/2.9\/global\" target=\"_blank\" rel=\"noopener\">documenta\u00e7\u00e3o do Jasmine<\/a>.<\/p>\n<h3><\/h3>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Conforme evolu\u00edmos na complexidade das aplica\u00e7\u00f5es de front-end que desenvolvemos, uma necessidade come\u00e7a a se tornar \u00f3bvia: testar o c\u00f3digo JavaScript. Jasmine \u00e9 um framework exatamente para resolver essa necessidade. Jasmine \u00e9 um framework de testes para o c\u00f3digo JavaScript, que adere aos conceitos<\/p>\n","protected":false},"author":1,"featured_media":988,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[117,5],"tags":[141,93,52,114,55,56,140],"class_list":["post-981","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev","category-tecnologia","tag-bdd","tag-desenvolvimento","tag-front-end","tag-frontend","tag-javascript","tag-js","tag-tdd"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Jasmine - Testando seu c\u00f3digo JavaScript - Blog do Andr\u00e9 Felizardo<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.andrefelizardo.com.br\/blog\/jasmine-testando-seu-codigo-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Jasmine - Testando seu c\u00f3digo JavaScript - Blog do Andr\u00e9 Felizardo\" \/>\n<meta property=\"og:description\" content=\"Conforme evolu\u00edmos na complexidade das aplica\u00e7\u00f5es de front-end que desenvolvemos, uma necessidade come\u00e7a a se tornar \u00f3bvia: testar o c\u00f3digo JavaScript. Jasmine \u00e9 um framework exatamente para resolver essa necessidade. Jasmine \u00e9 um framework de testes para o c\u00f3digo JavaScript, que adere aos conceitos\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.andrefelizardo.com.br\/blog\/jasmine-testando-seu-codigo-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog do Andr\u00e9 Felizardo\" \/>\n<meta property=\"article:published_time\" content=\"2018-02-03T14:49:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-02-03T14:53:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-logo.png\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"393\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Andr\u00e9 Felizardo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andr\u00e9 Felizardo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/jasmine-testando-seu-codigo-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/jasmine-testando-seu-codigo-javascript\\\/\"},\"author\":{\"name\":\"Andr\u00e9 Felizardo\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\"},\"headline\":\"Jasmine &#8211; Testando seu c\u00f3digo JavaScript\",\"datePublished\":\"2018-02-03T14:49:06+00:00\",\"dateModified\":\"2018-02-03T14:53:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/jasmine-testando-seu-codigo-javascript\\\/\"},\"wordCount\":761,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/jasmine-testando-seu-codigo-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/02\\\/jasmine-logo.png\",\"keywords\":[\"bdd\",\"desenvolvimento\",\"front-end\",\"frontend\",\"javascript\",\"js\",\"tdd\"],\"articleSection\":[\"Dev\",\"Tecnologia\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/jasmine-testando-seu-codigo-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/jasmine-testando-seu-codigo-javascript\\\/\",\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/jasmine-testando-seu-codigo-javascript\\\/\",\"name\":\"Jasmine - Testando seu c\u00f3digo JavaScript - Blog do Andr\u00e9 Felizardo\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/jasmine-testando-seu-codigo-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/jasmine-testando-seu-codigo-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/02\\\/jasmine-logo.png\",\"datePublished\":\"2018-02-03T14:49:06+00:00\",\"dateModified\":\"2018-02-03T14:53:45+00:00\",\"author\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/jasmine-testando-seu-codigo-javascript\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/jasmine-testando-seu-codigo-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/jasmine-testando-seu-codigo-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/02\\\/jasmine-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/02\\\/jasmine-logo.png\",\"width\":750,\"height\":393},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/jasmine-testando-seu-codigo-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Jasmine &#8211; Testando seu c\u00f3digo JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#website\",\"url\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/\",\"name\":\"Blog do Andr\u00e9 Felizardo\",\"description\":\"Programa\u00e7\u00e3o de dev para dev\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\",\"name\":\"Andr\u00e9 Felizardo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"caption\":\"Andr\u00e9 Felizardo\"},\"sameAs\":[\"http:\\\/\\\/www.andrefelizardo.com.br\"],\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/author\\\/andrefelizardo\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Jasmine - Testando seu c\u00f3digo JavaScript - Blog do Andr\u00e9 Felizardo","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.andrefelizardo.com.br\/blog\/jasmine-testando-seu-codigo-javascript\/","og_locale":"pt_BR","og_type":"article","og_title":"Jasmine - Testando seu c\u00f3digo JavaScript - Blog do Andr\u00e9 Felizardo","og_description":"Conforme evolu\u00edmos na complexidade das aplica\u00e7\u00f5es de front-end que desenvolvemos, uma necessidade come\u00e7a a se tornar \u00f3bvia: testar o c\u00f3digo JavaScript. Jasmine \u00e9 um framework exatamente para resolver essa necessidade. Jasmine \u00e9 um framework de testes para o c\u00f3digo JavaScript, que adere aos conceitos","og_url":"https:\/\/www.andrefelizardo.com.br\/blog\/jasmine-testando-seu-codigo-javascript\/","og_site_name":"Blog do Andr\u00e9 Felizardo","article_published_time":"2018-02-03T14:49:06+00:00","article_modified_time":"2018-02-03T14:53:45+00:00","og_image":[{"width":750,"height":393,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-logo.png","type":"image\/png"}],"author":"Andr\u00e9 Felizardo","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Andr\u00e9 Felizardo","Est. tempo de leitura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/jasmine-testando-seu-codigo-javascript\/#article","isPartOf":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/jasmine-testando-seu-codigo-javascript\/"},"author":{"name":"Andr\u00e9 Felizardo","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b"},"headline":"Jasmine &#8211; Testando seu c\u00f3digo JavaScript","datePublished":"2018-02-03T14:49:06+00:00","dateModified":"2018-02-03T14:53:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/jasmine-testando-seu-codigo-javascript\/"},"wordCount":761,"commentCount":0,"image":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/jasmine-testando-seu-codigo-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-logo.png","keywords":["bdd","desenvolvimento","front-end","frontend","javascript","js","tdd"],"articleSection":["Dev","Tecnologia"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.andrefelizardo.com.br\/blog\/jasmine-testando-seu-codigo-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/jasmine-testando-seu-codigo-javascript\/","url":"https:\/\/www.andrefelizardo.com.br\/blog\/jasmine-testando-seu-codigo-javascript\/","name":"Jasmine - Testando seu c\u00f3digo JavaScript - Blog do Andr\u00e9 Felizardo","isPartOf":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/jasmine-testando-seu-codigo-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/jasmine-testando-seu-codigo-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-logo.png","datePublished":"2018-02-03T14:49:06+00:00","dateModified":"2018-02-03T14:53:45+00:00","author":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b"},"breadcrumb":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/jasmine-testando-seu-codigo-javascript\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.andrefelizardo.com.br\/blog\/jasmine-testando-seu-codigo-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/jasmine-testando-seu-codigo-javascript\/#primaryimage","url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-logo.png","contentUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-logo.png","width":750,"height":393},{"@type":"BreadcrumbList","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/jasmine-testando-seu-codigo-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"http:\/\/www.andrefelizardo.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Jasmine &#8211; Testando seu c\u00f3digo JavaScript"}]},{"@type":"WebSite","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#website","url":"http:\/\/www.andrefelizardo.com.br\/blog\/","name":"Blog do Andr\u00e9 Felizardo","description":"Programa\u00e7\u00e3o de dev para dev","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.andrefelizardo.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b","name":"Andr\u00e9 Felizardo","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","contentUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","caption":"Andr\u00e9 Felizardo"},"sameAs":["http:\/\/www.andrefelizardo.com.br"],"url":"https:\/\/www.andrefelizardo.com.br\/blog\/author\/andrefelizardo\/"}]}},"jetpack_featured_media_url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-logo.png","jetpack_shortlink":"https:\/\/wp.me\/p6EP66-fP","jetpack-related-posts":[{"id":438,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/o-que-e-angularjs\/","url_meta":{"origin":981,"position":0},"title":"O que \u00e9 AngularJS","author":"Andr\u00e9 Felizardo","date":"14 de dezembro de 2015","format":false,"excerpt":"AngularJS \u00e9 um framework para o desenvolvimento de aplica\u00e7\u00f5es web, utilizando a o JavaScript.\u00a0Seu objetivo \u00e9 aumentar aplicativos que podem ser acessados por um navegador web, sob o padr\u00e3o model\u2013view\u2013controller (MVC), em um esfor\u00e7o para facilitar tanto o desenvolvimento quanto o teste dos aplicativos. O que \u00e9 AngularJS? Hist\u00f3ria do\u2026","rel":"","context":"Em &quot;Dicas&quot;","block_context":{"text":"Dicas","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/dicas\/"},"img":{"alt_text":"AngularJS","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/12\/angularjs.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/12\/angularjs.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/12\/angularjs.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/12\/angularjs.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/12\/angularjs.jpg?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/12\/angularjs.jpg?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":1152,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/web-components-guia-geral\/","url_meta":{"origin":981,"position":1},"title":"Web Components \u2013 Guia Geral","author":"Andr\u00e9 Felizardo","date":"20 de mar\u00e7o de 2020","format":false,"excerpt":"Neste guia veremos o que s\u00e3o web components, quando usar, sua estrutura e tamb\u00e9m um crash course criando um web component do zero que \u00e9 um card Pok\u00e9mon, com v\u00e1rios recursos interessantes. O que s\u00e3o web components Web Components s\u00e3o elementos customizados reutiliz\u00e1veis constru\u00eddos com diferentes tecnologias para serem utilizados\u2026","rel":"","context":"Em &quot;Dev&quot;","block_context":{"text":"Dev","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/dev\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":943,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/javascript-comecando-do-jeito-certo\/","url_meta":{"origin":981,"position":2},"title":"JavaScript &#8211; Come\u00e7ando do jeito certo","author":"Andr\u00e9 Felizardo","date":"30 de novembro de 2017","format":false,"excerpt":"O que \u00e9 JavaScript? JavaScript \u00e9 uma linguagem de programa\u00e7\u00e3o, que foi criada originalmente para rodar em navegadores. Na tr\u00edade do Front-end, a linguagem \u00e9 respons\u00e1vel por interagir com o usu\u00e1rio (como mensagens de erro e outros), sem a necessidade das informa\u00e7\u00f5es irem at\u00e9 o servidor. O que \u00e9 JavaScript?\u2026","rel":"","context":"Em &quot;Dev&quot;","block_context":{"text":"Dev","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/dev\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/11\/javascript-comecando_jeito_certo.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/11\/javascript-comecando_jeito_certo.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/11\/javascript-comecando_jeito_certo.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/11\/javascript-comecando_jeito_certo.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":963,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/o-que-e-vue-js\/","url_meta":{"origin":981,"position":3},"title":"O que \u00e9 Vue.js","author":"Andr\u00e9 Felizardo","date":"10 de janeiro de 2018","format":false,"excerpt":"Vue.js \u00e9 uma biblioteca\u00a0JavaScript\u00a0acess\u00edvel, vers\u00e1til e perform\u00e1tica. E apesar do site oficial dizer que Vue.js \u00e9 um framework JavaScript Progressivo, eu j\u00e1 vou come\u00e7ar discordando :) Entendemos por framework, aquela solu\u00e7\u00e3o 'fechada' quando voc\u00ea j\u00e1 tem definido por exemplo a estrutura de diret\u00f3rios, ou a forma como voc\u00ea faz uma\u2026","rel":"","context":"Em &quot;Dev&quot;","block_context":{"text":"Dev","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/dev\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/01\/vuejs.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/01\/vuejs.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/01\/vuejs.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/01\/vuejs.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":993,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/javascript-reduce\/","url_meta":{"origin":981,"position":4},"title":"JavaScript &#8211; Reduce","author":"Andr\u00e9 Felizardo","date":"5 de abril de 2018","format":false,"excerpt":"JavaScript Reduce \u00e9 um dos m\u00e9todos recentes de programa\u00e7\u00e3o funcional que a linguagem possui. Ele foi definido no EcmaScript 2015, e \u00e9 um m\u00e9todo de arrays. Acesse aqui para entender um pouco mais dessa hist\u00f3ria do JavaScript. Se voc\u00ea n\u00e3o entende muito bem sobre programa\u00e7\u00e3o funcional, deixa um coment\u00e1rio que\u2026","rel":"","context":"Em &quot;Dev&quot;","block_context":{"text":"Dev","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/dev\/"},"img":{"alt_text":"Capa do blog para JavaScript reduce","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/04\/javascript-reduce.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/04\/javascript-reduce.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/04\/javascript-reduce.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/04\/javascript-reduce.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":799,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/angular-2-nao-continuacao-do-angular-1\/","url_meta":{"origin":981,"position":5},"title":"Angular 2 &#8211; A n\u00e3o continua\u00e7\u00e3o do Angular 1","author":"Andr\u00e9 Felizardo","date":"15 de janeiro de 2017","format":false,"excerpt":"T\u00e1 estudando Angular 2? N\u00e3o? Fica ligado que a gente j\u00e1 est\u00e1 no Angular 4 beta 3! Angular 2 foi oficialmente lan\u00e7ado em setembro de 2016. Mas tamb\u00e9m n\u00e3o precisa ficar t\u00e3o preocupado. De qualquer forma vamos colocar os pingos nos is\u00a0pra voc\u00ea entender de uma vez por toda o\u2026","rel":"","context":"Em &quot;Dev&quot;","block_context":{"text":"Dev","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/dev\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/01\/angular2.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/01\/angular2.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/01\/angular2.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/01\/angular2.png?resize=700%2C400&ssl=1 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts\/981","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/comments?post=981"}],"version-history":[{"count":0,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts\/981\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/media\/988"}],"wp:attachment":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/media?parent=981"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/categories?post=981"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/tags?post=981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}