fix(drawer): [drawer] modify the bugs in the drawer component and provide additional property testing examples#4195
Conversation
…roperty testing examples
WalkthroughThis PR adds a new demo showcasing the drawer's Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
James-9696
changed the title
James-9696
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
examples/sites/demos/pc/app/drawer/drawer-to-body.spec.ts (1)
1-24:⚠️ Potential issue | 🟠 MajorE2E spec location does not follow the repository path rule.
This test is added under
examples/sites/demos/pc/app/drawer/, while the guideline requiresexamples/sites/demos/<component-name>/.
As per coding guidelines, "E2E tests must be placed inexamples/sites/demos/<component-name>/directory".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@examples/sites/demos/pc/app/drawer/drawer-to-body.spec.ts` around lines 1 - 24, The E2E spec drawer-to-body.spec.ts (test.describe '挂载节点' / test '挂载节点') is placed under the wrong folder; move this spec into the canonical demos directory for the component (examples/sites/demos/drawer/) so it follows the rule "E2E tests must be placed in examples/sites/demos/<component-name>/"; after moving, update any relative imports or test runner references if needed and ensure the test still imports { test, expect } from '@playwright/test' and locators (demo, openBtn, drawer) continue to resolve.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@examples/sites/demos/pc/app/drawer/drawer-to-body.spec.ts`:
- Around line 14-18: The test calls drawer.evaluate(...) immediately after
clicking and can be flaky because the drawer may not be attached yet; before
calling evaluate on the locator named drawer (created via page.locator('body >
.tiny-drawer')), add an explicit wait such as awaiting
expect(drawer).toHaveCount(1) to ensure the element is present in the DOM, then
proceed to run drawer.evaluate(...) and the expect(isAppendToBody).toBe(true).
---
Outside diff comments:
In `@examples/sites/demos/pc/app/drawer/drawer-to-body.spec.ts`:
- Around line 1-24: The E2E spec drawer-to-body.spec.ts (test.describe '挂载节点' /
test '挂载节点') is placed under the wrong folder; move this spec into the canonical
demos directory for the component (examples/sites/demos/drawer/) so it follows
the rule "E2E tests must be placed in examples/sites/demos/<component-name>/";
after moving, update any relative imports or test runner references if needed
and ensure the test still imports { test, expect } from '@playwright/test' and
locators (demo, openBtn, drawer) continue to resolve.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 6e2fdfc7-0954-4be9-b654-eddb443949f7
📒 Files selected for processing (6)
examples/sites/demos/apis/drawer.jsexamples/sites/demos/pc/app/drawer/drawer-to-body-composition-api.vueexamples/sites/demos/pc/app/drawer/drawer-to-body.spec.tsexamples/sites/demos/pc/app/drawer/drawer-to-body.vueexamples/sites/demos/pc/app/drawer/webdoc/drawer.jspackages/renderless/src/drawer/index.ts
| const drawer = page.locator('body > .tiny-drawer') | ||
|
|
||
| // drawer 被挂载到 document.body 下 | ||
| const isAppendToBody = await drawer.evaluate((el) => el.parentElement === document.body) | ||
| expect(isAppendToBody).toBe(true) |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Check if the file exists and read its content
cat -n examples/sites/demos/pc/app/drawer/drawer-to-body.spec.tsRepository: opentiny/tiny-vue
Length of output: 1004
🏁 Script executed:
# Check if the directory structure complies with E2E test location guidelines
find examples/sites/demos -name "drawer-to-body.spec.ts" -o -name "*drawer*.spec.ts" | head -20Repository: opentiny/tiny-vue
Length of output: 119
🏁 Script executed:
# List the directory structure for drawer component
ls -la examples/sites/demos/pc/app/drawer/ 2>/dev/null || echo "Directory not found"Repository: opentiny/tiny-vue
Length of output: 4504
Add an explicit wait assertion before locator.evaluate to prevent test flakiness.
The drawer is appended to body following the click on line 12, but evaluate is called immediately after without waiting for attachment. Use await expect(drawer).toHaveCount(1) to ensure the element is in the DOM before accessing its properties.
Suggested test-hardening diff
const drawer = page.locator('body > .tiny-drawer')
+ await expect(drawer).toHaveCount(1)
// drawer 被挂载到 document.body 下
const isAppendToBody = await drawer.evaluate((el) => el.parentElement === document.body)
expect(isAppendToBody).toBe(true)📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const drawer = page.locator('body > .tiny-drawer') | |
| // drawer 被挂载到 document.body 下 | |
| const isAppendToBody = await drawer.evaluate((el) => el.parentElement === document.body) | |
| expect(isAppendToBody).toBe(true) | |
| const drawer = page.locator('body > .tiny-drawer') | |
| await expect(drawer).toHaveCount(1) | |
| // drawer 被挂载到 document.body 下 | |
| const isAppendToBody = await drawer.evaluate((el) => el.parentElement === document.body) | |
| expect(isAppendToBody).toBe(true) |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@examples/sites/demos/pc/app/drawer/drawer-to-body.spec.ts` around lines 14 -
18, The test calls drawer.evaluate(...) immediately after clicking and can be
flaky because the drawer may not be attached yet; before calling evaluate on the
locator named drawer (created via page.locator('body > .tiny-drawer')), add an
explicit wait such as awaiting expect(drawer).toHaveCount(1) to ensure the
element is present in the DOM, then proceed to run drawer.evaluate(...) and the
expect(isAppendToBody).toBe(true).
2 participants
…roperty testing examples 不发
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
append-to-bodyfunctionality.Bug Fixes
append-to-bodyis enabled.Documentation
append-to-bodyattribute.Tests
append-to-bodyfeature.