Refactor room title display and update tests

src/tests/index.spec.ts

@@ -108,13 +108,13 @@ describe("GET /chats", () => {
     vi.mocked(getAllRooms).mockResolvedValue([
       {
         roomId: "test-roomId1",
-        roomTitle: "test-roomTitle1",
+        roomTitle: null,
         roomCreated: "2021-01-01T00:00:00Z",
         roomUpdated: "2021-01-02T00:00:00Z",
       },
       {
         roomId: "test-roomId2",
-        roomTitle: "test-roomTitle2",
+        roomTitle: "test-roomTitle2test-roomTitle2test-roomTitle2",
         roomCreated: "2033-02-01T00:00:00Z",
         roomUpdated: "2033-02-02T00:00:00Z",
       },
@@ -132,9 +132,8 @@ describe("GET /chats", () => {
     expect(res.status).toBe(200);
     const actual = await res.text();
     expect(actual).toContain("test-roomId1");
-    expect(actual).toContain("test-roomId2");
-    expect(actual).toContain("test-roomTitle1");
-    expect(actual).toContain("test-roomTitle2");
+    expect(actual).not.toContain("<td>test-roomId2</td>");
+    expect(actual).toContain("test-roomTitle2test-...");
     expect(actual).toContain("2021-01-01T00:00:00Z");
     expect(actual).toContain("2033-02-01T00:00:00Z");
   });

src/views/RoomList.tsx

@@ -1,35 +1,45 @@
 import { FC } from "hono/dist/types/jsx";
-import {Rooms} from "../schema";
+import { Rooms } from "../schema";
 
 type Props = {
   rooms: (typeof Rooms.$inferSelect)[];
 };
 
+const TITLE_LENGTH = 20;
+const formatTitle = (room: typeof Rooms.$inferSelect) => {
+  if (!room.roomTitle) {
+    return room.roomId;
+  }
+  return room.roomTitle.length > TITLE_LENGTH
+    ? `${room.roomTitle.slice(0, TITLE_LENGTH)}...`
+    : room.roomTitle;
+};
+
 export const RoomList: FC<{ props: Props }> = ({ props }) => (
   <>
     <h1>Chat Rooms.</h1>
     <a href={"/chats/new"}>New</a>
     <table>
       <thead>
         <tr>
-          <th>ID</th>
+          <th>Title</th>
           <th>Created</th>
           <th>Updated</th>
           <th>Link</th>
         </tr>
       </thead>
-      {props.rooms.map((room) => (
-        <tbody>
+      <tbody>
+        {props.rooms.map((room) => (
           <tr>
-            <td>{room.roomTitle}</td>
+            <td>{formatTitle(room)}</td>
             <td>{room.roomCreated}</td>
             <td>{room.roomUpdated}</td>
             <td>
               <a href={`/chats/${room.roomId}`}>Detail</a>
             </td>
           </tr>
-        </tbody>
-      ))}
+        ))}
+      </tbody>
     </table>
   </>
 );