上一教程: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 下拉菜单并选择你的插件来实现这一点:
在插件中添加接受测试(Acceptance Test)
首先,请确保你已检出最新版 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(断言)某些内容。在我们的测试中,我们要进行几项断言,以检查触手最初是隐藏的,并且仅在点击按钮后才显示。
我们希望定义一组在做出断言之前执行的操作。为此,我们使用 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?target=purple-tentacle 来亲自试试这个测试。你应该会很快看到紫色触手出现,并且所有测试都会通过。
如果你想从命令行运行插件的 qunit 测试,你可以运行
bin/qunit --target purple-tentacle
(如果你的开发服务器没有运行,请添加 --standalone 参数)
(其中 purple-tentacle 是你插件的文件夹名称)
调试你的测试
在你编写插件时,测试可以帮助你识别插件中的问题。当你开发测试或对插件代码进行修改时,测试可能会失败。为了帮助理解原因,Ember 提供了一些有用的辅助函数:pauseTest() 和 resumeTest()。
要使用它们,请在你的测试代码中希望测试暂停的地方添加 await pauseTest()。现在,当你在浏览器中运行测试时,测试将自动在添加 pauseTest() 的地方暂停。这将给你机会检查页面或查看错误,以帮助调试问题。
接下来去哪里
我不想老生常谈,但 Ember 文档关于测试的部分非常棒。你可能还想浏览我们javascript 测试目录中的测试,看看 Discourse 是如何测试各种功能的。那里有很多你可以学习的示例。
测试愉快!
系列更多内容
第 1 部分:插件基础
第 2 部分:插件出口
第 3 部分:站点设置
第 4 部分:git 设置
第 5 部分:管理界面
第 6 部分:本主题
第 7 部分:发布你的插件
此文档受版本控制 - 请在 github 上建议修改。


