Testing Standards

This skill enforces Ishkul's mandatory unit testing requirements to prevent production issues like the React error #310 caused by missing state transition tests.

Frontend Testing Requirements

Screens

Every new screen MUST have a test file at:

frontend/src/screens/__tests__/ScreenName.test.tsx

Required test coverage:

• Loading state - Initial loading UI
• Error state - Error handling and display
• Empty state - No data scenarios
• Success state - Data loaded correctly
• State transitions - Critical for catching React Rules of Hooks violations

Test File Template for Screens

describe('ScreenName', () => {
  describe('Loading State', () => {
    it('should display loading indicator', () => { /* test */ });
  });

  describe('Error State', () => {
    it('should display error message', () => { /* test */ });
    it('should allow retry', () => { /* test */ });
  });

  describe('Success State', () => {
    it('should display data correctly', () => { /* test */ });
  });

  describe('State Transitions (Rules of Hooks)', () => {
    it('should handle transition from loading to success', () => { /* test */ });
    it('should handle transition from loading to error', () => { /* test */ });
    it('should handle transition from error to loading (retry)', () => { /* test */ });
  });
});

Components

Every new component MUST have a test file at:

frontend/src/components/__tests__/ComponentName.test.tsx

Required coverage:

• All props combinations
• User interactions (clicks, input changes)
• Edge cases (empty props, long text, etc.)

Backend Testing Requirements

Every new handler MUST have a test file at:

backend/internal/handlers/handler_name_test.go

Required coverage:

• Success cases
• Error cases (invalid input, auth failures)
• Edge cases

Running Tests

Frontend

# Run specific test file
npm test -- --testPathPattern="YourNewFile.test"

# Run all tests
npm test

Backend

go test ./...

Why This Matters

Missing state transition tests caused a production crash (React error #310) in LessonScreen where hooks were called after conditional returns. Always include state transition tests to catch these issues before deployment.