public static void RunTests()
{
Module("(Stateful) Component Tests");
Test("GetInitialState is called before first Render", assert =>
{
var done = assert.Async();
TestComponentMounter.Render(
new ComponentThatRendersTextFromItsState(),
container =>
{
container.Remove();
assert.StrictEqual(container.TextContent.Trim(), "Initial Text");
done();
}
);
});
Test("GetInitialState is called on base component from derived component (that doesn't override it) before first Render", assert =>
{
var done = assert.Async();
TestComponentMounter.Render(
new DerivedFromComponentThatRendersTextFromItsState(),
container =>
{
container.Remove();
assert.StrictEqual(container.TextContent.Trim(), "Initial Text");
done();
}
);
});
Test("GetInitialState may be called on base component from derived component that overrides it before first Render", assert =>
{
var done = assert.Async();
TestComponentMounter.Render(
new DerivedFromComponentThatRendersTextFromItsBaseStateWithAnAnnotation(),
container =>
{
container.Remove();
assert.StrictEqual(container.TextContent.Trim(), "Initial Text!");
done();
}
);
});
Test("Components support properties and fields", assert =>
{
var done = assert.Async();
TestComponentMounter.Render(
new ComponentThatRendersTextFromFieldsAndProperties(),
container =>
{
container.Remove();
assert.StrictEqual(container.TextContent.Trim(), "Test1-Test2");
done();
}
);
});
}
public static void RunTests()
{
Module("PureComponent Tests");
Test("PureComponent re-rendered with equivalent props should not have to re-render", assert =>
{
// We'll create a Container component that renders a PureComponent. Each component will make a callback when they render so that we can count how many times
// they render. The container also allows us a way to receive an async "forceReRender" method which we may call to force the Container to re-render. Since
// the PureComponent's props don't change, forcing a single re-render should result in the Container being rendered twice (once for the initial render
// and once for the re-render) but the PureComponent only being rendered once.
var done = assert.Async();
var numberOfContainerRenders = 0;
var numberOfPureComponentRenders = 0;
Func <Task> forceReRender = null;
TestComponentMounter.Render(
component: new Container(
onContainerRender: () => numberOfContainerRenders++,
onPureComponentRender: () => numberOfPureComponentRenders++,
reRenderProvider: force => forceReRender = force
),
ready: async container =>
{
await forceReRender();
assert.StrictEqual(numberOfContainerRenders, 2);
assert.StrictEqual(numberOfPureComponentRenders, 1);
container.Remove();
done();
}
);
});
Test("PureComponent Ref callback provides reference to mounted component", assert =>
{
const string name = "Test123";
var done = assert.Async();
TestComponentMounter.Render(
component: new ExamplePureComponentWithRefLogic(
name: name,
@ref: mountedComponent =>
{
// Ensure that we can access methods on the mountedComponent reference
assert.Equal(mountedComponent.GetName(), name);
done();
}
),
ready: container => { }
);
});
}
public static void RunTests()
{
Module("StatelessComponent Tests");
Test("Simple value-from-Props Render", assert =>
{
var done = assert.Async();
TestComponentMounter.Render(
new MyLabel("abc"),
container =>
{
container.Remove();
assert.StrictEqual(container.TextContent.Trim(), "abc");
done();
}
);
});
}
public static void RunTests()
{
Module("DataAttribute Tests");
Test("DOM.Div with null attributes", assert =>
{
var done = assert.Async();
TestComponentMounter.Render(
DOM.Div(null, "Hello"),
container => {
assert.Ok(true); // Only making sure that a null attributes references doesn't break thing (so no need to check markup)
done();
container.Remove();
}
);
});
Test("DOM.Div with ClassName-only attributes (no data attributes)", assert =>
{
var done = assert.Async();
TestComponentMounter.Render(
DOM.Div(new Attributes {
ClassName = "test"
}, "Hello"),
container => {
assert.Ok(true); // Only making sure that a null attributes references doesn't break thing (so no need to check markup)
done();
container.Remove();
}
);
});
Test("DOM.Div with ClassName and empty data value", assert =>
{
var done = assert.Async();
TestComponentMounter.Render(
DOM.Div(new Attributes {
ClassName = "test", Data = null
}, "Hello"),
container => {
assert.Ok(true); // Only making sure that a null attributes references doesn't break thing (so no need to check markup)
done();
container.Remove();
}
);
});
Test("DOM.Div with ClassName and data 'toggle' value", assert =>
{
var done = assert.Async();
TestComponentMounter.Render(
DOM.Div(new Attributes {
ClassName = "test", Data = new { toggle = "on" }
}, "Hello"),
container =>
{
container.Remove();
var div = container.QuerySelector("div.test") as HTMLElement;
if (div == null)
{
throw new Exception("Unable to locate 'test' div");
}
assert.StrictEqual(div.GetAttribute("data-toggle"), "on");
done();
}
);
});
Test("DOM.Div with ClassName and data 'toggle_me_on' value (to demonstrate underscore-to-hyphen string name replacement)", assert =>
{
var done = assert.Async();
TestComponentMounter.Render(
DOM.Div(new Attributes {
ClassName = "test", Data = new { toggle_me_on = "on" }
}, "Hello"),
container =>
{
container.Remove();
var div = container.QuerySelector("div.test") as HTMLElement;
if (div == null)
{
throw new Exception("Unable to locate 'test' div");
}
assert.StrictEqual(div.GetAttribute("data-toggle-me-on"), "on");
done();
}
);
});
}