NotificationsYou must be signed in to change notification settings
Fork330
Star2.1k

test(checkbox): add disabled state demos and e2e test#3835

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Jump to bottom

Merged

zzcr merged 3 commits intoopentiny:devfromIKEYCY:IKEYCY/fix-checkbox-disabled

Dec 2, 2025

Merged

test(checkbox): add disabled state demos and e2e test#3835

zzcr merged 3 commits intoopentiny:devfromIKEYCY:IKEYCY/fix-checkbox-disabled

Dec 2, 2025

Conversation

Copy link

Contributor

IKEYCY commentedNov 21, 2025•
edited by coderabbitaibot
Loading

PR

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows ourCommit Message Guidelines
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

Bugfix
Feature
Code style update (formatting, local variables)
Refactoring (no functional changes, no api changes)
Build related changes
CI related changes
Documentation content changes
Other... Please describe:

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
- Added two disabled-checkbox demos (Composition API and Options API) demonstrating a pre-checked, disabled checkbox with reactive binding.
Documentation
- Registered the disabled demo in the checkbox demo list with localized titles and descriptions.
Tests
- Added end-to-end tests confirming disabled appearance, styling classes, interaction prevention, checked state persistence, and no page errors.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

fix(vue-renderless/checkbox): [checkbox] fix disabled state style issue

0a1cb99

github-actionsbot added the bugSomething isn't working label

Nov 21, 2025

Copy link

coderabbitaibot commentedNov 21, 2025•
edited
Loading

Walkthrough

Adds 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

Cohort / File(s)	Summary
Demo Components `examples/sites/demos/pc/app/checkbox/checkbox-disabled.vue`,`examples/sites/demos/pc/app/checkbox/checkbox-disabled-composition-api.vue`	New Vue demos (Options API and Composition API) rendering a`TinyCheckbox` with`v-model` bound to a`checked` state initialized to`true`, and with the`disabled` attribute set.
End-to-end Test `examples/sites/demos/pc/app/checkbox/checkbox-disabled.spec.ts`	New Playwright test that navigates to the disabled demo, asserts`is-disabled` class and disabled styling on inner elements, attempts a click (via safe evaluation), verifies the checkbox remains checked, and asserts no page errors.
Documentation Configuration `examples/sites/demos/pc/app/checkbox/webdoc/checkbox.js`	Added a`demo` entry with`demoId: 'disabled'`, localized names/descriptions, and`codeFiles: ['checkbox-disabled.vue']` to the`demos` array.

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

Verify Playwright selectors and color/class tokens match rendered DOM and CSS variables.
Confirmcheckbox-disabled-composition-api.vue usesscript setup and importsTinyCheckbox correctly.
Ensurewebdoc entry filename anddemoId align with demo build expectations.

Poem

🐰
In code-sprung fields a checkbox lies,
Disabled, checked beneath bright skies.
Two demos whisper what not to click,
A test taps softly — nothing flicks.
The rabbit nods: "Docs and tests — tick!" ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main changes: adding disabled state demos and an e2e test for the checkbox component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and betweenf7aec6a and092134e.

📒 Files selected for processing (1)

examples/sites/demos/pc/app/checkbox/checkbox-disabled.spec.ts (1 hunks)

⏰ 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)

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates thehigh-level summary in your pull requests — including its content, structure, tone, and formatting.

Provide your own instructions using thehigh_level_summary_instructions setting.
Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
Usehigh_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:
📝 Description — Summarize the main change in 50–60 words, explaining what was done.
📓 References — List relevant issues, discussions, documentation, or related PRs.
📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
📊 Contributor Summary — Include a Markdown table showing contributions:
| Contributor | Lines Added | Lines Removed | Files Changed |
✔️ Additional Notes — Add any extra reviewer context.
Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

Thanks for usingCodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment@coderabbitai help to get the list of available commands and usage tips.}

coderabbitaibot reviewed

Nov 21, 2025

View reviewed changes

Copy link

coderabbitaibot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

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: ThecodeFiles array only referencescheckbox-disabled.vue but 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

📥 Commits

Reviewing files that changed from the base of the PR and between2eafe0c and0a1cb99.

📒 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: DavontRepo: opentiny/tiny-vue PR: 2513File: packages/vue/src/huicharts/huicharts-histogram/src/chart-histogram.vue:33-36Timestamp: 2024-11-25T03:43:05.285ZLearning: 在 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.

examples/sites/demos/pc/app/checkbox/checkbox-disabled.spec.tsShow resolvedHide resolved

zzcr previously approved these changes

Nov 24, 2025

View reviewed changes

Copy link

Member

zzcr commentedNov 24, 2025

你好，e2e测试用例没过哈，麻烦看下怎么回事？

Copy link

Issues-translate-bot commentedNov 24, 2025

Bot detected the issue body's language is not English, translate it automatically.

Hello, I didn’t pass the e2e test case. Could you please check what’s going on?

Copy link

ContributorAuthor

IKEYCY commentedNov 24, 2025 via email

好的，我等会看下

…

------------------ 原始邮件 ------------------发件人: ***@***.***>;发送时间: 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: ***@***.***>

fix(checkbox): [checkbox] fix disabled state style and improve disabl…

f7aec6a

…ed checked behavior test

IKEYCY dismissedzzcr’sstale review viaf7aec6a

November 26, 2025 13:58

IKEYCY changed the title~~fix(vue-renderless/checkbox): [checkbox] fix disabled state style issue~~test(checkbox): add disabled state demos and e2e test

Nov 27, 2025

github-actionsbot removed the bugSomething isn't working label

Nov 27, 2025

test(checkbox): fix disabled checkbox e2e test by using native click …

092134e