Chai-jQ

chai-jq 是 Chai 斷言庫的替代外掛，提供 jQuery 特定的斷言。

使用方式

您可以使用以下套件管理器安裝 chai-jq

NPM: npm install chai-jq
Bower: bower install chai-jq

整合注意事項討論如何在不同環境（瀏覽器、AMD、Node.js）中正確地將外掛修補到 Chai。 API 文件是學習如何在測試中使用 chai-jq 斷言的良好起點。網站本身的測試套件也提供了 API 的簡要介紹

斷言

整合

chai-jq 可在您的瀏覽器、AMD/RequireJS 中以及在帶有 JsDom 的 Node.js 中使用。

標準瀏覽器：若要在標準 HTML 頁面中使用，請在 Chai 之後包含 chai-jq.js。

<script src="chai.js"></script>
<script src="chai-jq.js"></script>

AMD 瀏覽器：若要在 RequireJS/AMD 頁面中使用，請引入 chai-jq 並在您的測試導入/執行器開始之前將其注入到 Chai 中

require(["chai", "chai-jq"], function (chai, plugin) {
  // Inject plugin.
  chai.use(plugin);

  // Rest of your test code here...
});

Node.js / JsDom：若要在 Node.js/JsDom 中使用，請引入 chai-jq 並在您的測試導入/執行器開始之前將其注入到 Chai 中

var chai    = require("chai");
var plugin  = require("chai-jq");

// Inject plugin.
chai.use(plugin);

// Rest of test code here...

物件上下文變更

與 Chai 和其他外掛中的斷言運作方式略有不同的是，chai-jq 中某些斷言的物件上下文會切換，目前是這樣：

$attr
$prop

一般來說，受測物件（例如，包裝在 expect() 中的物件）會保持目前的上下文，因此您可以執行類似以下的操作：

var $elem = $("<div id=\"hi\" foo=\"bar time\" />");

expect($elem)
  // Assertion object is `$elem`
  .to.have.$attr("id", "hi").and
  // Assertion object is still `$elem`
  .to.contain.$attr("foo", "bar");

在上面的範例中，jQuery 物件 $elem 仍是兩個 $attr 呼叫的斷言物件。然而，在上述列舉的其中一個斷言的特殊情況下，其中

沒有提供預期的斷言值；而且，
鏈中沒有使用否定詞（例如，not）。

然後，斷言的物件會切換為呼叫之有效方法的值。因此，再次以我們的範例來說，並在不使用預期值的情況下呼叫 $attr()，我們會得到：

var $elem = $("<div id=\"hi\" foo=\"bar time\" />");

expect($elem)
  // Assertion object is `$elem`
  .to.have.$attr("foo").and
    // Assertion object now changed to `$attr()` value: `"bar time"`
    .to.equal("bar time").and
    .to.match(/^b/).and
    .to.not.have.length(2);

在上面的範例中，在呼叫不帶預期值的 $attr("foo") 後，斷言的物件會立即變成字串 "bar time"。

`$visible`

斷言元素是否可見。

Node.js/JsDom 注意事項：JsDom 目前無法正確地將零大小或隱藏的父元素推斷為隱藏/可見。

expect($("<div>&nbsp;</div>"))
  .to.be.$visible;

請參閱：https://jquery-api.dev.org.tw/visible-selector/

`$hidden`

斷言元素是否隱藏。

Node.js/JsDom 注意事項：JsDom 目前無法正確地將零大小或隱藏的父元素推斷為隱藏/可見。

expect($("<div style=\"display: none\" />"))
  .to.be.$hidden;

請參閱：https://jquery-api.dev.org.tw/hidden-selector/

`$val(expected, [message])`

expected (String|RegExp) 值
message (String) 失敗訊息（選用）

斷言元素值是否符合字串或正規表示式。

expect($("<input value='foo' />"))
  .to.have.$val("foo").and
  .to.have.$val(/^foo/);

請參閱：https://jquery-api.dev.org.tw/val/

`$class(expected, [message])`

expected (String) 類別名稱
message (String) 失敗訊息（選用）

斷言元素是否具有類別相符項。

expect($("<div class='foo bar' />"))
  .to.have.$class("foo").and
  .to.have.$class("bar");

請參閱：https://jquery-api.dev.org.tw/hasClass/

`$attr(name, [expected], [message])`

name (String) 屬性名稱
expected (String) 屬性內容（選用）
message (String) 失敗訊息（選用）
傳回目前物件或屬性字串值

斷言目標是否具有完全給定的具名屬性，或斷言目標在使用 include 或 contain 修飾符時包含屬性的子集。

expect($("<div id=\"hi\" foo=\"bar time\" />"))
  .to.have.$attr("id", "hi").and
  .to.contain.$attr("foo", "bar");

在沒有提供預期值時，將上下文變更為屬性字串值

expect($("<div id=\"hi\" foo=\"bar time\" />"))
  .to.have.$attr("foo").and
    .to.equal("bar time").and
    .to.match(/^b/);

請參閱：https://jquery-api.dev.org.tw/attr/

`$data(name, [expected], [message])`

name (String) 資料屬性名稱
expected (String) 資料屬性內容（選用）
message (String) 失敗訊息（選用）
傳回目前物件或屬性字串值

斷言目標是否具有完全給定的具名資料屬性，或斷言目標在使用 include 或 contain 修飾符時包含資料屬性的子集。

expect($("<div data-id=\"hi\" data-foo=\"bar time\" />"))
  .to.have.$data("id", "hi").and
  .to.contain.$data("foo", "bar");

在沒有提供預期值時，將上下文變更為資料屬性字串值

expect($("<div data-id=\"hi\" data-foo=\"bar time\" />"))
  .to.have.$data("foo").and
    .to.equal("bar time").and
    .to.match(/^b/);

請參閱：https://jquery-api.dev.org.tw/data/

`$prop(name, [expected], [message])`

name (String) 屬性名稱
expected (Object) 屬性值（選用）
message (String) 失敗訊息（選用）
傳回目前物件或屬性字串值

斷言目標是否具有完全給定的具名屬性。

expect($("<input type=\"checkbox\" checked=\"checked\" />"))
  .to.have.$prop("checked", true).and
  .to.have.$prop("type", "checkbox");

在沒有提供預期值時，將上下文變更為屬性字串值

expect($("<input type=\"checkbox\" checked=\"checked\" />"))
  .to.have.$prop("type").and
    .to.equal("checkbox").and
    .to.match(/^c.*x$/);

請參閱：https://jquery-api.dev.org.tw/prop/

`$html(expected, [message])`

expected (String) HTML 內容
message (String) 失敗訊息（選用）

斷言目標是否具有完全給定的 HTML，或斷言目標在使用 include 或 contain 修飾符時包含 HTML 的子集。

expect($("<div><span>foo</span></div>"))
  .to.have.$html("<span>foo</span>").and
  .to.contain.$html("foo");

請參閱：https://jquery-api.dev.org.tw/html/

`$text(expected, [message])`

expected (String) 文字內容
message (String) 失敗訊息（選用）

斷言目標是否具有完全給定的文字，或斷言目標在使用 include 或 contain 修飾符時包含文字的子集。

expect($("<div><span>foo</span> bar</div>"))
  .to.have.$text("foo bar").and
  .to.contain.$text("foo");

請參閱：https://jquery-api.dev.org.tw/text/

`$css(expected, [message])`

expected (String) CSS 屬性內容
message (String) 失敗訊息（選用）

斷言目標是否具有完全給定的 CSS 屬性，或斷言目標在使用 include 或 contain 修飾符時包含 CSS 的子集。

Node.js/JsDom 注意事項：截至 JsDom v0.8.8，計算出的 CSS 屬性無法正確地推斷。明確的屬性應完全符合。

瀏覽器注意事項：明確的 CSS 屬性有時無法符合（與 Node.js 相反），因此外掛會針對明確的 style 屬性執行額外的檢查以尋找符合項。可能仍有其他不穩定的邊緣案例。

PhantomJS 注意事項：PhantomJS 在 CSS/樣式方面也相當不穩定且難以預測，特別是來自 CSS 類別而非明確 style 屬性的樣式。

expect($("<div style=\"width: 50px; border: 1px dotted black;\" />"))
  .to.have.$css("width", "50px").and
  .to.have.$css("border-top-style", "dotted");

請參閱：https://jquery-api.dev.org.tw/css/

貢獻

請參閱貢獻指南，了解如何協助外掛。

我們使用 Travis CI 測試所有變更，使用 Coveralls 報告內部測試涵蓋率，並使用 Code Climate 檢查複雜度/靜態分析。以下是我們建置、涵蓋率和複雜度的狀態

我們也使用 Sauce Labs 進行前端程式碼的多瀏覽器測試。這是我們的建置矩陣

授權

此儲存庫包含來自其他人的各種程式庫，並依以下方式授權