Nxチュートリアルをやってみた(Add E2E Tests)

技術

前回はnpx、ngコマンドでアプリケーションを作成しました。

今回はE2Eテスト(Cypress)をこのアプリケーションに追加します。

※NxはデフォルトでCypressが使えるよ。

 CypressってどんなE2Eテストか知りたかったら下記の記事をぜひ読んでみて。

簡単、速い、テストの動画保存、Cypressは最高のe2eテストだ!! – フリーランス チャレンジ!!

 

 

チュートリアル

このページです。

nx.dev

 

チュートリアル前にテスト実行

前回の記事で作成したアプリのテストを起動します。

 

テスト実行コマンド

gist0f781f571dd2c7f3ce5e856e8b9549f5

 

IDEが立ち上がるので画面右の「Run all specs」ボタンを押下。

f:id:ksakae1216:20190709204707p:plain

 

はい、テスト成功です。

f:id:ksakae1216:20190709205055p:plain

 

テスト内容の解説

テストが成功しましたが、どんなテストだったか解説します。

 

gist177e3d812a5b41e17c78fc6980619fa3

定数(const)で”getGreeting”を定義して”h1″タグをセットしてます。

Cypressで使えるAPIは下記を参照して下さい。

get | Cypress Documentation

 

gist3260c97f95315c3e38e942c5ef57838b

次はテストコードです。

 

・1行目で先ほどの定数ファイルをimport

・4行目の”cy.visit(‘/’));”で画面を開き

・7行目でh1タグに”Welcome to todos!”が含まれてるかチェック

 

もう一度、テスト結果画面の左部分を再掲します。

コードを説明した通りのテストとなってます。

f:id:ksakae1216:20190722225740p:plain

 

どうですか?

直感的でわかりやすいですよね?

 

テストコードを追加 

gist739c4ed2e6bb6d91c8596fb7a5a22968

 

ボタンに関する定数”getAddTodoButton”を追加。

 

gistd52f019606fd691255a35c012ef4e215

 

テストコードもチュートリアルに合わせて大幅に変更してます。

 

e2eテスト実行

それでは変更したコードでe2eテストを実行してみます。

f:id:ksakae1216:20190727170517p:plain

 

テスト失敗です。

”expected 0 to equal 2”がテスト失敗の部分です。 

 

最後に

このチュートリアルはテストを追加するが失敗するのがゴールとなります。

このチュートリアルにも書いてありますが、チュートリアルを進めてくとこのテストも合格するようになるそうです。

 

ソースコードは下記を参照ください。

github.com

 

【次の記事】

Nxチュートリアルをやってみた(Step 3 〜 12) – フリーランス チャレンジ!!

コメント

タイトルとURLをコピーしました