在制作 WordPress 的過程中，除了對(duì)整體的結(jié)構(gòu)等進(jìn)行排版布局等，還必須要對(duì)正文的內(nèi)容和其他地方進(jìn)行修飾和排版，例如正文中可能出現(xiàn)的 標(biāo)題（h2、h3）、列表（ul、ol）、表格（table） 以及不同的文章類型效果等等。這就是 WordPress 主題的單元測(cè)試（Theme Unit Test）。
單元測(cè)試是比較復(fù)雜的工作，特別是添加測(cè)試數(shù)據(jù)。測(cè)試數(shù)據(jù)必須考慮到任何一種用戶發(fā)表文章可能出現(xiàn)的情況，例如上傳圖片的時(shí)候設(shè)置居中還是左右、發(fā)表置頂文章怎么處理、發(fā)表私密文章和帶密碼保護(hù)的文章如何處理等等。靠我們個(gè)人來(lái)發(fā)表這些測(cè)試內(nèi)容肯定又麻煩又覆蓋不全面。WordPress 官方就為我們準(zhǔn)備了這樣一套單元測(cè)試流程和測(cè)試數(shù)據(jù)，我們只需要導(dǎo)入數(shù)據(jù)然后根據(jù)測(cè)試流程進(jìn)行測(cè)試就可以了。下面我們來(lái)實(shí)際的操作一下。
主題單元測(cè)試基礎(chǔ)
導(dǎo)入官方 unit 測(cè)試數(shù)據(jù)
首先你需要在本地或者服務(wù)器上建立一個(gè)新的 WordPress 站點(diǎn)，用來(lái)進(jìn)行主題的單元測(cè)試。安裝方法跟普通的 WordPress 站點(diǎn)一樣。
然后就需要使用后臺(tái)導(dǎo)入工具導(dǎo)入官方的 unit test 數(shù)據(jù)。安裝完成之后登陸后臺(tái)，找到“工具” => “導(dǎo)入” 選擇 WordPress 類型，然后安裝好導(dǎo)入插件之后，下載官方 unit 測(cè)試數(shù)據(jù)：
- 官方測(cè)試數(shù)據(jù)下載：下載
- 本地底部提供相關(guān)文件下載
最后一步就是導(dǎo)入 xml 文件，但是這里可能會(huì)出現(xiàn)這樣無(wú)法導(dǎo)入附件圖片的問題，因?yàn)閷?dǎo)入的圖片數(shù)據(jù)等，都是在?http://wpthemetestdata.wordpress.com/?這個(gè)網(wǎng)站上的，這個(gè)網(wǎng)站在國(guó)外，可能會(huì)不太穩(wěn)定導(dǎo)致無(wú)法導(dǎo)入附件等文件，然而圖片等文件在單元測(cè)試中是非常重要的一部分，所以遇到這種情況，通常的做法就是在國(guó)外主機(jī)或者是服務(wù)器上搭建測(cè)試平臺(tái)，然后就可以正確的導(dǎo)入附件文件了。如果在本地比較方便，你可以將你自己服務(wù)器上的數(shù)據(jù)導(dǎo)出導(dǎo)入到本地 WordPress 上。
配置一下 WordPress
導(dǎo)入數(shù)據(jù)之后，還需要配置一下后臺(tái)，才能更完美的進(jìn)行測(cè)試。按照下面進(jìn)行設(shè)置：
- 設(shè)置 => 常規(guī)：設(shè)置很長(zhǎng)的標(biāo)題和副標(biāo)題等內(nèi)容，看看主題如何處理。
- 設(shè)置 => 閱讀：將顯示的文章數(shù)設(shè)置為 5，這樣可以測(cè)試分頁(yè)功能。
- 設(shè)置 => 討論：開啟評(píng)論嵌套功能，至少設(shè)置三層，可以檢測(cè)評(píng)論層疊處理。
- 設(shè)置 => 討論：開啟評(píng)論分頁(yè)功能，每頁(yè) 5 個(gè)評(píng)論，可以檢測(cè)評(píng)論分頁(yè)功能。
- 設(shè)置 => 多媒體：取消固定的最大最小寬高，這樣可以測(cè)試不固定尺寸圖片在文章中的顯示效果。
- 設(shè)置 => 固定鏈接：設(shè)置一個(gè)非默認(rèn)的固定鏈接，檢測(cè)固定鏈接的功能。
成至少兩個(gè)自定義菜單：
- 大菜單：包含所有的頁(yè)面鏈接
- 小菜單：包含2、3個(gè)頁(yè)面鏈接
測(cè)試主題文件的一般準(zhǔn)測(cè)
需要檢查主題中的如下文件：默認(rèn)首頁(yè)模板（index.php）、存檔模板（archive.php）、分類目錄模板（category.php）、標(biāo)簽?zāi)０澹╰ag.php）和作者模板（author.php），當(dāng)然，如果你主題中沒有就不需要測(cè)試了。
測(cè)試基礎(chǔ)準(zhǔn)則如下：
- 可以正確的顯示文章，沒有明顯的問題和錯(cuò)誤
- 按照正確的順序排序文章
- 正確的按照后臺(tái)設(shè)置的每頁(yè)顯示文章數(shù)顯示文章的數(shù)目
- 正確的顯示文章分頁(yè)并且工作正常
- 調(diào)試器不會(huì)返回任何的 PHP 錯(cuò)誤、警告或者提醒
- 為不支持 JavaScript 的瀏覽器做一些優(yōu)化處理
靜態(tài)首頁(yè)頁(yè)面測(cè)試
如果當(dāng)前主題包含了諸如 front-page.php 或者是 home.php 文件，通常可以設(shè)置成首頁(yè)或者文章索引頁(yè)面（通過 后臺(tái) => 設(shè)置 => 閱讀 設(shè)置），你可以按照如下準(zhǔn)則測(cè)試：
- 靜態(tài)首頁(yè)顯示正常
- 博客文章索引頁(yè)面顯示正常
404 頁(yè)面測(cè)試
- 404 頁(yè)面顯示正常，設(shè)計(jì)要有人性化
- 除了純粹的“404 錯(cuò)誤”等文字之外，顯示更多的內(nèi)容，例如：搜索框、隨機(jī)文章列表、幫助文字等等。可以提高用戶體驗(yàn)
搜索結(jié)果頁(yè)面測(cè)試
- 正確的顯示搜索查詢的結(jié)果
- 簡(jiǎn)單易用方便訪問者檢索信息
博客文章索引頁(yè)面測(cè)試
博客文章索引頁(yè)面，通常顯示文字的標(biāo)題和摘要，主要有如下測(cè)試準(zhǔn)則：
未發(fā)布的文章不顯示
- 文章處于“按日期發(fā)表”狀態(tài)（scheduled）的文章不能顯示
- 文章處于“草稿”狀態(tài)（draft）的文章不能顯示
布局測(cè)試
- 置頂文章要有特殊標(biāo)記（例如在文章標(biāo)題前面添加“置頂”字樣）
- 文章分頁(yè)導(dǎo)航鏈接正常顯示并且可以工作
可讀性測(cè)試
合理的顯示“閱讀更多”字樣的鏈接，指向具體文章的具體位置
文章格式（Post Format）測(cè)試
- 如果主題支持文章格式，在索引頁(yè)面需要顯示文章對(duì)應(yīng)的文章格式關(guān)鍵字或者標(biāo)志
- 對(duì)于屬于“圖片文章格式”的文章，圖片不能溢出內(nèi)容區(qū)域
- 對(duì)于屬于“視頻文章格式”的文章，視頻不能溢出內(nèi)容區(qū)域
缺少內(nèi)容測(cè)試
- 對(duì)于無(wú)主體內(nèi)容的文章，不能影響到布局
- 對(duì)于無(wú)標(biāo)題的文章，不能影響到布局
- 對(duì)于無(wú)標(biāo)題的文章，應(yīng)該有一個(gè)文章的固定鏈接指向具體文章
分類目錄和標(biāo)簽測(cè)試
- 主題中必須要合理的使用分類目錄和標(biāo)簽這兩種分類方式
- 即便是非常多的分類目錄和標(biāo)簽也不會(huì)影響主題的布局
文章保護(hù)性測(cè)試
- 對(duì)于帶有密碼保護(hù)的文章，必須顯示密碼表單
- 文章內(nèi)容不能顯示出來(lái)
- 評(píng)論不能顯示出來(lái)
- 當(dāng)輸入正確密碼之后，文章或者摘要等正常顯示
文章正文測(cè)試
正文的測(cè)試需要導(dǎo)入官方的測(cè)試數(shù)據(jù)，里面包含了所有可能的文章形式。打開對(duì)應(yīng)的文章根據(jù)下面的測(cè)試準(zhǔn)則進(jìn)行測(cè)試。
布局測(cè)試
- 正確的顯示文章內(nèi)頁(yè)面導(dǎo)航鏈接并指向正確的文章頁(yè)面（這里是指長(zhǎng)文章被 more 標(biāo)簽分割成多個(gè)頁(yè)面的導(dǎo)航鏈接）
- 文章的固定鏈接默認(rèn)指向“頁(yè)面1”
- 段落顯示效果正常，被指定向左、居中、向右、拉伸排版的段落布局正常
- h1-h6 標(biāo)題都要進(jìn)行修飾
- blockquote 的修飾要縮進(jìn)或者明顯區(qū)別于其他內(nèi)容
- blockquote 的修飾如果使用了背景圖片等，確保無(wú)論在長(zhǎng)內(nèi)容還是短內(nèi)容都會(huì)顯示正常
- table、tr、th、td 等表格標(biāo)簽要進(jìn)行樣式修飾
- dl、ul、ol、li 等列表標(biāo)簽要進(jìn)行樣式修飾，特別注意下級(jí)列表的縮進(jìn)等處理
- 下列的 HTML 標(biāo)簽的修飾，應(yīng)該根據(jù)標(biāo)簽對(duì)應(yīng)的語(yǔ)義性進(jìn)行合理的修飾：address、a、big、cite、code、del、em、ins、kbd、pre、q、s、strong、sub、sup、tt、var。例如 del 標(biāo)簽是刪除線的意思，應(yīng)該對(duì)其定義一條橫穿文本的刪除線。
- 注意文中 div、span 標(biāo)簽的處理
可讀性測(cè)試
- 對(duì)正文內(nèi)容的修飾，應(yīng)該符合正常的閱讀習(xí)慣，通常有：背景和文字顏色差別大，文字識(shí)別性強(qiáng)、字體合理不怪異、字體大小合適、行高合理、段落寬度和字間距合理。
圖片測(cè)試
- 設(shè)置圖片居中、向左、向右或者無(wú)排版的時(shí)候顯示正常
- 除了當(dāng)作裝飾性的圖片，圖片應(yīng)該有一個(gè)邊框可以與其他內(nèi)容區(qū)分開
- 使用大尺寸圖片測(cè)試，圖片顯示正常并且應(yīng)該自動(dòng)調(diào)整大小以適應(yīng)布局，布局不能錯(cuò)位
- 如果大尺寸圖片是不進(jìn)行尺寸調(diào)整的，應(yīng)該設(shè)置 overflow 將超出部分隱藏
- 縮略圖正常顯示
自定義文章格式測(cè)試
與前面不同的是，這里測(cè)試的自定義文章格式，是在訪問文章正文頁(yè)面時(shí)看到的效果測(cè)試。
- 圖集（Gallery）格式的文章顯示正確，圖集的縮略圖指向?qū)?yīng)的圖片內(nèi)容
- 圖片（Image）格式的文章中的圖片在文章正文頁(yè)面顯示，而且不能溢出內(nèi)容區(qū)域
- 視頻（Video）格式的文章，視頻播放器工作正常，不會(huì)引起錯(cuò)位，$content_width 變量需要一個(gè)明確合適的值
- 音頻（Audio）格式的文章，附件的鏈接正常，播放器工作正常
長(zhǎng)標(biāo)題的文章測(cè)試
發(fā)布一篇長(zhǎng)標(biāo)題的文章進(jìn)行測(cè)試，標(biāo)題要很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)的。
- 測(cè)試標(biāo)題的 line-height 行高是否合理、美觀、不錯(cuò)位
- 測(cè)試主題對(duì)長(zhǎng)標(biāo)題的處理是否有溢出等問題
無(wú)內(nèi)容和無(wú)標(biāo)題文章測(cè)試
- 無(wú)內(nèi)容和無(wú)標(biāo)題文章也需要正確的顯示結(jié)構(gòu)，不能引起錯(cuò)位等。
評(píng)論測(cè)試
- 評(píng)論內(nèi)容顯示正常
- 嵌套的評(píng)論顯示正常
- 評(píng)論的分頁(yè)導(dǎo)航鏈接顯示正常
- 作者發(fā)表的評(píng)論需要特殊標(biāo)記以便與其他評(píng)論區(qū)分
- 評(píng)論者的頭像顯示正常
- 對(duì)登陸或未登錄用戶評(píng)論都顯示正常
- 管理員登陸之后，評(píng)論需要顯示“編輯”鏈接
- 在評(píng)論內(nèi)容中的 HTML 結(jié)構(gòu)也需要進(jìn)行修飾，特別是列表（list）和引用（blockquote）對(duì)象
- 當(dāng)評(píng)論關(guān)閉的時(shí)候，評(píng)論表單不能顯示
- 當(dāng)評(píng)論關(guān)閉的時(shí)候，應(yīng)該明確提示“評(píng)論已經(jīng)關(guān)閉”
- 當(dāng)文章接收到 Trackbacks 的時(shí)候，需要和評(píng)論區(qū)分開，同時(shí)顯示正常不錯(cuò)位
頁(yè)面（Page）測(cè)試
頁(yè)面測(cè)試通過觀察官方測(cè)試數(shù)據(jù)中的頁(yè)面即可，通常使用 page.php 文件作為模板。主要測(cè)試如下內(nèi)容：
帶有評(píng)論的頁(yè)面
- 評(píng)論列表和評(píng)論表單顯示正常
- 頁(yè)面內(nèi)包括發(fā)表時(shí)間等常見內(nèi)容
關(guān)閉評(píng)論的頁(yè)面
- 評(píng)論列表和評(píng)論表單不現(xiàn)實(shí)
- 不需要顯示“當(dāng)前評(píng)論關(guān)閉”等提示內(nèi)容
- 布局正常不錯(cuò)位
全局其他測(cè)試
菜單（Menus）測(cè)試
- 測(cè)試大量的分類目錄和頁(yè)面組成的菜單是否顯示正常，測(cè)試多層菜單是否正常顯示不錯(cuò)位
- 如果主題的自定義菜單可用，測(cè)試啟用自定義菜單和沒有啟用時(shí)使用默認(rèn)菜單的布局，測(cè)試是否正常無(wú)錯(cuò)位
部件（Widgets）測(cè)試
- 所有的部件顯示是否正常
- WordPress 內(nèi)置的部件在所有的顯示部件的區(qū)域顯示正常，并加樣式合理修飾
- 如果主題使用自定義部件，測(cè)試自定義部件是否工作正常
- 在所有可以使用部件的區(qū)域測(cè)試所有部件的顯示效果和功能是否正常
- 當(dāng)自定義部件激活之后，在可以使用部件區(qū)域的默認(rèn)內(nèi)容應(yīng)該消失被替換掉
主題屏幕截圖（Screenshot）測(cè)試
- 屏幕截圖用在后臺(tái)選擇主題的地方，應(yīng)該準(zhǔn)確的展示主題的設(shè)計(jì)風(fēng)格
- 確保屏幕截圖不會(huì)顯示一些自定義的內(nèi)容，而應(yīng)該顯示默認(rèn)情況下的外觀
作者鏈接的要求
在主題中，可以定義作者的網(wǎng)站鏈接，這個(gè)鏈接應(yīng)該是與主題有關(guān)的，或者是介紹主題等內(nèi)容的網(wǎng)頁(yè)。而不應(yīng)該是一些廣告頁(yè)面鏈接或者其他鏈接。
總結(jié)
主題的單元測(cè)試，是一個(gè)必不可少的主題測(cè)試步驟。我愛水煮魚在這里結(jié)合官方文檔進(jìn)行了整理，如果想要看完整版的單元測(cè)試，可以到單元測(cè)試官方頁(yè)面查看。
除此之外，主題測(cè)試還有一些其他的步驟和過程，例如：主題文件檢查、W3C 驗(yàn)證等等。我們將會(huì)后續(xù)針對(duì)這些測(cè)試寫一些教程，請(qǐng)及時(shí)關(guān)注我愛水煮魚。
