Gebで画面遷移をテストする

[Geb Advent Calendar](http://qiita.com/advent-calendar/2016/geb)6日目です。本日はGebで[タウンワークマガジン](https://townwork.net/magazine/)を簡単にテストしてみます〜！

#開発環境
- Java1.8
- [sdkman](http://sdkman.io/)を使ってgroovyをインストール
- IDEはIntelliJ IDEAを利用

#サンプルを動かす
まずはGebになれるためにサンプルコードを動かしてみます。今回使ったのはこちら→ [geb-example-gradle](https://github.com/geb/geb-example-gradle) 
さっそくcloneし、readmeに書いてあるようにテストを走らせてみました。chromeだけでテストしたいので```./gradlew chromeTest```を実行すると、chromeが自動的に立ち上がり下記のようにテストが無事に実行されました。

```
$ ./gradlew chromeTest
:compileJava UP-TO-DATE
:compileGroovy UP-TO-DATE
:processResources UP-TO-DATE
:classes UP-TO-DATE
:compileTestJava UP-TO-DATE
:compileTestGroovy UP-TO-DATE
:processTestResources UP-TO-DATE
:testClasses UP-TO-DATE
:downloadChromeDriver UP-TO-DATE
:unzipChromeDriver UP-TO-DATE
:chromeTest

BUILD SUCCESSFUL

Total time: 34.545 secs
```

サンプルのテストコードは```geb-example-gradle/src/test```にあるので、今回はこちらを元にテストコードを書いていきます。
テスト実行や結果の確認は、[Geb Advent Calendar2日目 posaunehmさん](http://posaune.hatenablog.com/entry/2016/12/03/211329)が書いてくれていたので見ていただければと思います。


#タウンワークマガジンサイトをテストする
[タウンワークマガジン](https://townwork.net/magazine/)は、アルバイト・パートなどの求人サイトであるタウンワークの記事コンテンツサイトです。さっそくこのサイトのナビゲーションバーにあるメニュー「仕事ノウハウ」をタップして画面遷移するかテストしてみます。

##準備
まず要件を整理すると下記。

- テスト対象
	- [タウンワークマガジン](https://townwork.net/magazine/)
- やりたいテスト
	- 「仕事ノウハウ」ページへ遷移できるかテスト
- 必要なページオブジェクト
	- 「タウンワークマガジントップ」ページ
	- 「仕事ノウハウ」ページ

では、準備ができたところで早速書いてきましょう(๑˃̵ᴗ˂̵)و

##1. サンプルコードにテスト対象をセット

src/test/resouces/GebConfig.groovyにあるbaseUrlにタウンワークマガジンのURLを置き換えます。


```GebConfig.groovy
baseUrl = "https://townwork.net/magazine/"
```

##2.「仕事ノウハウ」ページへ遷移できるかテストを作成
下記のようにテストを作成しました。

```TransitToKnowHowTopSpec.groovy
package spec.functional.transit

import geb.spock.GebReportingSpec
import page.KnowHowPage
import page.TownWorkMagazineTopPage

class TransitToKnowHowTopSpec extends GebReportingSpec {

    def "タウンワークマガジントップから仕事ノウハウの記事一覧に遷移できる"() {
        given: 'タウンワークマガジントップを表示し'
        to TownWorkMagazineTopPage

        when: '仕事ノウハウを選択すると'
        knowHowMenu.click()

        then: '仕事ノウハウの記事一覧ページに遷移する'
        at KnowHowPage
    }
}
```

↑のコードは、最初whenに```タウンワークマガジントップを表示し仕事ノウハウを選択すると```を合わせてに入れていたら、[PoohSunnyくん](https://twitter.com/PoohSunny)から「タウンワークマガジントップにいることは事前準備にあたるとしたらgivenじゃない？」とspockにあるgiven-when-thenのGherkin記法を教えてもらいました。綺麗になった！


##3. ページオブジェクトを作成
次に、遷移前のページ「タウンワークマガジントップ」と、遷移後のページ「仕事ノウハウ」のオブジェクトを下記のように作成しました。


```TownWorkMagazineTopPage.groovy
package page

import geb.Page

class TownWorkMagazineTopPage extends Page {

    static at = { title == "アルバイトや転職に役立つ情報が満載！最新のお仕事ニュースなら | タウンワークマガジン" }

    static content = {
        globalNav { $("nav", class: "global") }
        knowHowMenu { globalNav.find("a", href: "//townwork.net/magazine/knowhow/") }
    }
}
```


```KnowHowPage.groovy
package page

import geb.Page

class KnowHowPage extends Page {

    static at = { title.startsWith("仕事探し・応募面接・入社後・制度ノウハウのまとめ") }

    static content = {
        knowHowMenu { $("h1", class: "global") }
    }
}
```

ナビゲーション要素を保持する変数（```globalNav ```）を作る場合に、groovyだとメソッドで記述することはびっくりしました。

#4. テスト実行
最終的なファイル構成は下記の感じになりました。

<img width="400" src="https://qiita-image-store.s3.amazonaws.com/0/42438/6271e5e4-29ba-4ed6-7cc9-4f1f5e272ad1.png">

さっそくテストを実行すると、、、

```
$ ./gradlew chromeTest
:compileJava UP-TO-DATE
:compileGroovy UP-TO-DATE
:processResources UP-TO-DATE
:classes UP-TO-DATE
:compileTestJava UP-TO-DATE
:compileTestGroovy
:processTestResources UP-TO-DATE
:testClasses
:downloadChromeDriver UP-TO-DATE
:unzipChromeDriver UP-TO-DATE
:chromeTest

BUILD SUCCESSFUL

Total time: 12.295 secs
```

chromeが立ち上がりテストが動きました〜！テストが動くと気持ちいいですね。

以上