Add tests for BitSplitter component (#11656)

[msynk]

closes #11656

Summary by CodeRabbit

• Tests
  • Expanded test coverage for the Splitter component, validating DOM structure, layout configurations (horizontal and vertical modes), gutter styling, sizing properties, and child content rendering.

[coderabbitai]

Walkthrough

A new test suite is added for the BitSplitter component. The BitSplitterTests class contains six test methods that verify DOM structure, CSS variables, styling, icon rendering, and child content handling using BUnit.

Changes

Cohort / File(s)	Summary
BitSplitter Test Suite src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Splitter/BitSplitterTests.cs	Adds BitSplitterTests class with six test methods covering DOM structure, gutter size styling, gutter icon rendering, vertical layout, CSS variables for panel sizing, and child content rendering.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• All tests follow a consistent BUnit pattern with similar setup and assertion structure
• No complex logic or edge cases requiring special attention
• Straightforward DOM query and CSS variable assertions
• Verify that all six test methods adequately cover the component's documented behavior and properties

Poem

🐰 Six tests now guard the splitter's delight,
Panels and gutters rendered just right,
CSS variables checked with care,
DOM nodes confirmed everywhere,
No more untested code in sight! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: adding tests for the BitSplitter component, directly addressing the linked issue #11656.
Linked Issues check	✅ Passed	The PR adds comprehensive tests for BitSplitter covering DOM structure, CSS variables, gutter icons, vertical layout, panel sizes, and child content rendering, fulfilling the requirement to add tests for the component.
Out of Scope Changes check	✅ Passed	All changes are scoped to adding a new test suite for BitSplitter; no unrelated modifications or out-of-scope changes are present.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Splitter/BitSplitterTests.cs (1)

44-56: LGTM! Consider adding a negative test case.

The test correctly verifies icon rendering. For completeness, consider adding a test to verify that no icon is rendered when GutterIcon is not provided.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting

📥 Commits

Reviewing files that changed from the base of the PR and between 76d9bc5 and bb7c475.

📒 Files selected for processing (1)

• src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Splitter/BitSplitterTests.cs (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: build and test

🔇 Additional comments (6)

src/BlazorUI/Bit.BlazorUI.Tests/Components/Surfaces/Splitter/BitSplitterTests.cs (6)

1-9: LGTM! Clean test class setup.

The test class properly inherits from BunitTestContext and follows standard BUnit/MSTest conventions.

---

10-26: LGTM! Solid baseline DOM structure test.

This test appropriately verifies the default DOM structure of the BitSplitter component using MarkupMatches.

---

58-68: LGTM! Clean verification of vertical layout.

The test appropriately verifies that the vertical class is applied when Vertical is set to true.

---

70-95: Verify CSS variable formatting for panel sizes.

Lines 88-94 check for CSS variables without spaces after colons (e.g., --first-panel:128px). This has the same potential brittleness as the GutterSize test. If Blazor renders these with spaces (e.g., --first-panel: 128px), all six assertions would fail despite correct component behavior.

The verification script from the GutterSize test will also check these panel size CSS variables.

---

97-114: LGTM! Solid child content verification.

The test correctly verifies that RenderFragment content is rendered in the appropriate panels. The inline creation of RenderFragment instances and subsequent content verification are well-implemented.

---

28-42: The review comment assumes the component renders CSS variables with spaces after colons (e.g., --gutter-size: 20px). However, the actual implementation at line 102 of BitSplitter.cs registers the CSS variable without spaces: $"--gutter-size:{GutterSize}px". The test at line 41 correctly matches this exact format. The test is not brittle; it properly aligns with the actual implementation behavior.

Likely an incorrect or invalid review comment.