Added github action for CI

Author: emisasal

.github/workflows/ci.yml

@@ -0,0 +1,19 @@
+name: CI
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm test
+      - run: pnpm typecheck

README.md

@@ -49,6 +49,7 @@ Key files:
 ### Installation
 
 1. Clone the repository:
+
    ```
    git clone <repository-url>
    cd react-express-socketio
@@ -62,11 +63,13 @@ Key files:
 ### Running the Application
 
 1. Start the backend server:
+
    ```
    pnpm dev
    ```
 
 2. In a new terminal, start the frontend development server:
+
    ```
    pnpm --filter frontend dev
    ```
@@ -91,6 +94,7 @@ The header shows **Connected** while the Socket.io connection is open.
 - Prettier formats files on save in this workspace. The Prettier extension is recommended in `.vscode/extensions.json`.
 - `pnpm typecheck` checks the server and the frontend.
 - `pnpm --filter frontend lint` runs ESLint on the frontend.
+- GitHub Actions runs `pnpm test` and `pnpm typecheck` on every push and pull request.
 
 ### Tests
 
@@ -105,11 +109,13 @@ Server tests use Vitest and a real Socket.io server. Frontend tests use Vitest,
 ## Building for Production
 
 1. Typecheck and build the frontend:
+
    ```
    pnpm build
    ```
 
 2. Start the production server:
+
    ```
    pnpm start
    ```

frontend/README.md

@@ -1,8 +1,5 @@
-# React + Vite
+# Frontend
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+React chat client for this repository, built with Vite and Tailwind CSS.
 
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+Run and test it from the repository root. The root [README](../README.md) covers install, development, tests, and production.

frontend/src/App.test.tsx

@@ -4,38 +4,40 @@ import { beforeEach, describe, expect, it, vi } from "vitest"
 import type { ChatMessage as ServerMessage } from "../../shared/events.ts"
 import App from "./App.tsx"
 
-const { socket, resetSocket, receiveMessage, receiveHistory } = vi.hoisted(() => {
-  const handlers = new Map<string, Set<(...args: unknown[]) => void>>()
-  const socket = {
-    connected: true,
-    id: "abcdefghijklmnop",
-    on(event: string, handler: (...args: unknown[]) => void) {
-      const current = handlers.get(event) ?? new Set()
-      current.add(handler)
-      handlers.set(event, current)
-      return socket
-    },
-    off(event: string, handler: (...args: unknown[]) => void) {
-      handlers.get(event)?.delete(handler)
-      return socket
-    },
-    emit: vi.fn(),
-  }
-
-  return {
-    socket,
-    resetSocket() {
-      handlers.clear()
-      socket.emit.mockClear()
-    },
-    receiveMessage(message: ServerMessage) {
-      handlers.get("message")?.forEach((handler) => handler(message))
-    },
-    receiveHistory(messages: ServerMessage[]) {
-      handlers.get("history")?.forEach((handler) => handler(messages))
-    },
-  }
-})
+const { socket, resetSocket, receiveMessage, receiveHistory } = vi.hoisted(
+  () => {
+    const handlers = new Map<string, Set<(...args: unknown[]) => void>>()
+    const socket = {
+      connected: true,
+      id: "abcdefghijklmnop",
+      on(event: string, handler: (...args: unknown[]) => void) {
+        const current = handlers.get(event) ?? new Set()
+        current.add(handler)
+        handlers.set(event, current)
+        return socket
+      },
+      off(event: string, handler: (...args: unknown[]) => void) {
+        handlers.get(event)?.delete(handler)
+        return socket
+      },
+      emit: vi.fn(),
+    }
+
+    return {
+      socket,
+      resetSocket() {
+        handlers.clear()
+        socket.emit.mockClear()
+      },
+      receiveMessage(message: ServerMessage) {
+        handlers.get("message")?.forEach((handler) => handler(message))
+      },
+      receiveHistory(messages: ServerMessage[]) {
+        handlers.get("history")?.forEach((handler) => handler(messages))
+      },
+    }
+  },
+)
 
 vi.mock("socket.io-client", () => ({
   io: () => socket,
@@ -51,8 +53,14 @@ describe("chat app", () => {
     render(<App />)
 
     expect(await screen.findByRole("status")).toHaveTextContent("Connected")
-    expect(screen.getByRole("textbox", { name: "Your name" })).toBeInTheDocument()
+    expect(
+      screen.getByRole("textbox", { name: "Your name" }),
+    ).toBeInTheDocument()
     expect(screen.getByText("No messages yet. Say hello.")).toBeInTheDocument()
+    expect(screen.getByRole("log", { name: "Messages" })).toHaveAttribute(
+      "aria-live",
+      "polite",
+    )
     expect(screen.getByRole("button", { name: "Send" })).toBeDisabled()
   })
 
@@ -64,7 +72,9 @@ describe("chat app", () => {
     await user.click(screen.getByRole("button", { name: "Save" }))
 
     expect(screen.getByText("Ada")).toBeInTheDocument()
-    expect(screen.queryByRole("textbox", { name: "Your name" })).not.toBeInTheDocument()
+    expect(
+      screen.queryByRole("textbox", { name: "Your name" }),
+    ).not.toBeInTheDocument()
     expect(socket.emit).toHaveBeenCalledWith("name", "Ada")
     expect(screen.getByText("Ada").previousElementSibling).toHaveStyle({
       backgroundColor: expect.any(String),
@@ -93,10 +103,9 @@ describe("chat app", () => {
     })
 
     expect(screen.getByText("Hello")).toBeInTheDocument()
-    expect(screen.getByText("Hello").closest("li")?.querySelector("time")).toHaveAttribute(
-      "dateTime",
-      new Date(sentAt).toISOString(),
-    )
+    expect(
+      screen.getByText("Hello").closest("li")?.querySelector("time"),
+    ).toHaveAttribute("dateTime", new Date(sentAt).toISOString())
   })
 
   it("shows another person's message with a different color", async () => {
@@ -130,7 +139,9 @@ describe("chat app", () => {
     const graceDot = messages.getByText("Grace").querySelector("[aria-hidden]")
     expect(adaDot?.getAttribute("style")).toContain("background-color")
     expect(graceDot?.getAttribute("style")).toContain("background-color")
-    expect(graceDot?.getAttribute("style")).not.toBe(adaDot?.getAttribute("style"))
+    expect(graceDot?.getAttribute("style")).not.toBe(
+      adaDot?.getAttribute("style"),
+    )
   })
 
   it("shows recent messages from the server when joining", async () => {
@@ -151,7 +162,9 @@ describe("chat app", () => {
     })
 
     expect(screen.getByText("Already here")).toBeInTheDocument()
-    expect(screen.queryByText("No messages yet. Say hello.")).not.toBeInTheDocument()
+    expect(
+      screen.queryByText("No messages yet. Say hello."),
+    ).not.toBeInTheDocument()
     expect(socket.emit).toHaveBeenCalledWith("history")
   })
 })

frontend/src/App.tsx

@@ -104,7 +104,9 @@ const App = () => {
       setMessages((current) => {
         const byId = new Map(current.map((item) => [item.id, item]))
         for (const item of incoming) byId.set(item.id, toMessage(item))
-        return [...byId.values()].sort((a, b) => a.at.getTime() - b.at.getTime())
+        return [...byId.values()].sort(
+          (a, b) => a.at.getTime() - b.at.getTime(),
+        )
       })
     }
     const onMessage = (incoming: ServerMessage) => {
@@ -237,50 +239,51 @@ const App = () => {
         </p>
       </header>
 
-      <div
-        className="min-h-0 flex-1 overflow-y-auto p-5"
-        ref={listRef}
-        aria-label="Messages"
-      >
+      <div className="min-h-0 flex-1 overflow-y-auto p-5" ref={listRef}>
         {messages.length === 0 ? (
           <p className="grid h-full place-items-center text-center text-muted">
             No messages yet. Say hello.
           </p>
-        ) : (
-          <ol className="m-0 flex list-none flex-col gap-3.5 p-0">
-            {messages.map((item) => {
-              const author = item.mine
-                ? item.name || "You"
-                : item.name || `Guest ${shortId(item.from)}`
+        ) : null}
+        <ol
+          className="m-0 flex list-none flex-col gap-3.5 p-0"
+          role="log"
+          aria-live="polite"
+          aria-relevant="additions"
+          aria-label="Messages"
+        >
+          {messages.map((item) => {
+            const author = item.mine
+              ? item.name || "You"
+              : item.name || `Guest ${shortId(item.from)}`
 
-              return (
-                <li
-                  key={item.id}
-                  className={`flex max-w-[85%] flex-col ${item.mine ? "items-end self-end" : "items-start"}`}
+            return (
+              <li
+                key={item.id}
+                className={`flex max-w-[85%] flex-col ${item.mine ? "items-end self-end" : "items-start"}`}
+              >
+                <p className="mb-1 flex items-center gap-2 px-0.5 text-xs text-muted">
+                  <span className="inline-flex items-center gap-1.5 font-semibold text-ink">
+                    <span
+                      className="size-2.5 shrink-0 rounded-full"
+                      style={{ backgroundColor: colorFor(item.from) }}
+                      aria-hidden="true"
+                    />
+                    {author}
+                  </span>
+                  <time dateTime={item.at.toISOString()}>
+                    {formatTime(item.at)}
+                  </time>
+                </p>
+                <p
+                  className={`m-0 px-3.5 py-2.5 leading-snug wrap-anywhere whitespace-pre-wrap ${item.mine ? "rounded-2xl rounded-br-md bg-mine text-mine-ink" : "rounded-2xl rounded-bl-md bg-other"}`}
                 >
-                  <p className="mb-1 flex items-center gap-2 px-0.5 text-xs text-muted">
-                    <span className="inline-flex items-center gap-1.5 font-semibold text-ink">
-                      <span
-                        className="size-2.5 shrink-0 rounded-full"
-                        style={{ backgroundColor: colorFor(item.from) }}
-                        aria-hidden="true"
-                      />
-                      {author}
-                    </span>
-                    <time dateTime={item.at.toISOString()}>
-                      {formatTime(item.at)}
-                    </time>
-                  </p>
-                  <p
-                    className={`m-0 px-3.5 py-2.5 leading-snug wrap-anywhere whitespace-pre-wrap ${item.mine ? "rounded-2xl rounded-br-md bg-mine text-mine-ink" : "rounded-2xl rounded-bl-md bg-other"}`}
-                  >
-                    {item.body}
-                  </p>
-                </li>
-              )
-            })}
-          </ol>
-        )}
+                  {item.body}
+                </p>
+              </li>
+            )
+          })}
+        </ol>
       </div>
 
       <form