diff --git a/test/Microsoft.AspNetCore.Blazor.E2ETest/Tests/ComponentRenderingTest.cs b/test/Microsoft.AspNetCore.Blazor.E2ETest/Tests/ComponentRenderingTest.cs index 5e2a55e568..aad402072d 100644 --- a/test/Microsoft.AspNetCore.Blazor.E2ETest/Tests/ComponentRenderingTest.cs +++ b/test/Microsoft.AspNetCore.Blazor.E2ETest/Tests/ComponentRenderingTest.cs @@ -166,13 +166,13 @@ namespace Microsoft.AspNetCore.Blazor.E2ETest.Tests } [Fact] - public void CanRenderRegionsWhilePreservingSurroundingElements() + public void CanRenderFragmentsWhilePreservingSurroundingElements() { // Initially, the region isn't shown - var appElement = MountTestComponent(); + var appElement = MountTestComponent(); var originalButton = appElement.FindElement(By.TagName("button")); - var regionElements = appElement.FindElements(By.CssSelector("p[name=region-element]")); - Assert.Empty(regionElements); + var fragmentElements = appElement.FindElements(By.CssSelector("p[name=fragment-element]")); + Assert.Empty(fragmentElements); // The JS-side DOM builder handles regions correctly, placing elements // after the region after the corresponding elements @@ -180,13 +180,13 @@ namespace Microsoft.AspNetCore.Blazor.E2ETest.Tests // When we click the button, the region is shown originalButton.Click(); - regionElements = appElement.FindElements(By.CssSelector("p[name=region-element]")); - Assert.Single(regionElements); + fragmentElements = appElement.FindElements(By.CssSelector("p[name=fragment-element]")); + Assert.Single(fragmentElements); // The button itself was preserved, so we can click it again and see the effect originalButton.Click(); - regionElements = appElement.FindElements(By.CssSelector("p[name=region-element]")); - Assert.Empty(regionElements); + fragmentElements = appElement.FindElements(By.CssSelector("p[name=fragment-element]")); + Assert.Empty(fragmentElements); } private IWebElement MountTestComponent() where TComponent: IComponent diff --git a/test/testapps/BasicTestApp/RenderBlockComponent.cs b/test/testapps/BasicTestApp/RenderBlockComponent.cs deleted file mode 100644 index ff68bc5846..0000000000 --- a/test/testapps/BasicTestApp/RenderBlockComponent.cs +++ /dev/null @@ -1,67 +0,0 @@ -// Copyright (c) .NET Foundation. All rights reserved. -// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information. - -using System; -using Microsoft.AspNetCore.Blazor.Components; -using Microsoft.AspNetCore.Blazor.RenderTree; - -namespace BasicTestApp -{ - public class RenderBlockComponent : IComponent, IHandleEvent - { - private RenderHandle _renderHandle; - private bool _showRegion; - - // Important: Notice that the sequence numbers inside the fragment are higher - // that the sequence numbers outside it. Without the region delimiter, the - // differencer would think the following nodes had been removed, then the - // region was inserted, followed by a new copy of the following nodes. That's - // not as efficient and wouldn't preserve focus etc. - private RenderFragment _exampleContent = builder => - { - builder.OpenElement(100, "p"); - builder.AddAttribute(101, "name", "region-element"); - builder.AddAttribute(102, "style", "color: red"); - builder.AddContent(103, "This is from the region"); - builder.CloseElement(); - }; - - public void Init(RenderHandle renderHandle) - => _renderHandle = renderHandle; - - public void SetParameters(ParameterCollection parameters) - => Render(); - - public void HandleEvent(UIEventHandler handler, UIEventArgs args) - { - // TODO: Remove the necessity to implement IHandleEvent if you just want - // the event handler to be called. Then call Render from inside the handler. - handler(args); - Render(); - } - - private void Render() => _renderHandle.Render(builder => - { - builder.OpenElement(0, "div"); // Container so we can see that passing through regions is OK - builder.AddContent(1, "Region will be toggled below "); - - if (_showRegion) - { - builder.AddContent(2, _exampleContent); - } - - builder.OpenElement(3, "button"); - builder.AddAttribute(4, "onclick", ToggleRegion); - builder.AddContent(5, "Toggle"); - builder.CloseElement(); - - builder.OpenElement(6, "p"); - builder.AddContent(7, "The end"); - builder.CloseElement(); - builder.CloseElement(); - }); - - private void ToggleRegion(UIEventArgs eventArgs) - => _showRegion = !_showRegion; - } -} diff --git a/test/testapps/BasicTestApp/RenderFragmentToggler.cshtml b/test/testapps/BasicTestApp/RenderFragmentToggler.cshtml new file mode 100644 index 0000000000..1c15a9037f --- /dev/null +++ b/test/testapps/BasicTestApp/RenderFragmentToggler.cshtml @@ -0,0 +1,32 @@ +@using Microsoft.AspNetCore.Blazor.RenderTree +
+

Fragment will be toggled below

+ + @if (showFragment) + { + @ExampleFragment + } + + +

The end

+
+ +@functions { + bool showFragment; + + static RenderFragment ExampleFragment = builder => + { + // TODO: Improve syntax + // Ideally we'd support inline Razor syntax here and are investigating this + // Could be: + // static RenderFragment ExampleFragment() + // => @

Some text

Child text

; // spaced over multiple lines, of course + // Failing that, we could have an C#-based representation, e.g., + // new Element.P { "Some text", new Element.Div { "Child text" } }, etc. + builder.OpenElement(100, "p"); + builder.AddAttribute(101, "name", "fragment-element"); + builder.AddAttribute(102, "style", "color: red"); + builder.AddContent(103, "This is from the fragment"); + builder.CloseElement(); + }; +}