連載記事「SpringBoot アプリ開発」を読み進めると、サンプルの Webアプリを制作することができます。
今回は、テストと手動での動作確認をしていきます。
連載記事
SpringBoot アプリ開発の連載記事は以下の通りです。
- 概要・使用プロダクト
- プロジェクト作成・SQL作成
- モデル・リポジトリの作成
- コントローラー・メインの作成
- HTML・JavaScriptの作成
- CSS・画像の作成
- テスト・動作確認(今回の記事)
目次
- 単体テスト
- 自動UIテスト
- 動作確認
- 課題
- 最後に
1. 単体テスト
JUnit と Mockito を使って、コントローラーのUTを1つだけ実装しました。
src/test/java/sample/controller/TweetControllerTest.java
package sample.controller; import static org.junit.jupiter.api.Assertions.assertEquals; import static org.mockito.Mockito.mock; import static org.mockito.Mockito.when; import java.util.Map; import org.junit.jupiter.api.Test; import sample.model.Tweet; import sample.repository.TweetRepository; public class TweetControllerTest { @Test public void testCreate() { // 準備:テストデータ Tweet data = new Tweet(); data.txt = "メッセージ"; // 準備:モック(リポジトリ) TweetRepository mock = mock(TweetRepository.class); when(mock.save(data)).thenReturn(data); // 準備:テスト対象クラス TweetController target = new TweetController(); target.repo = mock; // 実行:テスト対象メソッド Map<String, Tweet> result = target.create(data); // 検証:ツイートが等しいこと Tweet tweet = result.get("tweet"); assertEquals("メッセージ", tweet.txt); } }
2. 自動UIテスト
JUnit と Selenide を使って、UIテストを1つだけ実装しました。
src/test/java/it/TweetTest.java
package it; import static com.codeborne.selenide.Condition.*; import static com.codeborne.selenide.Selenide.*; import org.junit.jupiter.api.Test; public class TweetTest { @Test public void userCanPostTweet() { // つぶやき投稿 open("/"); $("#txt").setValue("こんにちは。"); $("#create").click(); // 検証 var $p = $$(".tweet .txt p").get(0); $p.should(appear); $p.shouldHave(text("こんにちは。")); // 投稿を削除 $$(".tweet").get(0).$(".delete").click(); switchTo().alert().accept(); } }
テストを実行する前に、アプリを起動しておく必要があります。アプリを起動する方法は、次のセクションに記載しています。
3. 動作確認
アプリを起動して、手動での動作確認を行いました。
3.1. アプリの起動
Eclipse などの IDE で App.java を実行するか、プロジェクトのルートディレクトリで以下のコマンドを実行します。
> mvn spring-boot:run
3.2. アプリの表示
ブラウザで以下のURLを開きます。
http://localhost:8080/
3.3. ツイートの投稿
メッセージを入力して「ツイート」を押すと、入力エリアの下にツイートが表示されます。
3.4. ツイートの編集
ツイートの「編集」を押すと、モーダルが表示されて内容を更新することができます。
3.5. ツイートの編集
ツイートの「削除」をクリックして、ダイアログで「OK」を押すと削除することができます。
4. 課題
今回はサンプルアプリでしたが、本格的なアプリにするには以下の点などが課題になると思います。
- バリデーション(長いツイートなどに対応)
- ツイートの表示方法(量が多い場合に対応)
- 認証機能の実装(ログインやユーザー管理)
- 等々
5. 最後に
ここまでお読みいただきありがとうございます。
ご不明な点や不具合などがあれば、コメント等でご連絡をいただけると嬉しいです。
GitHubリポジトリ
アプリのコードは、以下のリポジトリにもあります。