From 2814416f73acbd9865ca0a5fc9c478b78ce7aac1 Mon Sep 17 00:00:00 2001 From: Mohammad Aminsafaei Date: Sat, 3 Aug 2024 10:12:49 +0330 Subject: [PATCH] feat(blazorui): add tests for BitStack #8171 (#8196) --- .../Stack/BitStackHtmlAttributesTest.razor | 1 + .../Utilities/Stack/BitStackTests.cs | 592 ++++++++++++++++++ 2 files changed, 593 insertions(+) create mode 100644 src/BlazorUI/Bit.BlazorUI.Tests/Components/Utilities/Stack/BitStackHtmlAttributesTest.razor create mode 100644 src/BlazorUI/Bit.BlazorUI.Tests/Components/Utilities/Stack/BitStackTests.cs diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Utilities/Stack/BitStackHtmlAttributesTest.razor b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Utilities/Stack/BitStackHtmlAttributesTest.razor new file mode 100644 index 0000000000..2ea7ef1234 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Utilities/Stack/BitStackHtmlAttributesTest.razor @@ -0,0 +1 @@ +I'm a stack \ No newline at end of file diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Utilities/Stack/BitStackTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Utilities/Stack/BitStackTests.cs new file mode 100644 index 0000000000..765d0200b0 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Utilities/Stack/BitStackTests.cs @@ -0,0 +1,592 @@ +using Microsoft.VisualStudio.TestTools.UnitTesting; +using System.Collections.Generic; +using System; +using Bunit; + +namespace Bit.BlazorUI.Tests.Components.Utilities.Stack; + +[TestClass] +public class BitStackTests : BunitTestContext +{ + private const string STYLE = "flex-direction:column;align-items:flex-start;justify-content:flex-start;"; + + private static readonly Dictionary _AlignmentMap = new() + { + { BitStackAlignment.Start, "flex-start" }, + { BitStackAlignment.End, "flex-end" }, + { BitStackAlignment.Center, "center" }, + { BitStackAlignment.SpaceBetween, "space-between" }, + { BitStackAlignment.SpaceAround, "space-around" }, + { BitStackAlignment.SpaceEvenly, "space-evenly" }, + { BitStackAlignment.Baseline, "baseline" }, + { BitStackAlignment.Stretch, "stretch" }, + }; + + [DataTestMethod] + public void BitStackShouldRenderExpectedElement() + { + var component = RenderComponent(); + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod, + DataRow(true), + DataRow(false) + ] + public void BitStackShouldRespectIsEnabled(bool isEnabled) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.IsEnabled, isEnabled); + }); + + var cssClass = isEnabled ? null : " bit-dis"; + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod] + public void BitStackShouldRespectIsEnabledChangingAfterRender() + { + var component = RenderComponent(); + + component.MarkupMatches(@$"
"); + + component.SetParametersAndRender(parameters => + { + parameters.Add(p => p.IsEnabled, false); + }); + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod, + DataRow("font-size: 14px; color: red;"), + DataRow("padding: 1rem;"), + DataRow(null) + ] + public void BitStackShouldRespectStyle(string style) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Style, style); + }); + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod] + public void BitStackShouldRespectStyleChangingAfterRender() + { + var component = RenderComponent(); + + component.MarkupMatches(@$"
"); + + var style = "padding: 1rem;"; + component.SetParametersAndRender(parameters => + { + parameters.Add(p => p.Style, style); + }); + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod, + DataRow("test-class"), + DataRow(null) + ] + public void BitStackShouldRespectClass(string @class) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Class, @class); + }); + + var cssClass = @class.HasValue() ? $" {@class}" : null; + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod] + public void BitStackShouldRespectClassChangingAfterRender() + { + var component = RenderComponent(); + + component.MarkupMatches(@$"
"); + + var cssClass = "test-class"; + + component.SetParametersAndRender(parameters => + { + parameters.Add(p => p.Class, cssClass); + }); + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod, + DataRow("test-id"), + DataRow(null) + ] + public void BitStackShouldRespectId(string id) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Id, id); + }); + + var expectedId = id.HasValue() ? id : component.Instance.UniqueId.ToString(); + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod, + DataRow(BitDir.Rtl), + DataRow(BitDir.Ltr), + DataRow(BitDir.Auto), + DataRow(null) + ] + public void BitStackShouldRespectDir(BitDir? dir) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Dir, dir); + }); + + if (dir.HasValue) + { + var cssClass = dir is BitDir.Rtl ? " bit-rtl" : null; + component.MarkupMatches(@$"
"); + } + else + { + component.MarkupMatches(@$"
"); + } + } + + [DataTestMethod] + public void BitStackShouldRespectDirChangingAfterRender() + { + var component = RenderComponent(); + + component.MarkupMatches(@$"
"); + + component.SetParametersAndRender(parameters => + { + parameters.Add(p => p.Dir, BitDir.Ltr); + }); + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod, + DataRow(BitVisibility.Visible), + DataRow(BitVisibility.Collapsed), + DataRow(BitVisibility.Hidden) + ] + public void BitStackShouldRespectVisibility(BitVisibility visibility) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Visibility, visibility); + }); + + var style = visibility switch + { + BitVisibility.Hidden => "visibility: hidden;", + BitVisibility.Collapsed => "display: none;", + _ => null + }; + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod] + public void BitStackShouldRespectVisibilityChangingAfterRender() + { + var component = RenderComponent(); + + component.MarkupMatches(@$"
"); + + component.SetParametersAndRender(parameters => + { + parameters.Add(p => p.Visibility, BitVisibility.Collapsed); + }); + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod, + DataRow("Bit Blazor UI"), + DataRow("Bit Blazor UI"), + DataRow(null) + ] + public void BitStackShouldRespectChildContent(string childContent) + { + var component = RenderComponent(parameters => + { + if (childContent is not null) + { + parameters.AddChildContent(childContent); + } + }); + + component.MarkupMatches(@$"
{childContent}
"); + } + + [DataTestMethod] + public void BitStackShouldRespectHtmlAttributes() + { + var component = RenderComponent(); + + component.MarkupMatches(@$"
I'm a stack
"); + } + + [DataTestMethod, + DataRow("p"), + DataRow("span"), + DataRow(null) + ] + public void BitStackShouldRespectElement(string element) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Element, element); + }); + + var el = element.HasValue() ? element : "div"; + component.MarkupMatches(@$"<{el} class=""bit-stc"" style=""{STYLE}"" id:ignore>"); + } + + [DataTestMethod, + DataRow("10px"), + DataRow("1rem"), + DataRow(null) + ] + public void BitStackShouldRespectGap(string gap) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Gap, gap); + }); + + var style = gap.HasValue() ? $"gap:{gap}" : null; + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod] + public void BitStackShouldRespectGapChangingAfterRender() + { + var component = RenderComponent(); + + component.MarkupMatches(@$"
"); + + var gap = "1rem"; + component.SetParametersAndRender(parameters => + { + parameters.Add(p => p.Gap, gap); + }); + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod, + DataRow("3"), + DataRow("initial"), + DataRow("inherit"), + DataRow(null) + ] + public void BitStackShouldRespectGrow(string grow) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Grow, grow); + }); + + var style = grow.HasValue() ? $"flex-grow:{grow}" : null; + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod] + public void BitStackShouldRespectGrowChangingAfterRender() + { + var component = RenderComponent(); + + component.MarkupMatches(@$"
"); + + var grow = "2"; + component.SetParametersAndRender(parameters => + { + parameters.Add(p => p.Grow, grow); + }); + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod, + DataRow(true), + DataRow(false) + ] + public void BitStackShouldRespectGrows(bool grows) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Grows, grows); + }); + + var style = grows ? "flex-grow:1" : null; + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod] + public void BitStackShouldRespectGrowsChangingAfterRender() + { + var component = RenderComponent(); + + component.MarkupMatches(@$"
"); + + component.SetParametersAndRender(parameters => + { + parameters.Add(p => p.Grows, true); + }); + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod, + DataRow(true), + DataRow(false) + ] + public void BitStackShouldRespectHorizontal(bool horizontal) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Horizontal, horizontal); + }); + + var fd = horizontal ? "row" : "column"; + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod] + public void BitStackShouldRespectHorizontalChangingAfterRender() + { + var component = RenderComponent(); + + component.MarkupMatches(@$"
"); + + component.SetParametersAndRender(parameters => + { + parameters.Add(p => p.Horizontal, true); + }); + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod, + DataRow(BitStackAlignment.Start), + DataRow(BitStackAlignment.End), + DataRow(BitStackAlignment.Center), + DataRow(BitStackAlignment.SpaceBetween), + DataRow(BitStackAlignment.SpaceAround), + DataRow(BitStackAlignment.SpaceEvenly), + DataRow(BitStackAlignment.Baseline), + DataRow(BitStackAlignment.Stretch) + ] + public void BitStackShouldRespectHorizontalAlign(BitStackAlignment horizontalAlign) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.HorizontalAlign, horizontalAlign); + }); + + var ai = _AlignmentMap[horizontalAlign]; + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod] + public void BitStackShouldRespectHorizontalAlignChangingAfterRender() + { + var component = RenderComponent(); + + component.MarkupMatches(@$"
"); + + component.SetParametersAndRender(parameters => + { + parameters.Add(p => p.HorizontalAlign, BitStackAlignment.SpaceBetween); + }); + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod, + DataRow(true), + DataRow(false) + ] + public void BitStackShouldRespectReversed(bool reversed) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Reversed, reversed); + }); + + var fd = reversed ? "column-reverse" : "column"; + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod] + public void BitStackShouldRespectReversedChangingAfterRender() + { + var component = RenderComponent(); + + component.MarkupMatches(@$"
"); + + component.SetParametersAndRender(parameters => + { + parameters.Add(p => p.Reversed, true); + }); + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod, + DataRow(BitStackAlignment.Start), + DataRow(BitStackAlignment.End), + DataRow(BitStackAlignment.Center), + DataRow(BitStackAlignment.SpaceBetween), + DataRow(BitStackAlignment.SpaceAround), + DataRow(BitStackAlignment.SpaceEvenly), + DataRow(BitStackAlignment.Baseline), + DataRow(BitStackAlignment.Stretch) + ] + public void BitStackShouldRespectBitStackAlignment(BitStackAlignment verticalAlign) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.VerticalAlign, verticalAlign); + }); + + var jc = _AlignmentMap[verticalAlign]; + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod] + public void BitStackShouldRespectVerticalAlignChangingAfterRender() + { + var component = RenderComponent(); + + component.MarkupMatches(@$"
"); + + component.SetParametersAndRender(parameters => + { + parameters.Add(p => p.VerticalAlign, BitStackAlignment.SpaceBetween); + }); + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod, + DataRow(true), + DataRow(false) + ] + public void BitStackShouldRespectWrap(bool wrap) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Wrap, wrap); + }); + + var style = wrap ? "flex-wrap:wrap" : null; + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod] + public void BitStackShouldRespectWrapChangingAfterRender() + { + var component = RenderComponent(); + + component.MarkupMatches(@$"
"); + + component.SetParametersAndRender(parameters => + { + parameters.Add(p => p.Wrap, true); + }); + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod, + DataRow(true, null), + DataRow(true, "2"), + DataRow(false, null), + DataRow(false, "2") + ] + public void BitStackShouldRespectGrowsAndGrow(bool grows, string grow) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Grow, grow); + parameters.Add(p => p.Grows, grows); + }); + + var style = (grow.HasValue() || grows) ? $"flex-grow:{(grow.HasValue() ? grow : "1")}" : null; + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod, + DataRow(true, true), + DataRow(true, false), + DataRow(false, true), + DataRow(false, false) + ] + public void BitStackShouldRespectHorizontalAndReversed(bool horizontal, bool reversed) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Horizontal, horizontal); + parameters.Add(p => p.Reversed, reversed); + }); + + var fd = $"{(horizontal ? "row" : "column")}{(reversed ? "-reverse" : null)}"; + + component.MarkupMatches(@$"
"); + } + + [DataTestMethod, + DataRow(true), + DataRow(false) + ] + public void BitStackShouldRespectHorizontalAndReversedAndHorizontalAlignAndVerticalAlign(bool horizontal) + { + var aligns = Enum.GetValues(typeof(BitStackAlignment)); + + foreach (BitStackAlignment horizontalAlign in aligns) + { + foreach (BitStackAlignment verticalAlign in aligns) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Horizontal, horizontal); + parameters.Add(p => p.VerticalAlign, verticalAlign); + parameters.Add(p => p.HorizontalAlign, horizontalAlign); + }); + + var fd = horizontal ? "row" : "column"; + var ai = _AlignmentMap[horizontal ? verticalAlign : horizontalAlign]; + var jc = _AlignmentMap[horizontal ? horizontalAlign : verticalAlign]; + + component.MarkupMatches(@$"
"); + } + } + } +}