rehearshalhub/agents.md

Static Testing Strategy for UI Changes

Overview

This document outlines the static testing strategy to ensure code quality and build integrity after UI changes. Run these checks from the web directory to validate TypeScript and ESLint rules.

Commands

1. Run All Checks

cd /home/sschuhmann/dev/rehearshalhub/web
npm run check

This command runs both TypeScript and ESLint checks sequentially.

2. Run TypeScript Check

cd /home/sschuhmann/dev/rehearshalhub/web
npm run typecheck

Validates TypeScript types and catches unused variables/imports.

3. Run ESLint

cd /home/sschuhmann/dev/rehearshalhub/web
npm run lint

Enforces code style, formatting, and best practices.

When to Run

• After Every UI Change: Run npm run check to ensure no regressions.
• Before Commits: Add a pre-commit hook to automate checks.
• Before Deployment: Verify build integrity.

Common Issues and Fixes

1. Unused Imports

Error: TS6133: 'X' is declared but its value is never read. Fix: Remove the unused import or variable.

Example:

// Before
import { useQuery } from "@tanstack/react-query"; // Unused

// After
// Removed unused import

2. Missing Imports

Error: TS2304: Cannot find name 'X'. Fix: Import the missing dependency.

Example:

// Before
function Component() {
  useEffect(() => {}, []); // Error: useEffect not imported
}

// After
import { useEffect } from "react";
function Component() {
  useEffect(() => {}, []);
}

3. Formatting Issues

Error: ESLint formatting rules violated. Fix: Use consistent indentation (2 spaces) and semicolons.

Example:

// Before
function Component(){return <div>Hello</div>}

// After
function Component() {
  return <div>Hello</div>;
}

Pre-Commit Hook

Automate checks using Husky:

Setup

1. Install Husky:

cd /home/sschuhmann/dev/rehearshalhub/web
npm install husky --save-dev
npx husky install

2. Add Pre-Commit Hook:

npx husky add .husky/pre-commit "npm run check"

How It Works

• Before each commit, Husky runs npm run check.
• If checks fail, the commit is aborted.

Best Practices

1. Run Checks Locally: Always run npm run check before pushing code.
2. Fix Warnings: Address all warnings to maintain code quality.
3. Review Changes: Use git diff to review changes before committing.

Example Workflow

1. Make UI changes (e.g., update AppShell.tsx).
2. Run static checks:

   cd /home/sschuhmann/dev/rehearshalhub/web
   npm run check
   

3. Fix any errors/warnings.
4. Commit changes:

   git add .
   git commit -m "Update UI layout"
   

Troubleshooting

• tsc not found: Install TypeScript:

  npm install typescript --save-dev
  

• ESLint errors: Fix formatting or disable rules if necessary.
• Build failures: Check npm run check output for details.

Responsibilities

• Developers: Run checks before committing.
• Reviewers: Verify checks pass during PR reviews.
• CI/CD: Integrate npm run check into the pipeline.

Notes

• This strategy ensures UI changes are type-safe and follow best practices.
• Static checks do not replace manual testing (e.g., responsiveness, usability).