無法在Visual Studio 2013中加載Jasmine的HTML測試裝置

Question

我是客戶端測試的新手，但是已經在Visual Studio中編寫了一個Jasmine測試，該測試針對HTML“片段”（頁面的一部分）運行我的JS代碼並成功執行了Assert，這一切都很好。

但是，我無法按照文檔中的描述從測試裝置中加載HTML。 我已經看到了與此主題相關的幾篇類似的文章，但都遵循了它們的示例，但是無法識別代碼語法。 通過將HTML放在單獨的函數中並在需要時閱讀此內容，我暫時解決了此問題。 盡管此方法有效，但它並不令人滿意，因為我需要在每行末尾使用反斜杠字符轉義多行HTML，而且我不希望在我打算結束的所有數百個測試中都這樣做寫作。

好的，我的設置。

• Visual Studio 2013
• 詩乃1.17.2
• 適用於Test Explorer 4.1.0的Chutzpah測試適配器
• Chutzpah Test Runner上下文菜單擴展4.1.0

我的項目中具有以下目錄結構，方括號[xyz]中的內容是文件夾，“ \\”表示目錄結構中的子級

Project
\ [MyApplicationName]
\\ [FeatureUnderTest]
\\\ myTestFile.js
\\\ myHtmlFragmentFromPage.html
\\\ myHtmlFragmentReturnedFromAjax.html
\ [Libraries]
\\ sinon-1.17.2.js

好的，正如您所看到的，我將測試文件保存在SAME文件夾中作為我的測試文件。 對於每個功能，我可能最終都會進行多個測試-可能還會有一些子功能及其相關的測試。 理想情況下，我希望HTML文件位於相對於Test JS的子文件夾中，並且該文件夾可以具有標准名稱，例如“ Fixtures”。 所以我最終可能會遇到這樣的情況：

Project
\ [MyApplication]
\\ [Feature1]
\\\ [Fixture]
\\\\ HtmlFragA.html
\\\\ HtmlFragB.html
\\\ Feature1.Test.js

\\ [Feature2]
\\\ [SubFeature1]
\\\\ [Fixture]
\\\\\ HtmlFragA.html
\\\\\ HtmlFragB.html
\\\\ Feature2.SubFeature1.Test.js
\\\ [SubFeature2]
\\\\ [Fixture]
\\\\\ HtmlFragA.html
\\\\\ HtmlFragB.html
\\\\ Feature2.SubFeature2.Test.js
\\\ [SubFeature3]
\\\\ [Fixture]
\\\\\ HtmlFragA.html
\\\\\ HtmlFragB.html
\\\\ Feature2.SubFeature3.Test.js

\\ [Feature3]
\\\ [Fixture]
\\\\ HtmlFragA.html
\\\\ HtmlFragB.html
\\\ Feature3.Test.js

\ [Libraries]
\\ sinon-1.17.2.js

對於那些具有許多測試經驗的人，這是隔離這些測試的好方法嗎？ 如果沒有，任何指針將不勝感激。

好的，到我的代碼。

/// <reference path="../../../myApplication/scripts/Feature1/jsFileUnderTest.js" />
describe("Given Feature 1", function (){
    describe("When AJAX call is successful", function() {
        // Currently load from functions
        var html = htmlFragmentFromDom();
        var ajaxResponse = ajaxResponse();

        beforeEach(function() {
            $('body').append(html);

            sinon.stub($, 'ajax', function (options){
                var dfd = $.Deferred();
                if (options.success) {dfd.done(options.success(ajaxResponse));}
                if (options.error) {dfd.fail(options.error);}
                dfd.success = dfd.done;
                dfd.error = dfd.fail;
                return dfd;
            });
        });    
        afterEach(function() {
            $(html).remove();
            $.ajax.restore();
        });

        if("Then abc Should Be 123", function (){
            ....
        });
    });
});
function htmlFragmentFromDom(){
    return '... /
            .....';
}
function ajaxResponse(){
    return '... /
            .....';
}

我的Chutzpah.json的內容如下：

{
    "Framework": "jasmine",
    "TestHarnessLocationMode": "TestFileAdjacent",
    "TestFileTimeout": "120000",
    "References": [
        { "Path": "../../myApplication/scripts/jquery/jquery-1.11.2.js" },
        { "Path": "../../myApplication/scripts/jquery/jquery-ui-1.11.4.js" },
        { "Path": "../libraries/sinon-1.17.2.js" }
    ]
}

因此，如果有人知道我需要做些什么才能能夠讀取HTML（對於要運行被測JavaScript的DOM片段以及對於從AJAX調用返回的HTML，那么我將不勝感激。

格里夫

Answer 1

Chutzpah支持將HTML模板注入dom。 只需從chutzpah.json引用您的HTML文件，它就可以正常工作：

"References": [
        { "Path": "myHtmlFile.html" }
    ]