{"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":"http:\/\/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=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-folder-300x170.png 300w, http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-folder-768x436.png 768w, http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-folder-1024x581.png 1024w, http:\/\/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=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-specrunner-default-300x108.png 300w, http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-specrunner-default-768x277.png 768w, http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-specrunner-default-1024x369.png 1024w, http:\/\/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=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-specrunner-300x201.png 300w, http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-specrunner-768x514.png 768w, http:\/\/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=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-specrunner-editado-300x209.png 300w, http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-specrunner-editado-768x535.png 768w, http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-specrunner-editado-1024x714.png 1024w, http:\/\/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 v28.4 - 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\":\"http:\\\/\\\/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\":\"http:\\\/\\\/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\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/02\\\/jasmine-logo.png\",\"contentUrl\":\"http:\\\/\\\/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\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"url\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"contentUrl\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"caption\":\"Andr\u00e9 Felizardo\"},\"sameAs\":[\"http:\\\/\\\/www.andrefelizardo.com.br\"],\"url\":\"http:\\\/\\\/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":"http:\/\/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":"http:\/\/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":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-logo.png","contentUrl":"http:\/\/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":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","url":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","contentUrl":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","caption":"Andr\u00e9 Felizardo"},"sameAs":["http:\/\/www.andrefelizardo.com.br"],"url":"http:\/\/www.andrefelizardo.com.br\/blog\/author\/andrefelizardo\/"}]}},"jetpack_shortlink":"https:\/\/wp.me\/p6EP66-fP","jetpack-related-posts":[{"id":438,"url":"http:\/\/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":"http:\/\/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","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/12\/angularjs.jpg?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/12\/angularjs.jpg?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/12\/angularjs.jpg?resize=700%2C400 2x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/12\/angularjs.jpg?resize=1050%2C600 3x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/12\/angularjs.jpg?resize=1400%2C800 4x"},"classes":[]},{"id":1152,"url":"http:\/\/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":"http:\/\/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","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 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=700%2C400 2x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=1050%2C600 3x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=1400%2C800 4x"},"classes":[]},{"id":943,"url":"http:\/\/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":"http:\/\/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","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 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/11\/javascript-comecando_jeito_certo.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/11\/javascript-comecando_jeito_certo.png?resize=700%2C400 2x"},"classes":[]},{"id":963,"url":"http:\/\/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":"http:\/\/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","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/01\/vuejs.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/01\/vuejs.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/01\/vuejs.png?resize=700%2C400 2x"},"classes":[]},{"id":683,"url":"http:\/\/www.andrefelizardo.com.br\/blog\/criando-pagina-com-rolagem-por-secao-html-css-jquery\/","url_meta":{"origin":981,"position":4},"title":"Criando p\u00e1gina com rolagem por se\u00e7\u00e3o &#8211; HTML, CSS, jQuery","author":"Andr\u00e9 Felizardo","date":"2 de outubro de 2016","format":false,"excerpt":"Continuando a ajuda a meus brothers, depois de manipular os elementos com JavaScript, o meu mesmo amigo queria fazer um site com se\u00e7\u00f5es, onde toda vez que clicasse em algum bot\u00e3o, ele rolaria para a pr\u00f3xima se\u00e7\u00e3o. A ideia inicial dele era fazer com \u00e2ncoras, e sem JavaScript ou jQuery,\u2026","rel":"","context":"Em &quot;Curiosidades&quot;","block_context":{"text":"Curiosidades","link":"http:\/\/www.andrefelizardo.com.br\/blog\/category\/curiosidades\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/10\/html-css-jquery.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":993,"url":"http:\/\/www.andrefelizardo.com.br\/blog\/javascript-reduce\/","url_meta":{"origin":981,"position":5},"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":"http:\/\/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","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 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/04\/javascript-reduce.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/04\/javascript-reduce.png?resize=700%2C400 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-logo.png","_links":{"self":[{"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts\/981","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/comments?post=981"}],"version-history":[{"count":0,"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts\/981\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/media\/988"}],"wp:attachment":[{"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/media?parent=981"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/categories?post=981"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/tags?post=981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}