AngularJs学習ノート--E 2 E Testing
7398 ワード
オリジナルアドレス:http://docs.angularjs.org/guide/dev_guide.e2e-testing
アプリケーションの複雑さ、サイズが増加すると、新しい特性の信頼性、Bugのキャプチャ、および回帰テストを人工的にテストすることは現実的ではない.
この問題を解決するために,Angular Scenario Runnerを構築し,ユーザの操作を模倣し,angularアプリケーションの頑丈性を検証するのに役立った.
一、総括
Javascriptにシナリオテスト(scenario test)を書き、アプリケーションで発生した動作を記述し、ある状態でいくつかのインタラクションを与えることができます.1つのシナリオは、コマンド(command)と所望(expectation)の順に、1つ以上の「it」ブロック(これらを適用に対する要求とすることができる)を含む.commandはRunnerにアプリケーションで何かをするように伝え(例えば、ページに移動したり、ボタンをクリックしたり)、expectationはrunnerにステータスに関するもの(例えば、ドメインの値や現在のURL)を判断するように伝えます.いずれかのexpectationが失敗した場合、runnerはこの「it」を「false」とマークし、次の「it」に進みます.Scenarioは、「beforeEach」および「afterEach」blockを所有することもできます.これらのblockは、通過するかどうかにかかわらず、「it」blockの前または後に実行されます.
上記の要素に加えて、scenarioはhelper functionを含み、「it」blockに重複するコードがないようにしてもよい.
ここでは簡単なscenarioの例です.
このscenarioは、userをフィルタリングする能力を有するべきであることを明確にするネットワーククライアントの要件を記述する.開始時に「user」入力ボックスに値を入力し、ページ上の一意のボタンをクリックして、10個のアイテムリストがあるかどうかを確認します.次に、「Bees」から「filterText」の入力ボックスに入力し、そのリストが1つの項目に減少するかどうかを確認します.
次のAPIセクションでは、Runnerで使用可能なcommandとexpectationを示します.
二、API
ソース:https://github.com/angular/angular.js/blob/master/src/ngScenario/dsl.js
pause()
consoleでresume()を呼び出すまでテストの実行を一時停止します(Runnerインタフェースでresumeリンクをクリックすることもできます).
sleep(seconds)
テスト実行をN秒停止します.
browser().navigateTo(url)
tset frameに指定urlをロードします.
browser().navigateTo(url,fn)
test frameにfnが返すurlアドレスをロードします.ここでurlパラメータはテスト出力としてのみ使用されます.このAPIは、宛先urlが動的である場合に使用できます(テストを書く場合、アドレスは不明です).
browser().reload()
test frameで現在ロードされているページをリフレッシュします.
browser().window().href()
test frameの現在のページのwindowを返します.location.href.
browser().window().path()
test frameの現在のページのwindowを返します.location.pathname.
browser().window().search()
test frameの現在のページのwindowを返します.location.search.
browser().window().hash()
test frameの現在のページのwindowを返します.location.hash(#を含まない).
browser().location().url()
test frameの現在のページの$locationを返します.url()の戻り結果(http://docs.angularjs.org/api/ng.$location)
browser().location().path()
test frameの現在のページの$locationを返します.path()の戻り結果(http://docs.angularjs.org/api/ng.$location)
browser().location().search()
test frameの現在のページの$locationを返します.search()の戻り結果(http://docs.angularjs.org/api/ng.$location)
browser().location().hash()
test frameの現在のページの$locationを返します.hash()の戻り結果(http://docs.angularjs.org/api/ng.$location)
expect(future).{matcher}
与えられた所望値がmatcherを満たすか否かを判断する.すべてのAPIの宣言は、実行が完了した後に取得された指定された値のfutureオブジェクトを返します.matcherはangularを使用します.scenario.matcherはfuturesの値を使用してexpectationを実行するように定義します.例:
expect(future).not().{matcher}
指定したfutureの値が指定したmatcherの予想と逆かどうかを判断します.
using(selector,label)
Scopes the next DSL element selection.(セレクタの役割ドメインを限定し、label推定は出力をテストするために使用される)
例:
binding(name)
指定したnameに一致する最初のバインドを返します(ng-bindに関連する可能性があります).
input(name).enter(value)
指定したvalueをnameで指定したフォームドメインに入力します.
input(name).check()
指定したnameのcheckboxを選択または解除します.
input(name).select(value)
指定したnameのradioのvalueのinput[type="radio"]を選択します.
input(name).val()
指定したnameのinputの現在の値を返します.
repeater(selector,label).count()
指定したselector(jQuery selector)に一致するrepeaterの行数を返します.Labelはテスト出力としてのみ使用されます.
repeater(selector,label).row(index)
配列を返し、指定selector(jQuery selector)が一致するrepeaterでindexを指定する行をバインドします.Labelは出力のテストにのみ使用されます.
repeater(selector,label).column(binding)
指定したselector(jQuery selector)が一致するrepeaterで指定したbindingに一致するカラムの配列を返します.Labelは出力のテストにのみ使用されます.
select(name).option(value)
nameを指定するselectでvalueを指定するoptionを選択します.
select(name).option(value1,value2)
名前を指定するselectでvalueを指定するoption(複数選択)を選択します.
element(selector,label).count()
指定したselectorに一致する要素の数を返します.Labelはテスト出力としてのみ使用されます.
element(selector,label).click()
指定したselectorに一致する要素をクリックします.Labelはテスト出力としてのみ使用されます.
element(selector,label).query(fn)
指定されたfn(selectedElements,done)を実行し、selectedElementは指定されたselectorに一致する要素の集合である.doneはfunctionで、fnの実行が完了した後に実行されます.Labelはテスト出力としてのみ使用されます.
element(selector,label).{method}()
指定したselectorが一致する要素でmethodを実行する戻り値を返します.methodは、val、text、html、height、innerHeight、outerHeight、width、innerWidth、outerWidth、position、scrollLelft、scrollTop、offsetのjQueryメソッドであってもよい.Labelはテスト出力としてのみ使用されます.
element(selector,label).{method}(value)
指定selectorマッチングの要素で指定methodを実行し、key、valueをパラメータとします.methodは、val、text、html、height、innerHeight、outerHeight、width、innerWidth、outerWidth、position、scrollLelft、scrollTop、offsetのjQueryメソッドであってもよい.Labelはテスト出力としてのみ使用されます.
element(selector,label).{method}(key)
指定したselectorが一致する要素で指定したmethodを実行した結果を返します.これらの方法は、attr,prop,cssのjQueryメソッドです.Labelはテスト出力としてのみ使用されます.
element(selector,label).{method}(key,value)
指定したselectorが一致する要素にmethodを実行し、key、valueをパラメータとします.これらのメソッドは、attr、prop、cssのjQueryメソッドです.Labelはテスト出力としてのみ使用されます.
JAvascriptはダイナミックタイプの言語で、強力な力をもたらす表現ですが、コンパイラからはほとんど助けられません.そのため、javascriptで書かれたコードはすべて大量で全面的なテストが必要だと強く感じています.Angularには多くの特性があり、アプリケーションをより簡単にテストすることができます.だから私たちはテストを書かない口実はありません.(-_-!!)
アプリケーションの複雑さ、サイズが増加すると、新しい特性の信頼性、Bugのキャプチャ、および回帰テストを人工的にテストすることは現実的ではない.
この問題を解決するために,Angular Scenario Runnerを構築し,ユーザの操作を模倣し,angularアプリケーションの頑丈性を検証するのに役立った.
一、総括
Javascriptにシナリオテスト(scenario test)を書き、アプリケーションで発生した動作を記述し、ある状態でいくつかのインタラクションを与えることができます.1つのシナリオは、コマンド(command)と所望(expectation)の順に、1つ以上の「it」ブロック(これらを適用に対する要求とすることができる)を含む.commandはRunnerにアプリケーションで何かをするように伝え(例えば、ページに移動したり、ボタンをクリックしたり)、expectationはrunnerにステータスに関するもの(例えば、ドメインの値や現在のURL)を判断するように伝えます.いずれかのexpectationが失敗した場合、runnerはこの「it」を「false」とマークし、次の「it」に進みます.Scenarioは、「beforeEach」および「afterEach」blockを所有することもできます.これらのblockは、通過するかどうかにかかわらず、「it」blockの前または後に実行されます.
上記の要素に加えて、scenarioはhelper functionを含み、「it」blockに重複するコードがないようにしてもよい.
ここでは簡単なscenarioの例です.
describe('Buzz Client', function() {
it('should filter results', function() {
input('user').enter('jacksparrow');
element(':button').click();
expect(repeater('ul li').count()).toEqual(10);
Input('filterText').enter('Bees');
expect(repeater('ul li').count()).toEqual(1);
});
});このscenarioは、userをフィルタリングする能力を有するべきであることを明確にするネットワーククライアントの要件を記述する.開始時に「user」入力ボックスに値を入力し、ページ上の一意のボタンをクリックして、10個のアイテムリストがあるかどうかを確認します.次に、「Bees」から「filterText」の入力ボックスに入力し、そのリストが1つの項目に減少するかどうかを確認します.
次のAPIセクションでは、Runnerで使用可能なcommandとexpectationを示します.
二、API
ソース:https://github.com/angular/angular.js/blob/master/src/ngScenario/dsl.js
pause()
consoleでresume()を呼び出すまでテストの実行を一時停止します(Runnerインタフェースでresumeリンクをクリックすることもできます).
sleep(seconds)
テスト実行をN秒停止します.
browser().navigateTo(url)
tset frameに指定urlをロードします.
browser().navigateTo(url,fn)
test frameにfnが返すurlアドレスをロードします.ここでurlパラメータはテスト出力としてのみ使用されます.このAPIは、宛先urlが動的である場合に使用できます(テストを書く場合、アドレスは不明です).
browser().reload()
test frameで現在ロードされているページをリフレッシュします.
browser().window().href()
test frameの現在のページのwindowを返します.location.href.
browser().window().path()
test frameの現在のページのwindowを返します.location.pathname.
browser().window().search()
test frameの現在のページのwindowを返します.location.search.
browser().window().hash()
test frameの現在のページのwindowを返します.location.hash(#を含まない).
browser().location().url()
test frameの現在のページの$locationを返します.url()の戻り結果(http://docs.angularjs.org/api/ng.$location)
browser().location().path()
test frameの現在のページの$locationを返します.path()の戻り結果(http://docs.angularjs.org/api/ng.$location)
browser().location().search()
test frameの現在のページの$locationを返します.search()の戻り結果(http://docs.angularjs.org/api/ng.$location)
browser().location().hash()
test frameの現在のページの$locationを返します.hash()の戻り結果(http://docs.angularjs.org/api/ng.$location)
expect(future).{matcher}
与えられた所望値がmatcherを満たすか否かを判断する.すべてのAPIの宣言は、実行が完了した後に取得された指定された値のfutureオブジェクトを返します.matcherはangularを使用します.scenario.matcherはfuturesの値を使用してexpectationを実行するように定義します.例:
expect(browser().location().href()).toEqual(‘http://www.google.com’);expect(future).not().{matcher}
指定したfutureの値が指定したmatcherの予想と逆かどうかを判断します.
using(selector,label)
Scopes the next DSL element selection.(セレクタの役割ドメインを限定し、label推定は出力をテストするために使用される)
例:
using('#foo', "'Foo' text field").input('bar')binding(name)
指定したnameに一致する最初のバインドを返します(ng-bindに関連する可能性があります).
input(name).enter(value)
指定したvalueをnameで指定したフォームドメインに入力します.
input(name).check()
指定したnameのcheckboxを選択または解除します.
input(name).select(value)
指定したnameのradioのvalueのinput[type="radio"]を選択します.
input(name).val()
指定したnameのinputの現在の値を返します.
repeater(selector,label).count()
指定したselector(jQuery selector)に一致するrepeaterの行数を返します.Labelはテスト出力としてのみ使用されます.
repeater('#products table', 'Product List').count() //number of rowsrepeater(selector,label).row(index)
配列を返し、指定selector(jQuery selector)が一致するrepeaterでindexを指定する行をバインドします.Labelは出力のテストにのみ使用されます.
repeater('#products table', 'Product List').row(1) //all bindings in row as an arrayrepeater(selector,label).column(binding)
指定したselector(jQuery selector)が一致するrepeaterで指定したbindingに一致するカラムの配列を返します.Labelは出力のテストにのみ使用されます.
repeater('#products table', 'Product List').column('product.name') //all values across all rows in an arrayselect(name).option(value)
nameを指定するselectでvalueを指定するoptionを選択します.
select(name).option(value1,value2)
名前を指定するselectでvalueを指定するoption(複数選択)を選択します.
element(selector,label).count()
指定したselectorに一致する要素の数を返します.Labelはテスト出力としてのみ使用されます.
element(selector,label).click()
指定したselectorに一致する要素をクリックします.Labelはテスト出力としてのみ使用されます.
element(selector,label).query(fn)
指定されたfn(selectedElements,done)を実行し、selectedElementは指定されたselectorに一致する要素の集合である.doneはfunctionで、fnの実行が完了した後に実行されます.Labelはテスト出力としてのみ使用されます.
element(selector,label).{method}()
指定したselectorが一致する要素でmethodを実行する戻り値を返します.methodは、val、text、html、height、innerHeight、outerHeight、width、innerWidth、outerWidth、position、scrollLelft、scrollTop、offsetのjQueryメソッドであってもよい.Labelはテスト出力としてのみ使用されます.
element(selector,label).{method}(value)
指定selectorマッチングの要素で指定methodを実行し、key、valueをパラメータとします.methodは、val、text、html、height、innerHeight、outerHeight、width、innerWidth、outerWidth、position、scrollLelft、scrollTop、offsetのjQueryメソッドであってもよい.Labelはテスト出力としてのみ使用されます.
element(selector,label).{method}(key)
指定したselectorが一致する要素で指定したmethodを実行した結果を返します.これらの方法は、attr,prop,cssのjQueryメソッドです.Labelはテスト出力としてのみ使用されます.
element(selector,label).{method}(key,value)
指定したselectorが一致する要素にmethodを実行し、key、valueをパラメータとします.これらのメソッドは、attr、prop、cssのjQueryメソッドです.Labelはテスト出力としてのみ使用されます.
JAvascriptはダイナミックタイプの言語で、強力な力をもたらす表現ですが、コンパイラからはほとんど助けられません.そのため、javascriptで書かれたコードはすべて大量で全面的なテストが必要だと強く感じています.Angularには多くの特性があり、アプリケーションをより簡単にテストすることができます.だから私たちはテストを書かない口実はありません.(-_-!!)