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.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。