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-jq 中的断言与 Chai 和其他插件的断言略有不同，目前断言会切换一些断言的对象上下文，具体如下

  • $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"。

插件 API

$visible

断言元素可见。

Node.js/JsDom 注意: JsDom 目前无法正确推断大小为零或隐藏的父元素是否隐藏/可见。

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

查看：https://api.jqueryjs.cn/visible-selector/

$hidden

断言元素隐藏。

Node.js/JsDom 注意: JsDom 目前无法正确推断大小为零或隐藏的父元素是否隐藏/可见。

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

查看：https://api.jqueryjs.cn/hidden-selector/

$val(expected, [message])

  • 预期 (String|RegExp) 值
  • 消息 (String) 失败消息（可选）

断言元素值与字符串或正则表达式匹配。

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

查看：https://api.jqueryjs.cn/val/

$class(expected, [message])

  • 预期 (String) 类名
  • 消息 (String) 失败消息（可选）

断言元素具有与类名匹配的类。

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

查看：https://api.jqueryjs.cn/hasClass/

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

  • 名称 (String) 属性名称
  • 预期 (String) 属性内容（可选）
  • 消息 (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://api.jqueryjs.cn/attr/

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

  • 名称 (String) data-属性名称
  • 预期 (String) data-属性内容（可选）
  • 消息 (String) 失败消息（可选）
  • 返回值 当前对象或属性字符串值

断言目标具有给定的命名 data-属性，或者当使用 include 或 contain 修饰符时，断言目标包含 data-属性的子集。

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

当没有提供预期值时，将上下文更改为 data-属性字符串的值

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

查看：https://api.jqueryjs.cn/data/

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

  • 名称 (String) 属性名称
  • 预期 (Object) 属性值（可选）
  • 消息 (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://api.jqueryjs.cn/prop/

$html(expected, [message])

  • 预期 (String) HTML 内容
  • 消息 (String) 失败消息（可选）

断言目标具有给定的 HTML，或者当使用 include 或 contain 修饰符时，断言目标包含 HTML 的子集。

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

查看：https://api.jqueryjs.cn/html/

$text(expected, [message])

  • 预期 (String) 文本内容
  • 消息 (String) 失败消息（可选）

断言目标具有给定的文本，或者当使用 include 或 contain 修饰符时，断言目标包含文本的子集。

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

查看：https://api.jqueryjs.cn/text/

$css(expected, [message])

  • 预期 (String) CSS 属性内容
  • 消息 (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://api.jqueryjs.cn/css/

贡献

请查看 贡献指南 了解如何帮助该插件。

我们使用 Travis CI 测试所有更改，使用 Coveralls 报告内部测试覆盖率，并使用 Code Climate 检查复杂性和静态分析。 这是我们 构建、覆盖率 和 复杂性 的状态。

Build Status Coverage Status Code Climate

我们还使用 Sauce Labs 对前端代码进行多浏览器测试。 这是我们的 构建矩阵

Sauce Test Status

许可证

所有未另行说明的代码版权归 Ryan Roemer 所有。 根据 MIT 许可证发布。

此存储库包含来自其他人的各种库，并根据以下许可证发布。

  • jQuery 的版权归 jQuery 基金会所有，并根据 MIT 许可证发布。

  • Mocha 的版权归 TJ Holowaychuk 所有，并根据 MIT 许可证发布。

  • Chai 的版权归 Jake Luer 所有，并根据 BSD 许可证发布。

  • Sinon.JS 的版权归 Christian Johansen 所有，并根据 BSD 许可证发布。

  • Mocha-PhantomJS 的版权归 Ken Collins 所有，并根据 MIT 许可证发布。

  • Pure 的版权归 Yahoo! 所有，并根据 MIT 许可证发布。