[SwiftUI][CoreData] SwiftUI と MVVM で始める CoreData 入門 (その5:View の実装)

SwiftUI と CoreData を組み合わせたアプリの作り方を説明します。

環境&対象

以下の環境で動作確認を行なっています。

  • macOS Catalina 10.15.7
  • Xcode 12.2
  • iOS 14.2

ViewModel の準備ができたところで、View を作っていきます。

View の実装

View のテストを作成する

View を実装するにあたり、View のテストから作り始めます。

View も in-memory でテストする

Model, ViewModel ともに、in-memory の CoreData でテストしました。

それまでに残っているデータを考慮せずにテストできるので、テストは、in-memory の方がやりやすいです。

Model テスト、ViewModel テスト どちらも API ベースでのテストなので、in-memory の指定が行いやすかったのですが、アプリ経由でのテストになると、引数指定して initializer を呼べません。

アプリの引数指定で、アプリ起動時に、in-memory の指定ができるようにすると便利です。

TDD[TDD] iOSアプリのUITestでのテスト用データの作り方

View(App) の実装 (初期化時に、in-memory を選択できるように)

テストでの実行時に、”TestWithInMemory” と引数に指定することで、InMemory の CoreData を使うようにします。

そのために、App を以下のようにしました。

MyTODOApp

コード解説
  1. アプリ起動時の引数は、ProcessInfo.processInfo.arguments 経由で取得できます
  2. StateObject をこのように初期化することもできます

こうすることで、起動時の引数指定で、CoreData を In-Memory にすることができます。

View のテストコード

In-Memory で起動できるようになったので、View のテストコードを書いていきます。

まずは、In-Memory で起動して、List が空であり ボタン等が存在することをテストします。

UITest ように新しいファイル を作成しました。(ターゲットは、UITest です)

View_Tests

コード解説
  1. TestWithInMemory という引数を指定して、アプリを起動します
  2. TODOList という Accessibility ID が付与された List を取得します
  3. List に含まれる 行 を 取得します
  4. List に含まれる行が 0 であることをテストします
  5. NavigationBar に Edit ボタンと 追加ボタン があることをテストします
  6. 追加ボタンを2回押下し、リストが2行になることをテストします
  7. Edit ボタンを押下し、行に表示される削除ボタンを押して要素を削除、リストの行が1行になっていることをテストします

まだ、View を修正していないため、エラーとなります。

View の実装

まずは、以下の機能を実装します。

  • TODO item をリスト表示
  • TODO item を追加
  • TODO item を削除 (ForEach の .onDelete を利用)

以下のようなコードになります。

ContentView

コード解説
  1. ForEach を使って、TODOItem を表示します。Title と ID を表示しています
  2. 削除する機能は、SwiftUI の提供する onDelete を使います
  3. UITest からアクセスできるように Accessibility ID を設定します
  4. Toolbar に、EditButton と 追加するボタンを設定しています。
  5. 追加ボタンが押された時に、ViewModel の該当メソッドを呼びます
  6. 削除するときには、ViewModel の該当メソッドを呼びます

シミュレータで動かしてみると、以下のようになります。


テスト

この View の実装を使うと、先ほど作成したテストをパスすることがわかります。

ここまでの振り返り

これで、非常にシンプルな View の実装はできたことになります。

以下の点を改良します。

  • TODOItem 表示の改良(タイトル、詳細を表示)
  • TODOItem 追加時に、タイトル等を指定できるようにする
  • TODOItem に、完了フラグを追加する

いろいろと考えられると思いますが、まずは上記の点を改良していきます。

一度、コードのリファクタリングをしてから、上記の点を改良していきます。

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です