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

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>