{"id":2960,"date":"2015-03-30T17:15:54","date_gmt":"2015-03-30T14:15:54","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=2960"},"modified":"2015-03-30T11:33:51","modified_gmt":"2015-03-30T08:33:51","slug":"angularjs-integration-tests-mocks-magic","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/","title":{"rendered":"AngularJS Integration Tests with Mocks and Magic"},"content":{"rendered":"

As a web developer I\u2019m not a huge fan of full end-to-end tests. My opinion is changing with maturing frameworks like protractor<\/a> but I still think looking for a \u201cbutton\u201d with an \u201cid\u201d is a fragile test that may have to change often.<\/p>\n

I am far more interested in what happens when the button is clicked than the button itself, because what starts out as a button might end up as a hyperlink or a block of text or something entirely different.<\/p>\n

\"angularintegration_thumb6\"<\/a><\/p>\n

Data-binding provides a powerful abstraction between presentation logic and the user interface. \u201cApplying a filter\u201d is still presentation logic, but data-binding allows me to expose that as a method on an object and then let the designer worry about the details of what it is bound to. This was an effective way to code and test in the XAML days when we were using \u201cview models\u201d and I find it just as effective on the web.<\/p>\n

For that reason, instead of a true \u201cend-to-end\u201d test, I prefer to enhance my AngularJS unit tests with integration tests. A unit test has no dependencies. I should be able to run it and mock dependencies so that it executes regardless of network connectivity, the presence of a web service or the status of a database. On the other hand, integration tests require a little bit of setup and expect things to be there, whether it is an active service or even a hot database on the backend. I test up to the data-binding, but leave the UI untouched.<\/p>\n

The challenge with Angular is that the ngMock<\/a> library makes it really, really easy to completely abstract the HTTP layer. It also makes it easy to test in general, which is why I like to use it even with my integration tests. The problem is that, as far as I know, I can\u2019t opt-out of the $httpBackend<\/a>. (If I\u2019m wrong and there is a way other than using the end-to-end mock library, let me know!) Don\u2019t get me wrong, it is fantastic for unit tests. To illustrate my point \u2026<\/p>\n

The Unit Test<\/h2>\n

Consider the world\u2019s almost-smallest Angular app that does nothing other than expose an API that calls a service endpoint and returns a value based on whether or not it successfully connected. This is the app:<\/p>\n

\r\n(function (app) {\r\n \r\n    app.factory("oDataSvc", ['$q', '$http', function ($q, $http) {\r\n        return {\r\n            checkEndPoint: function () {\r\n                var deferred = $q.defer();\r\n                $http.get("http:\/\/services.odata.org\/V4\/TripPinServiceRW")\r\n                    .then(function () {\r\n                        deferred.resolve(true);\r\n                    }, function () {\r\n                        deferred.resolve(false);\r\n                    });\r\n                return deferred.promise;\r\n            }\r\n        };\r\n    }]);\r\n \r\n})(angular.module('test', []));\r\n<\/pre>\n
Now I can write a test. First, I\u2019m going to wire up the latest version of Jasmine<\/a> and make sure Jasmine is working.<\/p>\n
\r\n(function() {\r\n \r\n    var url = "http:\/\/services.odata.org\/V4\/TripPinServiceRW";\r\n \r\n    describe("jasmine", function() {\r\n        it("works", function() {\r\n            expect(true).toBe(true);\r\n        });\r\n    });\r\n})();\r\n<\/pre>\n
Now I can set up my unit test. First I want to capture the service and the $httpBackend and verify I\u2019ve handled all requests after each test.<\/p>\n
\r\ndescribe("angular unit test", function() {\r\n \r\n    var oDataService, httpBackend;\r\n \r\n    beforeEach(function() {\r\n        module("test");\r\n    });\r\n \r\n    beforeEach(inject(function($httpBackend, oDataSvc) {\r\n        httpBackend = $httpBackend;\r\n        oDataService = oDataSvc;\r\n    }));\r\n \r\n    afterEach(function() {\r\n        httpBackend.verifyNoOutstandingExpectation();\r\n        httpBackend.verifyNoOutstandingRequest();\r\n    });\r\n});\r\n<\/pre>\n
Then I can make sure I was able to retrieve the service:<\/p>\n
\r\nit("is registered with the module.", function () {\r\n    expect(oDataService).not.toBeNull();\r\n});\r\n<\/pre>\n
Now comes the fun part. I can set up my test but it will hang on the promise until I set up expectations for the backend and then flush it. I can do this all synchronously and test how my service deals with hypothetical response codes. Here\u2019s the example that I use to set up \u201csuccess\u201d:<\/p>\n
\r\ndescribe("checkEndPoint", function() {\r\n \r\n    it("should return true upon successful connection",\r\n        function () {\r\n        oDataService.checkEndPoint()\r\n            .then(function(result) {\r\n                expect(result).toEqual(true);\r\n            }, function() {\r\n                expect(false).toBe(true);\r\n            });\r\n        httpBackend.expectGET(url)\r\n            .respond(200, null);\r\n        httpBackend.flush();\r\n    });\r\n});\r\n<\/pre>\n
The expectation is set in the \u201cexpectGET\u201d method call. The service will block on returning until I call flush, which fires the result based on the expectation I set, which was to return a 200-OK status with no content. You can see the failure example in the jsFiddle<\/a> source.<\/p>\n
The Integration Test<\/h2>\n
The rub comes with an integration test. I\u2019d love to use the mock library because it sets up my module, the injector, and other components beautifully, but I\u2019m stuck with an $http service that relies on the backend. I want the \u201creal\u201d $http<\/a> service. What can I do?<\/p>\n
The answer is that I can use dependency injection to my advantage and play some tricks. In the context of my app, the injector will provide the mocked service. However, I know the core module has the live service. So how can I grab it from the main module and replace it in my mocked module without changing the mocks source?<\/p>\n
Before I grab the service, it is important to understand dependencies. $http relies on the $q<\/a> service (I promise!). The $q service, in turn, relies on the digest loop. In the strange world of a mocked test object, if I manage to call the real $http service it is not going to respond until a digest loop is called.<\/p>\n
\u201cEasy,\u201d you might say. \u201cGet the $rootScope<\/a> and then call $apply.\u201d<\/p>\n
\u201cNot so fast,\u201d is my reply. The $rootScope you probably plan to grab won\u2019t be the same $rootScope used by the $http service we get from the injector. Remember, that is a different \u201ccontainer\u201d that we are accessing because it hasn\u2019t been overwritten in our current container that has the mocks library!<\/p>\n
This is easier to explain with code:<\/p>\n
\r\nbeforeEach(function () {\r\n    var i = angular.injector(["ng"]),\r\n        rs = i.get("$rootScope");\r\n    http = i.get("$http");\r\n \r\n    flush = function () {\r\n        rs.$apply();\r\n    }\r\n \r\n    module("test", function ($provide) {\r\n        $provide.value("$http", http);\r\n        $provide.value("$rootScope", rs);\r\n    });\r\n});\r\n<\/pre>\n
Angular\u2019s modules overwrite their contents with a \u201clast in wins\u201d priority. If you include two module dependencies with the same service, the last one wins and you lose the original. To get the live $http, I need to create a new container. That container is completely isolated from the one I\u2019m using to test.<\/p>\n
Therefore I need to grab that container\u2019s $rootScope as well. The flush method gives me a reusable function I can easily use throughout my code. When I mock the module for the integration test, I intercept the provider by using the $provide<\/a> service to replace the ones already there.<\/p>\n
The replacement of $rootScope is important. It\u2019s not good enough to capture the flush method because that will just run a digest in the original container. By making that $rootScope part of my current container, I ensure it is the one used all of the way down the dependency chain (and for digests in my tests). If I reference $q in my tests I\u2019ll overwrite it from the original container too.<\/p>\n
Now my test doesn\u2019t configure expectations but is a true integration test. I am expecting the sample service to be up, and for the service call to return \u201ctrue.\u201d Notice that I need to call this asynchronously, so I take advantage of the oh-so-easy asynchronous syntax in the latest Jasmine (\u201cpass done, then call it when you are.\u201d)<\/p>\n
\r\nit("should return true to verify the service is up",\r\n    function (done) {\r\n    oDataService.checkEndPoint()\r\n        .then(function (result) {\r\n            expect(result).toEqual(true);\r\n            done();\r\n        }, function () {\r\n            expect(false).toBe(true);\r\n            done();\r\n        });\r\n    flush();\r\n});\r\n<\/pre>\n
That\u2019s it. Using this method, I can take advantage all mocks has to offer while still integrating with my live web API to ensure service calls are working. This is what I call a \u201cbeneath the surface\u201d test. I\u2019m testing through the data bound model, ensuring that the test flows through to the database, etc., but again I\u2019m testing what a function does, not how it is wired to the UI.<\/p>\n
To see the unit test and integration test in action, check out the jsFiddle<\/a>. Check out your network and notice the service is really being called for the integration test.<\/p>\n
\"network_thumb2\"<\/a><\/p>\n
If you see several lines, it\u2019s because it redirects to generate a \u201csession\u201d for the service and then makes the final call (307 \u25ba 302 \u25ba 200).<\/p>\n
If you are a fan of integration tests and struggled with this in your AngularJS tests I hope this was helpful. If you have a different approach then please share it in the comments below!<\/p>\n
\n\n\n\n
Reference: <\/span><\/td>\nAngularJS Integration Tests with Mocks and Magic<\/a> from our WCG partner<\/a> Jeremy Likness at the C#er : IMage<\/a> blog.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
As a web developer I\u2019m not a huge fan of full end-to-end tests. My opinion is changing with maturing frameworks like protractor but I still think looking for a \u201cbutton\u201d with an \u201cid\u201d is a fragile test that may have to change often. I am far more interested in what happens when the button is …<\/p>\n","protected":false},"author":40,"featured_media":918,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[44,121],"class_list":["post-2960","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-js","tag-jasmine","tag-testing"],"yoast_head":"\nAngularJS Integration Tests with Mocks and Magic - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"As a web developer I\u2019m not a huge fan of full end-to-end tests. My opinion is changing with maturing frameworks like protractor but I still think looking\" \/>\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.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AngularJS Integration Tests with Mocks and Magic - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"As a web developer I\u2019m not a huge fan of full end-to-end tests. My opinion is changing with maturing frameworks like protractor but I still think looking\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-30T14:15:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jasminejs-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jeremy Likness\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/jeremylikness\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Likness\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/\"},\"author\":{\"name\":\"Jeremy Likness\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/2cd31c082e3e1cc5f595ba18a6e03a43\"},\"headline\":\"AngularJS Integration Tests with Mocks and Magic\",\"datePublished\":\"2015-03-30T14:15:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/\"},\"wordCount\":1468,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jasminejs-logo.jpg\",\"keywords\":[\"Jasmine\",\"Testing\"],\"articleSection\":[\"Angular.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/\",\"name\":\"AngularJS Integration Tests with Mocks and Magic - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jasminejs-logo.jpg\",\"datePublished\":\"2015-03-30T14:15:54+00:00\",\"description\":\"As a web developer I\u2019m not a huge fan of full end-to-end tests. My opinion is changing with maturing frameworks like protractor but I still think looking\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jasminejs-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jasminejs-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Angular.js\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"AngularJS Integration Tests with Mocks and Magic\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/2cd31c082e3e1cc5f595ba18a6e03a43\",\"name\":\"Jeremy Likness\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b4d8ee78925818e3f7a4d0d82df06d34a2b76aa4d260a1f4b67dc0553efbf1b6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b4d8ee78925818e3f7a4d0d82df06d34a2b76aa4d260a1f4b67dc0553efbf1b6?s=96&d=mm&r=g\",\"caption\":\"Jeremy Likness\"},\"description\":\"Jeremy Likness is a principal architect at iVision, Inc. He has been building enterprise applications using the Microsoft stack for 20 years with a focus on web-based solutions for the past 15. A prolific author and speaker, Jeremy's mission is to empower developers to create success in their careers through learning and growth.\",\"sameAs\":[\"http:\/\/csharperimage.jeremylikness.com\/\",\"http:\/\/linkedin.com\/in\/jeremylikness\",\"https:\/\/x.com\/https:\/\/twitter.com\/jeremylikness\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/jeremy-likness\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AngularJS Integration Tests with Mocks and Magic - Web Code Geeks - 2026","description":"As a web developer I\u2019m not a huge fan of full end-to-end tests. My opinion is changing with maturing frameworks like protractor but I still think looking","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.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/","og_locale":"en_US","og_type":"article","og_title":"AngularJS Integration Tests with Mocks and Magic - Web Code Geeks - 2026","og_description":"As a web developer I\u2019m not a huge fan of full end-to-end tests. My opinion is changing with maturing frameworks like protractor but I still think looking","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2015-03-30T14:15:54+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jasminejs-logo.jpg","type":"image\/jpeg"}],"author":"Jeremy Likness","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/jeremylikness","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Jeremy Likness","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/"},"author":{"name":"Jeremy Likness","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/2cd31c082e3e1cc5f595ba18a6e03a43"},"headline":"AngularJS Integration Tests with Mocks and Magic","datePublished":"2015-03-30T14:15:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/"},"wordCount":1468,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jasminejs-logo.jpg","keywords":["Jasmine","Testing"],"articleSection":["Angular.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/","name":"AngularJS Integration Tests with Mocks and Magic - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jasminejs-logo.jpg","datePublished":"2015-03-30T14:15:54+00:00","description":"As a web developer I\u2019m not a huge fan of full end-to-end tests. My opinion is changing with maturing frameworks like protractor but I still think looking","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jasminejs-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jasminejs-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-integration-tests-mocks-magic\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Angular.js","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/"},{"@type":"ListItem","position":4,"name":"AngularJS Integration Tests with Mocks and Magic"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/2cd31c082e3e1cc5f595ba18a6e03a43","name":"Jeremy Likness","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b4d8ee78925818e3f7a4d0d82df06d34a2b76aa4d260a1f4b67dc0553efbf1b6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b4d8ee78925818e3f7a4d0d82df06d34a2b76aa4d260a1f4b67dc0553efbf1b6?s=96&d=mm&r=g","caption":"Jeremy Likness"},"description":"Jeremy Likness is a principal architect at iVision, Inc. He has been building enterprise applications using the Microsoft stack for 20 years with a focus on web-based solutions for the past 15. A prolific author and speaker, Jeremy's mission is to empower developers to create success in their careers through learning and growth.","sameAs":["http:\/\/csharperimage.jeremylikness.com\/","http:\/\/linkedin.com\/in\/jeremylikness","https:\/\/x.com\/https:\/\/twitter.com\/jeremylikness"],"url":"https:\/\/www.webcodegeeks.com\/author\/jeremy-likness\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/2960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=2960"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/2960\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/918"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=2960"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=2960"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=2960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}