Replit Agent 触ってみた2

Databases tab からデータベースの再作成

前回ビビって消してしまったので再作成する

Database タブにて Create Database を押す See Database Contents とあるので見てみると…ポスグレのクエリを打てっていうけど期待してたのとはちょっと違うかな

しょうがないからテーブルを作ってもらう。いやほんとすみません…という気持ちになりながらお願いする

データベースを一旦削除してしまいました。空のデータベースは作成しましたので、テーブルを作成してください

ちゃんとできてる！

空の場合は No entries yet. ~ と表示するようにしているのは前回気づかなかった。やるやんけ

バリデーションを確認する

前回は作ることに気を取られてバリデーションを確認していなかった

GuestbookForm.tsx の多分ここら辺

const formSchema = z.object({
  name: z.string().min(1, "Name is required").max(50, "Name must be less than 50 characters"),
  message: z.string().min(1, "Message is required").max(500, "Message must be less than 500 characters")
});

名前：最低1文字。最大で50文字
メッセージ：最低1文字。最大で500文字

何も入力せずに Submit すると

最大文字数を超えると

内容は合っているが表現が気になる less than は「未満」になってしまうのでは？

`Modify with Assistant` を使う

自分で直してもいいが、極力 AI にやってもらうことにする

Assistant を開くと Advanced (Claude 3.5 Sonnet V2) になっている

⌘ + S で保存するとフォーマットもかかる。変更したはいいがこれをどうコミットすればいいのだ

とりあえず Generate (command + i) して「変更をコミットしてください」とお願いしてみるとコマンドの候補を出してくれるのだがなんか違うな

しょうがないから Agent に聞くのだが「version control commands に直接アクセスできないです〜」みたいなこと言ってる。代わりにちゃんと正しく動いてるか変更をレビューしてあげるで、みたいなことを言っている

そしてデータベースを作り直し始めたのだが…「よっしゃまたやり直しましょうや…」みたいな感じなのか？勢いよすぎるぞ

別に変わりないように見えるが… Checkpoint を作ってImprove GuestbookForm styling and error handling, ~ とか言っているのでコミットはしてるのかな？

git log -p してみると確かに差分をコミットしてくれていたぞ。うむ、いいんだけどちょっとめんどくさいかなあ

test 環境整えるぞ

vitest setup してね、とお願いすると
React コンポーネント用のパッケージと共に vitest 入れ始めたぞ

`npm run test` するとこけてしまったぞ？

エラーメッセージのスクショと共に「直してくれ〜」とお願いしたら見事に直してくれた。セットアップが間違っていたらしい

ちゃんと npm run test してテストがパスすることもやってくれた、えらいぞ

そのあとまたいちいちデータベースを作り直していた。真面目やな…

`GuestbookForm.test.tsx`

みたところテキストやフィールドの有無をチェックしているくらいか

import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import { GuestbookForm } from '../../client/src/components/GuestbookForm';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import React from 'react';

// Create a new QueryClient for testing
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
    },
  },
});

// Wrap component with required providers
const renderWithProviders = (ui: React.ReactElement) => {
  return render(
    <QueryClientProvider client={queryClient}>
      {ui}
    </QueryClientProvider>
  );
};

describe('GuestbookForm', () => {
  it('renders form fields correctly', () => {
    renderWithProviders(<GuestbookForm />);

    // Check if form elements are present
    expect(screen.getByLabelText(/name/i)).toBeInTheDocument();
    expect(screen.getByLabelText(/message/i)).toBeInTheDocument();
    expect(screen.getByRole('button', { name: /sign guestbook/i })).toBeInTheDocument();
  });
});