Test and Fix Workflow

Systematic workflow for running tests and fixing failures. This is the implementation of the mandatory code quality workflow.

When to Apply

Use this workflow when:

•Running the mandatory test workflow
•Fixing code quality issues
•Debugging test failures
•Resolving TypeScript, formatting, or linting errors

Quick Reference

Workflow Steps

•Format code: cd embedded-components; yarn format
•Run test suite: cd embedded-components; yarn test
•Analyze failures by type (TypeScript, formatting, linting, tests)
•Prioritize fixes (TypeScript → Formatting → Linting → Tests)
•Fix issues systematically
•Verify all fixes by re-running tests
•Iterate until green

1. Format Code

Auto-fix formatting issues first:

powershell

cd embedded-components
yarn format

This automatically fixes:

•Indentation
•Quote style
•Line breaks
•Trailing commas
•etc.

2. Run Test Suite

Execute all tests in the project:

powershell

cd embedded-components
yarn test

This runs:

•Type checking (TypeScript)
•Format checking (Prettier)
•Linting (ESLint)
•Unit tests (Vitest)

3. Analyze Failures

Categorize failures by type:

TypeScript Errors:

•Type mismatches
•Missing type definitions
•Import errors
•Interface violations

Formatting Errors:

•Indentation issues
•Quote style violations
•Line break problems
•Trailing comma issues

Linting Errors:

•Unused variables
•Missing dependencies
•Code style violations
•Best practice violations

Test Failures:

•Assertion failures
•Mock issues
•Timeout errors
•Component rendering failures

4. Prioritize Fixes

Fix in this order:

•TypeScript errors - Must be fixed first (blocking)
•Formatting errors - Auto-fixable
•Linting errors - Most auto-fixable
•Test failures - Requires analysis

5. Fix Issues Systematically

For TypeScript Errors:

powershell

# Check types
cd embedded-components
yarn typecheck

# Fix type issues in code
# Then re-check
yarn typecheck

For Formatting Errors:

powershell

# Auto-fix all formatting
cd embedded-components
yarn format

# Verify
yarn format:check

For Linting Errors:

powershell

# Auto-fix linting
cd embedded-components
yarn lint:fix

# Verify
yarn lint

For Test Failures:

powershell

# Run specific test file
cd embedded-components
yarn test ComponentName.test.tsx

# Run in watch mode for debugging
yarn test:watch ComponentName.test.tsx

# Fix test or implementation
# Re-run tests
yarn test

6. Verify All Fixes

Re-run complete test suite:

powershell

cd embedded-components
yarn test

6. Iterate Until Green

Repeat steps 3-5 until all tests pass.

Common Failure Patterns

TypeScript: Missing Type

typescript

// ❌ Error: Parameter 'value' implicitly has an 'any' type
const formatValue = (value) => value.toString();

// ✅ Fix: Add type annotation
const formatValue = (value: number): string => value.toString();

TypeScript: Type Mismatch

typescript

// ❌ Error: Type 'string' is not assignable to type 'number'
const age: number = "25";

// ✅ Fix: Use correct type or convert
const age: number = 25;
// or
const age: number = parseInt("25", 10);

Formatting: Inconsistent Quotes

typescript

// ❌ Error: Replace `"` with `'`
const name = "John";

// ✅ Fix: Auto-fixed by yarn format
const name = 'John';

Linting: Unused Variable

typescript

// ❌ Error: 'unused' is assigned but never used
const unused = "value";
const used = "other";

// ✅ Fix: Remove or use it
const used = "other";
// or
const unused = "value";
console.log(unused);

Linting: Missing useEffect Dependencies

typescript

// ❌ Error: React Hook useEffect has a missing dependency: 'userId'
useEffect(() => {
  fetchUser(userId);
}, []);

// ✅ Fix: Add dependency
useEffect(() => {
  fetchUser(userId);
}, [userId]);

Test: Assertion Failure

typescript

// ❌ Failure: expected 5 to equal 4
test("adds numbers", () => {
  expect(add(2, 2)).toBe(5);
});

// ✅ Fix: Correct assertion or implementation
test("adds numbers", () => {
  expect(add(2, 2)).toBe(4);
});

Test: Async Timeout

typescript

// ❌ Error: Timeout - Async callback was not invoked within timeout
test("loads data", () => {
  renderComponent();
  expect(screen.getByText("Data")).toBeInTheDocument();
});

// ✅ Fix: Use waitFor for async operations
test("loads data", async () => {
  renderComponent();
  await waitFor(() => {
    expect(screen.getByText("Data")).toBeInTheDocument();
  });
});

Test: Mock Not Reset

typescript

// ❌ Error: Mock from previous test affecting current test
test("test 1", () => {
  server.use(http.get("/api/data", () => HttpResponse.json({ id: 1 })));
  // test assertions
});

test("test 2", () => {
  // Still using mock from test 1
  // test assertions
});

// ✅ Fix: Reset handlers in renderComponent or beforeEach
beforeEach(() => {
  server.resetHandlers();
});

Debugging Strategies

Isolate the Issue

powershell

# Run single test file
cd embedded-components
yarn test ComponentName.test.tsx

# Run single test
yarn test ComponentName.test.tsx -t "specific test name"

# Run type check only
yarn typecheck

# Run linter only
yarn lint

Use Watch Mode

powershell

# Watch mode for rapid iteration
cd embedded-components
yarn test:watch ComponentName.test.tsx

Verbose Output

powershell

# More detailed output
cd embedded-components
yarn test --verbose

Coverage Report

powershell

# Generate coverage report
cd embedded-components
yarn test:coverage

# View report
start coverage/index.html

Quick Fix Script

Create a PowerShell script to automate fixes:

powershell

# fix-issues.ps1
cd embedded-components

Write-Host "Formatting code..." -ForegroundColor Yellow
yarn format

Write-Host "Fixing linting..." -ForegroundColor Yellow
yarn lint:fix

Write-Host "Running tests..." -ForegroundColor Yellow
yarn test

if ($LASTEXITCODE -eq 0) {
    Write-Host "All tests passed!" -ForegroundColor Green
} else {
    Write-Host "Some tests failed. Review output above." -ForegroundColor Red
}

Best Practices

•Fix one issue at a time - Don't batch unrelated fixes
•Verify each fix - Run tests after each fix
•Commit working code - Commit after all tests pass
•Don't skip failures - Address all issues before committing
•Use auto-fix first - Let tools fix what they can
•Document complex fixes - Add comments for non-obvious fixes
•Update tests if needed - Ensure tests reflect requirements

Time-Saving Tips

powershell

# Chain auto-fixes
cd embedded-components
yarn format; yarn lint:fix

# Check specific file quickly
yarn typecheck src/components/ComponentName.tsx

# Run related tests only
yarn test ComponentName

# Keep tests running in watch mode
yarn test:watch

Integration with Git

powershell

# Complete workflow before commit
cd embedded-components
yarn format; yarn lint:fix; yarn test

# If all pass, commit
cd ..
git add embedded-components
git commit -m "fix: resolve test failures"
git push

Note: Always run yarn format first to ensure code is properly formatted before running tests.

Troubleshooting

Cache Issues

powershell

cd embedded-components
yarn cache clean
Remove-Item -Recurse -Force node_modules
yarn install

Port Conflicts

powershell

# Find process using port
netstat -ano | findstr :3000

# Kill process
taskkill /PID <PID> /F

Memory Issues

powershell

$env:NODE_OPTIONS="--max-old-space-size=4096"
cd embedded-components
yarn test

How to Use

For detailed instructions, examples, and troubleshooting:

•Full guide: AGENTS.md - Complete workflow documentation

References

•See .github/skills/code-quality-workflow/ for quality gates
•See .github/skills/component-testing/ for testing patterns
•See AGENTS.md for complete workflow documentation