huahaofeng
/
aspnetcore
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

E2E test showing rendering of RenderFragment

This commit is contained in:
Steve Sanderson 2018-02-16 10:09:10 +00:00
parent 7ad88a9406
commit 0595251ac2
3 changed files with 40 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
test/Microsoft.AspNetCore.Blazor.E2ETest/Tests/ComponentRenderingTest.cs
View File

@ -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<RenderBlockComponent>();
var appElement = MountTestComponent<RenderFragmentToggler>();
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<TComponent>() where TComponent: IComponent

67
test/testapps/BasicTestApp/RenderBlockComponent.cs
View File

@ -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;
}
}

32
test/testapps/BasicTestApp/RenderFragmentToggler.cshtml Normal file
View File

@ -0,0 +1,32 @@
@using Microsoft.AspNetCore.Blazor.RenderTree
<div>
<p>Fragment will be toggled below</p>
@if (showFragment)
{
@ExampleFragment
}
<button onclick=@{ showFragment = !showFragment; }>Toggle</button>
<p>The end</p>
</div>
@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()
// => @<p>Some text<div>Child text</div></p>; // 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();
};
}