docs(search): [search] add doc for suffix slot #2978
Conversation
WalkthroughThe changes extend the search demo to support both prefix and suffix slots. A new tiny-search instance featuring a calendar icon in the suffix slot is added, and icon imports and component registrations are updated accordingly. Test files have been enhanced to verify the display of both prefix and suffix slots as well as the disabled state of inputs. Additionally, obsolete tests for the prefix slot have been removed, and the demo metadata has been updated to reflect these enhancements. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SearchInput
participant CalendarIcon
User->>SearchInput: Render search component
SearchInput->>CalendarIcon: Include calendar icon in suffix slot
CalendarIcon-->>SearchInput: Icon rendered
SearchInput-->>User: Display updated search field
sequenceDiagram
participant Test
participant Browser
participant SearchComponent
Test->>Browser: Navigate to "search#slot-prefix-suffix"
Browser-->>SearchComponent: Render search with prefix & suffix slots
Test->>SearchComponent: Verify slot elements’ visibility and styling
Test->>SearchComponent: Assert input disabled state upon interaction
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
examples/sites/demos/pc/app/search/slot-prefix-suffix.spec.tsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
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 (
|
WalkthroughThis pull request introduces documentation content changes to the Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
|
[e2e-test-warn] The title of the Pull request should look like "fix(vue-renderless): [action-menu, alert] fix xxx bug". Please make sure you've read our contributing guide |
![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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
examples/sites/demos/pc/app/search/slot-prefix-suffix-composition-api.vue(2 hunks)examples/sites/demos/pc/app/search/slot-prefix-suffix.spec.ts(1 hunks)examples/sites/demos/pc/app/search/slot-prefix-suffix.vue(1 hunks)examples/sites/demos/pc/app/search/slot-prefix.spec.ts(0 hunks)examples/sites/demos/pc/app/search/webdoc/search.js(1 hunks)
💤 Files with no reviewable changes (1)
- examples/sites/demos/pc/app/search/slot-prefix.spec.ts
🧰 Additional context used
🪛 Biome (1.9.4)
examples/sites/demos/pc/app/search/slot-prefix-suffix.spec.ts
[error] 29-29: await is only allowed within async functions and at the top levels of modules.
(parse)
🔇 Additional comments (8)
examples/sites/demos/pc/app/search/slot-prefix-suffix.vue (3)
11-16: Good addition of the suffix slot example.The new tiny-search instance with a suffix slot shows an excellent example of using a calendar icon. This complements the existing prefix slot example and provides users with a complete understanding of the slot capabilities in the search component.
24-24: Import statement updated correctly.The import statement has been properly updated to use named imports for both IconCalendar and IconSearch, following the component naming conventions.
30-31: Component registrations are properly implemented.Both icon components are correctly registered using the function call syntax, which is the proper way to instantiate icon components in this framework.
examples/sites/demos/pc/app/search/slot-prefix-suffix.spec.ts (1)
3-18: Comprehensive test for slot visibility.The test correctly verifies both prefix and suffix slots are visible and have the expected styling. Good practice to check both the visibility and CSS properties.
examples/sites/demos/pc/app/search/slot-prefix-suffix-composition-api.vue (3)
11-16: Well-implemented suffix slot example.The new tiny-search component with a suffix slot is properly implemented and consistent with the Options API version, showing good component reusability patterns.
25-25: Icon imports updated consistently.The import statement has been properly updated to use named imports for both IconCalendar and IconSearch, consistent with the Vue 3 and Composition API best practices.
30-31: Component instantiation is correct.Both icon components are properly instantiated using the function call syntax, which is the correct pattern for icon components in this framework.
examples/sites/demos/pc/app/search/webdoc/search.js (1)
93-104: Documentation updated comprehensively.The documentation has been properly updated to reflect the extended functionality. The demoId, name, description, and codeFiles are all consistently updated to reference both prefix and suffix slots, which will help users understand the component's capabilities.
|
你好，修改下标题触发下E2E测试用例：docs(search): [search] add doc for suffix slot |
Hello, modify the title and trigger the E2E test case: docs(search): [search] add doc for suffix slot |
gweesin
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
examples/sites/demos/pc/app/search/slot-prefix-suffix.spec.ts (2)
3-3: Consider using English test descriptions for consistency.The test title "插槽是否正常显示" is in Chinese while other parts of the code and the next test use English. Using a consistent language (preferably English) for test descriptions improves maintainability, especially in international teams.
-test('插槽是否正常显示', async ({ page }) => { +test('slots should display correctly', async ({ page }) => {
1-32: Consider adding test documentation for better maintainability.While the test implementations are good, adding brief comments explaining the purpose of each test would improve maintainability. This is especially important for documenting the expected behavior of the new suffix slot functionality.
import { expect, test } from '@playwright/test' +/** + * Tests for prefix and suffix slots in search component + */ test('插槽是否正常显示', async ({ page }) => { page.on('pageerror', (exception) => expect(exception).toBeNull()) await page.goto('search#slot-prefix-suffix') + // Verify prefix slot rendering and styling const prefixSlotSearch = page.locator('.tiny-search').first() const prefixLocator = prefixSlotSearch.locator('.tiny-search__prefix > svg') await expect(prefixLocator).toBeVisible() await expect(prefixLocator).toHaveCSS('font-size', '16px') + // Verify suffix slot rendering and styling const suffixSlotSearch = page.locator('.tiny-search').nth(1) const suffixLocator = suffixSlotSearch.locator('svg.tiny-search__suffix') await expect(suffixLocator).toBeVisible() await expect(suffixLocator).toHaveCSS('font-size', '14px') }) +/** + * Test for verifying the disabled state of search components + */ test('disabled', async ({ page }) => { page.on('pageerror', (exception) => expect(exception).toBeNull()) await page.goto('search#slot-prefix-suffix') + // Click the button that toggles disabled state await page.locator('.tiny-button').click() + // Verify all search inputs are disabled const searchLocators = await page.locator('.tiny-search').all() for (const search of searchLocators) { const input = search.locator('input') await expect(input).toBeDisabled() } })
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
examples/sites/demos/pc/app/search/slot-prefix-suffix-composition-api.vue(2 hunks)examples/sites/demos/pc/app/search/slot-prefix-suffix.spec.ts(1 hunks)examples/sites/demos/pc/app/search/slot-prefix-suffix.vue(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- examples/sites/demos/pc/app/search/slot-prefix-suffix-composition-api.vue
- examples/sites/demos/pc/app/search/slot-prefix-suffix.vue
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (3)
examples/sites/demos/pc/app/search/slot-prefix-suffix.spec.ts (3)
7-11: LGTM! Effective prefix slot verification.The implementation correctly locates and verifies the prefix slot element and its styling.
13-17: LGTM! Proper suffix slot verification.The test correctly verifies that the suffix slot is visible and has the expected styling, which aligns with the PR objective of adding documentation for suffix slots.
20-31: LGTM! Well-implemented disabled state test.The test properly uses a for...of loop to handle async operations when checking disabled state. This is the correct approach, as noted in previous reviews about avoiding await inside forEach loops.
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: #2972
What is the new behavior?
add document for suffix slots
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Documentation
Tests