AngularJS + Jasmine でテストに入門する準備。

とりあえず動かしたいなと思って AngularJS を動かしている HTML に describe などをコピペすると Uncaught ReferenceError: describe is not defined などと言われる。

先生方におたずねすると angular-mocks.js を読み込みなさいと言われるが、それでもだめ。Jasmine 本体を別途ちゃんと読み込まないとダメなのでした。

Jasmine は AngularJS とちがって勝手に動き出さないので、サンプルから起動部分をコピペしてとりあえず動かす。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="/css/jasmine.css">
<script src="/js/jasmine.js"></script>
<script src="/js/jasmine-html.js"></script>
<script src="/js/angular.js"></script>
<script src="/js/angular-mocks.js"></script>
<script>
	angular.module('app', [])
		.factory('model', function () {
			var store = [];
			return {
				add:function (thing) {
					store.push(thing);
				},
				getAdded:function () {
					return store;
				}
			};
		});

describe('test', function () { var model; beforeEach(module('app')); beforeEach(inject(function (model) { model = model; })); it('add and store', function () { var thing = {a : 'b'}; model.add(thing); expect(model.getAdded()) .toContain(thing); }); });

(function() { var jasmineEnv = jasmine.getEnv(); jasmineEnv.updateInterval = 1000;

var htmlReporter = new jasmine.HtmlReporter();

jasmineEnv.addReporter(htmlReporter);

jasmineEnv.specFilter = function(spec) { return htmlReporter.specFilter(spec); };

var currentWindowOnload = window.onload;

window.onload = function() { if (currentWindowOnload) { currentWindowOnload(); } execJasmine(); };

function execJasmine() { jasmineEnv.execute(); }

})(); </script> </head> <body ng-app> </body> </html>