測試目的html
測試 controller 須要知道,經過 controller 的 scope 會傳什麼數據到模板中。所以你須要先測試一下 controller 它本身是否正常工做,而後再測試一下數據是否綁到模板中。最好是知道在 controller 執行的時候,你但願 scope 中應該有什麼值。若是你想寫單元測試,那麼它依賴 controller 中的邏輯。E2E 測試也能夠,可是你不能保證 controller 工做正常。因此這章的測試,最好是使用 Midway 測試。json
單元測試api
<!-- lang: js --> // // test/unit/controllers/controllersSpec.js // describe("Unit: Testing Controllers", function() { beforeEach(module('App')); it('should have a VideosCtrl controller', function() { expect(App.VideosCtrl).not.to.equal(null); }); it('should have a VideoCtrl controller', function() { expect(App.VideoCtrl).not.to.equal(null); }); it('should have a WatchedVideosCtrl controller', function() { expect(App.WatchedVideosCtrl).not.to.equal(null); }); it('should have a properly working VideosCtrl controller', inject(function($rootScope, $controller, $httpBackend) { var searchTestAtr = 'cars'; var response = $httpBackend.expectJSONP( 'https://gdata.youtube.com/feeds/api/videos?q=' + searchTestAtr + '&v=2&alt=json&callback=JSON_CALLBACK'); response.respond(null); var $scope = $rootScope.$new(); var ctrl = $controller('VideosCtrl', { $scope : $scope, $routeParams : { q : searchTestAtr } }); })); it('should have a properly working VideoCtrl controller', inject(function($rootScope, $controller, $httpBackend) { var searchID = 'cars'; var response = $httpBackend.expectJSONP( 'https://gdata.youtube.com/feeds/api/videos/' + searchID + '?v=2&alt=json&callback=JSON_CALLBACK'); response.respond(null); var $scope = $rootScope.$new(); var ctrl = $controller('VideoCtrl', { $scope : $scope, $routeParams : { id : searchID } }); })); it('should have a properly working WatchedVideosCtrl controller', inject(function($rootScope, $controller, $httpBackend) { var $scope = $rootScope.$new(); //we're stubbing the onReady event $scope.onReady = function() { }; var ctrl = $controller('WatchedVideosCtrl', { $scope : $scope }); })); });
Midway 測試app
<!-- lang: js --> // // test/midway/controllers/controllersSpec.js // describe("Midway: Testing Controllers", function() { var tester; beforeEach(function() { if(tester) { tester.destroy(); } tester = ngMidwayTester('App'); }); it('should load the VideosCtrl controller properly when /videos route is accessed', function(done) { tester.visit('/videos', function() { tester.path().should.eq('/videos'); var current = tester.inject('$route').current; var controller = current.controller; var scope = current.scope; expect(controller).to.eql('VideosCtrl'); done(); }); }); it('should load the WatchedVideosCtrl controller properly when /watched-videos route is accessed', function(done) { tester.visit('/watched-videos', function() { tester.path().should.eq('/watched-videos'); var current = tester.inject('$route').current; var controller = current.controller; var params = current.params; var scope = current.scope; expect(controller).to.equal('WatchedVideosCtrl'); done(); }); }); });
E2E 測試ide
<!-- lang: js --> // // test/e2e/controllers/controllersSpec.js // describe("E2E: Testing Controllers", function() { beforeEach(function() { browser().navigateTo('/'); }); it('should have a working videos page controller that applies the videos to the scope', function() { browser().navigateTo('#/'); expect(browser().location().path()).toBe("/videos"); expect(element('#ng-view').html()).toContain('data-app-youtube-listings'); }); it('should have a working video page controller that applies the video to the scope', function() { browser().navigateTo('#/videos/WuiHuZq_cg4'); expect(browser().location().path()).toBe("/videos/WuiHuZq_cg4"); expect(element('#ng-view').html()).toContain('app-youtube-embed'); }); });