QUnit - 環境設定

上一個

下一個

有兩種使用 QUnit 的方法。

本地安裝 − 你可以將 QUnit 庫下載到你的本地機器並將其包含在 HTML 程式碼中。
基於 CDN 的版本 − 你可以直接透過內容分發網路 (CDN) 將 QUnit 庫包含在你的 HTML 程式碼中。

本地安裝

進入 https://code.jquery.com/qunit/ 下載最新可用版本。
將下載的 qunit-git.js 和 qunit-git.css 檔案放在你網站的一個目錄中，例如 /jquery。

示例

你可以如下在你 HTML 檔案中包含 qunit-git.js 和 qunit-git.css 檔案 −

現場演示

<html> 
   <head> 
      <meta charset = "utf-8"> 
      <title>QUnit basic example</title> 
      <link rel = "stylesheet" href = "/jquery/qunit-git.css"> 
      <script src = "/jquery/qunit-git.js"></script> 
   </head> 
   
   <body> 
      <div id = "qunit"></div> 
      <div id = "qunit-fixture"></div>  
      <script> 
         QUnit.test( "My First Test", function( assert ) { 
            var value = "1"; 
            assert.equal( value, "1", "Value should be 1" ); 
         }); 
      </script> 
   </body> 
</html>

這將生成以下結果 −

基於 CDN 的版本

你可以直接透過內容分發網路 (CDN) 將 QUnit 庫包含在你的 HTML 程式碼中。

我們在整個教程中都使用 jQuery 庫版本。

示例

讓我們使用 jQuery CDN 中的 QUnit 庫重寫上述示例。

現場演示

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      <script>
         QUnit.test( "My First Test", function( assert ) {
            var value = "1";
            assert.equal( value, "1", "Value should be 1" );
         });
      </script>
   </body>
</html>

這將生成以下結果 −

列印頁面

上一個

下一個