Skip to content

Improve server side only rendering #497

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 13 commits into from
Closed

Improve server side only rendering #497

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
e34b196
Add ServerOnly property to IReactComponent
Jan 15, 2018
f0ceb0c
Only render JavaScript if component is not server-side only
Jan 15, 2018
4fc5216
Update tests
Jan 15, 2018
71c6577
Don't render container for server side only components
Jan 15, 2018
5f4af50
Add ServerOnly property to IReactComponent
Jan 15, 2018
93c066b
Only render JavaScript if component is not server-side only
Jan 15, 2018
6f1f987
Update tests
Jan 15, 2018
3abfe49
Don't render container for server side only components
Jan 15, 2018
3a4dc48
Update xml documentation
Jan 16, 2018
df64c9c
Merge
Jan 16, 2018
5b1f830
Remove package-lock.json files
Jan 16, 2018
d738996
Fix line endings
Jan 16, 2018
12d731b
Fix line endings
Jan 16, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Update tests
  • Loading branch information
Gustav Tonér committed Jan 16, 2018
commit 6f1f987184a6b2b8a34ec47f2491b705c4825355
13 changes: 12 additions & 1 deletion tests/React.Tests/Core/ReactEnvironmentTest.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/*
/*
* Copyright (c) 2014-Present, Facebook, Inc.
* All rights reserved.
*
Expand Down Expand Up @@ -137,6 +137,17 @@ public void CreatesIReactComponent()
Assert.Equal(";\r\n", environment.GetInitJavaScript());
}

[Fact]
public void ServerSideOnlyComponentRendersNoJavaScript()
{
var mocks = new Mocks();
var environment = mocks.CreateReactEnvironment();

environment.CreateComponent("HelloWorld", new { name = "Daniel" }, serverOnly: true);

Assert.Equal(string.Empty, environment.GetInitJavaScript());
}

public class Mocks
{
public Mock<PooledJsEngine> Engine { get; private set; }
Expand Down
244 changes: 124 additions & 120 deletions tests/React.Tests/Mvc/HtmlHelperExtensionsTests.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,123 +7,127 @@
* of patent rights can be found in the PATENTS file in the same directory.
*/

using Moq;
using React.Web.Mvc;
using Xunit;

namespace React.Tests.Mvc
{
public class HtmlHelperExtensionsTests
{
/// <summary>
/// Creates a mock <see cref="IReactEnvironment"/> and registers it with the IoC container
/// This is only required because <see cref="HtmlHelperExtensions"/> can not be
/// injected :(
/// </summary>
private Mock<IReactEnvironment> ConfigureMockEnvironment()
{
var environment = new Mock<IReactEnvironment>();
AssemblyRegistration.Container.Register(environment.Object);
return environment;
}

[Fact]
public void ReactWithInitShouldReturnHtmlAndScript()
{
var component = new Mock<IReactComponent>();
component.Setup(x => x.RenderHtml(false, false, null)).Returns("HTML");
component.Setup(x => x.RenderJavaScript()).Returns("JS");
var environment = ConfigureMockEnvironment();
environment.Setup(x => x.CreateComponent(
"ComponentName",
new {},
null,
false
)).Returns(component.Object);

var result = HtmlHelperExtensions.ReactWithInit(
htmlHelper: null,
componentName: "ComponentName",
props: new { },
htmlTag: "span"
);
Assert.Equal(
"HTML" + System.Environment.NewLine + "<script>JS</script>",
result.ToString()
);
}

[Fact]
public void EngineIsReturnedToPoolAfterRender()
{
var component = new Mock<IReactComponent>();
component.Setup(x => x.RenderHtml(true, true, null)).Returns("HTML");
var environment = ConfigureMockEnvironment();
environment.Setup(x => x.CreateComponent(
"ComponentName",
new { },
null,
true
)).Returns(component.Object);

environment.Verify(x => x.ReturnEngineToPool(), Times.Never);
var result = HtmlHelperExtensions.React(
htmlHelper: null,
componentName: "ComponentName",
props: new { },
htmlTag: "span",
clientOnly: true,
serverOnly: true
);
component.Verify(x => x.RenderHtml(It.Is<bool>(y => y == true), It.Is<bool>(z => z == true), null), Times.Once);
environment.Verify(x => x.ReturnEngineToPool(), Times.Once);
}

[Fact]
public void ReactWithClientOnlyTrueShouldCallRenderHtmlWithTrue()
{
var component = new Mock<IReactComponent>();
component.Setup(x => x.RenderHtml(true, true, null)).Returns("HTML");
var environment = ConfigureMockEnvironment();
environment.Setup(x => x.CreateComponent(
"ComponentName",
new {},
null,
true
)).Returns(component.Object);

var result = HtmlHelperExtensions.React(
htmlHelper: null,
componentName: "ComponentName",
props: new { },
htmlTag: "span",
clientOnly: true,
serverOnly: true
);
component.Verify(x => x.RenderHtml(It.Is<bool>(y => y == true), It.Is<bool>(z => z == true), null), Times.Once);
}

[Fact]
public void ReactWithServerOnlyTrueShouldCallRenderHtmlWithTrue() {
var component = new Mock<IReactComponent>();
component.Setup(x => x.RenderHtml(true, true, null)).Returns("HTML");
var environment = ConfigureMockEnvironment();
environment.Setup(x => x.CreateComponent(
"ComponentName",
new { },
null,
true
)).Returns(component.Object);

var result = HtmlHelperExtensions.React(
htmlHelper: null,
componentName: "ComponentName",
props: new { },
htmlTag: "span",
clientOnly: true,
serverOnly: true
);
component.Verify(x => x.RenderHtml(It.Is<bool>(y => y == true), It.Is<bool>(z => z == true), null), Times.Once);
}
}
}
using Moq;
using Xunit;
using React.Web.Mvc;

namespace React.Tests.Mvc
{
public class HtmlHelperExtensionsTests
{
/// <summary>
/// Creates a mock <see cref="IReactEnvironment"/> and registers it with the IoC container
/// This is only required because <see cref="HtmlHelperExtensions"/> can not be
/// injected :(
/// </summary>
private Mock<IReactEnvironment> ConfigureMockEnvironment()
{
var environment = new Mock<IReactEnvironment>();
AssemblyRegistration.Container.Register(environment.Object);
return environment;
}

[Fact]
public void ReactWithInitShouldReturnHtmlAndScript()
{
var component = new Mock<IReactComponent>();
component.Setup(x => x.RenderHtml(false, false, null)).Returns("HTML");
component.Setup(x => x.RenderJavaScript()).Returns("JS");
var environment = ConfigureMockEnvironment();
environment.Setup(x => x.CreateComponent(
"ComponentName",
new {},
null,
false,
false
)).Returns(component.Object);

var result = HtmlHelperExtensions.ReactWithInit(
htmlHelper: null,
componentName: "ComponentName",
props: new { },
htmlTag: "span"
);
Assert.Equal(
"HTML" + System.Environment.NewLine + "<script>JS</script>",
result.ToString()
);
}

[Fact]
public void EngineIsReturnedToPoolAfterRender()
{
var component = new Mock<IReactComponent>();
component.Setup(x => x.RenderHtml(true, true, null)).Returns("HTML");
var environment = ConfigureMockEnvironment();
environment.Setup(x => x.CreateComponent(
"ComponentName",
new { },
null,
true,
false
)).Returns(component.Object);

environment.Verify(x => x.ReturnEngineToPool(), Times.Never);
var result = HtmlHelperExtensions.React(
htmlHelper: null,
componentName: "ComponentName",
props: new { },
htmlTag: "span",
clientOnly: true,
serverOnly: false
);
component.Verify(x => x.RenderHtml(It.Is<bool>(y => y == true), It.Is<bool>(z => z == false), null), Times.Once);
environment.Verify(x => x.ReturnEngineToPool(), Times.Once);
}

[Fact]
public void ReactWithClientOnlyTrueShouldCallRenderHtmlWithTrue()
{
var component = new Mock<IReactComponent>();
component.Setup(x => x.RenderHtml(true, true, null)).Returns("HTML");
var environment = ConfigureMockEnvironment();
environment.Setup(x => x.CreateComponent(
"ComponentName",
new {},
null,
true,
false
)).Returns(component.Object);

var result = HtmlHelperExtensions.React(
htmlHelper: null,
componentName: "ComponentName",
props: new { },
htmlTag: "span",
clientOnly: true,
serverOnly: false
);
component.Verify(x => x.RenderHtml(It.Is<bool>(y => y == true), It.Is<bool>(z => z == false), null), Times.Once);
}

[Fact]
public void ReactWithServerOnlyTrueShouldCallRenderHtmlWithTrue() {
var component = new Mock<IReactComponent>();
component.Setup(x => x.RenderHtml(false, true, null)).Returns("HTML");
var environment = ConfigureMockEnvironment();
environment.Setup(x => x.CreateComponent(
"ComponentName",
new { },
null,
false,
true
)).Returns(component.Object);

var result = HtmlHelperExtensions.React(
htmlHelper: null,
componentName: "ComponentName",
props: new { },
htmlTag: "span",
clientOnly: false,
serverOnly: true
);
component.Verify(x => x.RenderHtml(It.Is<bool>(y => y == false), It.Is<bool>(z => z == true), null), Times.Once);
}
}
}