lots of updates to docs and child content/params handling

Author: egil

sample/src/Components/ThemeInfo.cs

@@ -8,9 +8,6 @@ namespace Egil.RazorComponents.Testing.Library.SampleApp.Components
 {
     public class ThemeInfo
     {
-        private const string DEFAULT_BUTTON_CLASS = "btn btn-primary";
-        private string _buttonClass = DEFAULT_BUTTON_CLASS;
-
-        public string Class { get => _buttonClass; set => _buttonClass = value ?? DEFAULT_BUTTON_CLASS; }
+        public string? Value { get; set; }
     }
 }

sample/src/Components/ThemedButton.razor

@@ -1,12 +1,12 @@
-<button class=@(Theme?.Class ?? "") @attributes="Attributes">
+<button class=@(Theme?.Value ?? "NO-THEME") @attributes="Attributes">
     @ChildContent
 </button>
 @code {
     [Parameter(CaptureUnmatchedValues = true)]
     public IReadOnlyDictionary<string, object> Attributes { get; set; }
 
     [CascadingParameter]
-    public ThemeInfo Theme { get; set; }
+    public ThemeInfo? Theme { get; set; }
 
     [Parameter]
     public RenderFragment ChildContent { get; set; }

sample/src/Components/ThemedElement.razor

@@ -0,0 +1,18 @@
+<div class=@(Class?.Value ?? "") title=@(Title?.Value ?? "")>
+    @ChildContent
+</div>
+@code {
+    [CascadingParameter(Name = nameof(Class))]
+    public ThemeInfo? Class { get; set; }
+
+    [CascadingParameter(Name = nameof(Title))]
+    public ThemeInfo? Title { get; set; }
+
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    protected override void OnAfterRender(bool firstRender)
+    {
+        base.OnAfterRender(firstRender);
+    }
+}

sample/src/Pages/Index.razor

@@ -10,5 +10,5 @@ Welcome to your new app.
 
 
 @code {
-    private ThemeInfo theme = new ThemeInfo { Class = "btn btn-primary" };
+    private ThemeInfo theme = new ThemeInfo { Value = "btn btn-primary" };
 }

sample/tests/CodeOnlyTests/Components/CounterTest.cs

@@ -10,7 +10,7 @@
 
 namespace Egil.RazorComponents.Testing.Library.SampleApp.CodeOnlyTests
 {
-    public class CounterTest : TestContext
+    public class CounterTest : ComponentTestFixture
     {
         [Fact]
         public void InitialHtmlIsCorrect()

sample/tests/CodeOnlyTests/Components/FetchDataTest.cs

@@ -12,7 +12,7 @@
 
 namespace Egil.RazorComponents.Testing.Library.SampleApp.CodeOnlyTests
 {
-    public class FetchDataTest : TestContext
+    public class FetchDataTest : ComponentTestFixture
     {
         class MockForecastService : IWeatherForecastService
         {
@@ -44,12 +44,12 @@ public void AfterDataLoadsItIsDisplayedInAForecastTable()
             var forecasts = new[] { new WeatherForecast { Date = DateTime.Now, Summary = "Testy", TemperatureC = 42 } };
             var cut = RenderComponent<FetchData>();
             var initialHtml = cut.GetMarkup();
-            var expectedDataTable = RenderComponent<ForecastDataTable>((nameof(ForecastDataTable.Forecasts), forecasts));
 
             // act
             WaitForNextRender(() => mockForecastService.Task.SetResult(forecasts));
 
             // assert
+            var expectedDataTable = RenderComponent<ForecastDataTable>((nameof(ForecastDataTable.Forecasts), forecasts));
             cut.CompareTo(initialHtml)
                 .ShouldHaveChanges(
                     diff => diff.ShouldBeRemoval("<p><em>Loading...</em></p>"),

sample/tests/CodeOnlyTests/Components/PassingChildContentTest.cs

@@ -0,0 +1,44 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Egil.RazorComponents.Testing.Library.SampleApp.Components;
+using Egil.RazorComponents.Testing.Asserting;
+using Shouldly;
+using Xunit;
+
+namespace Egil.RazorComponents.Testing.Library.SampleApp.CodeOnlyTests.Components
+{
+    public class PassingChildContentTest : ComponentTestFixture
+    {
+        [Fact(DisplayName = "Markup passed to child content is rendered as expected")]
+        public void Test001()
+        {
+            var markup = "<h1>HELLO WORLD</h1>";
+
+            var cut = RenderComponent<ThemedButton>(ChildContent(markup));
+
+            cut.Find("button").ChildNodes.ShouldBe(markup);
+        }
+
+        [Fact(DisplayName = "A component render fragment passed to child content is rendered as expected")]
+        public void Test002()
+        {
+            // arrange
+            var expectedChildContent = RenderComponent<ThemedButton>(("id", "test"));
+
+            // act
+            var cut = RenderComponent<ThemedElement>(
+                // creates child content parameter that renders a 
+                // fragment that creates a ThemedButton component with the provided params
+                ChildContent<ThemedButton>(("id", "test")) 
+            );
+
+            // assert by going through ThemedElement's root DIV
+            cut.Find("div").ChildNodes.ShouldBe(expectedChildContent);
+            // assert by finding the child content by its ID tag and comparing to the expected
+            cut.Find("#test").ShouldBe(expectedChildContent);
+        }
+    }
+}

sample/tests/CodeOnlyTests/Components/ThemedButtonTest.cs

@@ -0,0 +1,49 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components;
+using Egil.RazorComponents.Testing.Library.SampleApp.Components;
+using Xunit;
+using Shouldly;
+
+namespace Egil.RazorComponents.Testing.Library.SampleApp.CodeOnlyTests.Components
+{
+    public class ThemedXXTest : ComponentTestFixture
+    {
+        [Fact(DisplayName = "Themed button uses provided theme info to set class attribute")]
+        public void Test001()
+        {
+            // arrange
+            var theme = new ThemeInfo() { Value = "BUTTON" };
+
+            // act
+            var cut = RenderComponent<ThemedButton>(
+                CascadingValue(theme)
+            );
+
+            // assert
+            cut.Find("button").ClassList.ShouldContain(theme.Value);
+        }
+
+        [Fact(DisplayName = "Named cascading values are passed to components")]
+        public void Test002()
+        {
+            // arrange
+            var classTheme = new ThemeInfo() { Value = "FOO" };
+            var titleTheme = new ThemeInfo() { Value = "BAR" };
+
+            // act
+            var cut = RenderComponent<ThemedElement>(
+                CascadingValue(nameof(ThemedElement.Class), classTheme),
+                CascadingValue(nameof(ThemedElement.Title), titleTheme)
+            );
+
+            // assert
+            var elm = cut.Find("div");
+            elm.ClassList.ShouldContain(classTheme.Value);
+            elm.GetAttribute("title").ShouldContain(titleTheme.Value);
+        }
+    }
+}

sample/tests/CodeOnlyTests/Components/ThemedXXTest.cs

@@ -12,7 +12,7 @@
 
 namespace Egil.RazorComponents.Testing.Library.SampleApp.CodeOnlyTests
 {
-    public class TodoItemTest : TestContext
+    public class TodoItemTest : ComponentTestFixture
     {
         [Fact(DisplayName = "When no Todo is passed to item an exception is thrown")]
         public void Test001()
@@ -38,10 +38,9 @@ public void Test003()
         {
             var todo = new Todo { Id = 42, Text = "Hello world" };
             var completedId = 0;
-            var onCompleteHandler = EventCallback.Factory.Create(this, (int id) => completedId = id);
             var cut = RenderComponent<TodoItem>(
                 (nameof(TodoItem.Todo), todo),
-                (nameof(TodoItem.OnCompleted), onCompleteHandler)
+                EventCallback(nameof(TodoItem.OnCompleted), (int id) => completedId = id)
             );
 
             cut.Find("li").Click();