<!DOCTYPE html> <html ng-app> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>controller-test</title> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <link href="https://www.jb51.net/jasmine.css"> <style type="text/css"> .ng-cloak { display: none; } </style> </head> <body> <script src="https://www.jb51.net/angular-1.0.1.js" type="text/javascript"></script> <script src="https://www.jb51.net/angular-scenario-1.0.1.js" type="text/javascript"></script> <script src="https://www.jb51.net/jasmine.js" type="text/javascript"></script> <script src="https://www.jb51.net/jasmine-html.js" type="text/javascript"></script> <script src="https://www.jb51.net/angular-mocks-1.0.1.js" type="text/javascript"></script> <script type="text/javascript"> function MyController($scope) { $scope.spices = [ {"name":"pasilla", "spiciness":"mild"}, {"name":"jalapeno", "spiceiness":"hot hot hot!"}, {"name":"habanero", "spiceness":"LAVA HOT!!"} ]; $scope.spice = "habanero"; } describe("MyController function", function () { describe("MyController", function () { var scope; beforeEach(inject(function ($rootScope, $controller) { scope = $rootScope.$new(); var ctrl = $controller(MyController, {$scope:scope}); })); it('should create "cpices" model with 3 spices', function () { expect(scope.spices.length).toBe(3); }); it('should set the default value of spice', function () { expect(scope.spice).toBe("habanero"); }); }); }); (function () { var jasmineEnv = jasmine.getEnv(); jasmineEnv.updateInterval = 1000; var trivialReporter = new jasmine.TrivialReporter(); jasmineEnv.addReporter(trivialReporter); jasmineEnv.specFilter = function (spec) { return trivialReporter.specFilter(spec); }; var currentWindowOnload = window.onload; window.onload = function () { if (currentWindowOnload) { currentWindowOnload(); } execJasmine(); }; function execJasmine() { jasmineEnv.execute(); } })(); </script> </body> </html>
如果我们需要测试嵌套的controller，我们需要在test中创建与DOM里面相同的scope继承关系。
<!DOCTYPE html> <html ng-app> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>controller-test</title> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <link href="https://www.jb51.net/jasmine.css"> <style type="text/css"> .ng-cloak { display: none; } </style> </head> <body> <script src="https://www.jb51.net/angular-1.0.1.js" type="text/javascript"></script> <script src="https://www.jb51.net/angular-scenario-1.0.1.js" type="text/javascript"></script> <script src="https://www.jb51.net/jasmine.js" type="text/javascript"></script> <script src="https://www.jb51.net/jasmine-html.js" type="text/javascript"></script> <script src="https://www.jb51.net/angular-mocks-1.0.1.js" type="text/javascript"></script> <script type="text/javascript"> function MainCtrl($scope) { $scope.timeOfDay = 'Main时间'; $scope.name = 'Main名称'; } function ChildCtrl($scope) { $scope.name = 'Child名称'; } function BabyCtrl($scope) { $scope.timeOfDay = 'Baby时间'; $scope.name = 'Baby名称'; } describe("MyController", function () { var mainScope,childScope,babyScope; beforeEach(inject(function ($rootScope, $controller) { mainScope = $rootScope.$new(); var mainCtrl = $controller(MainCtrl, {$scope:mainScope}); childScope = mainScope.$new(); var childCtrl = $controller(ChildCtrl, {$scope:childScope}); babyScope = childScope.$new(); var babyCtrl = $controller(BabyCtrl, {$scope:babyScope}); })); it('should have over and selected', function () { expect(mainScope.timeOfDay).toBe("Main时间"); expect(mainScope.name).toBe("Main名称"); expect(childScope.timeOfDay).toBe("Main时间"); expect(childScope.name).toBe("Child名称"); expect(babyScope.timeOfDay).toBe("Baby时间"); expect(babyScope.name).toBe("Baby名称"); }); }); (function () { var jasmineEnv = jasmine.getEnv(); jasmineEnv.updateInterval = 1000; var trivialReporter = new jasmine.TrivialReporter(); jasmineEnv.addReporter(trivialReporter); jasmineEnv.specFilter = function (spec) { return trivialReporter.specFilter(spec); }; var currentWindowOnload = window.onload; window.onload = function () { if (currentWindowOnload) { currentWindowOnload(); } execJasmine(); }; function execJasmine() { jasmineEnv.execute(); } })(); </script> </body> </html>