opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
dify/web/scripts
History
CodingOnStar 009744b71a docs: update frontend testing guidelines and add comprehensive testing documentation in TESTING.md 2025-10-29 17:48:48 +08:00
..
README.md docs: update frontend testing guidelines and add comprehensive testing documentation in TESTING.md 2025-10-29 17:48:48 +08:00
TESTING.md docs: update frontend testing guidelines and add comprehensive testing documentation in TESTING.md 2025-10-29 17:48:48 +08:00
analyze-component.js docs: update frontend testing guidelines and add comprehensive testing documentation in TESTING.md 2025-10-29 17:48:48 +08:00
copy-and-start.mjs Bugfix: Windows compatibility issue with 'cp' command not found when running pnpm start. (#25670) (#25672) 2025-10-26 11:53:56 +08:00
generate-icons.js feat(web): add Progressive Web App (PWA) support (#25274) 2025-09-06 16:04:24 +08:00
optimize-standalone.js feat: Optimize Docker build process by adding script to remove unnecessary files (#24450) 2025-08-25 14:44:29 +08:00

README.md

Web Scripts

Frontend development utility scripts.

📋 Scripts

  • generate-icons.js - Generate PWA icons
  • optimize-standalone.js - Optimize build output
  • analyze-component.js - Test generation helper ⭐

🚀 Generate Tests (Using AI Assistants)

Quick Start

# 1. Analyze component
pnpm test:gen app/components/base/button/index.tsx

# Output: Component analysis + AI prompt (auto-copied to clipboard)

# 2. Paste in your AI assistant:
#    - Cursor: Cmd+L (Chat) or Cmd+I (Composer) → Cmd+V → Enter
#    - GitHub Copilot Chat: Cmd+I → Cmd+V → Enter
#    - Claude/ChatGPT: Paste the prompt directly

# 3. Apply the generated test and verify
pnpm test app/components/base/button/index.spec.tsx

Done in < 1 minute! ✅

📊 How It Works

Component Complexity

Script analyzes and scores components:

  • 0-10: 🟢 Simple (5-10 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)

Test Scenarios

Defined in TESTING.md:

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

# New component
pnpm test:gen app/components/new-feature/index.tsx
# → Paste in AI assistant → Apply → Done

# Quick shortcuts:
# Cursor users: Cmd+I → "Generate test for [file]" → Apply
# Copilot users: Cmd+I → Paste prompt → Accept
# Others: Copy prompt → Paste in your AI tool

📋 Commands

pnpm test:gen <path>        # Generate test
pnpm test [file]            # Run tests
pnpm test --coverage        # View coverage
pnpm lint                   # Code check
pnpm type-check             # Type check

🎯 Customize

Edit testing standards for your team:

# Complete testing guide (for all team members)
code web/scripts/TESTING.md

# Quick reference for Cursor users
code .cursorrules

# Commit your changes
git commit -m "docs: update test standards"

📚 Resources