test: add tests

tests/LumexUI.Tests/Components/Listbox/ListboxTests.razor

@@ -66,8 +66,6 @@
         var items = cut.FindAll("li");
         items[0].Click();
 
-
-
         selectedValue.Should().Be("new");
         cut.Instance.Value.Should().Be("new");
     }

tests/LumexUI.Tests/Components/Select/SelectTests.razor

@@ -0,0 +1,197 @@
+@namespace LumexUI.Tests.Components
+@inherits TestContext
+
+@using Microsoft.Extensions.DependencyInjection
+@using LumexUI.Services
+@using TailwindMerge
+
+@code {
+    public SelectTests()
+    {
+        Services.AddSingleton<TwMerge>();
+        Services.AddSingleton<IPopoverService, PopoverService>();
+
+        var module = JSInterop.SetupModule("./_content/LumexUI/js/components/popover.bundle.js");
+        module.SetupVoid("popover.initialize", _ => true);
+        module.SetupVoid("popover.destroy", _ => true);
+    }
+
+    [Fact]
+    public void ShouldRenderCorrectly()
+    {
+        var action = () => Render(
+            @<LumexSelect TValue="string" Label="Favorite Animal">
+                <LumexSelectItem Value="@("penguin")">Penguin</LumexSelectItem>
+                <LumexSelectItem Value="@("zebra")">Zebra</LumexSelectItem>
+                <LumexSelectItem Value="@("shark")">Shark</LumexSelectItem>
+            </LumexSelect>
+        );
+
+        action.Should().NotThrow();
+    }
+
+    [Fact]
+    public void ShouldRenderCustomValueContent()
+    {
+        List<string> animals = ["penguin", "zebra", "shark"];
+
+        var cut = Render<LumexSelect<string>>(
+            @<LumexSelect TValue="string">
+                <ChildContent>
+                    @foreach(var animal in animals)
+                    {
+                        <LumexSelectItem Value="@animal">@animal</LumexSelectItem>
+                    }
+                </ChildContent>
+                <ValueContent Context="animal">
+                    @($"next {animal}")
+                </ValueContent>
+            </LumexSelect>
+        );
+
+        cut.Find("[data-slot=trigger]").Click();
+        cut.Find("li").Click();
+
+        cut.Find("[data-slot=value]").TextContent.Should().Be("next penguin");
+    }
+
+    [Fact]
+    public void ShouldRenderDescription()
+    {
+        var cut = Render(
+            @<LumexSelect TValue="string" Label="Favorite Animal" Description="Select your favorite animal">
+                <LumexSelectItem Value="@("penguin")">Penguin</LumexSelectItem>
+                <LumexSelectItem Value="@("zebra")">Zebra</LumexSelectItem>
+                <LumexSelectItem Value="@("shark")">Shark</LumexSelectItem>
+            </LumexSelect>
+        );
+
+        cut.Find("[data-slot=description]").Should().NotBeNull();
+    }
+
+    [Fact]
+    public void ShouldRenderErrorMessageWhenInvalid()
+    {
+        var cut = Render<LumexSelect<string>>(
+            @<LumexSelect TValue="string" 
+                          Label="Favorite Animal"
+                          ErrorMessage="You should select a zebra" 
+                          Invalid="@true">
+                <LumexSelectItem Value="@("penguin")">Penguin</LumexSelectItem>
+                <LumexSelectItem Value="@("zebra")">Zebra</LumexSelectItem>
+                <LumexSelectItem Value="@("shark")">Shark</LumexSelectItem>
+            </LumexSelect>
+        );
+
+        cut.Find("[data-slot=error-message]").Should().NotBeNull();
+    }
+
+    [Fact]
+    public void ShouldSetLabelPlacementOutsideWhenLabelAndLabelPlacementAreNotProvided()
+    {
+        var cut = Render<LumexSelect<string>>(
+            @<LumexSelect TValue="string">
+                <LumexSelectItem Value="@("penguin")">Penguin</LumexSelectItem>
+                <LumexSelectItem Value="@("zebra")">Zebra</LumexSelectItem>
+                <LumexSelectItem Value="@("shark")">Shark</LumexSelectItem>
+            </LumexSelect>
+        );
+
+        cut.Instance.LabelPlacement.Should().Be(LabelPlacement.Outside);
+    }
+
+    [Fact]
+    public void ShouldSelectSingleItem()
+    {
+        var selectedValue = "";
+        var cut = Render<LumexSelect<string>>(
+            @<LumexSelect Label="Favorite Animal" @bind-Value="@selectedValue">
+                <LumexSelectItem Value="@("penguin")">Penguin</LumexSelectItem>
+                <LumexSelectItem Value="@("zebra")">Zebra</LumexSelectItem>
+                <LumexSelectItem Value="@("shark")">Shark</LumexSelectItem>
+            </LumexSelect>
+        );
+
+        cut.Find("[data-slot=trigger]").Click();
+
+        var items = cut.FindAll("li");
+        items[0].Click();
+
+        selectedValue.Should().Be("penguin");
+        cut.Instance.Value.Should().Be("penguin");
+    }
+
+    [Fact]
+    public void ShouldSelectMultipleItems()
+    {
+        ICollection<string> selectedValues = [];
+        var cut = Render<LumexSelect<string>>(
+            @<LumexSelect Label="Favorite Animal" @bind-Values="@selectedValues">
+                <LumexSelectItem Value="@("penguin")">Penguin</LumexSelectItem>
+                <LumexSelectItem Value="@("zebra")">Zebra</LumexSelectItem>
+                <LumexSelectItem Value="@("shark")">Shark</LumexSelectItem>
+            </LumexSelect>
+        );
+
+        cut.Find("[data-slot=trigger]").Click();
+
+        var items = cut.FindAll("li");
+        items[0].Click();
+        items[1].Click();
+
+        selectedValues.Should().HaveCount(2);
+        selectedValues.Should().Contain("penguin").And.Contain("zebra");
+        cut.Instance.Values.Should().HaveCount(2);
+        cut.Instance.Values.Should().Contain("penguin").And.Contain("zebra");
+    }
+
+    [Fact]
+    public void ShouldNotTriggerDropdownWhenReadonly()
+    {
+        var cut = Render(
+            @<LumexSelect TValue="string" Label="Favorite Animal" ReadOnly="@true">
+                <LumexSelectItem Value="@("penguin")">Penguin</LumexSelectItem>
+                <LumexSelectItem Value="@("zebra")">Zebra</LumexSelectItem>
+                <LumexSelectItem Value="@("shark")">Shark</LumexSelectItem>
+            </LumexSelect>
+        );
+        var action = () => cut.Find("[data-slot=listbox]");
+
+        cut.Find("[data-slot=trigger]").Click();
+
+        action.Should().Throw<ElementNotFoundException>();
+    }
+
+    [Fact]
+    public void ShouldThrowWhenValueAndValuesProvided()
+    {
+        string selectedValue = "";
+        ICollection<string> selectedValues = [];
+        var action = () => Render(
+            @<LumexSelect Label="Favorite Animal" @bind-Value="@selectedValue" @bind-Values="@selectedValues">
+                <LumexSelectItem Value="@("penguin")">Penguin</LumexSelectItem>
+                <LumexSelectItem Value="@("zebra")">Zebra</LumexSelectItem>
+                <LumexSelectItem Value="@("shark")">Shark</LumexSelectItem>
+            </LumexSelect>
+        );
+
+        action.Should().Throw<InvalidOperationException>();
+    }
+
+    [Fact]
+    public void ShouldThrowWhenItemValueIsNull()
+    {
+        List<string> animals = [null, "zebra", "shark"];
+
+        var action = () => Render(
+            @<LumexSelect TValue="string" Label="Favorite Animal">
+                @foreach( var animal in animals )
+                {
+                    <LumexSelectItem Value="@animal">@animal</LumexSelectItem>
+                }
+            </LumexSelect>
+        );
+
+        action.Should().Throw<InvalidOperationException>();
+    }
+}