chore: Auto UI test based on cypress #2668
Merged
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
Walkthrough本次更改引入了多个Cypress测试相关的文件和配置，包括新的Cypress配置文件、组件测试文件和端到端测试文件。新增的配置文件设置了基本URL、测试规范模式和视口尺寸。多个组件的测试用例被添加，以验证其功能和行为。此外，新的支持文件和自定义命令也被创建，以增强Cypress的测试能力。 Changes
Possibly related PRs
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
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 (
|
Alex-huxiyang
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: 24
🧹 Outside diff range and nitpick comments (12)
cypress/component/Button.cy.jsx (1)
1-6: 建议添加测试规范文件为了确保测试的一致性和可维护性，建议添加一个测试规范文件，定义常用的测试模式和辅助函数。
需要我帮您创建测试规范文件和辅助函数吗？这将包括：
- 常用的测试模式
- 自定义断言
- 测试工具函数
cypress.config.ts (1)
8-9: 建议添加视口配置说明当前视口尺寸（414x896）似乎是针对移动设备测试设置的。建议添加注释说明这个尺寸的选择原因，以及是否需要考虑添加其他常见设备尺寸的测试配置。
+ // 设置移动设备视口尺寸，匹配 iPhone XR/XS Max 等设备 viewportWidth: 414, viewportHeight: 896,cypress/component/Cell.cy.jsx (2)
5-17: 建议改进测试用例的描述和断言测试结构良好，但有以下建议：
- 测试描述应该使用中文，以保持一致性
- 可以添加更具体的断言，比如检查类名的存在
建议如下修改：
-it('prop title extra description test', () => { +it('测试 Cell 组件的标题、描述和额外内容属性', () => { cy.mount( <Cell data-testid="prop" title="我是标题" description="我是描述" extra="描述文字" /> ) cy.get('.nut-cell-title') + .should('exist') .should('contain.text', '我是标题') cy.get('.nut-cell-description') + .should('exist') .should('contain.text', '我是描述') cy.get('.nut-cell-extra') + .should('exist') .should('contain.text', '描述文字') })
29-32: 建议改进默认插槽测试当前测试可以改进以下方面：
- 使用更具体的选择器而不是 root()
- 添加更多的测试场景
建议如下修改：
-it('slot default test', () => { +it('测试 Cell 组件的自定义标题内容', () => { cy.mount( <Cell title={<div className="custom-title">自定义内容</div>} extra="描述文字" /> ) - cy.root().should('contain.html', '<div>自定义内容</div>') + cy.get('.nut-cell-title .custom-title') + .should('exist') + .should('have.text', '自定义内容') })cypress/support/component.ts (2)
24-34: 建议增加类型定义的详细文档虽然类型声明正确，但建议添加以下改进：
- 为
mount命令添加JSDoc注释，说明参数类型和用法- 考虑添加常用的挂载选项类型定义
示例改进：
declare global { namespace Cypress { interface Chainable { + /** + * 挂载React组件用于组件测试 + * @param component - 要测试的React组件 + * @param options - 可选的挂载选项 + * @example + * cy.mount(<MyComponent prop="value" />) + */ mount: typeof mount } } }
36-39: 建议扩展使用示例文档当前的示例过于简单。建议添加更多实用的示例，展示不同场景下的组件测试用法。
建议在注释中添加如下示例：
// 示例用法: // 基础挂载 // cy.mount(<MyComponent />) // 带属性的挂载 // cy.mount(<MyComponent prop="value" />) // 带样式和上下文的挂载 // cy.mount( // <ThemeProvider theme={theme}> // <MyComponent /> // </ThemeProvider> // ) // 带事件处理的挂载 // const onClickSpy = cy.spy().as('onClickSpy') // cy.mount(<MyComponent onClick={onClickSpy} />)cypress/e2e/taro/layout.cy.js (3)
36-45: 建议增加测试用例说明建议为每个布局测试添加更详细的注释，说明测试的具体目的和预期结果。
it('layout successfully passes', () => { cy.visit(getPath('layout')) cy.get('.applets-demo-header').contains('Layout') - // layout test + // 测试不同跨度的布局 + // 测试 span:24 - 应该占据整行 cy.contains('span:24').parent().children().should('have.length', 1) + // 测试 span:12 - 应该两列布局 cy.contains('span:12').parent().parent().children().should('have.length', 2) + // 测试 span:8 - 应该三列布局 cy.contains('span:8').parent().parent().children().should('have.length', 3) + // 测试 span:6 - 应该四列布局 cy.contains('span:6').parent().parent().children().should('have.length', 4) - cy.wait(400) })
47-56: 建议扩展空间组件测试用例当前仅测试了垂直方向的间距，建议添加更多测试场景：
- 水平间距
- 自定义间距大小
- 换行行为
it('space successfully passes', () => { cy.visit(getPath('space')) cy.get('.applets-demo-header').contains('Space') - // Space Test + // 测试垂直间距 cy.contains('垂直') .next() .find('.nut-space') .should('have.class', 'nut-space-vertical') - cy.wait(400) + + // 测试水平间距 + cy.contains('水平') + .next() + .find('.nut-space') + .should('have.class', 'nut-space-horizontal') })
69-77: 建议完善安全区域测试当前测试仅验证了类名存在，建议添加以下测试：
- 验证安全区域的实际尺寸
- 测试不同机型下的安全区域表现
it('safearea successfully passes', () => { cy.visit(getPath('safearea')) cy.get('.applets-demo-header').contains('SafeArea') - // SafeArea Class + // 测试安全区域类名 cy.get('.demo').scrollTo('bottom') cy.get('.nut-safe-area').should('exist') - cy.get('.nut-safe-area-position-bottom').should('exist') + cy.get('.nut-safe-area-position-bottom') + .should('exist') + .and('be.visible') + .and('have.css', 'padding-bottom') - cy.wait(400) })cypress/e2e/taro/base.cy.js (3)
4-14: Button 测试用例需要增强当前的按钮测试用例仅验证了加载状态，建议添加以下场景：
- 按钮的禁用状态
- 不同类型按钮的样式验证
- 点击事件回调
39-66: ConfigProvider 测试需要验证主题定制当前测试只覆盖了 Rate 组件的基本交互，建议添加以下测试场景：
- 验证主题变量的覆盖是否生效
- 测试组件的 RTL 支持
- 验证组件的暗黑模式
83-97: Image 组件测试建议增加错误处理场景建议添加以下测试场景：
- 图片加载失败的处理
- 自定义错误占位符
- 自定义加载占位符
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (3)
cypress/screenshots/index.cy.js/layout components test -- Switch successfully passes (failed).pngis excluded by!**/*.pngcypress/screenshots/taro/dentry.cy.js/layout components test -- Switch successfully passes (failed).pngis excluded by!**/*.pngpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (15)
- cypress.config.ts (1 hunks)
- cypress/component/Actionsheet.cy.jsx (1 hunks)
- cypress/component/Button.cy.jsx (1 hunks)
- cypress/component/Cell.cy.jsx (1 hunks)
- cypress/e2e/index.cy.js (1 hunks)
- cypress/e2e/taro/base.cy.js (1 hunks)
- cypress/e2e/taro/dentry.cy.js (1 hunks)
- cypress/e2e/taro/layout.cy.js (1 hunks)
- cypress/e2e/taro/nav.cy.js (1 hunks)
- cypress/fixtures/example.json (1 hunks)
- cypress/support/commands.ts (1 hunks)
- cypress/support/component-index.html (1 hunks)
- cypress/support/component.ts (1 hunks)
- cypress/support/e2e.ts (1 hunks)
- package.json (2 hunks)
✅ Files skipped from review due to trivial changes (4)
- cypress/fixtures/example.json
- cypress/support/commands.ts
- cypress/support/component-index.html
- cypress/support/e2e.ts
🔇 Additional comments (6)
cypress/component/Button.cy.jsx (1)
1-2: 导入语句正确且完整！React 和 Button 组件的导入路径正确。
cypress/e2e/index.cy.js (2)
1-4: 导入语句结构清晰合理！测试文件的导入遵循了良好的组织结构，从基础组件到布局再到导航的逻辑顺序。
6-8:⚠️ Potential issue建议优化异常处理策略
当前的异常处理方式过于宽泛，可能会掩盖真实的测试问题。建议考虑以下改进：
- 添加错误日志记录，以便追踪被忽略的异常
- 根据具体的错误类型进行选择性处理，而不是忽略所有异常
建议修改为：
Cypress.on('uncaught:exception', (err, runnable) => { + // 记录异常以便后续分析 + console.error('捕获到未处理的异常:', err.message); + + // 根据具体错误类型选择性处理 + if (err.message.includes('Expected error')) { + return false; + } + + // 对于未预期的错误，允许测试失败 + return true; })cypress/component/Cell.cy.jsx (1)
1-4: 导入语句看起来没有问题！导入了测试所需的所有必要组件。
cypress/support/component.ts (1)
1-23: 导入语句和配置看起来没有问题！文件头部的配置和导入语句符合Cypress组件测试的最佳实践。ESLint禁用指令是必要的，导入语句清晰明确。
package.json (1)
160-160: Cypress 版本选择合适选择 Cypress 13.15.0 版本是个不错的决定，这是一个稳定的版本，提供了组件测试和端到端测试的完整支持。
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.
First Usage
Update Dependencies
pnpm iGrant Permission
chmod +x [path/to/Cypress].Install
npx cypress installRun
pnpm run test:autopnpm run test:auto:runSummary by CodeRabbit
新功能
ActionSheet、Button、Cell等，增强了组件的测试覆盖率。example.json。bug修复
文档
package.json，添加了自动化测试的脚本和Cypress依赖。