{"id":2176,"date":"2022-08-30T15:22:41","date_gmt":"2022-08-30T15:22:41","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/01\/04\/how-to-test-angular-controller-with-jstestdriver-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:22:41","modified_gmt":"2022-08-30T15:22:41","slug":"how-to-test-angular-controller-with-jstestdriver-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/how-to-test-angular-controller-with-jstestdriver-collection-of-common-programming-errors\/","title":{"rendered":"How to test angular controller with JsTestDriver?-Collection of common programming errors"},"content":{"rendered":"

I have the following code:<\/p>\n

function TestStats($xhr) {\n    $xhr(\n            'GET',\n            '\/test-dashboard\/get-projects.json',\n            angular.bind(this, function(code, response) {\n                this.projects = response.projects;\n                this.projects.splice(0, 0, undefined);\n            }));\n\n    this.$watch('project', angular.bind(this, function() {\n        this.testClassStats = undefined;\n\n        if (this.project) {\n            $xhr(\n                    'GET',\n                    '\/test-dashboard\/get-test-stats.json?project=' + this.project,\n                    angular.bind(this, function(code, response) {\n                        this.testClassStats = response.testClassStats;\n                    }));\n        }\n    }));\n};\n\nTestStats.prototype.greet = function(name) {\n  return \"Hello \" + name + \"!\";\n};\n\nTestStats.$inject = ['$xhr'];\n<\/code><\/pre>\n
and the following test:<\/p>\n
TestDashboardUnitTest = TestCase(\"TestDashboardUnitTest\");\n\nTestDashboardUnitTest.prototype.testAoeu = function() {\n    var xhrStub = function(method, url, callback) {\n    };\n    var testStats = new TestStats(xhrStub);\n    assertEquals(\"Hello World!\", testStats.greet(\"Aoeu\"));\n};\n<\/code><\/pre>\n
and the following config:<\/p>\n
server: http:\/\/localhost:9876\n\nload:\n  - http:\/\/code.jquery.com\/jquery-1.6.2.min.js\n  - http:\/\/code.angularjs.org\/angular-0.9.17.min.js\n  - web\/*.js\n  - test\/*.js\n<\/code><\/pre>\n
When I run the test, JsTestDriver outputs:<\/p>\n
Total 1 tests (Passed: 0; Fails: 0; Errors: 1) (0.00 ms)\n  Chrome 13.0.782.112 Linux: Run 1 tests (Passed: 0; Fails: 0; Errors 1) (0.00 ms)\n    TestDashboardUnitTest.testAoeu error (0.00 ms): TypeError: Object # has no method '$watch'\n      TypeError: Object # has no method '$watch'\n          at new TestStats (http:\/\/127.0.0.1:9876\/test\/web\/test-dashboard.js:13:10)\n          at [object Object].testAoeu (http:\/\/127.0.0.1:9876\/test\/test\/test-dashboard-unit-test.js:9:21)\n\nTests failed: Tests failed. See log for details.\n<\/code><\/pre>\n
What do I need to do to fix this?<\/p>\n
    \n
  1. \n
    From http:\/\/docs.angularjs.org\/#!\/tutorial\/step_05<\/p>\n
    scope = angular.scope();\n$browser = scope.$service('$browser');\n\n$browser.xhr.expectGET('phones\/phones.json')\n    .respond([{name: 'Nexus S'},\n              {name: 'Motorola DROID'}]);\nctrl = scope.$new(PhoneListCtrl);\n<\/code><\/pre>\n
    Don’t do the usual thing and pass in mocks. Instead, let the injection system do the work.<\/p>\n
    Also, be sure to load angular-mocks.js in the jsTestDriver.conf file.<\/p>\n<\/li>\n
  2. \n
    I’m not sure what Angular does, but it seems to me that your problem is in this block of code:<\/p>\n
    this.$watch('project', angular.bind(this, function() {\n    \/\/ snip\n}));\n<\/code><\/pre>\n
    When you are calling this.$watch<\/code> method, you are calling a method of an object instance of a class TestStats<\/code> – the class that is described in the first block of code you provided. I don’t see a method called $watch<\/code> anywhere there, maybe you need some other object reference, not this<\/code>?<\/p>\n<\/li>\n<\/ol>\n
    Originally posted 2014-01-04 02:51:30. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
    I have the following code: function TestStats($xhr) { $xhr( ‘GET’, ‘\/test-dashboard\/get-projects.json’, angular.bind(this, function(code, response) { this.projects = response.projects; this.projects.splice(0, 0, undefined); })); this.$watch(‘project’, angular.bind(this, function() { this.testClassStats = undefined; if (this.project) { $xhr( ‘GET’, ‘\/test-dashboard\/get-test-stats.json?project=’ + this.project, angular.bind(this, function(code, response) { this.testClassStats = response.testClassStats; })); } })); }; TestStats.prototype.greet = function(name) { return “Hello ” […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2176","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/2176","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=2176"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/2176\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=2176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=2176"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=2176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}