Add missing tests of loading components (#11724)

[msynk]

closes #11724

Summary by CodeRabbit

• Tests
  • Added comprehensive unit test coverage for all loading component variants, including validation of rendering structure, label display and templating, label positioning, color and size styling, and custom root styling support.

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

[coderabbitai]

Walkthrough

Adds comprehensive unit test coverage for 18 Loading components using Bunit, testing structure rendering, label/template rendering, positioning behavior, color and size styling, and custom root class/style application across all components.

Changes

Cohort / File(s)	Summary
Loading Component Test Suite src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/Bit{BarsLoading,BouncingDotsLoading,CircleLoading,DotsRingLoading,DualRingLoading,EllipsisLoading,GridLoading,HeartLoading,HourglassLoading,OrbitingDotsLoading,RingLoading,RippleLoading,RollerLoading,RollingDashesLoading,RollingSquareLoading,SlickBarsLoading,SpinnerLoading,XboxLoading}Tests.cs	Each test file introduces a public test class with six standardized test methods: ShouldRenderStructure(), ShouldRenderLabel(), ShouldRenderLabelTemplate(), ShouldRespectLabelPosition(), ShouldHonorColorAndSize(), and ShouldRespectRootStyleAndClass(). Tests validate DOM structure, CSS classes, text content, template rendering, styling, and custom attributes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

• Rationale: While 18 new test files are added, they follow an identical, repetitive pattern. Each test class contains the same six test methods with consistent logic structure (render component with parameters → query DOM → assert expected output). The homogeneous nature of these changes—applying the same test pattern across multiple components—significantly reduces review complexity. The main effort involves spot-checking a few representative files for correctness and verifying the test assertions align with component APIs.

• Areas for attention:

  • Verify CSS class names (e.g., bit-ldn, bit-ldn-led) match component implementations
  • Confirm Color/Size CSS variable mappings (e.g., --bit-ldn-color, --bit-ldn-size) are correct
  • Spot-check a few files to ensure DOM query selectors accurately target rendered elements

Poem

🐰 Eighteen spinners tested, circles, bars, and hearts,
Each loading dance now covered from its start,
Labels, colors, sizes—all assertions tight,
The test warren's tunnels shine with confidence bright! 🎉

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Add missing tests of loading components (#11724)' clearly and concisely summarizes the main change: adding unit tests for loading components. It is specific, relevant, and directly reflects the changeset.
Linked Issues check	✅ Passed	The PR fully addresses issue #11724 by adding comprehensive unit tests for all loading components (BitBarsLoading, BitBouncingDotsLoading, BitCircleLoading, BitDotsRingLoading, BitDualRingLoading, BitEllipsisLoading, BitGridLoading, BitHeartLoading, BitHourglassLoading, BitOrbitingDotsLoading, BitRingLoading, BitRippleLoading, BitRollerLoading, BitRollingDashesLoading, BitRollingSquareLoading, BitSlickBarsLoading, BitSpinnerLoading, and BitXboxLoading), fulfilling the objective to provide unit test coverage.
Out of Scope Changes check	✅ Passed	All changes in the PR are within scope: they consist exclusively of new test files for loading components in the appropriate test namespace, with no modifications to production code or unrelated files.
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

---

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

♻️ Duplicate comments (2)

src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitRollingDashesLoadingTests.cs (2)

7-88: Same code duplication pattern as BitHourglassLoadingTests.

This test suite is nearly identical to BitHourglassLoadingTests and the 16 other loading component test suites. Please see the refactoring suggestion in BitHourglassLoadingTests to extract shared logic into a base class or helper methods.

---

70-72: Inconsistent spacing in CSS variable assertions.

Same spacing inconsistency as in BitHourglassLoadingTests (line 70 has a space after colon, lines 71-72 don't). Consider using more flexible assertions or verify the component's exact rendering format.

🧹 Nitpick comments (3)

src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitHeartLoadingTests.cs (1)

1-88: Consider refactoring to reduce duplication across loading tests.

All 8 loading component test files share an identical test structure with only minor variations (component type and child count). While this works, consider extracting common test logic into a base class or helper methods to improve maintainability.

For example:

public abstract class BitLoadingTestsBase<T> : BunitTestContext where T : ComponentBase
{
    protected abstract string ComponentCssClass { get; }
    protected abstract int ExpectedChildCount { get; }
    
    [TestMethod]
    public void ShouldRenderStructure() { /* common logic */ }
    // ... other common tests
}

src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitHourglassLoadingTests.cs (2)

7-88: Consider extracting shared test logic to reduce duplication.

With 18 loading component test suites following this identical pattern, consider creating a base test class or shared helper methods to reduce maintenance overhead. You could use a generic approach or parameterized tests to cover common behaviors (label rendering, positioning, color/size styling, root attributes) across all loading components.

Example approach:

public abstract class BitLoadingTestBase<TComponent> : BunitTestContext 
    where TComponent : IComponent
{
    protected abstract string ComponentCssClass { get; }
    protected abstract string ContainerCssClass { get; }
    
    [TestMethod]
    public void ShouldRenderLabel()
    {
        var component = RenderComponent<TComponent>(parameters =>
        {
            parameters.Add("Label", "Loading...");
        });
        var label = component.Find(".bit-ldn-lbl");
        Assert.AreEqual("Loading...", label.TextContent);
    }
    // ... other shared tests
}

public class BitHourglassLoadingTests : BitLoadingTestBase<BitHourglassLoading>
{
    protected override string ComponentCssClass => "bit-ldn-hgl";
    protected override string ContainerCssClass => "bit-ldn-hgl-ccn";
    // Component-specific tests only
}

---

19-20: Structure validation is less thorough than similar tests.

BitRollingDashesLoadingTests verifies child element count (line 20), while this test only checks container existence. Consider adding similar child validation for consistency.

 var container = component.Find(".bit-ldn-hgl-ccn");
-Assert.IsNotNull(container);
+Assert.IsNotNull(container);
+// Verify expected child structure if applicable
+// Assert.AreEqual(expectedChildCount, container.GetElementsByClassName("bit-ldn-hgl-chl").Length);

📜 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 894853c and a33eb2b.

📒 Files selected for processing (18)

• src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitBarsLoadingTests.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitBouncingDotsLoadingTests.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitCircleLoadingTests.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitDotsRingLoadingTests.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitDualRingLoadingTests.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitEllipsisLoadingTests.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitGridLoadingTests.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitHeartLoadingTests.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitHourglassLoadingTests.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitOrbitingDotsLoadingTests.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitRingLoadingTests.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitRippleLoadingTests.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitRollerLoadingTests.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitRollingDashesLoadingTests.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitRollingSquareLoadingTests.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitSlickBarsLoadingTests.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitSpinnerLoadingTests.cs (1 hunks)
• src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitXboxLoadingTests.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 Bit.BlazorUI

🔇 Additional comments (18)

src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitBarsLoadingTests.cs (1)

1-88: Excellent test coverage for BitBarsLoading!

The test suite comprehensively validates the component's rendering behavior, parameter bindings, and style propagation. The structure is clear and assertions are appropriate.

src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitDualRingLoadingTests.cs (1)

1-88: Well-structured tests for BitDualRingLoading!

The test coverage is thorough and follows the established pattern for Loading component tests.

src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitRollingSquareLoadingTests.cs (1)

1-88: Solid test coverage for BitRollingSquareLoading!

Tests are well-organized and validate all key component behaviors.

src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitGridLoadingTests.cs (1)

1-88: Comprehensive testing for BitGridLoading!

The tests appropriately validate the 9-cell grid structure and all component parameters.

src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitDotsRingLoadingTests.cs (1)

1-88: Thorough test suite for BitDotsRingLoading!

Tests validate the 12-dot ring structure and all component behaviors correctly.

src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitRippleLoadingTests.cs (1)

1-88: Complete test coverage for BitRippleLoading!

Tests appropriately validate the ripple animation structure and component parameters.

src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitBouncingDotsLoadingTests.cs (1)

1-88: Well-designed tests for BitBouncingDotsLoading!

The test suite properly validates the three-dot bouncing animation structure and all parameters.

src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitHeartLoadingTests.cs (1)

1-88: Strong test coverage for BitHeartLoading!

Tests validate the heart animation structure and component behavior effectively.

src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitXboxLoadingTests.cs (1)

1-88: Well‑scoped, consistent coverage for BitXboxLoading

The tests cleanly cover structural classes, label and template rendering, label positioning, color/size styling, and root class/style application. Assertions are straightforward and deterministic, and the overall pattern is consistent with the rest of the loading component tests. I don’t see any issues here.

src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitCircleLoadingTests.cs (1)

1-88: Solid, uniform tests for BitCircleLoading

This suite mirrors the common loading‑test pattern and correctly adapts it to the circle variant (root classes and one child channel). Label, template, label position, styling, and root customization are all exercised. No changes requested.

src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitSpinnerLoadingTests.cs (1)

1-88: Comprehensive spinner tests with clear structural expectations

The spinner tests correctly assert the 12 segment elements and reuse the shared pattern for label, template, label position, color/size, and root style/class. Everything is clear and maintainable; no issues found.

src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitRingLoadingTests.cs (1)

1-88: Ring loader tests look correct and consistent

The four‑child ring structure, label handling, label template, label position, CSS variable checks, and root customization are all covered in a straightforward way. This aligns well with the rest of the loading tests and looks good to ship.

src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitRollerLoadingTests.cs (1)

1-88: Clear and thorough tests for BitRollerLoading

The structural assertion for 8 roller children plus the shared scenarios (label, template, position, styling, root props) are all well covered. I don’t see any functional or maintainability concerns here.

src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitOrbitingDotsLoadingTests.cs (1)

1-88: Good coverage for BitOrbitingDotsLoading behaviors

The two‑child orbiting dots structure and all the standard behaviors (label, template, label position, color/size CSS vars, root class/style) are asserted cleanly. Tests are consistent and readable; no changes suggested.

src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitSlickBarsLoadingTests.cs (1)

1-88: BitSlickBarsLoading tests are aligned with the shared pattern

The test class correctly validates the 6‑bar structure plus label, label template, label position, CSS variable styling, and root customization. Implementation is straightforward and matches the rest of the loading test suite.

src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitEllipsisLoadingTests.cs (1)

1-88: Ellipsis loader tests are complete and consistent

The ellipsis tests assert the 4‑dot structure and fully exercise label/text, template, position, color/size styling, and root class/style behaviors. Everything looks coherent with the rest of the new loading component tests.

src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitRollingDashesLoadingTests.cs (1)

19-20: Good child structure validation.

This test properly verifies the child element count, which is more thorough than the equivalent test in BitHourglassLoadingTests.

src/BlazorUI/Bit.BlazorUI.Tests/Components/Progress/Loading/BitHourglassLoadingTests.cs (1)

70-72: Tests are correct and accurately assert the actual component output.

The review comment's concern about inconsistent spacing is misdirected. Verification shows the component source itself (BitLoadingBase.cs) generates these exact, inconsistently-spaced CSS variables:

• Line 156: "--bit-ldn-color: {color}" (space after colon)
• Lines 159-160: "--bit-ldn-size:{...}" and "--bit-ldn-font-size:{...}" (no spaces)

The test assertions at lines 70-72 correctly match what the component produces. All 18 similar loading component test files use identical assertions, and all are consistent with their respective component outputs. The tests should not be changed.

Likely an incorrect or invalid review comment.