上一篇教程:Developing Discourse Plugins - Part 5 - Add an admin interface
你知道吗?Discourse 拥有两套庞大的代码库测试套件。在服务器端,我们的 Ruby 代码使用 rspec 进行测试套件运行。对于浏览器端应用,我们有一套包含 ember-testing 的 qunit 测试套件。
假设你已经搭建好了开发环境,访问 http://localhost:3000/tests URL 即可在浏览器中启动 JavaScript 测试套件。一个有趣的功能是,你可以在右下角的微型窗口中看到测试正在对应用进行测试的过程:
Discourse 应用构建了大量的测试,当你访问 /tests URL 时,这些测试就会开始运行。因此,按你正在开发的插件来过滤测试可能会很有帮助。你可以在界面中点击 Plugin(插件)下拉菜单并选择你的插件来实现这一点:
在插件中添加验收测试
首先,确保你检出的是最新版本的 Discourse。能够从插件中运行验收测试是一个相对较新的功能,如果你没有检出最新版本,你的测试将不会显示出来。
在本文中,我将为我们在本系列的 第 5 部分 中创建的 purple-tentacle 插件编写一个验收测试。
添加验收测试就像向你的插件中添加一个文件一样简单。创建以下文件:
test/javascripts/acceptance/purple-tentacle-test.js
import { acceptance, exists } from "discourse/tests/helpers/qunit-helpers";
import { click, visit } from "@ember/test-helpers";
import { test } from "qunit";
acceptance("Purple Tentacle", function (needs) {
needs.settings({ purple_tentacle_enabled: true });
needs.user();
test("Purple tentacle button works", async function (assert) {
await visit("/admin/plugins/purple-tentacle");
assert.ok(exists("#show-tentacle"), "it shows the purple tentacle button");
assert.ok(!exists(".tentacle"), "the tentacle is not shown yet");
await click("#show-tentacle");
assert.ok(exists(".tentacle"), "the tentacle wants to rule the world!");
});
});
我尽量让测试代码清晰易懂,但如果你以前从未写过验收测试,可能会觉得有点困惑。我强烈建议你 阅读 Ember 文档 中关于验收测试的部分,那里有很多很棒的信息。
在我们要编写的每个测试中,都需要对某些内容进行 assert(断言)。在我们的测试中,我们要进行一些断言,以检查触手(tentacle)是否最初是隐藏的,以及在单击按钮后才显示出来。
我们希望在做出断言之前定义一系列要执行的操作。为此,我们使用 await 关键字。通过使用该关键字,我们会等待每个异步辅助函数执行完毕。
我们第一个重要的操作是:await visit("/admin/plugins/purple-tentacle");。这告诉我们的测试在应用中导航到该 URL。该 URL 正是显示触手的页面。
在访问显示紫色触手按钮的页面后,我们想检查页面上是否存在该按钮,以及触手图像是否尚不存在。
这是通过以下断言完成的:
assert.ok(exists("#show-tentacle"), "it shows the purple tentacle button");
assert.ok(!exists(".tentacle"), "the tentacle is not shown yet");
注: 之前版本的 purple-tentacle 插件在 handlebars 模板中没有 #show-tentacle 元素 ID。请查看最新版本以跟随本文操作!
一旦这些测试通过,就该测试交互功能了。
下一个命令是 await click('#show-tentacle');,它告诉我们的测试框架我们要单击该按钮以显示触手。
模拟单击按钮后,我们可以通过断言来检查触手是否出现:
assert.ok(exists(".tentacle"), "the tentacle wants to rule the world!");
还不错吧?你可以在开发机器上访问 http://localhost:3000/tests?qunit_single_plugin=purple-tentacle&qunit_skip_core=1 来亲自尝试这个测试。你应该会很快看到紫色触手出现,并且所有测试都会通过。
如果你想使用 PhantomJS 在命令行上运行插件的 qunit 测试,可以运行
rake plugin:qunit['purple-tentacle']
(其中 purple-tentacle 是你的插件的文件夹名称)
调试你的测试
在编写插件时,测试可以帮助你识别插件中的问题。在开发测试或更改插件代码时,测试可能会失败。为了帮助理解原因,Ember 提供了一些不错的辅助函数:pauseTest() 和 resumeTest()。
要使用它们,请在你想要测试暂停的代码位置添加 await pauseTest()。现在,当你在浏览器中运行测试时,测试会在你添加 pauseTest() 的地方自动暂停。这将给你一个检查页面或查看任何错误以帮助调试问题的机会。
接下来去哪里
我不想显得像坏掉的唱片,但 Ember 文档 中关于测试的部分非常出色。你也可以通过浏览我们 javascript 测试目录 中的测试,看看 Discourse 如何测试各种功能。那里有很多例子你可以从中学习。
祝你测试愉快!
系列更多内容
第 1 部分:插件基础
第 2 部分:插件出口
第 3 部分:站点设置
第 4 部分:git 设置
第 5 部分:管理界面
第 6 部分:本文
第 7 部分:发布你的插件
本文档受版本控制 - 建议在 github 上提出更改。


