public void RenderJavaScriptShouldHandleWaitForContentLoad(bool clientOnly, bool useServerSideRendering)
{
var environment = new Mock <IReactEnvironment>();
var config = new Mock <IReactSiteConfiguration>();
config.Setup(x => x.UseServerSideRendering).Returns(useServerSideRendering);
var reactIdGenerator = new Mock <IReactIdGenerator>();
var component = new ReactRouterComponent(environment.Object, config.Object, reactIdGenerator.Object, "Foo", "container", "/bar")
{
Props = new { hello = "World" },
ClientOnly = clientOnly
};
var result = component.RenderJavaScript(true);
if (clientOnly || !useServerSideRendering)
{
Assert.Equal(
@"window.addEventListener('DOMContentLoaded', function() {ReactDOM.render(React.createElement(Foo, {""hello"":""World""}), document.getElementById(""container""))});",
result
);
}
else
{
Assert.Equal(
@"window.addEventListener('DOMContentLoaded', function() {ReactDOM.hydrate(React.createElement(Foo, {""hello"":""World""}), document.getElementById(""container""))});",
result
);
}
}
public void RenderJavaScriptShouldNotIncludeContextOrPath(bool clientOnly, bool useServerSideRendering)
{
var environment = new Mock <IReactEnvironment>();
var config = new Mock <IReactSiteConfiguration>();
config.Setup(x => x.UseServerSideRendering).Returns(useServerSideRendering);
var reactIdGenerator = new Mock <IReactIdGenerator>();
var component = new ReactRouterComponent(environment.Object, config.Object, reactIdGenerator.Object, "Foo", "container", "/bar")
{
Props = new { hello = "World" },
ClientOnly = clientOnly,
};
var result = component.RenderJavaScript(false);
if (clientOnly || !useServerSideRendering)
{
Assert.Equal(
@"ReactDOM.render(React.createElement(Foo, {""hello"":""World""}), document.getElementById(""container""))",
result
);
}
else
{
Assert.Equal(
@"ReactDOM.hydrate(React.createElement(Foo, {""hello"":""World""}), document.getElementById(""container""))",
result
);
}
}
public void RenderJavaScriptShouldNotIncludeContextOrPath()
{
var environment = new Mock <IReactEnvironment>();
var config = new Mock <IReactSiteConfiguration>();
var component = new ReactRouterComponent(environment.Object, config.Object, "Foo", "container", "/bar")
{
Props = new { hello = "World" }
};
var result = component.RenderJavaScript();
Assert.Equal(
@"ReactDOM.hydrate(React.createElement(Foo, {""hello"":""World""}), document.getElementById(""container""))",
result
);
}
public void RenderJavaScriptShouldHandleWaitForContentLoad()
{
var environment = new Mock <IReactEnvironment>();
var config = new Mock <IReactSiteConfiguration>();
var reactIdGenerator = new Mock <IReactIdGenerator>();
var component = new ReactRouterComponent(environment.Object, config.Object, reactIdGenerator.Object, "Foo", "container", "/bar")
{
Props = new { hello = "World" }
};
var result = component.RenderJavaScript(true);
Assert.Equal(
@"window.addEventListener('DOMContentLoaded', function() {ReactDOM.hydrate(React.createElement(Foo, {""hello"":""World""}), document.getElementById(""container""))});",
result
);
}
/// <summary>
/// Create a React Router Component with context and add it to the list of components to render client side,
/// if applicable.
/// </summary>
/// <typeparam name="T">Type of the props</typeparam>
/// <param name="env">React Environment</param>
/// <param name="componentName">Name of the component</param>
/// <param name="props">Props to use</param>
/// <param name="path">F.x. from Request.Path. Used by React Static Router to determine context and routing.</param>
/// <param name="containerId">ID to use for the container HTML tag. Defaults to an auto-generated ID</param>
/// <param name="clientOnly">True if server-side rendering will be bypassed. Defaults to false.</param>
/// <returns></returns>
public static ReactRouterComponent CreateRouterComponent <T>(
this IReactEnvironment env,
string componentName,
T props,
string path,
string containerId = null,
bool clientOnly = false
)
{
var component = new ReactRouterComponent(
env,
AssemblyRegistration.Container.Resolve <IReactSiteConfiguration>(),
AssemblyRegistration.Container.Resolve <IReactIdGenerator>(),
componentName,
containerId,
path
)
{
Props = props,
};
return(env.CreateComponent(component, clientOnly) as ReactRouterComponent);
}
