test(LayoutSplitebar): add unit test for LayoutSplitebar (#5443)

* refactor: 更改组件名称

* test: 增加单元测试

* refactor: 增加默认值

* doc: 更新文档示例

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor

@@ -10,7 +10,7 @@
             <span class="sidebar-text">Bootstrap Blazor</span>
         </div>
         <NavMenu />
-        <LayoutSidebar Min="250" Max="380" ContainerSelector=".section"></LayoutSidebar>
+        <LayoutSplitebar Min="250" Max="380" ContainerSelector=".section"></LayoutSplitebar>
     </aside>
 
     <section class="main">

src/BootstrapBlazor/Components/Layout/Layout.razor

@@ -90,7 +90,7 @@
         }
         @if (ShowSplitBar)
         {
-            <LayoutSidebar></LayoutSidebar>
+            <LayoutSplitebar></LayoutSplitebar>
         }
         @if (Menus != null)
         {

src/BootstrapBlazor/Components/Layout/LayoutSidebar.razor renamed to src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor

@@ -1,8 +1,8 @@
 @namespace BootstrapBlazor.Components
 @inherits BootstrapModuleComponentBase
-@attribute [BootstrapModuleAutoLoader("Layout/LayoutSidebar.razor.js")]
+@attribute [BootstrapModuleAutoLoader("Layout/LayoutSplitebar.razor.js")]
 
-<div id="@Id" class="layout-sidebar"
+<div id="@Id" class="layout-splitebar"
      data-bb-min="@_minWidthString" data-bb-max="@_maxWidthString" data-bb-selector="@ContainerSelector">
-    <div class="layout-sidebar-body"></div>
+    <div class="layout-splitebar-body"></div>
 </div>

src/BootstrapBlazor/Components/Layout/LayoutSidebar.razor.cs renamed to src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor.cs

@@ -8,7 +8,7 @@ namespace BootstrapBlazor.Components;
 /// <summary>
 /// LayoutSidebar 组件
 /// </summary>
-public partial class LayoutSidebar
+public partial class LayoutSplitebar
 {
     /// <summary>
     /// 获得/设置 容器选择器 默认 null 未设置

src/BootstrapBlazor/Components/Layout/LayoutSidebar.razor.js renamed to src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor.js

@@ -1,5 +1,4 @@
 import Drag from "../../modules/drag.js"
-import Data from "../../modules/data.js"
 
 export function init(id) {
     const el = document.getElementById(id);
@@ -9,9 +8,9 @@ export function init(id) {
 
     const min = parseFloat(el.getAttribute("data-bb-min") ?? "0");
     const max = parseFloat(el.getAttribute("data-bb-max") ?? "0");
-    const selector = el.getAttribute("data-bb-selector");
+    const selector = el.getAttribute("data-bb-selector") ?? ".layout";
     const section = document.querySelector(selector);
-    const bar = el.querySelector(".layout-sidebar-body");
+    const bar = el.querySelector(".layout-splitebar-body");
     let originX = 0;
     let width = 0;
     Drag.drag(bar,
@@ -37,7 +36,7 @@ export function init(id) {
 export function dispose(id) {
     const el = document.getElementById(id);
     if (el) {
-        const bar = el.querySelector(".layout-sidebar-body");
+        const bar = el.querySelector(".layout-splitebar-body");
         if (bar) {
             Drag.dispose(bar);
         }

src/BootstrapBlazor/Components/Layout/LayoutSidebar.razor.scss renamed to src/BootstrapBlazor/Components/Layout/LayoutSplitebar.razor.scss

@@ -1,4 +1,4 @@
-.layout-sidebar {
+.layout-splitebar {
     width: 1px;
     position: absolute;
     top: 0;
@@ -7,7 +7,7 @@
     background-color: var(--bs-border-color);
     display: none;
 
-    .layout-sidebar-body {
+    .layout-splitebar-body {
         position: absolute;
         inset: 0px -2px;
         cursor: col-resize;
@@ -26,7 +26,7 @@
 }
 
 @media(min-width: 768px) {
-    .layout-sidebar {
+    .layout-splitebar {
         display: block;
     }
 }

src/BootstrapBlazor/wwwroot/scss/components.scss

@@ -57,7 +57,7 @@
 @import "../../Components/Input/FloatingLabel.razor.scss";
 @import "../../Components/IpAddress/IpAddress.razor.scss";
 @import "../../Components/Layout/Layout.razor.scss";
-@import "../../Components/Layout/LayoutSidebar.razor.scss";
+@import "../../Components/Layout/LayoutSplitebar.razor.scss";
 @import "../../Components/Light/Light.razor.scss";
 @import "../../Components/ListGroup/ListGroup.razor.scss";
 @import "../../Components/ListView/ListView.razor.scss";

test/UnitTest/Components/LayoutSplitebarTest.cs

@@ -0,0 +1,27 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace UnitTest.Components;
+
+public class LayoutSplitebarTest : BootstrapBlazorTestBase
+{
+    [Fact]
+    public void LayoutSplitebar_Ok()
+    {
+        var cut = Context.RenderComponent<LayoutSplitebar>(pb =>
+        {
+            pb.Add(a => a.ContainerSelector, ".layout");
+        });
+        cut.Contains("data-bb-selector=\".layout\"");
+
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.Min, 100);
+            pb.Add(a => a.Max, 200);
+        });
+        cut.Contains("data-bb-min=\"100\"");
+        cut.Contains("data-bb-max=\"200\"");
+    }
+}

test/UnitTest/Components/LayoutTest.cs

@@ -237,6 +237,23 @@ public void UseTabSet_Layout()
         cut.WaitForAssertion(() => cut.Contains("<div class=\"tabs-body-content\">Binder</div>"));
     }
 
+    [Fact]
+    public void ShowLayouSidebar_Ok()
+    {
+        var cut = Context.RenderComponent<Layout>(pb =>
+        {
+            pb.Add(a => a.UseTabSet, true);
+            pb.Add(a => a.AdditionalAssemblies, new Assembly[] { GetType().Assembly });
+            pb.Add(a => a.IsFullSide, true);
+            pb.Add(a => a.ShowSplitBar, true);
+            pb.Add(a => a.Side, new RenderFragment(builder =>
+            {
+                builder.AddContent(0, "test");
+            }));
+        });
+        cut.Contains("layout-splitebar");
+    }
+
     [Fact]
     public void UseTabSet_Menus()
     {