requirejsをJasmineと連携させる
最初に、RequireJSが初めてで、Jasmineがさらに新しいことを言いたいと思います。
SpecRunnerに問題があり、JSが必要です。私はUzi KilonとBen Nadelのチュートリアルを（他のいくつかの人と一緒に）続けており、彼らはいくつかの人を助けましたが、まだいくつかの問題があります。
テストでスローされたエラー（特に、エラーの1つ、型エラーを考えることができる）がある場合、スペックランナーhtmlが表示されるようです。これは、javascriptに問題があることを示しています。ただし、これらのエラーを修正すると、HTMLは表示されなくなります。 テストランナーにまったく表示させることができません。この問題を引き起こすコードの問題を誰かが見つけられますか？
これが私のディレクトリ構造です。
Root
|-> lib
|-> jasmine
|-> lib (contains all of the jasmine lib)
|-> spec
|-> src
|-> jquery (jquery js file)
|-> require (require js file)
index.html (spec runner) specRunner.js
SpecRunner（index）HTMLは次のとおりです。
<!doctype html>
<html lang="en">
<head>
<title>Javascript Tests</title>
<link rel="stylesheet" href="lib/jasmine/lib/jasmine.css">
<script src="lib/jasmine/lib/jasmine.js"></script>
<script src="lib/jasmine/lib/jasmine-html.js"></script>
<script src="lib/jquery/jquery.js"></script>
<script data-main="specRunner" src="lib/require/require.js"></script>
<script>
require({ paths: { spec: "lib/jasmine/spec" } }, [
// Pull in all your modules containing unit tests here.
"spec/notepadSpec"
], function () {
jasmine.getEnv().addReporter(new jasmine.HtmlReporter());
jasmine.getEnv().execute();
});
</script>
</head>
<body>
</body>
</html>
specRunner.js（config）
require.config({
urlArgs: 'cb=' + Math.random(),
paths: {
jquery: 'lib/jquery',
jasmine: 'lib/jasmine/lib/jasmine',
'jasmine-html': 'lib/jasmine/lib/jasmine-html',
spec: 'lib/jasmine/spec/'
},
shim: {
jasmine: {
exports: 'jasmine'
},
'jasmine-html': {
deps: ['jasmine'],
exports: 'jasmine'
}
}
});
仕様は次のとおりです。
require(["../lib/jasmine/src/notepad"], function (notepad) {
describe("returns titles", function() {
expect(notepad.noteTitles()).toEqual("");
});
});
メモ帳のソース：
define(['lib/jasmine/src/note'], function (note) {
var notes = [
new note('pick up the kids', 'dont forget to pick up the kids'),
new note('get milk', 'we need two gallons of milk')
];
return {
noteTitles: function () {
var val;
for (var i = 0, ii = notes.length; i < ii; i++) {
//alert(notes[i].title);
val += notes[i].title + ' ';
}
return val;
}
};
});
そして、ノートソース（JIC）：
define(function (){
var note = function(title, content) {
this.title = title;
this.content = content;
};
return note;
});
アプリに関する限り、パスが正しいことを確認しました。これが機能するようになったら、そのパスの設定を試してみてください。
なんとか試行錯誤を繰り返して、これを機能させることができました。主な問題は、仕様を作成するときに、作成する必要がないため、defineを使用することです。
オリジナル：
require(["/lib/jasmine/src/notepad"], function (notepad) {
describe("returns titles", function() {
expect(notepad.noteTitles()).toEqual("pick up the kids get milk");
});
});
ワーキング：
define(["lib/jasmine/src/notepad"], function (notepad) {
describe("returns titles", function () {
it("something", function() {
expect(notepad.noteTitles()).toEqual("pick up the kids get milk ");
});
});
});
いくつかの調査を行った後、RequireJSを使用する場合、require（）に使用させたいものはすべて定義でラップする必要があることが明らかになりました（私は推測しています）。 specRunner.jsファイルでは、テストの実行時にrequireが使用されていることがわかります（したがって、仕様を「定義」する必要があります。
もう1つの問題は、仕様を作成する際に、describe（）AND it（）が必要なことです（投稿された例で説明したような記述だけではありません）。
オリジナル：
describe("returns titles", function() {
expect(notepad.noteTitles()).toEqual("pick up the kids get milk");
});
ワーキング：
describe("returns titles", function () {
it("something", function() {
expect(notepad.noteTitles()).toEqual("pick up the kids get milk ");
});
});
また、テストランナーの存在する場所を変更しましたが、これはリファクタリングであり、テストの結果を変更しませんでした。
繰り返しますが、ここにファイルと変更点があります。
note.js：同じまま
notepad.js：同じまま
index.html：
<!doctype html>
<html lang="en">
<head>
<title>Javascript Tests</title>
<link rel="stylesheet" href="lib/jasmine/lib/jasmine.css">
<script data-main="specRunner" src="lib/require/require.js"></script>
</head>
<body>
</body>
</html>
specRunner.js：
require.config({
urlArgs: 'cb=' + Math.random(),
paths: {
jquery: 'lib/jquery',
'jasmine': 'lib/jasmine/lib/jasmine',
'jasmine-html': 'lib/jasmine/lib/jasmine-html',
spec: 'lib/jasmine/spec/'
},
shim: {
jasmine: {
exports: 'jasmine'
},
'jasmine-html': {
deps: ['jasmine'],
exports: 'jasmine'
}
}
});
require(['jquery', 'jasmine-html'], function ($, jasmine) {
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;
var htmlReporter = new jasmine.HtmlReporter();
jasmineEnv.addReporter(htmlReporter);
jasmineEnv.specFilter = function (spec) {
return htmlReporter.specFilter(spec);
};
var specs = [];
specs.Push('lib/jasmine/spec/notepadSpec');
$(function () {
require(specs, function (spec) {
jasmineEnv.execute();
});
});
});
notepadSpec.js：
define(["lib/jasmine/src/notepad"], function (notepad) {
describe("returns titles", function () {
it("something", function() {
expect(notepad.noteTitles()).toEqual("pick up the kids get milk");
});
});
});
Jasmine 2.0スタンドアロンを使用しているユーザーの代替回答としてこれを追加するだけです。これはJasmine 1.3でも機能すると思いますが、非同期構文は異なり、見苦しいです。
変更したSpecRunner.htmlファイルは次のとおりです。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jasmine Spec Runner v2.0.0</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.0.0/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="lib/jasmine-2.0.0/jasmine.css">
<!--
Notice that I just load Jasmine normally
-->
<script type="text/javascript" src="lib/jasmine-2.0.0/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-2.0.0/jasmine-html.js"></script>
<script type="text/javascript" src="lib/jasmine-2.0.0/boot.js"></script>
<!--
Here we load require.js but we do not use data-main. Instead we will load the
the specs separately. In short we need to load the spec files synchronously for this
to work.
-->
<script type="text/javascript" src="js/vendor/require.min.js"></script>
<!--
I put my require js config inline for simplicity
-->
<script type="text/javascript">
require.config({
baseUrl: 'js',
shim: {
'underscore': {
exports: '_'
},
'react': {
exports: 'React'
}
},
paths: {
jquery: 'vendor/jquery.min',
underscore: 'vendor/underscore.min',
react: 'vendor/react.min'
}
});
</script>
<!--
I put my spec files here
-->
<script type="text/javascript" src="spec/a-spec.js"></script>
<script type="text/javascript" src="spec/some-other-spec.js"></script>
</head>
<body>
</body>
</html>
次に、specファイルの例を示します。
describe("Circular List Operation", function() {
// The CircularList object needs to be loaded by RequireJs
// before we can use it.
var CircularList;
// require.js loads scripts asynchronously, so we can use
// Jasmine 2.0's async support. Basically it entails calling
// the done function once require js finishes loading our asset.
//
// Here I put the require in the beforeEach function to make sure the
// Circular list object is loaded each time.
beforeEach(function(done) {
require(['lib/util'], function(util) {
CircularList = util.CircularList;
done();
});
});
it("should know if list is empty", function() {
var list = new CircularList();
expect(list.isEmpty()).toBe(true);
});
// We can also use the async feature on the it function
// to require assets for a specific test.
it("should know if list is not empty", function(done) {
require(['lib/entity'], function(entity) {
var list = new CircularList([new entity.Cat()]);
expect(list.isEmpty()).toBe(false);
done();
});
});
});
Jasmine 2.0ドキュメントの非同期サポートセクションへのリンクを次に示します。 http://jasmine.github.io/2.0/introduction.html#section-Asynchronous_Support
Jasmine 2.0スタンドアロンのもう1つのオプションは、boot.jsファイルを作成し、すべてのAMDモジュールがロードされた後にテストを実行するように設定することです。
私たちのケースでテストを書くための理想的なエンドユーザーのケースは、すべてのスペックファイルまたは依存関係を一度明示リストにリストする必要がなく、*スペックファイルを依存関係を持つAMDモジュールとして宣言するだけの要件があることです。
理想的な仕様の例：spec/javascript/sampleController_spec.js
require(['app/controllers/SampleController'], function(SampleController) {
describe('SampleController', function() {
it('should construct an instance of a SampleController', function() {
expect(new SampleController() instanceof SampleController).toBeTruthy();
});
});
});
理想的には、依存関係を読み込んで仕様を実行するバックグラウンドの動作は、プロジェクトにアクセスしてテストを作成したい人には完全に不透明であり、AMD依存関係を持つ* spec.jsファイルを作成する以外に何もする必要はありません。
これをすべて機能させるために、ブートファイルを作成し、それを使用するようにJasmineを構成し（ http://jasmine.github.io/2.0/boot.html ）、いくつかの魔法を追加してテストをロードするまでテストの実行を一時的に遅らせるには：
boot.js '「実行」セクション：
/**
* ## Execution
*
* Replace the browser window's `onload`, ensure it's called, and then run all of the loaded specs. This includes initializing the `HtmlReporter` instance and then executing the loaded Jasmine environment. All of this will happen after all of the specs are loaded.
*/
var currentWindowOnload = window.onload;
// Stack of AMD spec definitions
var specDefinitions = [];
// Store a ref to the current require function
window.oldRequire = require;
// Shim in our Jasmine spec require helper, which will queue up all of the definitions to be loaded in later.
require = function(deps, specCallback){
//Push any module defined using require([deps], callback) onto the specDefinitions stack.
specDefinitions.Push({ 'deps' : deps, 'specCallback' : specCallback });
};
//
window.onload = function() {
// Restore original require functionality
window.require = oldRequire;
// Keep a ref to Jasmine context for when we execute later
var context = this,
requireCalls = 0, // counter of (successful) require callbacks
specCount = specDefinitions.length; // # of AMD specs we're expecting to load
// func to execute the AMD callbacks for our test specs once requireJS has finished loading our deps
function execSpecDefinitions() {
//exec the callback of our AMD defined test spec, passing in the returned modules.
this.specCallback.apply(context, arguments);
requireCalls++; // inc our counter for successful AMD callbacks.
if(requireCalls === specCount){
//do the normal Jamsine HTML reporter initialization
htmlReporter.initialize.call(context);
//execute our Jasmine Env, now that all of our dependencies are loaded and our specs are defined.
env.execute.call(context);
}
}
var specDefinition;
// iterate through all of our AMD specs and call require with our spec execution callback
for (var i = specDefinitions.length - 1; i >= 0; i--) {
require(specDefinitions[i].deps, execSpecDefinitions.bind(specDefinitions[i]));
}
//keep original onload in case we set one in the HTML
if (currentWindowOnload) {
currentWindowOnload();
}
};
基本的に、AMD構文仕様をスタックに保持し、それらをポップし、モジュールを要求し、アサーションを含むコールバックを実行し、すべての読み込みが完了したらJasmineを実行します。
この設定により、個々のテストに必要なすべてのAMDモジュールがロードされるまで待つことができ、グローバルを作成してAMDパターンを壊すことはありません。一時的にrequireをオーバーライドし、require（our `src_dir: injasmine.ymlは空です）が、ここでの全体的な目標は、仕様を記述するオーバーヘッドを削減することです。
beforeフィルターと組み合わせてdoneを使用して、非同期コールバックをテストできます。
beforeEach(function(done) {
return require(['dist/sem-campaign'], function(campaign) {
module = campaign;
return done();
});
});
これは、すべてのソースと仕様にAMD/requirejsを使用してHTMLでジャスミン仕様を実行する方法です。
これは、ジャスミンをロードしてから「ユニットテストスターター」をロードするindex.htmlファイルです。
<html><head><title>unit test</title><head>
<link rel="shortcut icon" type="image/png" href="/jasmine/lib/jasmine-2.1.3/jasmine_favicon.png">
<link rel="stylesheet" href="/jasmine/lib/jasmine-2.1.3/jasmine.css">
<script src="/jasmine/lib/jasmine-2.1.3/jasmine.js"></script>
<script src="/jasmine/lib/jasmine-2.1.3/jasmine-html.js"></script>
<script src="/jasmine/lib/jasmine-2.1.3/boot.js"></script>
</head><body>
<script data-main="javascript/UnitTestStarter.js" src="javascript/require.js"></script>
</body></html>
そして、私のUnitTestStarter.jsは次のようなものです：
require.config({
"paths": {
....
});
require(['MySpec.js'], function()
{
jasmine.getEnv().execute();
})