在制作 WordPress 的過程中,除了對整體的結構等進行排版布局等,還必須要對正文的內容和其他地方進行修飾和排版,例如正文中可能出現的 標題(h2、h3)、列表(ul、ol)、表格(table) 以及不同的文章類型效果等等。這就是 WordPress 主題的單元測試(Theme Unit Test)。
單元測試是比較復雜的工作,特別是添加測試數據。測試數據必須考慮到任何一種用戶發表文章可能出現的情況,例如上傳圖片的時候設置居中還是左右、發表置頂文章怎么處理、發表私密文章和帶密碼保護的文章如何處理等等。靠我們個人來發表這些測試內容肯定又麻煩又覆蓋不全面。WordPress 官方就為我們準備了這樣一套單元測試流程和測試數據,我們只需要導入數據然后根據測試流程進行測試就可以了。下面我們來實際的操作一下。
主題單元測試基礎
導入官方 unit 測試數據
首先你需要在本地或者服務器上建立一個新的 WordPress 站點,用來進行主題的單元測試。安裝方法跟普通的 WordPress 站點一樣。
然后就需要使用后臺導入工具導入官方的 unit test 數據。安裝完成之后登陸后臺,找到“工具” => “導入” 選擇 WordPress 類型,然后安裝好導入插件之后,下載官方 unit 測試數據:
- 官方測試數據下載:下載
- 本地底部提供相關文件下載
最后一步就是導入 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 驗證等等。我們將會后續針對這些測試寫一些教程,請及時關注我愛水煮魚。