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

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

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

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