Being able to write custom commits (#53)

Couldn't change the hardcoded commit name "Update test files" so I make
it custom before "Commit changes" with keeping the default value "Update
test files".

app/(dashboard)/dashboard/pull-request.test.tsx

@@ -284,4 +284,45 @@ describe('PullRequestItem', () => {
       expect(writeTestsButton).toBeDisabled();
     });
   });
+
+  it('handles committing changes with custom message', async () => {
+    const { commitChangesToPullRequest } = await import('@/lib/github');
+    vi.mocked(commitChangesToPullRequest).mockResolvedValue('https://github.com/commit/123');
+
+    vi.mocked(global.fetch).mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve([{ name: 'generated_test.ts', content: 'generated content' }]),
+    } as Response);
+
+    const { useToast } = await import('@/hooks/use-toast');
+    const mockToast = vi.fn();
+    vi.mocked(useToast).mockReturnValue({ toast: mockToast });
+
+    render(<PullRequestItem pullRequest={mockPullRequest} />);
+    const writeTestsButton = screen.getByText('Write new tests');
+    fireEvent.click(writeTestsButton);
+
+    await waitFor(() => {
+      expect(screen.getByText('generated_test.ts')).toBeInTheDocument();
+    });
+
+    const commitMessageInput = screen.getByPlaceholderText('Update test files');
+    fireEvent.change(commitMessageInput, { target: { value: 'Custom commit message' } });
+
+    const commitButton = screen.getByText('Commit changes');
+    fireEvent.click(commitButton);
+
+    await waitFor(() => {
+      expect(commitChangesToPullRequest).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.anything(),
+        expect.anything(),
+        expect.anything(),
+        'Custom commit message'
+      );
+      expect(mockToast).toHaveBeenCalledWith(expect.objectContaining({
+        title: 'Changes committed successfully',
+      }));
+    });
+  });
 });

app/(dashboard)/dashboard/pull-request.tsx

@@ -19,6 +19,7 @@ import { PullRequest, TestFile } from "./types";
 import { generateTestsResponseSchema } from "@/app/api/generate-tests/schema";
 import { useToast } from "@/hooks/use-toast";
 import { commitChangesToPullRequest, getPullRequestInfo, getFailingTests } from "@/lib/github";
+import { Input } from "@/components/ui/input";
 
 const ReactDiffViewer = dynamic(() => import("react-diff-viewer"), {
   ssr: false,
@@ -40,6 +41,7 @@ export function PullRequestItem({ pullRequest }: PullRequestItemProps) {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const { toast } = useToast();
+  const [commitMessage, setCommitMessage] = useState("Update test files");
 
   const handleTests = async (pr: PullRequest, mode: "write" | "update") => {
     setAnalyzing(true);
@@ -139,7 +141,8 @@ export function PullRequestItem({ pullRequest }: PullRequestItemProps) {
         pullRequest.repository.owner.login,
         pullRequest.repository.name,
         pullRequest.number,
-        filesToCommit
+        filesToCommit,
+        commitMessage
       );
 
       toast({
@@ -306,21 +309,31 @@ export function PullRequestItem({ pullRequest }: PullRequestItemProps) {
                   )}
                 </div>
               ))}
-              <Button
-                className="w-full mt-4 bg-blue-500 hover:bg-blue-600 text-white"
-                onClick={commitChanges}
-                disabled={
-                  Object.values(selectedFiles).every((value) => !value) ||
-                  loading
-                }
-              >
-                {loading ? (
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                ) : (
-                  <CheckCircle className="mr-2 h-4 w-4" />
-                )}
-                {loading ? "Committing changes..." : "Commit changes"}
-              </Button>
+              <div className="mt-4">
+                <Input
+                  type="text"
+                  placeholder="Update test files"
+                  value={commitMessage}
+                  onChange={(e) => setCommitMessage(e.target.value)}
+                  className="mb-2"
+                />
+                <Button
+                  className="w-full mt-2 bg-blue-500 hover:bg-blue-600 text-white"
+                  onClick={commitChanges}
+                  disabled={
+                    Object.values(selectedFiles).every((value) => !value) ||
+                    loading ||
+                    !commitMessage.trim()
+                  }
+                >
+                  {loading ? (
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  ) : (
+                    <CheckCircle className="mr-2 h-4 w-4" />
+                  )}
+                  {loading ? "Committing changes..." : "Commit changes"}
+                </Button>
+              </div>
             </div>
           )}
         </div>

app/(dashboard)/dashboard/types.ts

@@ -20,3 +20,11 @@ export interface TestFile {
   content: string;
   oldContent?: string;
 }
+
+export type CommitChangesToPullRequest = (
+  owner: string,
+  repo: string,
+  pullNumber: number,
+  filesToCommit: TestFile[],
+  commitMessage: string
+) => Promise<string>;

lib/github.ts

@@ -106,7 +106,8 @@ export async function commitChangesToPullRequest(
   owner: string,
   repo: string,
   pullNumber: number,
-  filesToCommit: TestFile[]
+  filesToCommit: TestFile[],
+  commitMessage: string
 ): Promise<string> {
   const octokit = await getOctokit();
 
@@ -181,7 +182,7 @@ export async function commitChangesToPullRequest(
     const { data: newCommit } = await octokit.git.createCommit({
       owner,
       repo,
-      message: "Update test files",
+      message: commitMessage,
       tree: newTree.sha,
       parents: [commit.sha],
     });