Todo作成機能の実装#3
Open
gekko555 wants to merge 2 commits into
Open
Conversation
- Create TypeScript type definitions for Todo - Implement TodoCreate component using MUI - Add tests for TodoCreate component - Configure Vitest for testing - Add test script to package.json
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (2)
📜 Recent review details🔇 Additional comments (3)
Walkthroughテスト基盤を整備し、TodoアイテムをUIで作成するためのTypeScript型定義とReactコンポーネントを導入。Vitest・React Testing Library・MUIをセットアップし、フォーム検証とコンポーネント動作をカバーするテストを追加。 ChangesTodoアプリケーション テスト基盤とコンポーネント追加
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Review rate limit: 9/10 reviews remaining, refill in 6 minutes. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/components/TodoCreate.tsx (1)
73-73: ⚡ Quick win入力中にエラー状態をクリアするとUXが改善します。
一度バリデーションエラーになると、Line 73 の入力変更中もエラー表示が残り続けるため、
onChangeでerrorをクリアするのが自然です。💡 提案差分
- onChange={(e) => setTitle(e.target.value)} + onChange={(e) => { + setTitle(e.target.value); + if (error) setError(''); + }}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/TodoCreate.tsx` at line 73, When the title input changes in the TodoCreate component the onChange handler only calls setTitle, so any validation error state persists; update the onChange handler (the one that currently calls setTitle(e.target.value)) to also clear the error state (call the error setter such as setError('') or setError(null)) so typing removes the error message immediately.src/components/__tests__/TodoCreate.test.tsx (1)
35-39: ⚡ Quick win生成Todoの型保証をもう一段強めると回帰耐性が上がります。
toBeDefined()だけだとcreatedAtが文字列化されても通るため、型に寄せた検証にすると安全です。✅ 提案差分
- expect(createdTodo.id).toBeDefined(); - expect(createdTodo.createdAt).toBeDefined(); + expect(createdTodo.id).toEqual(expect.any(String)); + expect(createdTodo.createdAt).toBeInstanceOf(Date);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/__tests__/TodoCreate.test.tsx` around lines 35 - 39, The test currently only uses toBeDefined() for createdTodo.id and createdTodo.createdAt which lets incorrect types slip through; update the assertions for createdTodo (from mockOnTodoCreate) to assert types/shape: ensure createdTodo.id is a string (or UUID format if applicable) and assert createdTodo.createdAt is a Date instance or a valid ISO timestamp (e.g., Date.parse(createdTodo.createdAt) is not NaN) so the createdAt field matches the Todo type rather than just being defined.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@vitest.config.ts`:
- Line 3: The config currently uses path.resolve(__dirname, ...) which breaks in
ESM contexts; change the module to use the ESM-safe pattern: import {
fileURLToPath } from 'url' and compute a __dirname equivalent with
fileURLToPath(new URL('.', import.meta.url)) (or call fileURLToPath(new
URL('<relative>', import.meta.url)) inline) and then replace all occurrences of
path.resolve(__dirname, ...) in the file (e.g., where path.resolve is used in
vitest.config.ts) with path.resolve(or direct path joins) based on that
fileURLToPath result so the config works under "type": "module".
---
Nitpick comments:
In `@src/components/__tests__/TodoCreate.test.tsx`:
- Around line 35-39: The test currently only uses toBeDefined() for
createdTodo.id and createdTodo.createdAt which lets incorrect types slip
through; update the assertions for createdTodo (from mockOnTodoCreate) to assert
types/shape: ensure createdTodo.id is a string (or UUID format if applicable)
and assert createdTodo.createdAt is a Date instance or a valid ISO timestamp
(e.g., Date.parse(createdTodo.createdAt) is not NaN) so the createdAt field
matches the Todo type rather than just being defined.
In `@src/components/TodoCreate.tsx`:
- Line 73: When the title input changes in the TodoCreate component the onChange
handler only calls setTitle, so any validation error state persists; update the
onChange handler (the one that currently calls setTitle(e.target.value)) to also
clear the error state (call the error setter such as setError('') or
setError(null)) so typing removes the error message immediately.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 856c9e7a-a24f-44ec-ae5c-ce6574634eb1
📒 Files selected for processing (6)
package.jsonsrc/components/TodoCreate.tsxsrc/components/__tests__/TodoCreate.test.tsxsrc/test/setup.tssrc/types/todo.tsvitest.config.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
概要
Todoを新規作成するためのReactコンポーネントを追加しました。
ユーザーがタイトルを入力して「作成」ボタンを押すと、Todoオブジェクトを生成し、親コンポーネントへ
onTodoCreateで渡します。また、CodeRabbitの指摘を反映し、入力時のUX改善・テストの型チェック強化・Vitest設定のESM対応を行いました。あわせて、今後のレビューを日本語かつ初学者向けにするための
.coderabbit.yamlも追加しています。このPRで追加・変更したもの
Todo作成機能
TodoCreateを追加Todoを追加CodeRabbit指摘対応
idとcreatedAtのテストをtoBeDefined()から型を確認する検証へ変更vitest.config.tsの__dirname利用をやめ、ESM環境でも安全なimport.meta.urlベースの書き方へ変更CodeRabbit設定
.coderabbit.yamlを追加main以外をbaseにしたPRもレビュー対象にするためbase_branches: [".*"]を設定使い方のイメージ
TodoCreate自体はTodo一覧を管理せず、「作成されたTodoを親へ渡す」ところまでを担当します。一覧への追加や保存処理は、親コンポーネント側で行う想定です。
主な処理の流れ
useStateで入力値を保持するonTodoCreate(newTodo)で親コンポーネントへ渡すTodoオブジェクトの形
テストしたこと
idが文字列であることcreatedAtがDateであること確認コマンド
pnpm test -- --run pnpm buildどちらも成功しています。
補足
このPRでは、学習目的としてTodo作成機能を最小構成で実装しています。
現時点では
TodoCreateコンポーネントの追加が中心で、App.tsxへの本格的な組み込みやTodo一覧表示は次のステップで対応する想定です。Summary by CodeRabbit
リリースノート
新機能
テスト