買い物かご画面に Vitest で API コールをモックした自動テストを実装する

[KentaHizume]

この Pull request で実施したこと

• 買い物かご画面に正常系の自動テストを追加しました。
• 買い物かご画面に異常系の自動テストを追加しました。
• ストアの中身を確認するために、ライブラリ @pinia/testingを追加しました。pinia の公式ドキュメントで使用されており、こちらを導入しないとstoreをテストできないので、導入に問題ないと判断しました。admin には導入済みです。
• 型の情報を取得するために、 ProblemDetails を export するようにしました。アプリケーション本体に特に影響はございません。shared 配下のコードのため、公開しても特に問題ないと判断しました。
• BasketView.vue のカバレッジについて、ステートメント単位で 0% ⇒ 71.42% に上昇しました。

この Pull request では実施していないこと

• 買い物かごを取得するユースケースにスコープを限定しています。買い物かごのアイテムの数量更新・削除のユースケースには対応していません。

• 異常系の Toast へのメッセージ出力については、NotificationToast コンポーネントが App.vue に存在するので、買い物かご画面のテストケースのスコープ外とし、ストアにメッセージが正しく格納されたことまでを確認しています。

• ボタンを配列の番号で特定している問題については下記のissueで対応予定です。

  • 自動テスト時に同じHTML要素を区別するための実装方針を策定し反映する #1653

Issues や Discussions 、関連する Web サイトなどへのリンク

• vi.hoisted の必要性については下記の記事をご覧ください。

https://dev.classmethod.jp/articles/handling-exception-hoist-in-vitest/

• pinia のテストに関するドキュメント

https://pinia.vuejs.org/cookbook/testing.html#Unit-testing-components