{"id":159,"date":"2013-07-05T16:23:36","date_gmt":"2013-07-05T16:23:36","guid":{"rendered":"http:\/\/ramandv.com\/blog\/?p=159"},"modified":"2013-07-06T02:23:34","modified_gmt":"2013-07-06T02:23:34","slug":"angularjs-unit-testing-why-karma","status":"publish","type":"post","link":"http:\/\/www.ramandv.com\/blog\/angularjs-unit-testing-why-karma\/","title":{"rendered":"Angularjs Unit testing &#8211; Why Karma"},"content":{"rendered":"\n<!-- Quick Adsense WordPress Plugin: http:\/\/quickadsense.com\/ -->\n<div class=\"e9e85ee105af8a6a4a383deebf1fa216\" data-index=\"1\" style=\"float: none; margin:10px 0 10px 0; text-align:center;\">\n<script type=\"text\/javascript\"><!--\r\ngoogle_ad_client = \"ca-pub-4917982260456644\";\r\n\/* ramandv.com-ad1 *\/\r\ngoogle_ad_slot = \"9226290554\";\r\ngoogle_ad_width = 728;\r\ngoogle_ad_height = 90;\r\n\/\/-->\r\n<\/script>\r\n<script type=\"text\/javascript\"\r\nsrc=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\">\r\n<\/script>\n<\/div>\n<p>There are somany tutorial available on how to write unit test. So you have writtern one simple unit test, but want to know the connection of jasmine, karma and angularjs.<\/p>\n<p>Basically, to test a single angular controller\/service etc, you need to make it as page. And include all the dependencies like jasmine, angular and your source files.<\/p>\n<p>This service\/controller will be called in your tests. So, include those tests in that page. Now, this tests should be called, which will be performed by jasmine specrunner.<\/p>\n<p>Sample jasmine specrunner.html<\/p>\n<pre><code>&lt;!DOCTYPE HTML PUBLIC \"-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN\"\n  \"http:\/\/www.w3.org\/TR\/html4\/loose.dtd\"&gt;\n&lt;html&gt;\n&lt;head&gt;\n  &lt;title&gt;Jasmine Spec Runner&lt;\/title&gt;\n\n  &lt;link rel=\"shortcut icon\" type=\"image\/png\" href=\"lib\/jasmine-1.3.1\/jasmine_favicon.png\"&gt;\n  &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"lib\/jasmine-1.3.1\/jasmine.css\"&gt;\n  &lt;script type=\"text\/javascript\" src=\"lib\/jasmine-1.3.1\/jasmine.js\"&gt;&lt;\/script&gt;\n  &lt;script type=\"text\/javascript\" src=\"lib\/jasmine-1.3.1\/jasmine-html.js\"&gt;&lt;\/script&gt;\n\n  &lt;!-- include vendor libs... --&gt;\n  &lt;script type=\"text\/javascript\" src=\"vendor\/angular\/angular.js\"&gt;&lt;\/script&gt;\n  &lt;script type=\"text\/javascript\" src=\"vendor\/angular\/angular-resource.js\"&gt;&lt;\/script&gt;\n  &lt;script type=\"text\/javascript\" src=\"vendor\/angular\/angular-cookies.js\"&gt;&lt;\/script&gt;\n\n  &lt;!-- include source files here... --&gt;\n  &lt;script type=\"text\/javascript\" src=\"src\/Player.js\"&gt;&lt;\/script&gt;\n  &lt;script type=\"text\/javascript\" src=\"src\/Song.js\"&gt;&lt;\/script&gt;\n\n  &lt;!-- include spec files here... --&gt;\n  &lt;script type=\"text\/javascript\" src=\"spec\/SpecHelper.js\"&gt;&lt;\/script&gt;\n  &lt;script type=\"text\/javascript\" src=\"spec\/PlayerSpec.js\"&gt;&lt;\/script&gt;\n\n  &lt;script type=\"text\/javascript\"&gt;\n    (function() {\n      var jasmineEnv = jasmine.getEnv();\n      jasmineEnv.updateInterval = 1000;\n\n      var htmlReporter = new jasmine.HtmlReporter();\n\n      jasmineEnv.addReporter(htmlReporter);\n\n      jasmineEnv.specFilter = function(spec) {\n        return htmlReporter.specFilter(spec);\n      };\n\n      var currentWindowOnload = window.onload;\n\n      window.onload = function() {\n        if (currentWindowOnload) {\n          currentWindowOnload();\n        }\n        execJasmine();\n      };\n\n      function execJasmine() {\n        jasmineEnv.execute();\n      }\n\n    })();\n  &lt;\/script&gt;\n\n&lt;\/head&gt;\n\n&lt;body&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<p>But, if you use karma, creation of this page, launching browser will be taken care by editing a simple config file. It provides many additional features also.<\/p>\n<p>Quote from https:\/\/github.com\/karma-runner\/karma<\/p>\n<pre><code>When should I use Karma?\n\nYou want to test code in real browsers.\nYou want to test code in multiple browsers (desktop, mobile, tablets, etc.).\nYou want to execute your tests locally during development.\nYou want to execute your tests on a continuous integration server.\nYou want to execute your tests on every save.\nYou love your terminal.\nYou dont want your (testing) life to suck.\nYou want to use Istanbul to automagically generate coverage reports.\nYou want to use RequireJS for your source files.\n<\/code><\/pre>\n\n<div style=\"font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>There are somany tutorial available on how to write unit test. So you have writtern one simple unit test, but want to know the connection of jasmine, karma and angularjs. Basically, to test a single angular controller\/service etc, you need &hellip; <a href=\"http:\/\/www.ramandv.com\/blog\/angularjs-unit-testing-why-karma\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[7],"tags":[13,14],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\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.ramandv.com\/blog\/angularjs-unit-testing-why-karma\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angularjs Unit testing - Why Karma - Articles for Developers\" \/>\n<meta property=\"og:description\" content=\"There are somany tutorial available on how to write unit test. So you have writtern one simple unit test, but want to know the connection of jasmine, karma and angularjs. Basically, to test a single angular controller\/service etc, you need &hellip; Continue reading &rarr;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.ramandv.com\/blog\/angularjs-unit-testing-why-karma\/\" \/>\n<meta property=\"og:site_name\" content=\"Articles for Developers\" \/>\n<meta property=\"article:published_time\" content=\"2013-07-05T16:23:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-07-06T02:23:34+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ramandv\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"http:\/\/www.ramandv.com\/blog\/#website\",\"url\":\"http:\/\/www.ramandv.com\/blog\/\",\"name\":\"Articles for Developers\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/www.ramandv.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.ramandv.com\/blog\/angularjs-unit-testing-why-karma\/#webpage\",\"url\":\"https:\/\/www.ramandv.com\/blog\/angularjs-unit-testing-why-karma\/\",\"name\":\"Angularjs Unit testing - Why Karma - Articles for Developers\",\"isPartOf\":{\"@id\":\"http:\/\/www.ramandv.com\/blog\/#website\"},\"datePublished\":\"2013-07-05T16:23:36+00:00\",\"dateModified\":\"2013-07-06T02:23:34+00:00\",\"author\":{\"@id\":\"http:\/\/www.ramandv.com\/blog\/#\/schema\/person\/ca1ede7143462f244081566e6ff97658\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.ramandv.com\/blog\/angularjs-unit-testing-why-karma\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.ramandv.com\/blog\/angularjs-unit-testing-why-karma\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.ramandv.com\/blog\/angularjs-unit-testing-why-karma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Angularjs Unit testing &#8211; Why Karma\"}]},{\"@type\":\"Person\",\"@id\":\"http:\/\/www.ramandv.com\/blog\/#\/schema\/person\/ca1ede7143462f244081566e6ff97658\",\"name\":\"ramandv\",\"url\":\"http:\/\/www.ramandv.com\/blog\/author\/ramandv\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"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.ramandv.com\/blog\/angularjs-unit-testing-why-karma\/","og_locale":"en_US","og_type":"article","og_title":"Angularjs Unit testing - Why Karma - Articles for Developers","og_description":"There are somany tutorial available on how to write unit test. So you have writtern one simple unit test, but want to know the connection of jasmine, karma and angularjs. Basically, to test a single angular controller\/service etc, you need &hellip; Continue reading &rarr;","og_url":"https:\/\/www.ramandv.com\/blog\/angularjs-unit-testing-why-karma\/","og_site_name":"Articles for Developers","article_published_time":"2013-07-05T16:23:36+00:00","article_modified_time":"2013-07-06T02:23:34+00:00","twitter_misc":{"Written by":"ramandv","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"http:\/\/www.ramandv.com\/blog\/#website","url":"http:\/\/www.ramandv.com\/blog\/","name":"Articles for Developers","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.ramandv.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.ramandv.com\/blog\/angularjs-unit-testing-why-karma\/#webpage","url":"https:\/\/www.ramandv.com\/blog\/angularjs-unit-testing-why-karma\/","name":"Angularjs Unit testing - Why Karma - Articles for Developers","isPartOf":{"@id":"http:\/\/www.ramandv.com\/blog\/#website"},"datePublished":"2013-07-05T16:23:36+00:00","dateModified":"2013-07-06T02:23:34+00:00","author":{"@id":"http:\/\/www.ramandv.com\/blog\/#\/schema\/person\/ca1ede7143462f244081566e6ff97658"},"breadcrumb":{"@id":"https:\/\/www.ramandv.com\/blog\/angularjs-unit-testing-why-karma\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.ramandv.com\/blog\/angularjs-unit-testing-why-karma\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.ramandv.com\/blog\/angularjs-unit-testing-why-karma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Angularjs Unit testing &#8211; Why Karma"}]},{"@type":"Person","@id":"http:\/\/www.ramandv.com\/blog\/#\/schema\/person\/ca1ede7143462f244081566e6ff97658","name":"ramandv","url":"http:\/\/www.ramandv.com\/blog\/author\/ramandv\/"}]}},"jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6YZCe-2z","_links":{"self":[{"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/posts\/159"}],"collection":[{"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/comments?post=159"}],"version-history":[{"count":5,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/posts\/159\/revisions"}],"predecessor-version":[{"id":171,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/posts\/159\/revisions\/171"}],"wp:attachment":[{"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/media?parent=159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/categories?post=159"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/tags?post=159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}