bubble的footer,header 支持参数传递,满足场景多样 #678
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
📝 WalkthroughWalkthrough本次变更在 Bubble 组件中新增了 Changes
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
🪧 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 (
|
|
|
zombieJ
reviewed
Mar 31, 2025
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
components/bubble/Bubble.tsx (3)
144-152: renderSolt 函数命名疑似有误函数名
renderSolt可能是拼写错误，应该是renderSlot（slot，不是 solt）。该函数逻辑正确，支持了 header 和 footer 的函数式渲染，但命名应当符合前端常规术语。- const renderSolt = (node:React.ReactNode | ((info: { content?: BubbleContentType,props:BubbleProps} ) => React.ReactNode)) => { + const renderSlot = (node:React.ReactNode | ((info: { content?: BubbleContentType,props:BubbleProps} ) => React.ReactNode)) => {另外，建议在函数参数类型定义中添加空格，使代码更易读：
- const renderSolt = (node:React.ReactNode | ((info: { content?: BubbleContentType,props:BubbleProps} ) => React.ReactNode)) => { + const renderSlot = (node: React.ReactNode | ((info: { content?: BubbleContentType, props: BubbleProps }) => React.ReactNode)) => {
168-168: 更新函数调用名称需要更新函数调用以匹配建议的重命名。
- {renderSolt(header)} + {renderSlot(header)}
184-184: 更新函数调用名称同样需要更新这里的函数调用。
- {renderSolt(footer)} + {renderSlot(footer)}components/bubble/interface.ts (1)
39-40: 接口定义更新恰当，但建议调整格式接口定义更新为支持函数类型的
header和footer属性，类型定义完善。但建议添加空格以提高代码可读性。- header?: React.ReactNode | ((info: { content?: BubbleContentType,props:BubbleProps}) => React.ReactNode); - footer?: React.ReactNode | ((info: { content?: BubbleContentType,props:BubbleProps} ) => React.ReactNode); + header?: React.ReactNode | ((info: { content?: BubbleContentType, props: BubbleProps }) => React.ReactNode); + footer?: React.ReactNode | ((info: { content?: BubbleContentType, props: BubbleProps }) => React.ReactNode);另外，注意到文档中的接口定义与这里的实现存在差异：
- 文档：
(info: { content?: string }) => ReactNode- 实现：
(info: { content?: BubbleContentType, props: BubbleProps }) => React.ReactNode建议在文档中也包含
props参数，以保持一致性，或者在代码实现中考虑简化接口。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
components/bubble/Bubble.tsx(3 hunks)components/bubble/index.en-US.md(1 hunks)components/bubble/index.zh-CN.md(1 hunks)components/bubble/interface.ts(1 hunks)
🔇 Additional comments (2)
components/bubble/index.zh-CN.md (1)
47-48: 文档类型定义更新符合功能拓展文档中的
footer和header属性类型更新为支持函数类型，这与组件实现保持一致，增强了气泡组件的灵活性。但建议在文档中添加一个示例，展示如何使用这种函数式传参的新特性。components/bubble/index.en-US.md (1)
46-47: 英文文档类型定义更新一致英文文档中
footer和header属性的类型定义更新与中文文档保持一致，这很好。同样建议添加一个使用示例，以便开发者更容易理解和使用这个新特性。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
components/bubble/Bubble.tsx (4)
144-151: 函数命名有拼写错误: "renderSolt" 应为 "renderSlot"函数名
renderSolt存在拼写错误，应该是renderSlot。"Slot" 是组件库中表示插槽的常用术语。此外，类型注解的冒号后应有空格，以符合 TypeScript 代码规范。请应用以下修改：
- const renderSolt = (node:React.ReactNode | ((info: { content?: BubbleContentType} ) => React.ReactNode)) => { + const renderSlot = (node: React.ReactNode | ((info: { content?: BubbleContentType }) => React.ReactNode)) => {
144-151: 考虑为传递的 content 类型做更安全的处理当调用函数形式的
node时，直接传递了原始content。根据BubbleContentType的定义，content可能是 React 节点或任意对象。如果content本身也是一个函数，可能会导致意外行为。建议添加一个检查，确保传递给函数的参数符合预期：
if (typeof node === 'function') { return node({ - content: content + content: typeof content === 'function' ? null : content }) }
167-167: 更新函数调用名称此处需要更新函数名以匹配修正后的
renderSlot函数名。请应用以下修改：
- {renderSolt(header)} + {renderSlot(header)}
183-183: 更新函数调用名称此处需要更新函数名以匹配修正后的
renderSlot函数名。请应用以下修改：
- {renderSolt(footer)} + {renderSlot(footer)}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
components/bubble/Bubble.tsx(3 hunks)components/bubble/interface.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- components/bubble/interface.ts
🧰 Additional context used
🧬 Code Definitions (1)
components/bubble/Bubble.tsx (1)
components/bubble/interface.ts (1)
BubbleContentType(21-21)
🔇 Additional comments (1)
components/bubble/Bubble.tsx (1)
144-151: 功能设计良好，支持更灵活的组件扩展这个新增功能允许
header和footer属性接受函数形式的参数，增强了组件的灵活性和扩展性。这种模式使得 Bubble 组件可以在不同场景下更加灵活地适应不同的需求，符合组件设计的最佳实践。
zombieJ
reviewed
Mar 31, 2025
components/bubble/Bubble.tsx
Outdated
| const renderSlot = (node:React.ReactNode | ((info: { content?: BubbleContentType} ) => React.ReactNode)) => { | ||
| if (typeof node === 'function') { | ||
| return node({ | ||
| content: content |
There was a problem hiding this comment.
这边也是 typedContent，和 messageRender 保持一致。另外需要写对应的 test case
zombieJ
reviewed
Mar 31, 2025
components/bubble/interface.ts
Outdated
| @@ -36,6 +36,6 @@ export interface BubbleProps<ContentType extends BubbleContentType = string> | |||
| variant?: 'filled' | 'borderless' | 'outlined' | 'shadow'; | |||
| shape?: 'round' | 'corner'; | |||
| onTypingComplete?: VoidFunction; | |||
| header?: React.ReactNode; | |||
| footer?: React.ReactNode; | |||
| header?: React.ReactNode | ((info: { content?: BubbleContentType}) => React.ReactNode); | |||
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
components/bubble/Bubble.tsx (1)
144-151: 增加了灵活的渲染插槽函数
renderSlot函数使 header 和 footer 属性能够接受函数类型，从而可以根据当前内容动态生成渲染内容。这提升了组件的灵活性，使其能够满足更多场景需求。不过有几点建议：
- 考虑添加 JSDoc 注释来说明此函数的用途和参数
- 可以重命名为
renderTypedSlot与messageRender保持一致的命名风格- const renderSlot = (node:React.ReactNode | ((info: { content?: BubbleContentType} ) => React.ReactNode)) => { + /** + * 根据传入的节点类型进行渲染，如果是函数则传入 typedContent + * @param node 要渲染的节点或生成节点的函数 + * @returns 渲染后的 React 节点 + */ + const renderTypedSlot = (node:React.ReactNode | ((info: { content?: BubbleContentType} ) => React.ReactNode)) => {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/bubble/Bubble.tsx(3 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
components/bubble/Bubble.tsx (1)
components/bubble/interface.ts (1)
BubbleContentType(21-21)
🔇 Additional comments (2)
components/bubble/Bubble.tsx (2)
183-183: 实现了 footer 属性的灵活渲染通过调用
renderSlot函数，footer 现在可以作为函数接收当前内容信息，增强了自定义能力。与之前的评论一致，需要为此功能编写测试用例。
167-167:✅ Verification successful
实现了 header 属性的灵活渲染
通过调用
renderSlot函数，header 现在可以作为函数接收当前内容信息，增强了自定义能力。建议更新对应的测试用例，确保新功能的正确性。
🌐 Web query:
如何编写 React 组件的函数式 props 测试💡 Result:
在测试React函数式组件的props时，需要重点关注属性值的正确传递、条件渲染逻辑和事件触发机制。以下是核心测试方法和实践：
一、基本属性测试
- 直接属性断言
// 测试文本输入组件的标签和默认值 it('验证TextInput属性传递', () => { const props = { label: '用户名', defaultValue: '初始值' }; const wrapper = mount(<TextInput {...props} />); expect(wrapper.find('label').text()).toBe('用户名'); expect(wrapper.find('input').prop('value')).toBe('初始值'); })[2];
- 完整props对象比对
// 比对密码输入框的所有props属性 it('验证密码字段props完整性', () => { const container = shallow(<Login password="secret" />); expect(container.find('input[type="password"]').props()).toEqual({ className: 'my-2', onChange: expect.any(Function), type: 'password', value: 'secret' }); })[1];二、条件渲染测试
测试场景 测试方法 示例 prop存在时渲染 检查目标元素是否存在 expect(label).toExist()prop为空时隐藏 验证元素是否被正确条件渲染 expect(icon).toBeNull()动态内容显示 对比渲染内容与prop值的匹配度 expect(title.text()).toEqual(props.title)// 测试标签的条件渲染 it('当label为空时不显示标签', () => { const wrapper = mount(<TextInput />); expect(wrapper.find('label')).toHaveLength(0); }); it('当label有值时显示标签', () => { const wrapper = mount(<TextInput label="邮箱地址" />); expect(wrapper.find('label').text()).toBe('邮箱地址'); })[2];三、事件处理测试
- 模拟事件触发
it('点击按钮触发onSubmit回调', () => { const mockSubmit = jest.fn(); const { getByRole } = render(<SubmitButton onSubmit={mockSubmit} />); fireEvent.click(getByRole('button')); expect(mockSubmit).toHaveBeenCalledTimes(1); })[5][7];
- 参数传递验证
it('输入框变更传递正确参数', () => { const handleChange = jest.fn(); const { getByPlaceholderText } = render(<SearchInput onChange={handleChange} />); fireEvent.change(getByPlaceholderText('搜索...'), { target: { value: 'React测试' } }); expect(handleChange).toHaveBeenCalledWith('React测试'); })[7][15];四、最佳实践
- 使用data-testid属性定位元素
<input data-testid="email-input" value={email} onChange={handleChange} /> // 测试中通过testId定位 const input = screen.getByTestId('email-input')[8];
- 异步操作处理
it('异步加载后显示数据', async () => { const { findByText } = render(<UserProfile userId="123" />); await waitFor(() => { expect(findByText('用户姓名')).toBeInTheDocument(); }); })[7][16];
- Props类型校验
// 在组件文件中定义propTypes MyComponent.propTypes = { count: PropTypes.number.isRequired, onUpdate: PropTypes.func, }; // 测试时验证类型错误 it('当count非数字时告警', () => { console.error = jest.fn(); render(<MyComponent count="invalid" />); expect(console.error).toHaveBeenCalled(); })[11][20];通过以上方法可以有效验证函数式组件的props处理逻辑，确保组件在不同场景下的正确表现。测试时应结合浅渲染(shallow)和全渲染(mount)策略，重点测试组件接口的输入输出行为，避免过度测试实现细节。
Citations:
- 1: https://github.com/xiao-T/note/blob/master/Published/Testing-React-Function-Components-with-Hooks-using-Enzyme.md
- 2: https://juejin.cn/post/6844903776864698381
- 3: https://juejin.cn/post/7285673629526704164
- 4: https://blog.csdn.net/weixin_45780818/article/details/121235214
- 5: https://loveky.github.io/2018/06/05/unit-testing-react-component-with-jest/
- 6: https://cloud.tencent.com/developer/article/2288684
- 7: https://zh-hans.legacy.reactjs.org/docs/testing-recipes.html
- 8: https://fullstackopen.com/zh/part5/%E6%B5%8B%E8%AF%95_react_%E5%BA%94%E7%94%A8
- 9: https://jestjs.io/zh-Hans/docs/next/tutorial-react
- 10: https://www.cnblogs.com/web-666/p/18149244
- 11: https://blog.csdn.net/strawferry/article/details/52037686
- 12: https://blog.csdn.net/qq_51130780/article/details/131352474
- 13: http://zhenhua-lee.github.io/framework/react-test.html
- 14: https://zh-hans.react.dev/learn/passing-props-to-a-component
- 15: https://www.ruanyifeng.com/blog/2016/02/react-testing-tutorial.html
- 16: https://zh-hans.legacy.reactjs.org/docs/testing.html
- 17: https://zh-hans.legacy.reactjs.org/docs/components-and-props.html
- 18: https://zh-hans.react.dev/learn/keeping-components-pure
- 19: https://zh-hans.react.dev/learn/you-might-not-need-an-effect
- 20: https://blog.csdn.net/x235711/article/details/106698892
更新建议：完善测试用例以覆盖函数式 props 的场景
代码实现已正确支持通过调用
renderSlot函数来灵活渲染header属性，提高了组件的自定义能力。但建议补充相应的测试用例，确保传入函数形式的header能在各个场景下正常工作。可参考以下测试重点：
- 验证直接属性传递和断言，确保传入的函数能被调用并返回预期内容；
- 增加条件渲染测试，检查当
header为函数时组件的渲染结果；- 如有事件处理逻辑，确保对返回内容的事件触发也做相应的测试。
示例修改建议：
it('应正确调用 header 函数并渲染返回内容', () => { const headerFn = jest.fn().mockReturnValue(<div data-testid="header-content">测试头部</div>); const wrapper = mount(<Bubble header={headerFn} />); // 确保 header 函数被调用 expect(headerFn).toHaveBeenCalled(); // 验证返回的内容是否被正确渲染 expect(wrapper.find('[data-testid="header-content"]').exists()).toBe(true); });请根据项目中已有的测试实践（例如直接属性断言、条件渲染和事件模拟）进行相应调整，以全面验证新实现的功能。
afc163
requested changes
Mar 31, 2025
比他多了个头部支持 o_o||| |
zombieJ
reviewed
Mar 31, 2025
Bundle ReportBundle size has no change ✅ |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #678 +/- ##
==========================================
- Coverage 92.01% 91.97% -0.05%
==========================================
Files 67 67
Lines 1491 1495 +4
Branches 387 404 +17
==========================================
+ Hits 1372 1375 +3
- Misses 119 120 +1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
zombieJ
reviewed
Apr 1, 2025
components/bubble/Bubble.tsx
Outdated
| @@ -141,7 +141,14 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r | |||
| {contentNode} | |||
| </div> | |||
| ); | |||
|
|
|||
| const renderSlot = (node:React.ReactNode | ((info: { content?: BubbleContentType} ) => React.ReactNode)) => { | |||
|
#638 我已经合并了，建议在这个的基础上继续修改。 |
|
新特性放在 feature 分支 |
17 tasks
|
#683 用此提交 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
💡 Background and Solution
📝 Change Log
Summary by CodeRabbit
新功能
文档更新