test(docs): assert independent radio groups across duplicate Controls blocks#34922
test(docs): assert independent radio groups across duplicate Controls blocks#34922leno23 wants to merge 1 commit into
Conversation
… blocks Extend the duplicate-<Controls /> regression story to use inline-radio args, verify unique radio group names per block, and assert selections in one block do not affect the other. Closes storybookjs#34864 Co-authored-by: Cursor <cursoragent@cursor.com>
|
📝 WalkthroughWalkthroughThis PR adds a reusable ChangesInline-radio Controls test expansion
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Warning Review ran into problems🔥 ProblemsStopped waiting for pipeline failures after 30000ms. One of your pipelines takes longer than our 30000ms fetch window to run, so review may not consider pipeline-failure results for inline comments if any failures occurred after the fetch window. Increase the timeout if you want to wait longer or run a 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 |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@code/addons/docs/src/blocks/blocks/Controls.stories.tsx`:
- Around line 206-211: The test currently asserts that all radio input names are
unique, which is incorrect for radio groups; in Controls.stories.tsx where
radioInputs and radioNames are computed, change the second assertion to verify
that all radios share the same name (i.e., new Set(radioNames).size === 1)
rather than matching the total input count, while keeping the check that
radioNames.length > 0.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 739eacc8-57a1-42df-8f2b-37f870c2b582
📒 Files selected for processing (2)
code/addons/docs/src/blocks/blocks/Controls.stories.tsxcode/addons/docs/src/blocks/examples/ControlsParameters.stories.tsx
| const radioInputs = Array.from( | ||
| canvasElement.querySelectorAll<HTMLInputElement>('input[type="radio"]') | ||
| ); | ||
| const radioNames = radioInputs.map((input) => input.name); | ||
| await expect(radioNames.length).toBeGreaterThan(0); | ||
| await expect(new Set(radioNames).size).toBe(radioNames.length); |
There was a problem hiding this comment.
Fix radio name assertion to match radio-group semantics.
This check is currently wrong for radios. Inputs in the same group should share the same name, so Set.size === total inputs will fail for valid markup.
Suggested fix
- const radioInputs = Array.from(
- canvasElement.querySelectorAll<HTMLInputElement>('input[type="radio"]')
- );
- const radioNames = radioInputs.map((input) => input.name);
- await expect(radioNames.length).toBeGreaterThan(0);
- await expect(new Set(radioNames).size).toBe(radioNames.length);
+ const tables = canvasElement.querySelectorAll('.docblock-argstable');
+ await expect(tables.length).toBe(2);
+
+ const firstNames = new Set(
+ Array.from(tables[0].querySelectorAll<HTMLInputElement>('input[type="radio"]')).map(
+ (input) => input.name
+ )
+ );
+ const secondNames = new Set(
+ Array.from(tables[1].querySelectorAll<HTMLInputElement>('input[type="radio"]')).map(
+ (input) => input.name
+ )
+ );
+ await expect(firstNames.size).toBe(1);
+ await expect(secondNames.size).toBe(1);
+ await expect([...firstNames][0]).not.toBe([...secondNames][0]);
- const tables = canvasElement.querySelectorAll('.docblock-argstable');
- await expect(tables.length).toBe(2);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@code/addons/docs/src/blocks/blocks/Controls.stories.tsx` around lines 206 -
211, The test currently asserts that all radio input names are unique, which is
incorrect for radio groups; in Controls.stories.tsx where radioInputs and
radioNames are computed, change the second assertion to verify that all radios
share the same name (i.e., new Set(radioNames).size === 1) rather than matching
the total input count, while keeping the check that radioNames.length > 0.
|
AI spam |
Summary
MultipleControlsForSameStoryOnSamePageto render duplicate<Controls />blocks withinline-radioargsnameattribute is unique per Controls instanceThe underlying fix landed in #34793 (
controlsIdviauseId()); this adds regression coverage for the radionamecollision reported in #34864 / #29295.Test plan
names, and independent selection behaviorbug+ci:normallabels for Danger JS)Closes #34864
Made with Cursor
Summary by CodeRabbit
New Features
Tests