mirror of https://github.com/langgenius/dify.git
[autofix.ci] apply automated fixes
This commit is contained in:
parent
009744b71a
commit
69befd1916
|
|
@ -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)
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
Loading…
Reference in New Issue