2016-05-12 113 views
0

我正嘗試使用單元測試爲Typescript源文件創作一個Typescript文件。我的項目結構:使用Chutzpah對Typescript源文件運行Typescript QUnit測試

/js/my-unit.ts 
/js-tests/my-unit.tests.ts 
/Scripts/typings/qunit/qunit.d.ts 
/chutzpah.json 

這裏的my-unit.ts內容:

function globalFunc() { return { dummy: "object" }; } 

這裏的my-unit.tests.ts內容:

/// <reference path="../scripts/typings/qunit/qunit.d.ts" /> 
/// <reference path="../js/my-unit.ts" /> 
QUnit.test("Test 1", assert => assert.ok(!!globalFunc())); 

這裏的chutzpah.json文件:

{ 
    "Compile": { 
     "Mode": "External", 
     "Extensions": [ ".ts" ], 
     "ExtensionsWithNoOutput": [ ".d.ts" ] 
    }, 
    "Tests": [ 
     { "Includes": [ "**/*-tests/**.ts" ] } 
    ] 
} 

測試是紅色的,這是因爲:

找不到變量:globalFunc

爲什麼!? 我該如何解決這個問題?


有什麼我想:

  • 引用.js文件在我的測試文件,但不允許
  • 尋找受騙者,發現主要this question,但一個答案沒」 (由Chutzpah的作者不少)似乎與我自己的設置相似
  • 重讀the "Running Unit Tests with Typescript" documenation
  • 改變reference到源路徑(有和沒有結束斜線),但給我的錯誤在Visual Studio
  • 在單位文件和assert.ok(!!new Foo())測試加入class Foo {},但這也未能
  • 在加入module My { export class Foo { } }單元文件和assert.ok(!!new My.Foo())測試,但這也失敗了
  • 使用其他Chutzpah擴展中的「在瀏覽器中打開」功能,並檢查測試文件的源代碼(這大概也是從測試資源管理器運行時爲測試生成的),在那裏我看到的確是我的源文件(my-unit.tsmy-unit.js)是而不是參考:

    <!DOCTYPE html> 
        <html> 
        <head> 
         <meta charset="utf-8" /> 
         <title>QUnit Tests</title> 
         <link rel="stylesheet" type="text/css" href="file:///E:/path/to/TestFiles/QUnit/qunit.css"/> 
         <script type="text/javascript" src="file:///E:/path/to/TestFiles/QUnit/qunit.js"></script> 
         <script type="text/javascript" src="file:///E:/path/to/project/js-tests/my-unit.tests.js"></script> 
         <script> 
          var amdTestPaths = []; 
          // code ommitted for brevity... 
         </script> 
        </head> 
        <body>  
         <div id="qunit"></div> 
         <div id="qunit-fixture"></div> 
        </body> 
        </html> 
    
  • 添加

    "References": [{ "Path": "js", "Includes": [ "**.ts" ], "Excludes": [ "**.d.ts" ] } 
    

    chutzpah.json文件。這種-的作品,但它是一個相當暴力破解,因爲現在所有的源文件都應該包含每個測試夾具...


上面是(希望)我的實際場景的最小再現。我怎樣才能使它工作?

回答

0

TL; DR版

後一些更多的搜索,我發現設置ExpandReferenceCommentstrue修復的東西:

"Tests": [ 
    { 
     "ExpandReferenceComments": true, 
     "Includes": [ "**/js-tests/**.ts" ] 
    } 
] 

據介紹here並確保///意見被擴展到<script>標籤Chutzpah生成的測試文件。


完整的解決方案

這裏有一個最小的攝製中所有文件的工作原理:

/chutzpah.json

{ 
    "Compile": { 
     "Mode": "External", 
     "Extensions": [ ".ts" ], 
     "ExtensionsWithNoOutput": [ ".d.ts" ] 
    }, 
    "Tests": [ 
     { 
      "ExpandReferenceComments": true, 
      "Includes": [ "**/js-tests/**.ts" ] 
     } 
    ] 
} 

/js/my-unit1.ts

function globalFunc1() { return { dummy: "object 1" }; } 

/js/my-unit2.ts

function globalFunc2() { return { dummy: "object 2" }; } 

/js-tests/my-unit1.tests.ts

/// <reference path="../scripts/typings/qunit/qunit.d.ts" /> 
/// <reference path="../js/my-unit1.ts" /> 
QUnit.test("globalFunc1 works", assert => assert.ok(!!globalFunc1())); 

/JS-測試/我的 - unit2.tests.ts

/// <reference path="../scripts/typings/qunit/qunit.d.ts" /> 
/// <reference path="../js/my-unit2.ts" /> 
QUnit.test("globalFunc2 works", assert => assert.ok(!!globalFunc2())); 

腳註

我不確定爲什麼ExpandReferenceComments默認爲false,或者甚至是有益的(也許當CompleMode不是External?)。

的「完整解決方案」上面包括單位和2個測試文件,因爲我想驗證引用被擴展了每個測試文件它一定(如果你在瀏覽器中運行它們你將會看到Chutpah只爲該燈具生成<script>標籤)。

+1

'ExpandReferenceComments'默認爲false,因爲建議您在chutzpah.json的'References'部分顯式設置所有引用。這是更高效和更清晰。但是,如果您希望展開行爲與您的設置一樣。 –

+0

@MthethewManela感謝您的授權評論:)。我一直認爲'References'部分是「所有燈具都需要這個」的東西,例如我用它來包含jQuery和Angular。 (擔心如果我將路徑放到我的應用程序文件中,那麼每個夾具都會包含所有應用程序文件。)無論如何,明天我會嘗試將您的評論對首選方法的建議轉化爲我的答案供其他人使用。 – Jeroen

+1

引用中的所有內容都將添加到您的測試工具中。通常這對很多人來說都可以。但是,如果您需要不同測試的不同組參考,那麼您實際上可以創建可以相互繼承的chutzpah.json文件的層次結構。這是**高級**,但效果很好。 –

相關問題