对 WordPress 主题进行单元测试（Theme Unit Test）

在制作 WordPress 的过程中，除了对整体的结构等进行排版布局等，还必须要对正文的内容和其他地方进行修饰和排版，例如正文中可能出现的 标题（h2、h3）、列表（ul、ol）、表格（table） 以及不同的文章类型效果等等。这就是 WordPress 主题的单元测试（Theme Unit Test）。

单元测试是比较复杂的工作，特别是添加测试数据。测试数据必须考虑到任何一种用户发表文章可能出现的情况，例如上传图片的时候设置居中还是左右、发表置顶文章怎么处理、发表私密文章和带密码保护的文章如何处理等等。靠我们个人来发表这些测试内容肯定又麻烦又覆盖不全面。WordPress 官方就为我们准备了这样一套单元测试流程和测试数据，我们只需要导入数据然后根据测试流程进行测试就可以了。下面我们来实际的操作一下。

主题单元测试基础

导入官方 unit 测试数据

首先你需要在本地或者服务器上建立一个新的 WordPress 站点，用来进行主题的单元测试。安装方法跟普通的 WordPress 站点一样。

然后就需要使用后台导入工具导入官方的 unit test 数据。安装完成之后登陆后台，找到“工具” => “导入” 选择 WordPress 类型，然后安装好导入插件之后，下载官方 unit 测试数据：https://wpcom-themes.svn.automattic.com/demo/theme-unit-test-data.xml。

最后一步就是导入 xml 文件，但是这里可能会出现这样无法导入附件图片的问题，因为导入的图片数据等，都是在 http://wpthemetestdata.wordpress.com/ 这个网站上的，这个网站在国外，可能会不太稳定导致无法导入附件等文件，然而图片等文件在单元测试中是非常重要的一部分，所以遇到这种情况，通常的做法就是在国外主机或者是服务器上搭建测试平台，然后就可以正确的导入附件文件了。如果在本地比较方便，你可以将你自己服务器上的数据导出导入到本地 WordPress 上。

配置一下 WordPress

导入数据之后，还需要配置一下后台，才能更完美的进行测试。按照下面进行设置：

• 设置 => 常规：设置很长的标题和副标题等内容，看看主题如何处理。
• 设置 => 阅读：将显示的文章数设置为 5，这样可以测试分页功能。
• 设置 => 讨论：开启评论嵌套功能，至少设置三层，可以检测评论层叠处理。
• 设置 => 讨论：开启评论分页功能，每页 5 个评论，可以检测评论分页功能。
• 设置 => 多媒体：取消固定的最大最小宽高，这样可以测试不固定尺寸图片在文章中的显示效果。
• 设置 => 固定链接：设置一个非默认的固定链接，检测固定链接的功能。

成至少两个自定义菜单：

• 大菜单：包含所有的页面链接
• 小菜单：包含2、3个页面链接

测试主题文件的一般准测

需要检查主题中的如下文件：默认首页模板（index.php）、存档模板（archive.php）、分类目录模板（category.php）、标签模板（tag.php）和作者模板（author.php），当然，如果你主题中没有就不需要测试了。

测试基础准则如下：

• 可以正确的显示文章，没有明显的问题和错误
• 按照正确的顺序排序文章
• 正确的按照后台设置的每页显示文章数显示文章的数目
• 正确的显示文章分页并且工作正常
• 调试器不会返回任何的 PHP 错误、警告或者提醒
• 为不支持 JavaScript 的浏览器做一些优化处理

静态首页页面测试

如果当前主题包含了诸如 front-page.php 或者是 home.php 文件，通常可以设置成首页或者文章索引页面（通过 后台 => 设置 => 阅读 设置），你可以按照如下准则测试：

• 静态首页显示正常
• 博客文章索引页面显示正常

404 页面测试

• 404 页面显示正常，设计要有人性化
• 除了纯粹的“404 错误”等文字之外，显示更多的内容，例如：搜索框、随机文章列表、帮助文字等等。可以提高用户体验

搜索结果页面测试

• 正确的显示搜索查询的结果
• 简单易用方便访问者检索信息

博客文章索引页面测试

博客文章索引页面，通常显示文字的标题和摘要，主要有如下测试准则：

未发布的文章不显示

• 文章处于“按日期发表”状态（scheduled）的文章不能显示
• 文章处于“草稿”状态（draft）的文章不能显示

布局测试

• 置顶文章要有特殊标记（例如在文章标题前面添加“置顶”字样）
• 文章分页导航链接正常显示并且可以工作

可读性测试

合理的显示“阅读更多”字样的链接，指向具体文章的具体位置

文章格式（Post Format）测试

• 如果主题支持文章格式，在索引页面需要显示文章对应的文章格式关键字或者标志
• 对于属于“图片文章格式”的文章，图片不能溢出内容区域
• 对于属于“视频文章格式”的文章，视频不能溢出内容区域

缺少内容测试

• 对于无主体内容的文章，不能影响到布局
• 对于无标题的文章，不能影响到布局
• 对于无标题的文章，应该有一个文章的固定链接指向具体文章

分类目录和标签测试

• 主题中必须要合理的使用分类目录和标签这两种分类方式
• 即便是非常多的分类目录和标签也不会影响主题的布局

文章保护性测试

• 对于带有密码保护的文章，必须显示密码表单
• 文章内容不能显示出来
• 评论不能显示出来
• 当输入正确密码之后，文章或者摘要等正常显示

文章正文测试

正文的测试需要导入官方的测试数据，里面包含了所有可能的文章形式。打开对应的文章根据下面的测试准则进行测试。

布局测试

• 正确的显示文章内页面导航链接并指向正确的文章页面（这里是指长文章被 more 标签分割成多个页面的导航链接）
• 文章的固定链接默认指向“页面1”
• 段落显示效果正常，被指定向左、居中、向右、拉伸排版的段落布局正常
• h1-h6 标题都要进行修饰
• blockquote 的修饰要缩进或者明显区别于其他内容
• blockquote 的修饰如果使用了背景图片等，确保无论在长内容还是短内容都会显示正常
• table、tr、th、td 等表格标签要进行样式修饰
• dl、ul、ol、li 等列表标签要进行样式修饰，特别注意下级列表的缩进等处理
• 下列的 HTML 标签的修饰，应该根据标签对应的语义性进行合理的修饰：address、a、big、cite、code、del、em、ins、kbd、pre、q、s、strong、sub、sup、tt、var。例如 del 标签是删除线的意思，应该对其定义一条横穿文本的删除线。
• 注意文中 div、span 标签的处理

可读性测试

• 对正文内容的修饰，应该符合正常的阅读习惯，通常有：背景和文字颜色差别大，文字识别性强、字体合理不怪异、字体大小合适、行高合理、段落宽度和字间距合理。

图片测试

• 设置图片居中、向左、向右或者无排版的时候显示正常
• 除了当作装饰性的图片，图片应该有一个边框可以与其他内容区分开
• 使用大尺寸图片测试，图片显示正常并且应该自动调整大小以适应布局，布局不能错位
• 如果大尺寸图片是不进行尺寸调整的，应该设置 overflow 将超出部分隐藏
• 缩略图正常显示

自定义文章格式测试

与前面不同的是，这里测试的自定义文章格式，是在访问文章正文页面时看到的效果测试。

• 图集（Gallery）格式的文章显示正确，图集的缩略图指向对应的图片内容
• 图片（Image）格式的文章中的图片在文章正文页面显示，而且不能溢出内容区域
• 视频（Video）格式的文章，视频播放器工作正常，不会引起错位，$content_width 变量需要一个明确合适的值
• 音频（Audio）格式的文章，附件的链接正常，播放器工作正常

长标题的文章测试

发布一篇长标题的文章进行测试，标题要很长很长很长很长的。

• 测试标题的 line-height 行高是否合理、美观、不错位
• 测试主题对长标题的处理是否有溢出等问题

无内容和无标题文章测试

• 无内容和无标题文章也需要正确的显示结构，不能引起错位等。

评论测试

• 评论内容显示正常
• 嵌套的评论显示正常
• 评论的分页导航链接显示正常
• 作者发表的评论需要特殊标记以便与其他评论区分
• 评论者的头像显示正常
• 对登陆或未登录用户评论都显示正常
• 管理员登陆之后，评论需要显示“编辑”链接
• 在评论内容中的 HTML 结构也需要进行修饰，特别是列表（list）和引用（blockquote）对象
• 当评论关闭的时候，评论表单不能显示
• 当评论关闭的时候，应该明确提示“评论已经关闭”
• 当文章接收到 Trackbacks 的时候，需要和评论区分开，同时显示正常不错位

页面（Page）测试

页面测试通过观察官方测试数据中的页面即可，通常使用 page.php 文件作为模板。主要测试如下内容：

带有评论的页面

• 评论列表和评论表单显示正常
• 页面内包括发表时间等常见内容

关闭评论的页面

• 评论列表和评论表单不现实
• 不需要显示“当前评论关闭”等提示内容
• 布局正常不错位

全局其他测试

菜单（Menus）测试

• 测试大量的分类目录和页面组成的菜单是否显示正常，测试多层菜单是否正常显示不错位
• 如果主题的自定义菜单可用，测试启用自定义菜单和没有启用时使用默认菜单的布局，测试是否正常无错位

部件（Widgets）测试

• 所有的部件显示是否正常
• WordPress 内置的部件在所有的显示部件的区域显示正常，并加样式合理修饰
• 如果主题使用自定义部件，测试自定义部件是否工作正常
• 在所有可以使用部件的区域测试所有部件的显示效果和功能是否正常
• 当自定义部件激活之后，在可以使用部件区域的默认内容应该消失被替换掉

主题屏幕截图（Screenshot）测试

• 屏幕截图用在后台选择主题的地方，应该准确的展示主题的设计风格
• 确保屏幕截图不会显示一些自定义的内容，而应该显示默认情况下的外观

作者链接的要求

在主题中，可以定义作者的网站链接，这个链接应该是与主题有关的，或者是介绍主题等内容的网页。而不应该是一些广告页面链接或者其他链接。

总结

主题的单元测试，是一个必不可少的主题测试步骤。我爱水煮鱼在这里结合官方文档进行了整理，如果想要看完整版的单元测试，可以到单元测试官方页面查看。

除此之外，主题测试还有一些其他的步骤和过程，例如：主题文件检查、W3C 验证等等。我们将会后续针对这些测试写一些教程，请及时关注我爱水煮鱼。