test(checkbox): add disabled state demos and e2e test #3835
Conversation
WalkthroughAdds two disabled-checkbox demo components (Options API and Composition API), a Playwright test that verifies disabled behavior and styling, and a webdoc demo entry registering the disabled demo. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant Tester as Test Runner
participant Browser as Browser Page
participant Demo as Checkbox Demo (TinyCheckbox)
Tester->>Browser: goto('/checkbox/disabled')
Browser->>Demo: render(TinyCheckbox disabled, checked=true)
Note right of Demo: initial state — disabled + checked
Tester->>Browser: query DOM and inspect classes/styles
Browser->>Demo: return is-disabled, color/border classes
Tester->>Browser: attempt click on checkbox element
Browser->>Demo: click delivered (ignored due to disabled)
Demo-->>Browser: state unchanged (remains checked, is-disabled)
Tester->>Browser: listen for page errors
Browser-->>Tester: no page errors emitted
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
Tip 📝 Customizable high-level summaries are now available in beta!You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.
Example instruction:
Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later. 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 |
![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
🧹 Nitpick comments (1)
examples/sites/demos/pc/app/checkbox/webdoc/checkbox.js (1)
19-31: Documentation entry looks good.The disabled checkbox demo is properly configured with appropriate descriptions in both languages.
Minor observation: The
codeFilesarray only referencescheckbox-disabled.vuebut notcheckbox-disabled-composition-api.vue. If the composition API variant should also be shown in the documentation, consider adding it:- codeFiles: ['checkbox-disabled.vue'] + codeFiles: ['checkbox-disabled.vue', 'checkbox-disabled-composition-api.vue']However, if the documentation system only shows one variant per demo, the current configuration is fine.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
examples/sites/demos/pc/app/checkbox/checkbox-disabled-composition-api.vue(1 hunks)examples/sites/demos/pc/app/checkbox/checkbox-disabled.spec.ts(1 hunks)examples/sites/demos/pc/app/checkbox/checkbox-disabled.vue(1 hunks)examples/sites/demos/pc/app/checkbox/webdoc/checkbox.js(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2024-11-25T03:43:05.285Z
Learnt from: Davont
Repo: opentiny/tiny-vue PR: 2513
File: packages/vue/src/huicharts/huicharts-histogram/src/chart-histogram.vue:33-36
Timestamp: 2024-11-25T03:43:05.285Z
Learning: 在 Tiny Vue 代码库中，使用 `chart-core` 中的 `huiChartOption` 的组件，不应在其 `data` 中定义 `huiChartOption` 或 `option`，而是应该依赖 `chart-core` 提供的 `huiChartOption`。
Applied to files:
examples/sites/demos/pc/app/checkbox/checkbox-disabled.vue
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (2)
examples/sites/demos/pc/app/checkbox/checkbox-disabled-composition-api.vue (1)
1-10: LGTM! Clean composition API demo.The component correctly demonstrates a disabled checkbox using Vue 3's Composition API with proper reactive state management.
examples/sites/demos/pc/app/checkbox/checkbox-disabled.vue (1)
1-18: LGTM! Consistent Options API implementation.The component correctly demonstrates a disabled checkbox using Vue's Options API and is consistent with the Composition API variant. Both demos properly initialize the checkbox in a checked and disabled state.
|
你好，e2e测试用例没过哈，麻烦看下怎么回事？ |
Hello, I didn’t pass the e2e test case. Could you please check what’s going on? |
|
好的，我等会看下
…------------------ 原始邮件 ------------------
发件人: ***@***.***>;
发送时间: 2025年11月24日(星期一) 下午2:20
收件人: ***@***.***>;
抄送: ***@***.***>; ***@***.***>;
主题: Re: [opentiny/tiny-vue] fix(vue-renderless/checkbox): [checkbox] fix disabled state style issue (PR #3835)
zzcr left a comment (opentiny/tiny-vue#3835)
你好，e2e测试用例没过哈，麻烦看下怎么回事？
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you authored the thread.Message ID: ***@***.***>
|
…ed checked behavior test
IKEYCY
changed the title
3 participants
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
Documentation
Tests
✏️ Tip: You can customize this high-level summary in your review settings.