AngularJs的TDD

时间 2019-11-22

标签 angularjs tdd 栏目 AngularJS 繁體版

原文原文链接

首先咱们会写一个简单的基于AngularJs的应用。html

html代码: app

<html>工具

<head>测试

</head>ip

<body>get

<div ng-app='demoApp'>it

<div ng-controller='demoController'>io

{{name}}asm

</div>

</body>

</html>

demo.js代码:

var app = angular.module('demoApp', []);

app.controller('demoController', ['$scope', function ($scope) {

}]);

OK。在咱们有了基本的js文件后，咱们就须要写咱们测试文件了。咱们使用的测试工具是karma，karma的配置文件里的frameworks使用的是Jasmine。

在完成karma的配置后，咱们就应当着手写测试文件了。

首先，在写测试的时候，咱们必定要明白本身测试的指望是什么，目标是什么，测试的用例有哪些。当咱们清楚明白地知道本身想要测什么的时候，就以写出优雅的测试代码以及漂亮的功能代码。

开始写测试文件，demo.test.js:

我要测angular的controller, demoController, 因而我就describe('demoController', function () {});

以后我要拿到我要测试的指望目标啊，因而咱们接着写:

describe('demoController', function () {

　　var $controller;

　　beforeEach(function () {

　　　　module('demoApp');

　　　　inject(function ($injector) {

　　　　　　$controller = $injector.get('$controller')

　　　　});

})

写到这里，咱们就要想了，测demoController 的什么呢，因而，咱们case来了,好比说，咱们指望$scope.name 是 'Hello world'：

describe('demoController', function () {

　　var $controller;

　　beforeEach(function () {

　　　　module('demoApp');

　　　　inject(function ($injector) {

　　　　　　$controller = $injector.get('$controller')

　　　　});

　　it('$scope.name should be equal hello world', function () {

　　　　var $scope;

　　　　$scope = {}

　　　　$controller('demoController', {$scope: $scope})

　　　　expect($scope.name).toEqual('Hello world');

　　});

OK，咱们的测试写完了，使用karma命令来跑测试. 99%测试必定会挂，为何呢？由于咱们的demo.js里，demoController中尚未$scope.name.而且咱们指望$scope.name = 'Hello world'.因而，在demo.js里写上：

app.controller('demoController', ['$scope', function ($scope) {

　　$scope.name = 'Hello world';

}]);

运行测试，Bingo！

好了，咱们能够继续TDD了。

写漂亮的测试，写优雅的代码。Make it run.