Log | Starck Lin

Modern Testing with Laravel 4

Coding, Log — Tags: Laravel, PHP, Thinking — Posted by Starck on June 18, 2013

Behavior-Driven Development

簡稱 BDD, 簡單地說就是用一種情境設定的方式來進行開發的過程。

在 Laravel 4 我們需要以下三種組合之一:

Codeception
[email protected] and Mink – (optional)
Selenium2, PhantomJS and Mink – (optional)

Codeception Installation

# 下載 codecept
$ wget http://codeception.com/codecept.phar
# 初始化 codecept, 它會建立所需的檔案在目前的目錄中的 tests 資料夾
$ php codecept.phar bootstrap

查看有什麼指令可以使用:

php codecept.phar

修改 tests/functional.suite.yml:

class_name: TestGuy
modules:
    enabled: [Laravel4, TestHelper]

1

2

3

class_name: TestGuy

modules:

enabled: [Laravel4, TestHelper]

因為我們新增了一個 Laravel4 的 module, 所以讓 Codeception 再次重新建立所需的 Class:

php codecept.phar build

Codeception Usage

建立第一個測試:

php codecept.phar generate:cept acceptance Fisrt

Codeception 會在 tests/acceptance/ 下建立一個 FirstCept.php 檔案

內容為:

<?php
$I = new WebGuy($scenario);

1 2	<?php $I = new WebGuy($scenario);

First Scenario

我要到 / (網站首頁)。
我看到了 Hello World! 這段文字出現在首頁上。

這樣的情境，寫成測試檔就變成如下:

<?php
$I = new WebGuy($scenario);
$I->wantTo('goto homepage, and see hello word');
$I->amOnPage('/');
$I->see('Hello World!');

1

2

3

4

5

<?php

$I = new WebGuy($scenario);

$I->wantTo('goto homepage, and see hello word');

$I->amOnPage('/');

$I->see('Hello World!');

執行測試:

php codecept.phar run

Zombie.JS and Mink

由於 Codeception 的 PhpBrowser 是基於 PHP Curl 去實現模擬 Browser 的操作, 所以面對一些會有 Javascript 互動的網頁，在測試上就會顯得力不從心。還好 Codeception 提供了 ZombieJS module, 我們可以得到一個更真實的模擬測試。

Zombie.JS

Zombie.JS 是一個 NPM 的 package, 所以在這之前我們必須先安裝好 NPM 的環境。

將 zombie 1.4.1 版安裝到全域環境:

sudo npm install -g [email protected]

2013-06-18 註: 經測試, 目前只能裝 1.4.1 的版本, 版本太新 Mink 不支援.

開啟 ~/.bashrc, 加上 NODE_PATH 的設定

export NODE_PATH="/usr/local/lib/node_modules"

Mink

在 composer.json 中加入到 require:

"behat/mink": "1.5.*@dev"

重新更新 composer:

composer update

目前已知問題： checkOption(), uncheckOption(), executeJs() 無作用

Selenium2 and PhantomJS

比起 Zombie.JS, 我更喜歡 PhantomJS, 更穩定且資源豐富. 主要看到官方的一些範例, 真得相當地強大, 甚至可以 Screenshot… (Codeception 用來當發生測試失敗時會將快照存在 log 資料夾, 相當地方便!)

要使用 PhantomJS 當作 Browser, 我們需要 Selenium2 作 driver.

先執行 Selenium2:

java -jar selenium-server-standalone-2.33.0.jar

將會啟動一個 Selenium2 Server, 預設會使用 port 4444, 如需修改可在後面加上 -port 參數:

java -jar selenium-server-standalone-2.33.0.jar -port 8888

08:17:34.571 INFO - Java: Apple Inc. 20.45-b01-451
08:17:34.572 INFO - OS: Mac OS X 10.7.5 x86_64
08:17:34.584 INFO - v2.33.0, with Core v2.33.0. Built from revision 4e90c97
08:17:34.691 INFO - RemoteWebDriver instances should connect to: http://127.0.0.1:4444/wd/hub
08:17:34.692 INFO - Version Jetty/5.1.x
08:17:34.692 INFO - Started HttpContext[/selenium-server/driver,/selenium-server/driver]
08:17:34.693 INFO - Started HttpContext[/selenium-server,/selenium-server]
08:17:34.693 INFO - Started HttpContext[/,/]
08:17:34.738 INFO - Started org.openqa.jetty.jetty.servlet.ServletHandler@56d73c7a
08:17:34.738 INFO - Started HttpContext[/wd,/wd]
08:17:34.746 INFO - Started SocketListener on 0.0.0.0:4444
08:17:34.746 INFO - Started org.openqa.jetty.jetty.Server@54cbf30e

接著啟動 PhantomJS 跟 Selenium2 連接:

phantomjs --webdriver=4444

PhantomJS is launching GhostDriver...
[INFO  - 2013-06-18T00:17:27.627Z] GhostDriver - Main - running on port 4444

然後設定 Codeception 的 tests/acceptance.suite.yml 設定檔, 指定用 Selenium2 module:

modules:
   enabled: [Selenium2]
   config:
      Selenium2:
         url: 'http://starck-macmini'
         browser: firefox
         capabilities:
             unexpectedAlertBehaviour: 'accept'
             # delay: 500

1

2

3

4

5

6

7

8

9

modules:

enabled: [Selenium2]

config:

Selenium2:

url: 'http://starck-macmini'

browser: firefox

capabilities:

unexpectedAlertBehaviour: 'accept'

# delay: 500

url (required) – start url for your app
browser (required) – browser that would be launched
host – Selenium server host (localhost by default)
port – Selenium server port (4444 by default)
delay – To set delay between actions in milliseconds (1/1000 of second) if they run too fast
capabilities – To set Selenium2 desired capabilities. Should be a key-value array.

Comments (0)

Use ownCloud to build your own network drive

Log — Tags: Cloud, Mac, Ubuntu — Posted by Starck on June 12, 2013

Install linux packages

apt-get update and some libraries:

sudo apt-get update
sudo apt-get upgrade
sudo apt-get install php5-gd php-xml-parser php5-intl smbclient curl libcurl3 php5-curl
sudo a2enmod rewrite
sudo a2enmod headers

1

2

3

4

5

sudo apt-get update

sudo apt-get upgrade

sudo apt-get install php5-gd php-xml-parser php5-intl smbclient curl libcurl3 php5-curl

sudo a2enmod rewrite

sudo a2enmod headers

Ubuntu 13.04:

sudo su
echo 'deb http://download.opensuse.org/repositories/isv:ownCloud:community/xUbuntu_13.04/ /' >> /etc/apt/sources.list.d/owncloud.list 
apt-get update
apt-get install owncloud

wget http://download.opensuse.org/repositories/isv:ownCloud:community/xUbuntu_13.04/Release.key
apt-key add - < Release.key

1

2

3

4

5

6

7

sudo su

echo 'deb http://download.opensuse.org/repositories/isv:ownCloud:community/xUbuntu_13.04/ /' >> /etc/apt/sources.list.d/owncloud.list

apt-get update

apt-get install owncloud

wget http://download.opensuse.org/repositories/isv:ownCloud:community/xUbuntu_13.04/Release.key

apt-key add - < Release.key

Download web installer

cd /var/www/{your web root}
wget https://download.owncloud.com/download/community/setup-owncloud.php

1 2	cd /var/www/{your web root} wget https://download.owncloud.com/download/community/setup-owncloud.php

Server Web-DAV Installation

Open your browser, run the web installer script, ex: http://{domain.name}/setup-owncloud.php

follow the steps in installer, finish it.

Sync-Client Installation

for MacOS:

download

Reference

How to setup owncloud 5 on ubuntu 12.10

mobile01 – OwnCloud, 一套適合自建的網路同步硬碟

Comments (0)

Upgrade Ubuntu

Log — Tags: Ubuntu — Posted by Starck on May 26, 2013

install the update-manager-core package if it is not already installed:

$ sudo apt-get install update-manager-core
Edit /etc/update-manager/release-upgrades and set Prompt=normal;
Launch the upgrade tool with the command:

$ sudo do-release-upgrade -d

List installed packages:

$ sudo dpkg --get-selections

Comments (0)

使用不同版本的 Foundation

Log — Tags: Foundation, Ruby — Posted by Starck on May 24, 2013

切換 ruby

rvm use <version>

rvm list

切換與建立 gemset

你可以使用不同的 gem 設定

rvm gemset create <name>

rvm gemset use <name>

Using Foundation 4

rvm gemset create foundation4
rvm gemset use foundation4
gem install zurb-foundation
gem install compass

1

2

3

4

rvm gemset create foundation4

rvm gemset use foundation4

gem install zurb-foundation

gem install compass

Using Foundation 3

rvm gemset create foundation3
rvm gemset use foundation3
gem install zurb-foundation --version '< 4'
gem install compass

1

2

3

4

rvm gemset create foundation3

rvm gemset use foundation3

gem install zurb-foundation --version '< 4'

gem install compass

Comments (0)

V8 Javascript Engine for PHP on Mac

Log — Tags: github, javascript, PHP — Posted by Starck on April 8, 2013

This is a PHP extension embeds the Google V8 Javascript Engine.

V8js extension on Github

Installation

brew install v8
git clone https://github.com/preillyme/v8js
cd v8js
phpize
# MacOS
# ./configure CXXFLAGS="-Wno-c++11-narrowing"
./configure
make; sudo make install

1

2

3

4

5

6

7

8

brew install v8

git clone https://github.com/preillyme/v8js

cd v8js

phpize

# MacOS

# ./configure CXXFLAGS="-Wno-c++11-narrowing"

./configure

make; sudo make install

Usage

check samples and tests folder

Problems

如果你經由 PECL 安裝 v8js:

sudo pecl install v8js

你可能會遇到一些編譯上的錯誤, 造成這個問題的原因是因為在 PECL 上的版本 0.1.3 使用了一個已經被最新版 V8 engine 所廢除的函式, 如果想要使用這個版本的話必須要使用 V8 3.15.11 的版本, 降版的方式如下:

brew install v8-3.15.11

如果之後想要切換回新版:

# 查看目前安裝哪些版本
brew info v8
# 切換版本
brew switch 3.17.10

1

2

3

4

# 查看目前安裝哪些版本

brew info v8

# 切換版本

brew switch 3.17.10

–

Comments (0)

Git Deployment Solution

Coding, Log — Tags: deployment, git, strategy, Thinking, workflow — Posted by Starck on April 2, 2013

Why we need a Git Deployment Solution ?

In our past website develop workflow, we may often update files to production server by FTP, but it maybe causes some problems due to human factors, and it can’t be controlled and tracked for file version. As we increasingly need to maintain our projects by Git, if we are able to update server files while we do Git push, it sounds like a good idea, right? so we dont need to check which files want to upload any more. even we can push our project to development server and production server according to our needs.

在以往網站建置的工作流程中, 我們可能常常是用 FTP 的方式來更新 production server 的檔案. 這之中, 常會發生一些人為因素的失誤造成混亂, 而且也沒有一個紀錄來追蹤檔案的版本情況. 現在的工作愈來愈需要 Git 來維護專案, 而如果我們在每次 Git push 的時候, 也更動 server 的檔案, 似乎是個不錯的 idea? (我們不再需要用 FTP 自已判斷要上傳哪些有被異動過的檔案了!) 甚至我們可以先在本機測完, Git push 到 development server, 沒問題後, 再正式發佈到 production server 上線.

聽起來好像不錯? 那該怎麼作?

需要的工具

Git
一台已經設好 SSH-Server 的主機 ex: production.com

設定流程

假設我們現在是這個情況:

伺服器的 domain name 叫 production.com
伺服器網站的根目錄設在 /var/www/production.com

本機端 (local)

mkdir "your project folder"
cd "your project folder"
# 建立 git 檔案庫
git init
# create release branch
git branch master
git checkout master
git remote add prod-server [email protected]:/var/www/production.com

伺服器端 (production server)

cd /var/www/production.com
git init
git config receive.denyCurrentBranch ignore
git branch master
git checkout master

我們需要用到 Git post-receive hook 來實現當收到 push 資料之後更新到最後版本:

vim .git/hooks/post-receive

將以下 script 內容加上去

#!/bin/sh
cd ..
env -i git reset --hard
env -i git submodule update

1

2

3

4

#!/bin/sh

cd ..

env -i git reset --hard

env -i git submodule update

別忘了讓 post-receive 是可被執行的:

chmod +x .git/hooks/post-receive

實作流程

本機端 (local)

我們先建立一個 README.md, 然後用 Git push 看看是否伺服器上也會同步:

touch README.md
git add .
git commit -m 'first commit'
git push prod-server master

1

2

3

4

touch README.md

git add .

git commit -m 'first commit'

git push prod-server master

Git 會用 SSH 的方式連線, 所以請先確認是否能用該 user 連線登入 production server.

–

如果想要之後只打 git push 就佈署到主機, 請加上 -u 參數 git push -u prod-server master

伺服器端 (production server)

ls
-rw-rw-r-- 1 starck starck 32 2013-04-01 19:49 README.md

1 2	ls -rw-rw-r-- 1 starck starck 32 2013-04-01 19:49 README.md

確認 README.md 存在, 成功!

現在, 我們現在有一個比 FTP 上傳更聰明的佈署方式了.

–

2013-04-03 update: 今天在找資料的時候發現 Stack Overflow 有人在討論這個方式.

Stack Overflow: Deploying a Project using Git Push

.

Comments (0)

Chrome Extension – Secure Shell

Log — Posted by Starck on April 2, 2013

Secure Shell

這是一個可以讓你直接在 Chrome 瀏覽器 SSH 連線的 Chrome Extension

使用過後覺得還蠻好用的, 但因為切換視窗的習慣, 目前可能還是會用 iTerm, 但無論如何, 這是個不錯的 idea.

Secure Shell on Google Web Store.

–

改變字型

開啟 Chrome console, 執行下面的命令:

term_.prefs_.set('font-family', 'Monaco')

改變字體大小

term_.prefs_.set('font-size', '12')

Comments (0)

Laravel 4 Tutorial Part 2 – Migrations and Artisan

Log — Tags: Laravel, PHP — Posted by Starck on March 31, 2013

Migrations

Migrations Installation

migrate:install : it will crate a migrations table for record any changes of database.

$ php artisan migrate:install

1	$ php artisan migrate:install

Making a new migration record

migrate:make (create|remove)_tablename_table

$ php artisan migrate:make create_authors_table

1	$ php artisan migrate:make create_authors_table

The --table and --create options may also be used to indicate the name of the table, and whether the migration will be creating a new table:

$ php artisan migrate:make create_authors_table --table=authors --create

// up() 
Schema::create('authors', function($table){ 
  $table->increments('id'); 
  $table->string('name'); 
  $table->text('bio'); 
  $table->timestamp(); 
});

// down() 
Schema::drop('authors');

1

2

3

4

5

6

7

8

9

10

// up()

Schema::create('authors', function($table){

$table->increments('id');

$table->string('name');

$table->text('bio');

$table->timestamp();

});

// down()

Schema::drop('authors');

Running All Outstanding Migrations

$ php artisan migrate

To seed your database, you may use the db:seed command on the Artisan CLI:

$ php artisan db:seed

Rollback all migrations and run them all again

$ php artisan migrate:refresh --seed

Artisan

Check routes status: $ php artisan routes

Clear auto-load files: $ php artisan clear-compiled

Re-generate auto-load files: $ php artisan dump-autoload

Comments (0)

讓 Markdown-On-Save-Improved 支援 Github 的 Fenced code blocks

Log — Tags: github, Markdown, WordPress — Posted by Starck on March 30, 2013

修改 markdown-on-save.php:

protected function process( $content, $id ) {
  $this->maybe_load_markdown();
  // Links with "quoted titles" bork without stripping slashes.
  // Stripslashes would lose desired backslashes. So, regex.
  $content = preg_replace( '/\\\"/', '"', $content );
  
  // Added by Starck Lin - parsing Github Fenced code blocks
  $content = preg_replace("/\n```([A-z :]+)([^```]+?)\n```/", '<pre class="lang:$1">$2</pre>', $content );
  $content = preg_replace("/\n```([^```]+?)\n```/", '<pre>$1</pre>;', $content );
  
  // convert to Markdown
  $content = $this->parser->transform( $content );
  
  // reference the post_id to make footnote ids unique
  $content = preg_replace( '/fn(ref)?:/', "fn$1-$id:", $content );
  
  return $content;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

protected function process( $content, $id ) {

$this->maybe_load_markdown();

// Links with "quoted titles" bork without stripping slashes.

// Stripslashes would lose desired backslashes. So, regex.

$content = preg_replace( '/\\\"/', '"', $content );

// Added by Starck Lin - parsing Github Fenced code blocks

$content = preg_replace("/\n```([A-z :]+)([^```]+?)\n```/", '<pre class="lang:$1">$2</pre>', $content );

$content = preg_replace("/\n```([^```]+?)\n```/", '<pre>$1</pre>;', $content );

// convert to Markdown

$content = $this->parser->transform( $content );

// reference the post_id to make footnote ids unique

$content = preg_replace( '/fn(ref)?:/', "fn$1-$id:", $content );

return $content;

}

這是搭配 Crayon WP-Plugin, 如果遇到原始碼有 </pre> 的問題, 可以轉成 < (<) 和 > (>), 再把 crayon 的 decode 設為 true.

另外有個值得注意的點, 換行符號我是用雙引號來轉換 \n

Fork it on Github

Comments (0)