只要在Mac存檔,就可以在Homestead自動執行TDD,並顯示結果在Mac上

大澤木小鐵在PHP社群掀起一陣測試重構風潮後,已經有越來越多人開始在PHP寫測試。以Laravel而言,我們會在本機寫code,環境則搭配Homestead,由於TDD需要頻繁的測試與重構,若我們能在每次存檔的同時,PHPUnit就自動幫我們在背景執行測試,並將結果直接顯示在本機上,我們就能立即得知測試成功或失敗,如此將大幅提高工作效率。

Version


OS X 10.11
Laravel 5.1.19
Homestead 0.3.0
Laravel Elixir 3.3
Node.js 0.12.7
npm 2.11.3
gulp 3.9.0

Prerequisite


  • 在Mac已經成功安裝好Homestead。
  • 在Mac已經成功安裝Node.js、npm與gulp。

如下圖所示,每次只要在Mac存檔,PHPUnit就會自動執行測試,並顯示測試是否通過,這樣的開發方式是不是很誘人呢?1 1除了可在Laravel Elixir自動跑測試外,使用PhpStorm執行測試也是不錯的方式,詳細請參考如何使用PhpStorm測試與除錯?

安裝Laravel Elixir


Gulp可以幫我們做一些前端的自動化工作,如自動編譯Less與Saas,Babel自動編譯JavaScript ES6,自動執行PHPUnit…等。

Laravel Elixir是Laravel對gulp的再次封裝,讓我們可以更簡單地在Laravel使用gulp。2 2詳細請參考Laravel Elixir

在使用Composer建立Laravel專案時,會自動安裝後端composer.json內的PHP package,但卻沒有自動安裝前端package.json內的Node package,需自行手動安裝。

1
oomusou@mac:~/MyProject$ npm install

使用composer建立Laravel專案後,在專案目錄下安裝Laravel Elixir。

測試Laravel Elixir


1
oomusou@mac:~/MyProject$ gulp

若能看到以下畫面,表示Laravel Elixer已經正常執行,順利編譯Saas。

1
[12:54:34] Using gulpfile ~/MyProject/gulpfile.js
[12:54:34] Starting 'default'...
[12:54:34] Starting 'sass'...

Fetching Sass Source Files...
   - resources/assets/sass/app.scss


Saving To...
   - public/css/app.css

[12:54:36] Finished 'default' after 1.38 s
[12:54:36] gulp-notify: [Laravel Elixir] Sass Compiled!
[12:54:36] Finished 'sass' after 1.45 s

修改gulpfile.js


gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var elixir = require('laravel-elixir');

/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/


elixir(function(mix) {
mix.sass('app.scss')
.phpUnit();
});

16行

1
.phpUnit();

增加.phpUnit();,表示gulp在執行時會自動執行PHPUnit。

Gulp自動執行TDD


1
oomusou@mac:~/MyProject$ gulp tdd

啟動gulp,並自動監視檔案是否修改,若有修改就自動執行PHPUnit。

1
[13:50:24] Using gulpfile ~/MyProject/gulpfile.js
[13:50:24] Starting 'tdd'...
Watching for tests...
[13:50:24] Finished 'tdd' after 61 ms

測試PHPUnit


resources/views/welcome.blade.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head>
<title>Laravel</title>

<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">

<style>
html, body {
height: 100%;
}


body {
margin: 0;
padding: 0;
width: 100%;
display: table;
font-weight: 100;
font-family: 'Lato';
}


.container {
text-align: center;
display: table-cell;
vertical-align: middle;
}


.content {
text-align: center;
display: inline-block;
}


.title {
font-size: 96px;
}

</style>

</head>
<body>
<div class="container">
<div class="content">
<div class="title">Laravel 5</div>
</div>
</div>
</body>
</html>

resources/views/welcome.blade.php的41行的Laravel 5改成Laravel 4,只要一存檔,就可以看到Mac右上角出現訊息視窗,顯示PHPUnit測試失敗。3 3可以在Mac使用任何你喜歡的編輯器或IDE,無論是Sublime Text或PhpStorm都可以。

只要修改成Laravel 5再一存檔,就會顯示PHPUnit測試成功。

為什麼改成Laravel 4會測試失敗呢?

因為在tests/ExampleTest.php中,Laravel預設已經幫我們寫了一個測試如下 :

tests/ExampleTest.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
use Illuminate\Foundation\Testing\WithoutMiddleware;
use Illuminate\Foundation\Testing\DatabaseMigrations;
use Illuminate\Foundation\Testing\DatabaseTransactions;

class ExampleTest extends TestCase
{

/**
* A basic functional test example.
*
* @return void
*/

public function testBasicExample()
{

$this->visit('/')
->see('Laravel 5');
}
}

這個測試將驗證welcome.blade.php是否有Laravel 5字串,若有則測試成功,若沒有則測試失敗,所以我們可以直接藉由修改welcome.blade.php才測試整個自動化環境是否設定成功。4 4詳細請參考Laravel Testing

Conclusion


  • 之前曾完全在Homestead執行Laravel Elixir,然後經過4層轉發 : Homestead的notify-send -> Vagrant的vagrant-notify -> Mac的notify-send -> Mac的terminal-notifier,最後才到OS X的notification center,在Macbook Pro 15” Retina (Mid 2014) 測試,其速度尚可接受,約每次存檔後的一秒內可看到測試結果,不過總是沒直接在Mac執行Laravel Elixir
  • 這種方法會使用到Mac端的PHP、Node.js、npm與gulp,是直接在Mac執行Laravel Elixir,速度非常快,但缺點是在Mac端的要先安裝好Node.js等相關工具,對初學者稍有門檻,所幸這些在Mac安裝都很簡單。
  • 這種方式在Windows也可以使用,不侷限在Mac,不過在Windows安裝Node.js、npm與gulp稍有難度。

Sample Code


完整的範例可以在我的GitHub上找到。