4

TeamCityでJavaScriptの単体テストを使用したいと思います。

私はQUnitを使用していますが、phantomjsとQUnitTeamCityDriverの使用を提案する場所をいくつか見ました。私はそれを動作させることができませんでした...

私はこれについて多くの経験がなく、コマンドラインでユニットテストを実行するためにphantomjsを取得することさえできないようです。

私は文字通りQUnitTeamCityDriverから例をコピーしました:simple_test.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit Example</title>
  <link rel="stylesheet" href="test_tools/qunit-1.10.0.css">
  <script type="text/javascript" src="resources/jquery-1.8.1.js"></script>
  <script type="text/javascript" src="test_tools/qunit-1.10.0.js"></script>
  <script type="text/javascript" src="qunit_teamcity_driver/QUnitTeamCityDriver.js"></script> 
  <script type="text/javascript" src="tests.js"></script> 
</head>
<body>
  <div id="qunit"></div>
  <h1 id="qunit-header">QUnit example</h1>
  <h2 id="qunit-banner"></h2>
  <div id="qunit-testrunner-toolbar"></div>
  <h2 id="qunit-userAgent"></h2>
  <ol id="qunit-tests"></ol>
  <div id="qunit-fixture">test markup, will be hidden</div>   
</body>
</html>

tests.jsには、simple_test.htmlで試してみると、機能するかどうかに関係なく、いくつかの簡単なテストがあります。

もちろん、html内の他の参照ファイルは、それぞれのフォルダーにあります。

phantomjs.exe、tests.js、simple_test.htmlは、私が呼び出しているディレクトリのルートにあります。

TeamCityビルドの方向性は次のとおりです。

Add a "Command Line" Build Step to your build in TeamCity which executes Tests.htm via PhantomJS
Command executable: C:\PhamtomJS\phantomjs.exe
Command parameters: \Scripts\QUnitTeamCityDriver.phantom.js Tests.htm

(これは機能しないため、TeamCity内にコマンドラインを配置する前に実際のコマンドラインでテストしたいと思います)

私が試したいくつかのこと:

phantomjs.exe tests.js
phantomjs.exe tests.js simple_test.html
phantomjs.exe simple_test.html
phantomjs.exe test_tools\qunit-1.10.0.js tests.js simple_test.html
phantomjs.exe qunit_teamcity_driver/QUnitTeamCityDriver.phantom.js simple_test.html

結果:解析エラーまたは変数が見つかりません:テスト

誰かが私を正しい方向に向けて、例を挙げて、私が間違っていることを教えてもらえますか?どうもありがとうございます。

4

3 に答える 3

6

あなたのテクノロジースタックが一致する場合、私はChutzpahを使用して成功しました。

特に、kabarosによって記述されたphantomjsとの間の呼び出しを処理し、TeamCityとVisual Studioの統合を提供することで、手間のかかる作業を行います。

于 2012-10-19T21:27:14.873 に答える
2

簡単な答えは、実行する必要があるということです。

phantomjs.exe script-runner.js simple_test.html

長い答え:

テストを呼び出すjavascriptファイルが必要になります。私はこれの多くのバリエーションを作成しましたが、私が見つけた最高のものは、QUnitTeamCityDriverhttps ://github.com/redbadger/QUnitTeamCityDriverを使用したものです。TeamCityを使用していなくても、ほとんど変更を加えずに使用しました。

おそらくいくつかの変更が加えられたファイルの内容は次のとおりです(最近のプロジェクトの1つで使用しました)が、元のファイルはgithubで見つける必要があります(script-runner.jsと呼び、ファントムと同じフォルダーに配置します)。便宜上.exe):

function waitFor(testFx, onReady, timeOutMillis) {
    var maxtimeOutMillis = timeOutMillis ? timeOutMillis : 3001, //< Default Max Timout is 3s
        start = new Date().getTime(),
        condition = false,
        interval = setInterval(function () {
            if ((new Date().getTime() - start < maxtimeOutMillis) && !condition) {
                // If not time-out yet and condition not yet fulfilled
                condition = (typeof (testFx) === "string" ? eval(testFx) : testFx()); //< defensive code
            } else {
                if (!condition) {
                    // If condition still not fulfilled (timeout but condition is 'false')
                    console.log("'waitFor()' timeout");
                    phantom.exit(1);
                } else {
                    // Condition fulfilled (timeout and/or condition is 'true')
                    typeof (onReady) === "string" ? eval(onReady) : onReady(); //< Do what it's supposed to do once the condition is fulfilled
                    clearInterval(interval); //< Stop this interval
                }
            }
        }, 100); //< repeat check every 250ms
};

var page = new WebPage();

// Route "console.log()" calls from within the Page context to the main Phantom context (i.e. current "this")
page.onConsoleMessage = function (msg) {
    console.log(msg);
};

page.open(phantom.args[0], function (status) {

    if (status !== "success") {
        console.log("Unable to access network");
        phantom.exit(1);
    } else {
        waitFor(function () {
            return page.evaluate(function () {
                var el = document.getElementById('qunit-testresult');
                if (el && el.innerText.match('completed')) {
                    return true;
                }
                return false;
            });
        }, function () {
            phantom.exit();
        }, 10000);
    }
});

これにより、基本的にHTMLページが開き、解析されます。これは私にとって紛らわしい部分の1つでした。phantomjsは最後にブラウザです。このスクリプトを渡すと、最終的にJavascriptファイルではなくHTMLページが開きます。したがって、次のようにphantomjsを呼び出します。

phantomjs.exe script-runner.js [path to file containing tests]

したがって、あなたの場合は次のようになります。

phantomjs.exe script-runner.js simple_test.html

パズルの最後のビットは、テストを含むhtmlページで、javascriptファイルへの参照を追加する必要があるということです。これは、参照にQUnitTeamCityDriver.jsというファイルです。これは、qUnitイベントに接続し、それらをファントムにチャネルして、合格したテストと失敗したテストを決定するものです。ファイルの内容(ここでも、githubのプロジェクトページでより良い最新バージョンを見つけることができます):

/*
Reference this file in the html files of the QUnit tests
Based on the work on this team city driver: https://github.com/redbadger/QUnitTeamCityDriver/
*/
if (navigator.userAgent.indexOf("PhantomJS") !== -1) {
    String.prototype.format = function () {
        var args = arguments;
        return this.replace(/{(\d+)}/g, function (match, number) {
            return typeof args[number] != 'undefined'
      ? args[number]
      : '{' + number + '}';
        });
    };

    var suiteName = "QUnit Tests";
    var currentTestName = "";
    var hasBegun = false;

    qunitBegin = function () {
        console.log("[testSuiteStarted name='{0}']".format(suiteName));
    };

    /* QUnit.testStart({ name }) */
    QUnit.testStart = function (args) {
        if (!hasBegun) {
            qunitBegin();
            hasBegun = true;
        }
        currentTestName = args.name;
    };

    QUnit.moduleStart = function (args) {
        console.log("Module started: {0}".format(args.name));
    };

    /* QUnit.log({ result, actual, expected, message }) */
    QUnit.log = function (args) {

        var currentAssertion = "{0} > {1}".format(currentTestName, args.message);

        //console.log("[testStarted name='{0}']".format(currentAssertion));

        if (!args.result) {
            console.log("**[testFailed] type='comparisonFailure' name='{0}' details='expected={1}, actual={2}' expected='{1}' actual='{2}'".format(currentAssertion, args.expected, args.actual));
        }

        console.log("[testFinished] name='{0}'".format(currentAssertion));
    };

    /* QUnit.done({ failed, passed, total, runtime }) */
    QUnit.done = function (args) {
        console.log("[testSuiteFinished name='{0}']".format(suiteName));
    };
}

これは基本的にQUnitによって定義されたコールバックにフックし、phantomjsによって示されるメッセージをコンソールに送信します。QUnitコールバックのドキュメントはここにあります:http://api.qunitjs.com/category/callbacks/

TeamCityとのフックに関しては、出力内の特定の文字列をチェックするためのビルドステップ定義の設定にすぎない可能性があります(たとえば、出力に「[testFailed]」が存在する場合は失敗を示します)。 CruiseControlは、その周りにNunitラッパーも作成しました。最後に、同じ概念が適用されます。phatomjs出力を解析して、[testFailed]または失敗を示す文字列が存在するかどうかを確認します。

于 2012-10-19T20:55:48.193 に答える
2

上記のアドバイスに加えて、qunitで提供される新しいphantomjsqunitランナーを使用することをお勧めします。

https://github.com/jquery/qunit/tree/master/addons/phantomjs

そして、誤った非同期テストがある場合は、私のプルリクエストを見てください:

https://github.com/jquery/qunit/pull/415

于 2013-02-19T17:46:50.983 に答える