Imported from David-Li0406/meta-skill-evloving (skill-flow/data/skills-refined-36k/skillsmp/test-and-fix-workflow/AGENTS.md). Install upstream with npx skills add David-Li0406/meta-skill-evloving --skill test-and-fix-workflow. Copyright stays with the author.

Test and Fix Workflow

Version 2.0.0
J.P. Morgan Payments
December 2024

Note:
This document is mainly for agents and LLMs to follow when running tests and
fixing failures systematically in the embedded-components repository. Humans
may also find it useful, but guidance here is optimized for automation
and consistency by AI-assisted workflows.

Abstract

Automated workflow for running tests and fixing failures systematically. This skill provides comprehensive guidance on the systematic workflow for running tests, analyzing failures, and fixing issues in priority order.

Overview

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

Workflow Steps

1. Format Code

Auto-fix formatting issues first:

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:

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:

1. TypeScript errors - Must be fixed first (blocking)
2. Formatting errors - Auto-fixable
3. Linting errors - Most auto-fixable
4. Test failures - Requires analysis

5. Fix Issues Systematically

For TypeScript Errors:

# Check types
cd embedded-components
yarn typecheck

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

For Formatting Errors:

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

# Verify
yarn format:check

For Linting Errors:

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

# Verify
yarn lint

For Test Failures:

# 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:

cd embedded-components
yarn test

6. Iterate Until Green

Repeat steps 3-5 until all tests pass.

Common Failure Patterns

TypeScript: Missing Type

// ❌ 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

// ❌ 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

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

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

Linting: Unused Variable

// ❌ 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

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

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

Test: Assertion Failure

// ❌ 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

// ❌ 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

// ❌ 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

# 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

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

Verbose Output

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

Coverage Report

# 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:

# 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

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

Time-Saving Tips

# 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

# 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

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

Port Conflicts

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

# Kill process
taskkill /PID <PID> /F

Memory Issues

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

References

• See .github/copilot/skills/code-quality-workflow/ for quality gates
• See .github/copilot/skills/component-testing/ for testing patterns
• See .github/copilot/prompts/run-tests-and-fix.md for detailed prompt