wp-themeceptionをローカルで動かしてみたときの覚書
WordCamp Kyoto 2017のコントリビューターデイで紹介のあったテーマの自動テストを実行するツール、https://github.com/miya0001/wp-themeceptionをようやくローカルPC […]
目次
WordCamp Kyoto 2017のコントリビューターデイで紹介のあったテーマの自動テストを実行するツール、https://github.com/miya0001/wp-themeceptionをようやくローカルPCで試すことができたので、覚書。
MySQLの起動
ローカルPC内でMySQLを起動させます
$ mysql.server start
Starting MySQL
. SUCCESS!
$ mysql.server status
SUCCESS! MySQL running (23875)
セットアップ
$ git clone [email protected]:miya0001/wp-themeception.git
$ cd wp-themeception
$ npm run init
$ export WP_VERSION=latest WP_THEME=twentysixteen WP_PATH=/tmp/wp-tests WP_ERROR_LOG=/tmp/wp-error.log
WordPressのインストールとセットアップ
$ npm run install-wp
$ npm run wp
> @ wp /Users/develop/php/wordpress/wp-themeception
> /usr/bin/env bash bin/run-wp.sh
+ WP_PATH=/tmp/wp-tests
+ WP_PORT=8080
+ WP_ERROR_LOG=/tmp/wp-error.log
+ cat
+ ./wp-cli-nightly.phar server --host=0.0.0.0 --port=8080 --docroot=/tmp/wp-tests --path=/tmp/wp-tests --config=php.ini
PHP 7.1.0 Development Server started at Sun Aug 13 14:22:42 2017
Listening on https://0.0.0.0:8080
Document root is /private/tmp/wp-tests
Press Ctrl-C to quit.
テスト
テスト自体はnpm testを実行するだけでOKです。
デフォルトテーマが設定された状態になっていますので、セットアップに問題がなければテストは問題なく通過するはずです。
WordPress.org以外からDLしたテーマをテストする
せっかくなので、他のテーマもテストしてみます。
こういう時に実験台に使っても怒らなさそうなToro_Unitさんのテーマを使ってみました。
※WordPress.orgからもDL可能です→Vanilla — Free WordPress Themes
セットアップ
あえてGitHubにあるzipファイルを落としてみます。
WP_PATHに指定したパスのwp-content/themes/配下にレビューしたいテーマを配置しましょう。
$ cd /tmp/wp-tests/wp-content/themes/
$ wget https://github.com/torounit/vanilla/archive/dist.zip
$ unzip dist.zip
$ ls | grep vanilla
vanilla-dist
$ wp theme list
+-----------------+----------+--------+---------+
| name | status | update | version |
+-----------------+----------+--------+---------+
| twentyfifteen | inactive | none | 1.8 |
| twentyseventeen | inactive | none | 1.3 |
| twentysixteen | active | none | 1.3 |
| vanilla-dist | inactive | none | 1.6.4 |
+-----------------+----------+--------+---------+
あとはテーマを有効化しておけば準備OKです。
$ wp theme activate vanilla-dist
Success: Switched to 'Vanilla' theme.
テスト実行
再びnpm testを実行すると、I can see current themeの値が有効化したテーマのものになっていることが確認できます。
$ npm test
Codeception PHP Testing Framework v2.2.6
Powered by PHPUnit 5.6.3 by Sebastian Bergmann and contributors.
Acceptance Tests (1) ------------------------------------------------------------------------------------------------------------------------------
wpThemeCept: Reviewing the theme.
Signature: wpThemeCept
Test: tests/acceptance/wpThemeCept.php
Scenario --
I can see wp version
4.8.1
I can see current theme
vanilla-dist
---
エラーなく終わればテストOKです。
---
I am on page "/this-test-is-checking-on-404"
I can dont see js errors
I can dont see img errors
---
I see tags
I can see the theme supports
[ ] one-column
[✓] custom-logo
[✓] custom-colors
[✓] custom-menu
[✓] custom-background
[✓] editor-style
[✓] sticky-post
[ ] microformats
[✓] featured-images
[ ] footer-widgets
[✓] threaded-comments
[✓] translation-ready
[ ] blog
[ ] photography
---
I take screenshot "/wp-admin/"
---
I take screenshot "/"
---
I can dont see error in log
PASSED
---------------------------------------------------------------------------------------------------------------------------------------------------
Time: 57.15 seconds, Memory: 14.00MB
OK (1 test, 36 assertions)
ちょっとソース読み
テスト用WordPressの扱い
常にまっさらなWordPressサイトでテストできるように、セットアップコマンドが組まれています。
例えばbin/install-wp.shの19-26行目では、データーベースが存在しない場合は新規作成、そうでない場合は削除後再作成するようになっています。
テスト内容
テスト内容はtests/acceptance/wpThemeCept.phpから見ることができます。
ざっとみた感じですと、2017/08/13時点では以下のようなテストが行われています。
- WordPressのバージョンが確認できること
- 使用中のテーマ名が確認できること
- 管理画面の各種ページが表示できること
- 管理画面の各種ページでJS/画像エラーがないこと
- TOP・アーカイブ・投稿・固定ページが404エラーになっていないこと
- TOP・アーカイブ・投稿・固定ページでJS/画像エラーがないこと
- 404ページでJS/画像エラーがないこと
- 無効なタグがstyle.cssに設定されていないか
- style.cssに設定されたタグの機能が利用可能か
英語以外でのテスト
bin/install-wp.shの70行目やWP Multibyte Patchプラグインがインストールされていないことを見る限り、日本語での表示確認については対応されていません。
あくまで「WordPress.orgのテーマディレクトリに掲載するためのレビューツール」ですので、英語以外での動作確認やレビューに利用されたい方は、Forkしてカスタマイズする必要があります。
ヘルパープラグイン
テスト用のWordPressには、Theme Review Helperというプラグインがインストールされるようになっています。
これはテーマのメタ情報などを取得するためのAPIを追加するもので、
PORTなどの環境変数を変更していなければ、npm run wpコマンド実行後に以下のようなリクエストが行えます。
$ curl https://localhost:8080/theme-meta/ | jq .
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 154 0 154 0 0 1299 0 --:--:-- --:--:-- --:--:-- 1305
{
"name": "Twenty Sixteen",
"version": "1.3",
"stylesheet": "twentysixteen",
"template": "twentysixteen",
"textdomain": "twentysixteen",
"is_textdomain_loaded": true
}
個人的には/theme-features/のAPIがテーマでできることを一気に取得できてめちゃくちゃ便利なのではと思っています。
$ curl https://localhost:8080/theme-features/ | jq .
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 1095 0 1095 0 0 6514 0 --:--:-- --:--:-- --:--:-- 6517
{
"automatic-feed-links": true,
"title-tag": true,
"custom-logo": [
{
"width": 240,
"height": 240,
"flex-width": false,
"flex-height": true,
"header-text": ""
}
],
"post-thumbnails": true,
"menus": true,
"html5": [
[
"search-form",
"comment-form",
"comment-list",
"gallery",
"caption"
]
],
"post-formats": [
[
"aside",
"image",
"video",
"quote",
"link",
"gallery",
"status",
"audio",
"chat"
]
],
"editor-style": true,
"customize-selective-refresh-widgets": true,
"custom-background": [
{
"default-image": "",
"default-preset": "default",
"default-position-x": "left",
"default-position-y": "top",
"default-size": "auto",
"default-repeat": "repeat",
"default-attachment": "scroll",
"default-color": "1a1a1a",
"wp-head-callback": "_custom_background_cb",
"admin-head-callback": "",
"admin-preview-callback": ""
}
],
"custom-header": [
{
"default-image": "",
"random-default": false,
"width": 1200,
"height": 280,
"flex-height": true,
"flex-width": false,
"default-text-color": "1a1a1a",
"header-text": true,
"uploads": true,
"wp-head-callback": "twentysixteen_header_style",
"admin-head-callback": "",
"admin-preview-callback": "",
"video": false,
"video-active-callback": "is_front_page"
}
],
"widgets": true
}
あとかたづけ
MySQLの停止
$ mysql.server stop
Shutting down MySQL
.. SUCCESS!
DLされたWordPressの削除
$ rm -rf /tmp/wp-tests