上一个教程:Developing Discourse Plugins - Part 5 - Add an admin interface
您知道吗?Discourse 拥有两个庞大的测试套件来覆盖其代码库。在服务器端,我们的 Ruby 代码使用 rspec 测试套件。对于浏览器应用,我们有一个包含 ember-testing 的 qunit 测试套件。
假设您已经搭建好了开发环境,只需访问 http://localhost:3000/tests 网址,即可在浏览器中运行 JavaScript 测试套件。一个有趣的特性是,您可以在右下角看到一个微型窗口,实时展示应用正在被测试:
Discourse 应用构建时包含了大量测试,访问 /tests 网址时这些测试就会开始运行。因此,按您正在开发的插件来过滤测试可能会很有帮助。您可以通过点击界面上的插件下拉菜单并选择您的插件来实现这一点:
在插件中添加验收测试
首先,请确保您已检出最新版本的 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");。这指示我们的测试导航到应用中的该网址。该网址正是显示触手的页面。
访问显示紫色触手按钮的页面后,我们希望检查页面上是否存在该按钮,并确认触手图片尚未显示。
这通过以下断言实现:
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 上提出修改建议。


