Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to build a WordPress plugin by TDD

kazweda
November 07, 2015

How to build a WordPress plugin by TDD

WordBench愛媛 - 秋のお茶会のプレゼン資料です。
VCCW環境でTDDを試してみました。

kazweda

November 07, 2015
Tweet

More Decks by kazweda

Other Decks in Programming

Transcript

  1. プラグインで開発
    at
    秋のお茶会
    #wbehime

    View full-size slide

  2. WordPress
    1. コンテンツ管理
    -> WordPress の基本機能
    2. デザインのカスタマイズ
    -> テーマ制作で対応
    3. 機能追加
    -> 独自プラグインで対応

    View full-size slide

  3. Plugin Handbook
    goo.gl/XK0sRI

    View full-size slide

  4. Plugin 作成で最低限必要なもの
    plugins$ mkdir sfd-handbook
    sfd-handbook$ vi sfd-handbook.php
    /*
    Plugin Name: My Toolset
    */

    View full-size slide

  5. テストコードを書こう
    参考までに、昨年の Coderetreat
    "Global Day of Coderetreat 2014
    in Matsuyama"
    agile459.doorkeeper.jp/events/16066
    ペア( 2 人一組)でプログラムの問
    題を TDD で解くトレーニングのイ
    ベント。世界同時(同日)開催。

    View full-size slide

  6. TDD のメリット
    ワンアクション (phpunit 実行 ) で、
    一連の動作確認ができます。
    ブラウザで所定のページを開いて動
    作確認して、でも別のページが壊れ
    ていて ... 、のようなデバッグ作業が
    格段に効率化できます。

    View full-size slide

  7. テスト駆動開発の参考記事
    WP-CLI+PHPUnit を使った WordPress
    プラグインのユニットテスト(1)
    https://firegoby.jp/archives/5498
    WP-CLI+PHPUnit を使った WordPress
    プラグインのユニットテスト(2)
    https://firegoby.jp/archives/5511

    View full-size slide

  8. 環境が整っている前提で ...
    仮想環境(べいぐらんと)を起動
    $ vagrant up
    仮想環境に ssh で入る
    $ vagrant ssh
    wordpress ディレクトリへ移動
    $ cd /var/www/wordpress
    WP-CLI でプラグインのひな形を生成
    $ wp scaffold plugin my-counter

    View full-size slide

  9. 自動生成されたフォルダ

    View full-size slide

  10. PHPUnit 用の WordPress 環境準備
    プラグインのディレクトリに移動
    $ cd $(wp plugin path --dir my-counter)
    テスト用 WordPress 環境を作成
    $ bash bin/install-wp-tests.sh wordpress_test root
    'wordpress' localhost latest
    mysqladmin: CREATE DATABASE failed;
    error: 'Can't create database
    'wordpress_test'; database exists'
    (テスト用DBはすでに作られている様子。)

    View full-size slide

  11. PHPUnit を実行してみる

    View full-size slide

  12. 自動生成されたテストコード
    プラグインフォルダ内の
    test/test-sample.php
    class SampleTest extends WP_UnitTestCase {
    function test_sample() {
    // replace this with some actual testing code
    $this->assertTrue( true );
    }
    }

    View full-size slide

  13. テスト用のクラスを追加
    $ touch tests/test-my-counter.php
    ショートコードを実行すると0が返る
    class MyCounterTest extends WP_UnitTestCase {
    function test_my_counter_shortcode() {
    $count = do_shortcode( '[my_counter]' );
    $this->assertEquals('0', $count);
    }
    }

    View full-size slide

  14. テストを実行 - 失敗
    $ phpunit

    View full-size slide

  15. shortcode の処理を実装
    class MyCounter {
    public function __construct() {
    add_shortcode( 'my_counter', array( $this,
    'mycounter_shortcode' ));
    }
    public function mycounter_shortcode($p) {
    return '0';
    }
    }

    View full-size slide

  16. テストを実行 - 成功
    $ phpunit

    View full-size slide

  17. プラグインを有効にして、

    View full-size slide

  18. Widget に設置してみる

    View full-size slide

  19. プラグインのテスト駆動開発
    表示されない ...

    View full-size slide

  20. Widget でショートコードを使う
    フィルターが必要でした。
    class MyCounterTest extends WP_UnitTestCase {
    function test_my_counter_shortcode() {
    $count = do_shortcode( '[my_counter]' );
    $this->assertEquals('0', $count);
    $this->assertTrue(
    has_filter('widget_text', 'do_shortcode')
    );
    }
    }

    View full-size slide

  21. Widget でショートコードを使う
    テスト実行。

    View full-size slide

  22. Widget でショートコードを使う
    フィルターを追加。
    class MyCounter {
    public function __construct() {
    add_shortcode( 'my_counter', array( $this,
    'mycounter_shortcode' ));
    add_filter('widget_text', 'do_shortcode' );
    }
    ...

    View full-size slide

  23. Widget でショートコードを使う
    Widget に表示できた。

    View full-size slide

  24. カウントアップ
    class MyCounterTest extends WP_UnitTestCase {
    ...
    function test_counter_increment() {
    $cnt0 = do_shortcode( '[my_counter]' );
    $cnt1 = do_shortcode( '[my_counter]' );
    $this->assertEquals( $cnt1, $cnt0 + 1 );
    }
    ...
    カウントアップのテストコード追加。

    View full-size slide

  25. カウントアップのテスト実行
    未実装なのでエラー( 0 のまま)

    View full-size slide

  26. カウントアップを実装
    class MyCounter {
    ...
    public function mycounter_shortcode($p) {
    $count = get_option( 'my_counter' ) + 1;
    update_option( 'my_counter', $count );
    return $count;
    }
    ...
    今回は WordPress のオプション値を利用。

    View full-size slide

  27. カウントアップのテスト実行
    カウントアップできた。

    View full-size slide

  28. 続きはデモにて。

    View full-size slide

  29. 参考資料
    Testing Added Hooks
    http://goo.gl/I2VySn
    関数リファレンス /add_filter
    https://goo.gl/McBgYS

    View full-size slide