Add comprehensive tests and CI for A2UI Composer

.gemini/GEMINI.md

@@ -72,7 +72,11 @@ The Lit clients are located in `samples/client/lit/`.
 1.  **Build the Renderer**:
     First, ensure the shared renderers are built:
     ```bash
-    cd renderers/web_core
+    cd renderers/markdown/markdown-it
+    npm install
+    npm run build
+
+    cd ../../web_core
     npm install
     npm run build
 
@@ -95,7 +99,11 @@ The Angular clients are located in `samples/client/angular/`.
 
 First, ensure the shared renderers are built (if not already done):
 ```bash
-cd renderers/web_core
+cd renderers/markdown/markdown-it
+npm install
+npm run build
+
+cd ../../web_core
 npm install
 npm run build
 

.github/workflows/composer_build_and_test.yml

@@ -0,0 +1,60 @@
+# Copyright 2025 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+name: Composer build and test
+
+on:
+  push:
+    paths:
+      - 'tools/composer/**'
+      - '.github/workflows/composer_build_and_test.yml'
+  pull_request:
+    paths:
+      - 'tools/composer/**'
+      - '.github/workflows/composer_build_and_test.yml'
+
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'pnpm'
+          cache-dependency-path: 'tools/composer/pnpm-lock.yaml'
+
+      - name: Install dependencies
+        working-directory: ./tools/composer
+        run: pnpm install
+
+      - name: Lint
+        working-directory: ./tools/composer
+        run: pnpm lint
+
+      - name: Build
+        working-directory: ./tools/composer
+        run: pnpm build
+
+      - name: Test
+        working-directory: ./tools/composer
+        run: pnpm test

README.md

@@ -134,8 +134,13 @@ The best way to understand A2UI is to run the samples.
     Open a new terminal window:
 
     ```bash
+    # Install and build the Markdown renderer
+    cd renderers/markdown/markdown-it
+    npm install
+    npm run build
+
     # Install and build the Web Core library
-    cd renderers/web_core
+    cd ../../web_core
     npm install
     npm run build
 

tools/composer/AGENTS.md

@@ -1,7 +1,7 @@
 # Repository Guidelines
 
 ## Build, Test, and Development Commands
-Run `pnpm install` once, then `pnpm dev` for the web server (Next.js watches on port 3000). Build artifacts with `pnpm build`;
+Run `pnpm install` once, then `pnpm dev` for the web server (Next.js watches on port 3001). Build artifacts with `pnpm build`;
 
 ## Coding Style & Naming Conventions
 TypeScript and modern React are mandatory; prefer function components and colocate UI logic in `app/components`. Follow Prettier's defaults (two-space indentation, single quotes) by running `pnpm format` before commits. Component files use PascalCase (e.g., `AgentPanel.tsx`); hooks and utilities use camelCase in `*.ts`. The shared ESLint preset (`packages/eslint-config`) enforces `turbo/no-undeclared-env-vars`, so surface new env variables via typed helpers.

tools/composer/README.md

@@ -10,10 +10,53 @@ Just ask the composer to build you a widget, have it make any changes you want,
 
 
 ## Running the composer
-You need a `GEMINI_API_KEY` or `OPENAI_API_KEY` in `apps/widget-builder/.env.local`.
+You need a `GOOGLE_GENERATIVE_AI_API_KEY` (or `GEMINI_API_KEY`) or `OPENAI_API_KEY` in a `.env.local` file in this directory.
 
-Then, just install, build, and run!
+Example `.env.local`:
+```env
+GOOGLE_GENERATIVE_AI_API_KEY=your_gemini_api_key_here
+# OR
+GEMINI_API_KEY=your_gemini_api_key_here
+# OR
+OPENAI_API_KEY=your_openai_api_key_here
+```
+
+### Build Dependencies
+Since the composer depends on shared renderers in this repository, you must build them first:
+
+```bash
+# Build markdown-it renderer
+cd ../../renderers/markdown/markdown-it
+npm install
+npm run build
+
+# Build web-core renderer
+cd ../../web_core
+npm install
+npm run build
+
+# Build lit renderer
+cd ../lit
+npm install
+npm run build
+
+# Back to composer
+cd ../../tools/composer
 ```
+
+Then, just install, build, and run!
+```bash
 pnpm i && pnpm build
 pnpm dev
 ```
+
+## Testing
+To run the tests:
+```bash
+pnpm test
+```
+
+To run tests in watch mode:
+```bash
+pnpm test:watch
+```

tools/composer/package.json

@@ -7,6 +7,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "eslint",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },
   "dependencies": {
@@ -37,21 +39,27 @@
     "@eslint/js": "^9.34.0",
     "@next/eslint-plugin-next": "^15.5.0",
     "@tailwindcss/postcss": "^4",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^20",
     "@types/react": "19.2.3",
     "@types/react-dom": "19.2.3",
     "@types/uuid": "^11.0.0",
+    "@vitejs/plugin-react": "^5.1.4",
     "eslint": "^9.34.0",
     "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-only-warn": "^1.1.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-turbo": "^2.5.0",
     "globals": "^16.3.0",
+    "jsdom": "^28.1.0",
     "prettier": "^3.7.4",
     "tailwindcss": "^4",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.40.0"
+    "typescript-eslint": "^8.40.0",
+    "vitest": "^4.0.18"
   }
 }