Test and Fix Workflow Skill

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:

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:

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:

# 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

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

# 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

Agent Skills: Test and Fix Workflow

Install this agent skill to your local

Skill Files