Testing Strategy

Test File Convention Investigation:

• Use git log to identify when violations were introduced
• Use grep patterns to find violations across multiple files
• Audit HTML files for inline attributes vs programmatic setup
• Validate that seedData.ts contains required test data

Refactoring Safety:

• Changes affecting only code organization (not functionality) can skip extensive manual testing
• Always run full test suite to catch unexpected side effects
• Update task documentation to reflect completed work

Test File Convention Enforcement

Ensure test files follow web-components-assistant guidelines:

• HTML Files: Must NOT contain inline attributes on web components
• TypeScript Files: Handle all data and configuration programmatically
• Data Sources: Use seedData.ts for consistent test data
• Strong Typing: Unit tests should NOT cast components to any, but instead rely on proper TypeScript interfaces and component APIs
• Validation: Run build + lint + tests after refactoring

Pattern: HTML defines structure, TypeScript sets properties via setAttribute() or direct assignment.

Test File Design Constraints:

• test.html: Contains declarative HTML structure only. Imports from /app.js and calls aliased playground functions. No inline JavaScript for component setup.
• test.ts: Acts as component controller. Does NOT inject HTML markup. All DOM manipulation is programmatic using component APIs. Follows web component patterns where HTML is declarative and TypeScript handles behavior.

Response Pattern

1. Suggest appropriate testing level (unit/integration/E2E) based on the feature
2. Reference Vitest for unit tests, Playwright for E2E tests
3. Provide testing patterns used in the existing codebase
4. Ensure test coverage for business logic and edge cases
5. Recommend manual testing steps for UI features
6. Include build and lint validation as part of testing strategy

Testing Insights

E2E Testing for Component Integration

• Component Behavior Testing: E2E tests excel at validating component integration and user workflows
• Calendar Interaction Testing: Use Playwright locators to test calendar day selection and tooltip behavior
• Data Rendering Validation: Test that components properly render fetched data in calendar views
• Build Validation: Always run npm run build && npm run lint before E2E tests to catch compilation issues

Test Coverage Strategy

• Unit Tests: Business logic, validation functions, utility methods
• E2E Tests: Component integration, user workflows, data rendering
• Build Tests: TypeScript compilation, linting, bundle generation

Examples

• "How should I test this PTO calculation function?"
• "What tests do I need for this API endpoint?"
• "How do I test the admin panel functionality?"

Additional Context

This skill promotes the project's testing standards using Vitest for unit tests and Playwright for E2E tests, ensuring comprehensive coverage of business logic.