前回はnpx、ngコマンドでアプリケーションを作成しました。
今回はE2Eテスト(Cypress)をこのアプリケーションに追加します。
※NxはデフォルトでCypressが使えるよ。
CypressってどんなE2Eテストか知りたかったら下記の記事をぜひ読んでみて。
簡単、速い、テストの動画保存、Cypressは最高のe2eテストだ!! – フリーランス チャレンジ!!
チュートリアル
このページです。
チュートリアル前にテスト実行
前回の記事で作成したアプリのテストを起動します。
テスト実行コマンド
gist0f781f571dd2c7f3ce5e856e8b9549f5
IDEが立ち上がるので画面右の「Run all specs」ボタンを押下。
はい、テスト成功です。
テスト内容の解説
テストが成功しましたが、どんなテストだったか解説します。
gist177e3d812a5b41e17c78fc6980619fa3
定数(const)で”getGreeting”を定義して”h1″タグをセットしてます。
Cypressで使えるAPIは下記を参照して下さい。
gist3260c97f95315c3e38e942c5ef57838b
次はテストコードです。
・1行目で先ほどの定数ファイルをimport
・4行目の”cy.visit(‘/’));”で画面を開き
・7行目でh1タグに”Welcome to todos!”が含まれてるかチェック
もう一度、テスト結果画面の左部分を再掲します。
コードを説明した通りのテストとなってます。
どうですか?
直感的でわかりやすいですよね?
テストコードを追加
gist739c4ed2e6bb6d91c8596fb7a5a22968
ボタンに関する定数”getAddTodoButton”を追加。
gistd52f019606fd691255a35c012ef4e215
テストコードもチュートリアルに合わせて大幅に変更してます。
e2eテスト実行
それでは変更したコードでe2eテストを実行してみます。
テスト失敗です。
”expected 0 to equal 2”がテスト失敗の部分です。
最後に
このチュートリアルはテストを追加するが失敗するのがゴールとなります。
このチュートリアルにも書いてありますが、チュートリアルを進めてくとこのテストも合格するようになるそうです。
ソースコードは下記を参照ください。
【次の記事】
コメント