From b08a629bd943e4aa6442b161fd19ae2a7e8cdc35 Mon Sep 17 00:00:00 2001 From: FORGE Date: Sat, 11 Apr 2026 04:52:37 +0000 Subject: [PATCH 1/3] feat: Initialize Vite React Project Run: 02ad6163-0e9c-421d-adde-7f10ec5df670 Task: 45247679-d6d7-43ce-b2f5-293fc8e229ac Agent: builder --- RUNNING.md | 69 +++++++++++++++++++++++++++++++++++++----------- index.html | 12 +++++++++ package.json | 24 +++++++++++++++++ src/App.jsx | 14 ++++++++++ src/App.test.jsx | 11 ++++++++ src/main.jsx | 9 +++++++ vite.config.js | 11 ++++++++ 7 files changed, 135 insertions(+), 15 deletions(-) create mode 100644 index.html create mode 100644 package.json create mode 100644 src/App.jsx create mode 100644 src/App.test.jsx create mode 100644 src/main.jsx create mode 100644 vite.config.js diff --git a/RUNNING.md b/RUNNING.md index 77896cf..1077cdd 100644 --- a/RUNNING.md +++ b/RUNNING.md @@ -1,33 +1,72 @@ -# Running the Todo API +# Running the Vite React App + +## TEAM_BRIEF +stack: TypeScript/React+Vite +test_runner: npx vitest run +lint_tool: none +coverage_tool: none +coverage_threshold: 0 +coverage_applies: false ## Prerequisites -- Python 3.10 or later +- Node.js 18+ and npm +- Docker (optional, for containerised runs) -## Install dependencies +## Local Development ```bash -pip install fastapi uvicorn pydantic -``` +# Install dependencies +npm install -For running the test suite you will also need: +# Start the development server +npm run dev -```bash -pip install httpx pytest +# Build for production +npm run build + +# Preview the production build +npm run preview + +# Run tests +npm test ``` -## Start the server +## Docker-based Setup ```bash -uvicorn main:app --reload --host 0.0.0.0 --port 8000 +# Build the Docker image +docker build -t vite-react-app . + +# Run the development server +docker run -it --rm -p 5173:5173 vite-react-app npm run dev -- --host + +# Run tests inside the container +docker run -it --rm vite-react-app npm test ``` -The API will be available at . +### Dockerfile (example) -Interactive docs are served at . +```dockerfile +FROM node:18-alpine +WORKDIR /app +COPY package.json ./ +RUN npm install +COPY . . +EXPOSE 5173 +CMD ["npm", "run", "dev", "--", "--host"] +``` -## Run the tests +## Project Structure -```bash -pytest tests/ +``` +. +├── index.html # HTML entry point for Vite +├── package.json # Dependencies and scripts +├── vite.config.js # Vite configuration with React plugin +├── RUNNING.md # This file +└── src/ + ├── main.jsx # React entry point + ├── App.jsx # Main App component + └── App.test.jsx # Tests for App component ``` diff --git a/index.html b/index.html new file mode 100644 index 0000000..cde2bbf --- /dev/null +++ b/index.html @@ -0,0 +1,12 @@ + + + + + + Vite React App + + +
+ + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..f174571 --- /dev/null +++ b/package.json @@ -0,0 +1,24 @@ +{ + "name": "vite-react-app", + "private": true, + "version": "1.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview", + "test": "vitest run" + }, + "dependencies": { + "react": "^18.3.1", + "react-dom": "^18.3.1" + }, + "devDependencies": { + "@testing-library/jest-dom": "^6.6.3", + "@testing-library/react": "^16.1.0", + "@vitejs/plugin-react": "^4.3.4", + "jsdom": "^25.0.1", + "vite": "^6.0.0", + "vitest": "^2.1.8" + } +} diff --git a/src/App.jsx b/src/App.jsx new file mode 100644 index 0000000..f90831d --- /dev/null +++ b/src/App.jsx @@ -0,0 +1,14 @@ +/** + * Main App component that renders the application root. + * + * @returns {JSX.Element} A div containing "Hello World". + */ +function App() { + return ( +
+ Hello World +
+ ); +} + +export default App; diff --git a/src/App.test.jsx b/src/App.test.jsx new file mode 100644 index 0000000..1a8ac05 --- /dev/null +++ b/src/App.test.jsx @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest'; +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import App from './App.jsx'; + +describe('App', () => { + it('renders Hello World', () => { + render(); + expect(screen.getByText('Hello World')).toBeInTheDocument(); + }); +}); diff --git a/src/main.jsx b/src/main.jsx new file mode 100644 index 0000000..6f4d655 --- /dev/null +++ b/src/main.jsx @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App.jsx'; + +ReactDOM.createRoot(document.getElementById('root')).render( + + + +); diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..fd557a9 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,11 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + test: { + environment: 'jsdom', + globals: true, + setupFiles: [], + }, +}); From df903480c06b81267f8205c888229fff326f8f62 Mon Sep 17 00:00:00 2001 From: FORGE Date: Sat, 11 Apr 2026 04:53:00 +0000 Subject: [PATCH 2/3] feat: Implement App Component Run: 02ad6163-0e9c-421d-adde-7f10ec5df670 Task: 4afe5879-5d39-4f56-b3c8-7e0cef1097ea Agent: builder --- RUNNING.md | 66 +++++++++++++++++++++++++----------------------- index.html | 2 +- package.json | 18 ++++++------- src/App.jsx | 6 ++--- src/App.test.jsx | 8 ++++-- src/main.jsx | 5 ++++ vite.config.js | 7 ++++- 7 files changed, 64 insertions(+), 48 deletions(-) diff --git a/RUNNING.md b/RUNNING.md index 1077cdd..888301a 100644 --- a/RUNNING.md +++ b/RUNNING.md @@ -1,4 +1,4 @@ -# Running the Vite React App +# Hello World React App ## TEAM_BRIEF stack: TypeScript/React+Vite @@ -10,42 +10,58 @@ coverage_applies: false ## Prerequisites -- Node.js 18+ and npm -- Docker (optional, for containerised runs) +- Node.js >= 18 +- npm >= 9 -## Local Development +## Setup ```bash -# Install dependencies npm install +``` + +## Development -# Start the development server +```bash npm run dev +``` + +Open http://localhost:5173 in your browser. + +## Build -# Build for production +```bash npm run build +``` -# Preview the production build -npm run preview +## Run Tests -# Run tests +```bash npm test ``` ## Docker-based Setup +### Build the image + ```bash -# Build the Docker image -docker build -t vite-react-app . +docker build -t hello-world-app . +``` -# Run the development server -docker run -it --rm -p 5173:5173 vite-react-app npm run dev -- --host +### Run in development mode -# Run tests inside the container -docker run -it --rm vite-react-app npm test +```bash +docker run -it --rm -p 5173:5173 hello-world-app npm run dev -- --host 0.0.0.0 +``` + +### Run tests inside Docker + +```bash +docker run -it --rm hello-world-app npm test ``` -### Dockerfile (example) +### Dockerfile (if not present) + +Create a `Dockerfile` at the project root: ```dockerfile FROM node:18-alpine @@ -54,19 +70,5 @@ COPY package.json ./ RUN npm install COPY . . EXPOSE 5173 -CMD ["npm", "run", "dev", "--", "--host"] -``` - -## Project Structure - -``` -. -├── index.html # HTML entry point for Vite -├── package.json # Dependencies and scripts -├── vite.config.js # Vite configuration with React plugin -├── RUNNING.md # This file -└── src/ - ├── main.jsx # React entry point - ├── App.jsx # Main App component - └── App.test.jsx # Tests for App component +CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"] ``` diff --git a/index.html b/index.html index cde2bbf..6c2135b 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - Vite React App + Hello World App
diff --git a/package.json b/package.json index f174571..2ad2c83 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "vite-react-app", + "name": "hello-world-app", "private": true, "version": "1.0.0", "type": "module", @@ -10,15 +10,15 @@ "test": "vitest run" }, "dependencies": { - "react": "^18.3.1", - "react-dom": "^18.3.1" + "react": "^18.2.0", + "react-dom": "^18.2.0" }, "devDependencies": { - "@testing-library/jest-dom": "^6.6.3", - "@testing-library/react": "^16.1.0", - "@vitejs/plugin-react": "^4.3.4", - "jsdom": "^25.0.1", - "vite": "^6.0.0", - "vitest": "^2.1.8" + "@testing-library/react": "^14.1.2", + "@testing-library/jest-dom": "^6.1.4", + "@vitejs/plugin-react": "^4.2.1", + "jsdom": "^23.0.1", + "vite": "^5.0.8", + "vitest": "^1.1.0" } } diff --git a/src/App.jsx b/src/App.jsx index f90831d..45df56c 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,12 +1,12 @@ /** - * Main App component that renders the application root. + * Main App component. * - * @returns {JSX.Element} A div containing "Hello World". + * Renders a simple "Hello World" heading as the root UI element. */ function App() { return (
- Hello World +

Hello World

); } diff --git a/src/App.test.jsx b/src/App.test.jsx index 1a8ac05..d65eb71 100644 --- a/src/App.test.jsx +++ b/src/App.test.jsx @@ -1,11 +1,15 @@ +/** + * Tests for the App component. + * + * Verifies that the App component renders "Hello World" text. + */ import { describe, it, expect } from 'vitest'; import { render, screen } from '@testing-library/react'; -import '@testing-library/jest-dom'; import App from './App.jsx'; describe('App', () => { it('renders Hello World', () => { render(); - expect(screen.getByText('Hello World')).toBeInTheDocument(); + expect(screen.getByText('Hello World')).toBeDefined(); }); }); diff --git a/src/main.jsx b/src/main.jsx index 6f4d655..ff124ef 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,3 +1,8 @@ +/** + * Application entry point. + * + * Mounts the root App component into the DOM node with id "root". + */ import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App.jsx'; diff --git a/vite.config.js b/vite.config.js index fd557a9..64b21f0 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,3 +1,9 @@ +/** + * Vite configuration for the React project. + * + * Enables the React plugin and configures Vitest for testing + * with jsdom as the DOM environment. + */ import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; @@ -6,6 +12,5 @@ export default defineConfig({ test: { environment: 'jsdom', globals: true, - setupFiles: [], }, }); From a8e07bbb5395eafd35a79dc0e671a3f813ec5cc2 Mon Sep 17 00:00:00 2001 From: FORGE Date: Sat, 11 Apr 2026 04:53:36 +0000 Subject: [PATCH 3/3] feat: Write Complete Test Suite Run: 02ad6163-0e9c-421d-adde-7f10ec5df670 Task: c7f3e918-47bb-4bda-93ac-218c555eb1f0 Agent: builder --- QA.md | 17 +++++++++++ RUNNING.md | 76 +++++++++++++++++++++++++---------------------- index.html | 2 +- package.json | 21 ++++++------- src/App.jsx | 8 ++--- src/App.test.jsx | 28 ++++++++++++----- src/main.jsx | 5 ---- src/setupTests.js | 1 + vite.config.js | 7 +---- 9 files changed, 95 insertions(+), 70 deletions(-) create mode 100644 QA.md create mode 100644 src/setupTests.js diff --git a/QA.md b/QA.md new file mode 100644 index 0000000..02bffe2 --- /dev/null +++ b/QA.md @@ -0,0 +1,17 @@ +app_type: spa +coverage_applies: false +coverage_source: null +coverage_threshold: 0 +coverage_tool: none +install_steps: +- npm install +- npm install --save-dev @testing-library/jest-dom @testing-library/react @testing-library/user-event + jsdom vitest @vitest/coverage-v8 +lint_tool: none +notes: Verify that the App component renders an

heading containing the text 'Hello + World'. +stack: TypeScript/React+Vite +test_files: +- src/App.test.jsx +test_runner: npx vitest run +workspace: /tmp/forge-repos/hello-world-react-app-02ad6163 diff --git a/RUNNING.md b/RUNNING.md index 888301a..e2d5df9 100644 --- a/RUNNING.md +++ b/RUNNING.md @@ -10,65 +10,69 @@ coverage_applies: false ## Prerequisites -- Node.js >= 18 -- npm >= 9 +- Node.js 18+ and npm +- Docker (optional, for containerised execution) -## Setup +## Local Setup ```bash +# Install dependencies npm install -``` - -## Development -```bash +# Start the development server npm run dev -``` - -Open http://localhost:5173 in your browser. -## Build +# Run the test suite +npm test -```bash +# Build for production npm run build -``` - -## Run Tests -```bash -npm test +# Preview the production build +npm run preview ``` ## Docker-based Setup -### Build the image - ```bash -docker build -t hello-world-app . +# Build the Docker image +docker build -t hello-world-react . + +# Run the tests inside a container +docker run --rm hello-world-react npm test + +# Run the dev server (accessible on http://localhost:5173) +docker run --rm -p 5173:5173 hello-world-react npm run dev -- --host 0.0.0.0 ``` -### Run in development mode +## Project Structure -```bash -docker run -it --rm -p 5173:5173 hello-world-app npm run dev -- --host 0.0.0.0 +``` +. +├── index.html # Vite HTML entry point +├── package.json # Dependencies and scripts +├── vite.config.js # Vite + Vitest configuration +├── RUNNING.md # This file +└── src/ + ├── main.jsx # React entry point + ├── App.jsx # Main App component (renders Hello World) + ├── App.test.jsx # Vitest test suite for App component + └── setupTests.js # Test setup (jest-dom matchers) ``` -### Run tests inside Docker +## Testing + +The test suite uses **Vitest** with **React Testing Library** and verifies that the +`App` component renders an `

` heading containing the text "Hello World". + +Run the tests: ```bash -docker run -it --rm hello-world-app npm test +npm test ``` -### Dockerfile (if not present) +Run tests in watch mode: -Create a `Dockerfile` at the project root: - -```dockerfile -FROM node:18-alpine -WORKDIR /app -COPY package.json ./ -RUN npm install -COPY . . -EXPOSE 5173 -CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"] +```bash +npm run test:watch ``` diff --git a/index.html b/index.html index 6c2135b..8727541 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - Hello World App + Hello World
diff --git a/package.json b/package.json index 2ad2c83..09370c2 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "hello-world-app", + "name": "hello-world-react", "private": true, "version": "1.0.0", "type": "module", @@ -7,18 +7,19 @@ "dev": "vite", "build": "vite build", "preview": "vite preview", - "test": "vitest run" + "test": "vitest run", + "test:watch": "vitest" }, "dependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0" + "react": "^18.3.1", + "react-dom": "^18.3.1" }, "devDependencies": { - "@testing-library/react": "^14.1.2", - "@testing-library/jest-dom": "^6.1.4", - "@vitejs/plugin-react": "^4.2.1", - "jsdom": "^23.0.1", - "vite": "^5.0.8", - "vitest": "^1.1.0" + "@testing-library/jest-dom": "^6.6.3", + "@testing-library/react": "^16.1.0", + "@vitejs/plugin-react": "^4.3.4", + "jsdom": "^25.0.1", + "vite": "^6.0.0", + "vitest": "^2.1.8" } } diff --git a/src/App.jsx b/src/App.jsx index 45df56c..2be9c6c 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,14 +1,12 @@ /** - * Main App component. + * App component — renders the main application heading. * - * Renders a simple "Hello World" heading as the root UI element. + * @returns {JSX.Element} A div containing the "Hello World" heading. */ -function App() { +export default function App() { return (

Hello World

); } - -export default App; diff --git a/src/App.test.jsx b/src/App.test.jsx index d65eb71..35f861d 100644 --- a/src/App.test.jsx +++ b/src/App.test.jsx @@ -1,15 +1,29 @@ -/** - * Tests for the App component. - * - * Verifies that the App component renders "Hello World" text. - */ import { describe, it, expect } from 'vitest'; import { render, screen } from '@testing-library/react'; import App from './App.jsx'; describe('App', () => { - it('renders Hello World', () => { + it('renders the Hello World heading', () => { render(); - expect(screen.getByText('Hello World')).toBeDefined(); + const heading = screen.getByRole('heading', { name: /hello world/i }); + expect(heading).toBeInTheDocument(); + }); + + it('renders Hello World as text content', () => { + render(); + const element = screen.getByText('Hello World'); + expect(element).toBeInTheDocument(); + }); + + it('renders exactly one heading element', () => { + const { container } = render(); + const headings = container.querySelectorAll('h1'); + expect(headings).toHaveLength(1); + }); + + it('heading contains the exact text Hello World', () => { + render(); + const heading = screen.getByRole('heading', { level: 1 }); + expect(heading).toHaveTextContent('Hello World'); }); }); diff --git a/src/main.jsx b/src/main.jsx index ff124ef..6f4d655 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,8 +1,3 @@ -/** - * Application entry point. - * - * Mounts the root App component into the DOM node with id "root". - */ import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App.jsx'; diff --git a/src/setupTests.js b/src/setupTests.js new file mode 100644 index 0000000..7b0828b --- /dev/null +++ b/src/setupTests.js @@ -0,0 +1 @@ +import '@testing-library/jest-dom'; diff --git a/vite.config.js b/vite.config.js index 64b21f0..53d9d0c 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,9 +1,3 @@ -/** - * Vite configuration for the React project. - * - * Enables the React plugin and configures Vitest for testing - * with jsdom as the DOM environment. - */ import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; @@ -12,5 +6,6 @@ export default defineConfig({ test: { environment: 'jsdom', globals: true, + setupFiles: './src/setupTests.js', }, });