Unit Testing Framework for JavaScript with Java

1. JUnitでJavaScript
テスト
Fx-Js-JUnitの紹介

2. おことわり
● この発表ではJavaFXの話は
ほとんど出てきません。
● JavaScriptの話を延々としま
す。
● あらかじめご了承下さい。

3. 誰？
● 名前 : @mike_neck
● 所属 : 無職
○ １日９時間勤務で18時定時で昼1時間の
休憩に加えて３時間昼寝できる会社探し
ています。
● 職業 : プログラマー
○ Groovy / JavaScript / Java
● ブログ
○ mike、mikeなるままに…

4. 本日のテーマ
● JavaでJavaScriptをテストす
る
○ Fx-Js-JUnitの紹介
○ 技術接近遭遇、的な
○ 名状しがたい…

5. ところで…

6. JavaScriptのテストどう
していますか？

7. QUnit
jQueryのテストでも使われているシン
プルかつ強力なテストフレームワーク。
Phantom.jsでCUIから操作可能。
JavaScriptでテストを記述。

8. Selenium
ブラウザーの自動操作ツール。Selenium
Web Driverを用いてUI系のテストが記述
できる。画面がボコボコ立ち上がるのがう
ざい。

9. JavaでJavaScriptのテス
トが書けて、かつうざくな
い奴が欲しいと思いませ
ん？

10. そこでFx-Js-JUnitで
すよ！

11. Fx-Js-JUnitを三行で
説明せよ！

12. Fx-Js-JUnitを三行で説明せよ！
● JavaFX2.0のWebEngineを用いたテスト
ツール。
● JUnitで型安全にJavaScriptのテストが
できる。
● ブラウザーが立ち上がらないのでうざく
ない！
…ニャル子、あかちゃんつくろ

13. そうそう、JUnitの説明は
省きますよ

14. 詳しくはWeb + DB プレス
#69のJUnit特集で

15. Server JavaFX
JUnit Test

16. サンプルテストコード
@ClassRule
@ClassRuleでテ
private static UseFxJsJUnit fxJsJUnit =
スト前にJavaFX
UseFxJsJUnit
アプリケーション
.address('http://www.google.com') を起動
.identifiedBy('TestClass').get();
private JsJUnit jsJUnit;
@Before JavaScriptのイ
public void setUp () { ンターフェースを
jsJUnit = fxJsJUnit.getTester(); 取得
}

17. サンプルテストコード
型Longを期
待するテスト
@Test 実行
public void longTest () {
assertThat(jsJUnit.callLong(Integer.MAX_VALUE + " + 1"),
is (Integer.MAX_VALUE + 1L));
}
@Test 型Personを
public void personTest () { 期待するテス
Person person = new Person(); ト実行
person.setName("mike");
person.setAge(35);
assertThat(jsJUnit.callAs("{name : 'mike', age : '35'}",
Person.class), is (person));
}

18. Fx-Js-JUnit
JavaScriptのテストが

19. ｶﾀｰﾝｾﾞﾝ
型安全

20. Fx-Js-JUnit
< ｀・ω・´ > ﾖﾛｼｸ

21. The End

22. …

23. ……

24. ………

25. すんません
調子こきました

27. 技術

28. JavaScriptを型安全に取り扱うために
● JavaFXスレッドの理解
● 並列処理を構成する部材の
理解
● JavaScriptオブジェクトから
Javaオブジェクトへのマッピン
グ

29. JavaFXスレッドの理解-1
● アプリケーションを起動した後の部分のコードは
アプリケーション終了後に実行される
Application.launch(App.class);
doSomething();
↑Platform.exit(); の後
に実行される。

30. JavaFXスレッドの理解-2
● UIを構成するオブジェクトへの操作、結果の取
得はJavaFXスレッドを介する必要がある。
WebEngine engine;
engine.executeScript("1 + 1");
Platform.runLater(
{ engine.executeScript("1 + 1");}
);

31. JavaFXスレッドの理解-3
● UIを構成するオブジェクトはJavaFXスレッド上で
生成しなければならない
JavaFX Thread
engine = new WebEngine();
WebEngine
Main Thread
WebEngine engine;

32. JavaFXスレッドの理解-まとめ
● JUnitからWebViewを操作するために
○ JUnitとは別のスレッドからJavaFXアプリケー
ションを起動
○ 別のスレッドに演算させた結果を待機して、
取得
○ JUnitはJavaFXスレッドでインスタンス化され
たオブジェクトへの参照を取得

33. 並列処理を構成する部材の理解
● java.util.concurrent.ExecutorService
○ 別スレッドの処理を簡易に記述
○ JavaFXアプリケーションの起動にも
ちいる
● java.util.concurrent.BlockingQueue<T>
○ JavaFXスレッドからのメッセージング
(値のやり取り)に使用する
● javafx.application.Platform
○ JavaFXへの操作を提供

34. 並列処理を構成する部材の理解
詳しい話は下記の書籍を参照。
Java並行処理プログラミング
3,990JPYくらい。
http://goo.gl/UUzc1

35. JS→Javaマッピング
WebEngineのAPIよりhttp://docs.oracle.
com/javafx/2/api/javafx/scene/web/WebEngine.html
JavaScript values are represented using the
obvious Java classes: null becomes Java null; a
boolean becomes a java.lang.Boolean; and a
string becomes a java.lang.String. A number
can be java.lang.Double or a java.lang.Integer,
depending...If the result is a JavaScript object, it
is wrapped as an instance of the netscape.
javascript.JSObject

36. JS→Javaマッピング
JavaScript typeof
Java Object
Object value
null object null
false boolean java.lang.Boolean
23 number java.lang.Integer
1.10 number java.lang.Double
"script" string java.lang.String

37. JS→Javaマッピング
WebEngineのAPIよりhttp://docs.oracle.
com/javafx/2/api/javafx/scene/web/WebEngine.html
JavaScript values are represented using the
obvious Java classes: null becomes Java null; a
boolean becomes a java.lang.Boolean; and a
string becomes a java.lang.String. A number
can be java.lang.Double or a java.lang.Integer,
depending...If the result is a JavaScript object, it
is wrapped as an instance of the netscape.
javascript.JSObject

38. JS→Javaマッピング
┌（┌ ＾ｏ＾）┐ JSObject...

39. JS→Javaマッピング
Plain Old JavaScript Object (POJSO)なら
JSObject#getMember()でマッピングが可能
{name : "cthuga", str : 80, con : 120, siz :
140, pow : 42}
JSObject cthuga = ...;
assertThat(
(String)cthuga.getMember("name"),
is ("cthuga") );

40. JS→Javaマッピング
SAN値を減少させるオブジェクト…

41. JS→Javaマッピング
Dateオブジェクト…
JSObject date = ...;
date.getMember("year");
JSExceptionが発生する

42. JS→Javaオブジェクト
JavaScriptのDateオブジェクトにはメソッドはある
が、メンバーは存在しない。
←Dateオブジェクトに
はメンバーがない
←POJSO

43. JS→Javaマッピング
ちなみにJavaScriptでちゃんとメンバーの隠蔽化が
なされたオブジェクト…
var Encapsulation = function() {
var count = 0;
this.addAndGet = function () {
count ++;
return count;
}
};
var counter = new Encapsulation();
return counter;

44. JS→Javaマッピング
そういったオブジェクトもメンバーを持ちません。

45. JS→Javaマッピング
メンバーのないJSObjectを
POJOにマッピングするいい方
法はないか

46. JS→Javaマッピング
メソッドと戻り値の型情報がわ
かれば大丈夫だ、問題ない

47. JS→Javaマッピング
テストしたい関数

48. JS→Javaマッピング
関数を実行する関数を作成

49. JS→Javaマッピング
関数を実行する関数を実行

50. JS→Javaマッピング
関数を実行する関数を実行する関数を作る

51. JS→Javaマッピング
｛…｝を無名関数化

52. JS→Javaマッピング
戻り値を既知のメソッドでPOJSO化

53. JS→Javaマッピング
テスト実行

54. JS→Javaマッピング
既知の型、メンバーを持つPOJSOを取得
(int) jsObject.getMember("addAndGet");

55. JS→Javaマッピング
DateはPOJSOにマッピング

56. JS→Javaマッピング
既知の型とメソッドはアノテーションに記述

57. JS→Javaマッピング
型安全に実行してassertionできる！

58. JS→Javaマッピング
equals(java.lang.Object)と
hashCode()メソッドの実装は自己責任で
ね★

59. JS→Javaマッピング
● プリミティブ型は直接取得してassert
● POJSOはgetMemberメソッド経由で
POJOにマッピングしてassert
● 特殊なオブジェクトはアノテーションのメ
タ情報からPOJSOを経由してマッピング
してassert

60. Fx-Js-JUnit
JavaScriptのテストが

61. ｶﾀｰﾝｾﾞﾝ
型安全

62. Enjoy JavaScript!

63. ご静聴ありがとぉ…

64. …ぉ？

65. テストは複数同時に実行
したいですよねぇ

66. お望みであれば
やってみせますが…

67. 名状しがたい…
SAN値が下がりますよ
def service = Executors.newThreadPool(2)
service.execute {
Application.launch(App) }
service.execute {
Application.launch(App) }

68. 名状しがたい…

69. 名状しがたい…

70. 名状しがたい…
複数 + JavaFX で検索

71. 名状しがたい…

72. 名状しがたい…
JavaFXは二度起動
させることはでき
ぬ！

73. 名状しがたい…
● 複数のテストへの対応
○ WebEngineを複数立ち上げる
○ 定期的にポーリングを行なって、
WebEngineが利用されなくなったら
終了する

74. 名状しがたい…
● TODOs
○ 複数のテストへの対応
○ ServletコンテナまたはJavaEEコン
テナの搭載
○ GitHubへの公開
○ Maven/Ivyレポジトリーへの登録
○ 他ご要望がありましたら
@mike_neckまで

75. Thank you
for your attention