test(e2e): [input,link,popeditor] fix input、link、popeditor error e2e test #2586
Conversation
WalkthroughThe changes in this pull request primarily involve structural modifications to Vue components related to autosizing input fields. The Changes
Possibly related PRs
Suggested labels
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (4)
examples/sites/demos/pc/app/popeditor/condition-form.spec.ts (1)
13-14: Avoid hardcoding test data.The test relies on specific company data which makes it brittle. Consider using test data fixtures or data attributes for more reliable selection.
Example approach:
- await page.getByRole('row', { name: 'GFD科技YX公司 福建 福州' }).locator('path').nth(1).click() + // Add data attributes in the component + await page.getByTestId('company-row').first().getByTestId('select-button').click()examples/sites/demos/pc/app/input/resize-composition-api.vue (1)
8-17: LGTM! Consider adding a description comment.The new wrapper improves the organization of autosize-related inputs. Consider adding a comment describing the purpose of this grouping for better maintainability.
Example:
+ <!-- Group of autosize textarea inputs with configurable min/max rows --> <div class="auto-size">examples/sites/demos/pc/app/input/resize.spec.ts (1)
Line range hint
33-34: Add descriptive assertion messages.Consider adding descriptive messages to the height comparison assertions to make test failures more informative.
- await expect(fill1Height).toEqual(defaultHeight) - await expect(fill1Height).toEqual(fill2Height) + await expect(fill1Height, 'Height should not change within minRows limit').toEqual(defaultHeight) + await expect(fill1Height, 'Height should remain constant at maxRows limit').toEqual(fill2Height)examples/sites/demos/pc/app/input/resize.vue (1)
9-18: Consider adding styles for the auto-size section.While the structural change is good, consider adding specific styles for the
.auto-sizesection to maintain consistent spacing and layout with other sections..demo-input { .tiny-textarea { width: fit-content; margin: 5px; } .expand { width: 200px; } + .auto-size { + margin: 10px 0; + } }Also applies to: 43-51
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (5)
examples/sites/demos/pc/app/input/resize-composition-api.vue(1 hunks)examples/sites/demos/pc/app/input/resize.spec.ts(2 hunks)examples/sites/demos/pc/app/input/resize.vue(1 hunks)examples/sites/demos/pc/app/link/basic-usage.spec.ts(1 hunks)examples/sites/demos/pc/app/popeditor/condition-form.spec.ts(1 hunks)
🔇 Additional comments (4)
examples/sites/demos/pc/app/input/resize.spec.ts (2)
6-8: LGTM! Improved selector strategy.
The change to use a parent locator (#resize) first and then find child elements is a better approach as it:
- Reduces selector complexity
- Improves maintainability
- Makes selectors more resilient to structural changes
17-17: Verify selector uniqueness.
While the simplified selector is cleaner, let's verify it uniquely identifies the intended textarea elements.
✅ Verification successful
Let me gather more specific information about the textarea elements to ensure the selector uniqueness.
Selector .auto-size .tiny-textarea textarea is unique and correct
The new selector is appropriate because:
- The
.auto-sizediv uniquely wraps only the autosize-related textareas - Within the component, there's clear separation between regular textareas and autosize textareas
- The structure matches the test's intent to target specifically the autosize textarea element
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for potential selector conflicts
# Look for other occurrences of .auto-size class with textarea elements
# Search for other potential matching elements
rg -l 'class="auto-size"' | while read -r file; do
if [[ $file == *.vue || $file == *.html ]]; then
echo "=== $file ==="
rg -A 5 'class="auto-size"' "$file"
fi
done
Length of output: 2010
Script:
#!/bin/bash
# Check for all textarea elements within .auto-size class and their surrounding context
rg -B 2 -A 5 '<tiny-input.*type="textarea"' examples/sites/demos/pc/app/input/resize.vue
Length of output: 1038
examples/sites/demos/pc/app/input/resize.vue (2)
9-18: LGTM! Good structural improvement.
The addition of the .auto-size wrapper improves code organization by logically grouping related autosize input components together.
9-18: Verify consistent implementation across API styles.
Let's confirm that the structural changes are consistently implemented in both the Options API (this file) and Composition API versions.
✅ Verification successful
Changes are consistently implemented across API styles
The auto-size wrapper div is consistently implemented in both files:
resize.vue(Options API) has the<div class="auto-size">wrapperresize-composition-api.vue(Composition API) has the identical<div class="auto-size">wrapper with the same textarea implementation
Both files maintain structural consistency in their implementation of the autosize feature, with identical props and wrapper structure.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check if the auto-size wrapper is consistently implemented
# Expected: Both files should have similar structure with auto-size wrapper
# Check the structure in both files
echo "Checking resize.vue and resize-composition-api.vue for auto-size wrapper:"
rg -A 2 'class="auto-size"' --type vue
Length of output: 225
Script:
#!/bin/bash
# Let's try a different approach by searching for the file content directly
echo "Searching for resize-composition-api.vue file:"
fd "resize-composition-api.vue"
echo -e "\nChecking content of both files for textarea implementation:"
# Using grep instead of rg for better file type handling
find . -type f -name "resize*.vue" -exec grep -A 5 "type=\"textarea\"" {} \;
Length of output: 4667
Script:
#!/bin/bash
# Let's specifically check the structure of both input resize files
echo "Content of resize.vue:"
find . -name "resize.vue" -path "*/input/*" -exec cat {} \;
echo -e "\nContent of resize-composition-api.vue:"
find . -name "resize-composition-api.vue" -path "*/input/*" -exec cat {} \;
Length of output: 5849
| await page.waitForTimeout(100) | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider using a more robust wait strategy.
Instead of using a fixed timeout, consider waiting for the console event directly. This would make the test more reliable and faster in most cases.
Here's a suggested implementation:
- await page.waitForTimeout(100)
+ // Wait for the console event with a reasonable timeout
+ await expect.poll(() => values[0], {
+ timeout: 2000,
+ }).toBe('clicked')
- expect(values[0]).toBe('clicked')📝 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.
| await page.waitForTimeout(100) | |
| // Wait for the console event with a reasonable timeout | |
| await expect.poll(() => values[0], { | |
| timeout: 2000, | |
| }).toBe('clicked') |
| await preview | ||
| .locator('div') | ||
| .filter({ hasText: /^文本选择确 认取 消$/ }) | ||
| .getByRole('textbox') | ||
| .click() |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Simplify and make the locator more maintainable.
The current locator chain with text filter is fragile and hard to maintain. Consider using data-testid attributes for more reliable element selection.
Example implementation:
- await preview
- .locator('div')
- .filter({ hasText: /^文本选择确 认取 消$/ })
- .getByRole('textbox')
- .click()
+ // Add data-testid to the component
+ await preview.getByTestId('text-selector-input').click()Committable suggestion skipped: line range outside the PR's diff.
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
Bug Fixes
Tests