diff --git a/.agents/skills/component-refactoring/SKILL.md b/.agents/skills/component-refactoring/SKILL.md index 7006c382c8..140e0ef434 100644 --- a/.agents/skills/component-refactoring/SKILL.md +++ b/.agents/skills/component-refactoring/SKILL.md @@ -480,4 +480,4 @@ const useButtonState = () => { ### Related Skills - `frontend-testing` - For testing refactored components -- `web/testing/testing.md` - Testing specification +- `web/docs/test.md` - Testing specification diff --git a/.agents/skills/frontend-testing/SKILL.md b/.agents/skills/frontend-testing/SKILL.md index 0716c81ef7..280fcb6341 100644 --- a/.agents/skills/frontend-testing/SKILL.md +++ b/.agents/skills/frontend-testing/SKILL.md @@ -7,7 +7,7 @@ description: Generate Vitest + React Testing Library tests for Dify frontend com This skill enables Claude to generate high-quality, comprehensive frontend tests for the Dify project following established conventions and best practices. -> **⚠️ Authoritative Source**: This skill is derived from `web/testing/testing.md`. Use Vitest mock/timer APIs (`vi.*`). +> **⚠️ Authoritative Source**: This skill is derived from `web/docs/test.md`. Use Vitest mock/timer APIs (`vi.*`). ## When to Apply This Skill @@ -309,7 +309,7 @@ For more detailed information, refer to: ### Primary Specification (MUST follow) -- **`web/testing/testing.md`** - The canonical testing specification. This skill is derived from this document. +- **`web/docs/test.md`** - The canonical testing specification. This skill is derived from this document. ### Reference Examples in Codebase diff --git a/.agents/skills/frontend-testing/references/workflow.md b/.agents/skills/frontend-testing/references/workflow.md index 009c3e013b..bc4ed8285a 100644 --- a/.agents/skills/frontend-testing/references/workflow.md +++ b/.agents/skills/frontend-testing/references/workflow.md @@ -4,7 +4,7 @@ This guide defines the workflow for generating tests, especially for complex com ## Scope Clarification -This guide addresses **multi-file workflow** (how to process multiple test files). For coverage requirements within a single test file, see `web/testing/testing.md` § Coverage Goals. +This guide addresses **multi-file workflow** (how to process multiple test files). For coverage requirements within a single test file, see `web/docs/test.md` § Coverage Goals. | Scope | Rule | |-------|------| diff --git a/AGENTS.md b/AGENTS.md index 7d96ac3a6d..51fa6e4527 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -7,7 +7,7 @@ Dify is an open-source platform for developing LLM applications with an intuitiv The codebase is split into: - **Backend API** (`/api`): Python Flask application organized with Domain-Driven Design -- **Frontend Web** (`/web`): Next.js 15 application using TypeScript and React 19 +- **Frontend Web** (`/web`): Next.js application using TypeScript and React - **Docker deployment** (`/docker`): Containerized deployment configurations ## Backend Workflow @@ -18,36 +18,7 @@ The codebase is split into: ## Frontend Workflow -```bash -cd web -pnpm lint:fix -pnpm type-check:tsgo -pnpm test -``` - -### Frontend Linting - -ESLint is used for frontend code quality. Available commands: - -```bash -# Lint all files (report only) -pnpm lint - -# Lint and auto-fix issues -pnpm lint:fix - -# Lint specific files or directories -pnpm lint:fix app/components/base/button/ -pnpm lint:fix app/components/base/button/index.tsx - -# Lint quietly (errors only, no warnings) -pnpm lint:quiet - -# Check code complexity -pnpm lint:complexity -``` - -**Important**: Always run `pnpm lint:fix` before committing. The pre-commit hook runs `lint-staged` which only lints staged files. +- Read `web/AGENTS.md` for details ## Testing & Quality Practices diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 20a7d6c6f6..d7f007af67 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -77,7 +77,7 @@ How we prioritize: For setting up the frontend service, please refer to our comprehensive [guide](https://github.com/langgenius/dify/blob/main/web/README.md) in the `web/README.md` file. This document provides detailed instructions to help you set up the frontend environment properly. -**Testing**: All React components must have comprehensive test coverage. See [web/testing/testing.md](https://github.com/langgenius/dify/blob/main/web/testing/testing.md) for the canonical frontend testing guidelines and follow every requirement described there. +**Testing**: All React components must have comprehensive test coverage. See [web/docs/test.md](https://github.com/langgenius/dify/blob/main/web/docs/test.md) for the canonical frontend testing guidelines and follow every requirement described there. #### Backend diff --git a/web/AGENTS.md b/web/AGENTS.md index 7362cd51db..5dd41b8a3c 100644 --- a/web/AGENTS.md +++ b/web/AGENTS.md @@ -1,5 +1,9 @@ +## Frontend Workflow + +- Refer to the `./docs/test.md` and `./docs/lint.md` for detailed frontend workflow instructions. + ## Automated Test Generation -- Use `web/testing/testing.md` as the canonical instruction set for generating frontend automated tests. +- Use `./docs/test.md` as the canonical instruction set for generating frontend automated tests. - When proposing or saving tests, re-read that document and follow every requirement. - All frontend tests MUST also comply with the `frontend-testing` skill. Treat the skill as a mandatory constraint, not optional guidance. diff --git a/web/README.md b/web/README.md index 9c731a081a..64039709dc 100644 --- a/web/README.md +++ b/web/README.md @@ -107,6 +107,8 @@ Open [http://localhost:6006](http://localhost:6006) with your browser to see the If your IDE is VSCode, rename `web/.vscode/settings.example.json` to `web/.vscode/settings.json` for lint code setting. +Then follow the [Lint Documentation](./docs/lint.md) to lint the code. + ## Test We use [Vitest](https://vitest.dev/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) for Unit Testing. diff --git a/web/docs/lint.md b/web/docs/lint.md new file mode 100644 index 0000000000..051f9e6ecd --- /dev/null +++ b/web/docs/lint.md @@ -0,0 +1,51 @@ +# Lint Guide + +We use ESLint and Typescript to maintain code quality and consistency across the project. + +## ESLint + +### Common Flags + +**File/folder targeting**: Append paths to lint specific files or directories. + +```sh +pnpm eslint [options] file.js [file.js] [dir] +``` + +**`--cache`**: Caches lint results for faster subsequent runs. Keep this enabled by default; only disable when you encounter unexpected lint results. + +**`--concurrency`**: Enables multi-threaded linting. Use `--concurrency=auto` or experiment with specific numbers to find the optimal setting for your machine. Keep this enabled when linting multiple files. + +- [ESLint multi-thread linting blog post](https://eslint.org/blog/2025/08/multithread-linting/) + +**`--fix`**: Automatically fixes auto-fixable rule violations. Always review the diff before committing to ensure no unintended changes. + +**`--quiet`**: Suppresses warnings and only shows errors. Useful when you want to reduce noise from existing issues. + +**`--suppress-all`**: Temporarily suppresses error-level violations and records them, allowing CI to pass. Treat this as an escape hatch—fix these errors when time permits. + +**`--prune-suppressions`**: Removes outdated suppressions after you've fixed the underlying errors. + +- [ESLint bulk suppressions blog post](https://eslint.org/blog/2025/04/introducing-bulk-suppressions/) + +### Type-Aware Linting + +Some ESLint rules require type information, such as [no-leaked-conditional-rendering](https://www.eslint-react.xyz/docs/rules/no-leaked-conditional-rendering). However, [typed linting via typescript-eslint](https://typescript-eslint.io/getting-started/typed-linting) is too slow for practical use, so we use [TSSLint](https://github.com/johnsoncodehk/tsslint) instead. + +```sh +pnpm lint:tss +``` + +This command lints the entire project and is intended for final verification before committing or pushing changes. + +## Type Check + +You should be able to see suggestions from TypeScript in your editor for all open files. + +However, it can be useful to run the TypeScript 7 command-line (tsgo) to type check all files: + +```sh +pnpm type-check:tsgo +``` + +Prefer using `tsgo` for type checking as it is significantly faster than the standard TypeScript compiler. Only fall back to `pnpm type-check` (which uses `tsc`) if you encounter unexpected results. diff --git a/web/testing/testing.md b/web/docs/test.md similarity index 99% rename from web/testing/testing.md rename to web/docs/test.md index 47341e445e..cac0e0e351 100644 --- a/web/testing/testing.md +++ b/web/docs/test.md @@ -360,11 +360,11 @@ describe('ComponentName', () => { let mockPortalOpenState = false vi.mock('@/app/components/base/portal-to-follow-elem', () => ({ - PortalToFollowElem: ({ children, open, ...props }: any) => { + PortalToFollowElem: ({ children, open, ...props }) => { mockPortalOpenState = open || false // Update shared state return
{children}
}, - PortalToFollowElemContent: ({ children }: any) => { + PortalToFollowElemContent: ({ children }) => { // ✅ Matches actual: returns null when open is false if (!mockPortalOpenState) return null diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json index 6193a8ad4e..63f10d238c 100644 --- a/web/eslint-suppressions.json +++ b/web/eslint-suppressions.json @@ -4318,11 +4318,6 @@ "count": 10 } }, - "testing/testing.md": { - "ts/no-explicit-any": { - "count": 2 - } - }, "types/app.ts": { "ts/no-explicit-any": { "count": 1 diff --git a/web/scripts/analyze-component.js b/web/scripts/analyze-component.js index b09301503c..2fdff2f3d0 100755 --- a/web/scripts/analyze-component.js +++ b/web/scripts/analyze-component.js @@ -337,7 +337,7 @@ Test file under review: ${testPath} Checklist (ensure every item is addressed in your review): -- Confirm the tests satisfy all requirements listed above and in web/testing/TESTING.md. +- Confirm the tests satisfy all requirements listed above and in web/docs/test.md. - Verify Arrange → Act → Assert structure, mocks, and cleanup follow project conventions. - Ensure all detected component features (state, effects, routing, API, events, etc.) are exercised, including edge cases and error paths. - Check coverage of prop variations, null/undefined inputs, and high-priority workflows implied by usage score. @@ -382,7 +382,7 @@ Examples: # Review existing test pnpm analyze-component app/components/base/button/index.tsx --review -For complete testing guidelines, see: web/testing/testing.md +For complete testing guidelines, see: web/docs/test.md `) }