diff --git a/web/scripts/README.md b/web/scripts/README.md index 6f75fe9314..1e33f80fba 100644 --- a/web/scripts/README.md +++ b/web/scripts/README.md @@ -5,10 +5,10 @@ Frontend development utility scripts. ## 📋 Scripts - `generate-icons.js` - Generate PWA icons -- `optimize-standalone.js` - Optimize build output +- `optimize-standalone.js` - Optimize build output - `analyze-component.js` - **Test generation helper** ⭐ ---- +______________________________________________________________________ ## 🚀 Generate Tests (Using AI Assistants) @@ -31,7 +31,7 @@ pnpm test app/components/base/button/index.spec.tsx **Done in < 1 minute!** ✅ ---- +______________________________________________________________________ ## 📊 How It Works @@ -40,7 +40,7 @@ pnpm test app/components/base/button/index.spec.tsx Script analyzes and scores components: - **0-10**: 🟢 Simple (5-10 min to test) -- **11-30**: 🟡 Medium (15-30 min to test) +- **11-30**: 🟡 Medium (15-30 min to test) - **31-50**: 🟠 Complex (30-60 min to test) - **51+**: 🔴 Very Complex (60+ min, consider refactoring) @@ -48,13 +48,13 @@ Script analyzes and scores components: Defined in `TESTING.md`: -**Must test**: Rendering, Props, Edge Cases -**Conditional**: State, Effects, Events, API calls, Routing +**Must test**: Rendering, Props, Edge Cases\ +**Conditional**: State, Effects, Events, API calls, Routing\ **Optional**: Accessibility, Performance, Snapshots AI assistant auto-selects scenarios based on component features. ---- +______________________________________________________________________ ## 💡 Daily Workflow @@ -69,7 +69,7 @@ pnpm test:gen app/components/new-feature/index.tsx # Others: Copy prompt → Paste in your AI tool ``` ---- +______________________________________________________________________ ## 📋 Commands @@ -81,7 +81,7 @@ pnpm lint # Code check pnpm type-check # Type check ``` ---- +______________________________________________________________________ ## 🎯 Customize @@ -98,11 +98,10 @@ code .cursorrules git commit -m "docs: update test standards" ``` ---- +______________________________________________________________________ ## 📚 Resources - **Testing Guide**: [TESTING.md](./TESTING.md) - Complete testing specifications - **Quick Reference**: [.cursorrules](../../.cursorrules) - For Cursor users - **Examples**: [classnames.spec.ts](../utils/classnames.spec.ts), [button/index.spec.tsx](../app/components/base/button/index.spec.tsx) - diff --git a/web/scripts/TESTING.md b/web/scripts/TESTING.md index 3f182c485a..fa4cb95681 100644 --- a/web/scripts/TESTING.md +++ b/web/scripts/TESTING.md @@ -64,6 +64,7 @@ describe('Rendering', () => { ``` **Key Points**: + - Verify component renders properly - Check key elements exist - Use semantic queries (getByRole, getByLabelText) @@ -71,6 +72,7 @@ describe('Rendering', () => { ### 2. Props Testing (REQUIRED - All Components) **Must Test**: + - ✅ Different values for each prop - ✅ Required vs optional props - ✅ Default values @@ -81,6 +83,7 @@ describe('Rendering', () => { #### useState When testing state-related components: + - ✅ Test initial state values - ✅ Test all state transitions - ✅ Test state reset/cleanup scenarios @@ -88,6 +91,7 @@ When testing state-related components: #### useEffect When testing side effects: + - ✅ Test effect execution conditions - ✅ Verify dependencies array correctness - ✅ Test cleanup function on unmount @@ -116,6 +120,7 @@ When testing side effects: ### 5. Event Handlers **Must Test**: + - ✅ All onClick, onChange, onSubmit handlers - ✅ Keyboard events (Enter, Escape, Tab, etc.) - ✅ Verify event.preventDefault() calls (if needed) @@ -126,6 +131,7 @@ When testing side effects: ### 6. API Calls and Async Operations **Must Test**: + - ✅ Mock all API calls using `jest.mock` - ✅ Test retry logic (if applicable) - ✅ Verify error handling and user feedback @@ -134,6 +140,7 @@ When testing side effects: ### 7. Next.js Routing **Must Test**: + - ✅ Mock useRouter, usePathname, useSearchParams - ✅ Test navigation behavior and parameters - ✅ Test query string handling @@ -143,6 +150,7 @@ When testing side effects: ### 8. Edge Cases (REQUIRED - All Components) **Must Test**: + - ✅ null/undefined/empty values - ✅ Boundary conditions - ✅ Error states @@ -159,6 +167,7 @@ When testing side effects: ### 10. Snapshot Testing (Use Sparingly) **Only Use For**: + - ✅ Stable UI (icons, badges, static layouts) - ✅ Snapshot small sections only - ✅ Prefer explicit assertions over snapshots @@ -229,6 +238,7 @@ describe('ComponentName', () => { ### General 1. **i18n**: Always return key + ```typescript jest.mock('react-i18next', () => ({ useTranslation: () => ({ @@ -237,18 +247,20 @@ describe('ComponentName', () => { })) ``` -2. **Toast**: Mock toast component +1. **Toast**: Mock toast component + ```typescript jest.mock('@/app/components/base/toast', () => ({ notify: jest.fn(), })) ``` -3. **Forms**: Test validation logic thoroughly +1. **Forms**: Test validation logic thoroughly ### Workflow Components (`workflow/`) **Must Test**: + - ⚙️ **Node configuration**: Test all node configuration options - ✔️ **Data validation**: Verify input/output validation rules - 🔄 **Variable passing**: Test data flow between nodes @@ -259,6 +271,7 @@ describe('ComponentName', () => { ### Dataset Components (`dataset/`) **Must Test**: + - 📤 **File upload**: Test file upload and validation - 📄 **File types**: Verify supported format handling - 📃 **Pagination**: Test data loading and pagination @@ -269,6 +282,7 @@ describe('ComponentName', () => { ### Configuration Components (`app/configuration`, `config/`) **Must Test**: + - ✅ **Form validation**: Test all validation rules thoroughly - 💾 **Save/reset functionality**: Test data persistence - 🔒 **Required vs optional fields**: Verify field validation @@ -305,6 +319,7 @@ describe('ComponentName', () => { ## Coverage Goals Aim for 100% coverage: + - **Line coverage**: >95% - **Branch coverage**: >95% - **Function coverage**: 100% @@ -379,14 +394,15 @@ screen.debug(screen.getByRole('button')) ### Finding Elements Priority order (recommended top to bottom): + 1. `getByRole` - Most recommended, follows accessibility standards -2. `getByLabelText` - Form fields -3. `getByPlaceholderText` - Only when no label -4. `getByText` - Non-interactive elements -5. `getByDisplayValue` - Current form value -6. `getByAltText` - Images -7. `getByTitle` - Last choice -8. `getByTestId` - Only as last resort +1. `getByLabelText` - Form fields +1. `getByPlaceholderText` - Only when no label +1. `getByText` - Non-interactive elements +1. `getByDisplayValue` - Current form value +1. `getByAltText` - Images +1. `getByTitle` - Last choice +1. `getByTestId` - Only as last resort ### Async Debugging @@ -408,6 +424,7 @@ const element = await screen.findByText('Async Content') ## Reference Examples Test examples in the project: + - [classnames.spec.ts](../utils/classnames.spec.ts) - Utility function tests - [index.spec.tsx](../app/components/base/button/index.spec.tsx) - Component tests @@ -454,6 +471,6 @@ it('should update counter', () => { }) ``` ---- +______________________________________________________________________ **Remember**: Writing tests is not just about coverage, but ensuring code quality and maintainability. Good tests should be clear, concise, and meaningful.