Testing tooling (#160)

Set up unit/integration/e2e testing with test coverage for
unit/integration. Test coverage is not used, but can be pulled into a GH
workflow when/if desired. Currently as there are very few tests written
there is no threshold set in this repo.

---------

Co-authored-by: Mark Kurtz <mark.j.kurtz@gmail.com>

Author: DaltheCow

src/ui/.eslintrc.json renamed to .eslintrc.json

@@ -2,6 +2,7 @@
   "env": {
     "browser": true,
     "es2024": true,
+    "jest": true,
     "node": true
   },
   "extends": [
@@ -12,25 +13,16 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:prettier/recommended"
   ],
-  "ignorePatterns": [".vscode"],
-  "overrides": [
-    {
-      "files": ["*.mjs"],
-      "parser": "espree", // Use the default JavaScript parser for `.mjs` files
-      "parserOptions": {
-        "sourceType": "module"
-      }
-    }
-  ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true
     },
     "ecmaVersion": 2024,
+    "project": ["src/ui/tsconfig.json", "tsconfig.test.json", "tsconfig.cypress.json"],
     "sourceType": "module"
   },
-  "plugins": ["@typescript-eslint", "import", "no-secrets", "react"],
+  "plugins": ["@typescript-eslint", "import", "jest", "no-secrets", "react"],
   "root": true,
   "rules": {
     "complexity": ["warn", { "max": 8 }],
@@ -45,5 +37,5 @@
     "import/no-extraneous-dependencies": ["error"],
     "no-secrets/no-secrets": ["error", { "additionalRegexes": {}, "ignoreContent": [] }]
   },
-  "settings": { "next": { "rootDir": ["src/ui/"] } }
+  "settings": { "next": { "rootDir": ["src/ui/", "tests/ui/"] } }
 }

.github/workflows/development.yml

@@ -31,11 +31,9 @@ jobs:
 
       - name: Install dependencies
         run: npm ci
-        working-directory: src/ui
 
       - name: Run quality and typing checks
         run: npm run lint
-        working-directory: src/ui
 
   type-checks:
     runs-on: ubuntu-latest
@@ -63,11 +61,9 @@ jobs:
 
       - name: Install dependencies
         run: npm ci
-        working-directory: src/ui
 
       - name: Run quality and typing checks
         run: npm run type-check
-        working-directory: src/ui
 
   precommit-checks:
     runs-on: ubuntu-latest
@@ -94,12 +90,10 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Install dependencies
-        working-directory: src/ui
         run: npm ci
 
       - name: Run pre-commit checks
         run: npx husky run pre-commit
-        working-directory: src/ui
 
   unit-tests:
     runs-on: ubuntu-latest
@@ -117,6 +111,20 @@ jobs:
       - name: Run unit tests
         run: tox -e test-unit -- -m "smoke or sanity"
 
+  ui-unit-tests:
+    permissions:
+      contents: "read"
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run unit tests
+        run: npm run test:unit
+
   integration-tests:
     runs-on: ubuntu-latest
     strategy:
@@ -133,6 +141,20 @@ jobs:
       - name: Run integration tests
         run: tox -e test-integration -- -m smoke
 
+  ui-integration-tests:
+    permissions:
+      contents: "read"
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run integration tests
+        run: npm run test:integration
+
   build:
     runs-on: ubuntu-latest
     strategy:

.gitignore

@@ -214,11 +214,13 @@ yarn-error.log*
 src/ui/.vercel
 
 # typescript
-src/ui/*.tsbuildinfo
+*.tsbuildinfo
 src/ui/next-env.d.ts
 
 # Root-level UI config files that should be tracked
 !package.json
 !package-lock.json
 !.eslintrc.json
 !tsconfig.json
+!tsconfig.*.json
+!src/ui/public/manifest.json

.prettierignore

@@ -0,0 +1,18 @@
+# === Don't touch ===
+*.md
+*.mdx
+*.yaml
+*.yml
+
+# === Skip all JSON …
+*.json
+
+# === include relevant json ===
+!src/ui/**/*.json
+!tests/ui/**/*.json
+
+# Root-level configs to format
+!/.eslintrc.json
+!/tsconfig*.json
+!/*.config.{js,ts}
+!/jest.setup.ts

src/ui/.prettierrc renamed to .prettierrc

@@ -179,6 +179,68 @@ Review the coverage report to confirm that your new code is adequately tested.
 
 3. **Address Feedback**: Respond to any feedback from reviewers and make necessary changes.
 
+## Developing the Web UI
+
+The GuideLLM project includes a frontend UI located in `src/ui`, built using [Next.js](https://nextjs.org/). This section provides instructions for working on the UI.
+
+### Getting Started
+
+To start the local development server:
+
+```bash
+npm run dev
+```
+
+Then open [http://localhost:3000](http://localhost:3000) in your browser.
+
+### Building for Production
+
+To build the app for production (output in the `out` directory):
+
+```bash
+npm run build
+```
+
+### Running UI Tests
+
+- **Unit tests**:
+
+  ```bash
+  npm run test:unit
+  ```
+
+- **Integration tests**:
+
+  ```bash
+  npm run test:integration
+  ```
+
+- **End-to-end tests** (using Cypress, ensure live dev server):
+
+  ```bash
+  npm run test:e2e
+  ```
+
+### Code Quality and Styling
+
+- **Fix styling issues**:
+
+  ```bash
+  npm run format
+  ```
+
+- **Run ESLint checks**:
+
+  ```bash
+  npm run lint
+  ```
+
+- **Run TS type checks**:
+
+  ```bash
+  npm run type-checks
+  ```
+
 ## Additional Resources
 
 - [CONTRIBUTING.md](https://github.com/neuralmagic/guidellm/blob/main/CONTRIBUTING.md): Guidelines for contributing to the project.

DEVELOPING.md

@@ -0,0 +1,9 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    specPattern: 'tests/ui/cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
+    supportFile: 'tests/ui/cypress/support/e2e.ts',
+    baseUrl: 'http://localhost:3000', // optional, but good practice
+  },
+});

cypress.config.ts

@@ -0,0 +1,25 @@
+const nextJest = require('next/jest');
+
+const createJestConfig = nextJest({
+  dir: './src/ui',
+});
+
+const customJestConfig = {
+  collectCoverage: true,
+  collectCoverageFrom: ['./src/ui/**/*.{ts,tsx}'],
+  coverageDirectory: './coverage',
+  coverageProvider: 'v8',
+  coverageReporters: ['json', 'text-summary', 'lcov'],
+  moduleFileExtensions: ['ts', 'tsx', 'js'],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/$1',
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  testEnvironment: 'jest-environment-jsdom',
+  testMatch: [
+    '<rootDir>/tests/ui/unit/**/*.(test|spec).{ts,tsx,js,jsx}',
+    '<rootDir>/tests/ui/integration/**/*.(test|spec).{ts,tsx,js,jsx}',
+  ],
+};
+
+module.exports = createJestConfig(customJestConfig);

jest.config.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';