# 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
```bash
cd /home/sschuhmann/dev/rehearshalhub/web
npm run check
```
This command runs both TypeScript and ESLint checks sequentially.

### 2. Run TypeScript Check
```bash
cd /home/sschuhmann/dev/rehearshalhub/web
npm run typecheck
```
Validates TypeScript types and catches unused variables/imports.

### 3. Run ESLint
```bash
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**:
```ts
// 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**:
```ts
// 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**:
```ts
// 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:
```bash
cd /home/sschuhmann/dev/rehearshalhub/web
npm install husky --save-dev
npx husky install
```

2. Add Pre-Commit Hook:
```bash
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:
   ```bash
   cd /home/sschuhmann/dev/rehearshalhub/web
   npm run check
   ```
3. Fix any errors/warnings.
4. Commit changes:
   ```bash
   git add .
   git commit -m "Update UI layout"
   ```

## Troubleshooting
- **`tsc` not found**: Install TypeScript:
  ```bash
  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).