137 lines
3.2 KiB
Markdown
137 lines
3.2 KiB
Markdown
# 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).
|