はじめに
私はフロントエンドエンジニアとして7年ほど働いています。
前回の記事に引き続き、ポートフォリオを作成しています。
今回はテスト面をアップデートしたのでそれについてまとめてみます。
アプリケーションの概要
ストック管理アプリは、買い出しのときの「買い忘れ」と「買いすぎ」を防ぐ、在庫管理アプリです。
日用品などの在庫を登録しておくと、定期購入の周期を設定でき、買うべきタイミングでPush通知が届きます。PWAにも対応しています。
- GitHub
- 技術スタック
- UI: React(TypeScript)、Inertia、Tailwind CSS 4、shadcn/ui
- サーバー: PHP(Laravel)、PostgreSQL、Docker
- その他: PWA、Push通知
今回実装・変更・工夫した点
テスト
- テストコードの作成
- テストレポートの出力
フロントエンド
Vitestを使ったテストコードを作成しています。
テスト対象
- 汎用コンポーネント
- 画面固有のコンポーネント
テスト結果
バックエンド
Pestを使ったテストコードを作成しています。
テスト対象
- コントローラ
- モデル
テスト結果
制作したプロダクトのスクリーンショット画像
今後の計画
- デプロイ作業
- まずはfly.ioにコンテナ一式をデプロイして動作確認
- 余裕があれば、実務の観点からAWS Lightsail + RDSのようなデプロイもやってみたい