bUnit is a testing library for Blazor components that make tests look, feel, and runs like regular unit tests. bUnit makes it easy to render and control a component under test’s life-cycle, pass parameter and inject services into it, trigger event handlers, and verify the rendered markup from the component using a built-in semantic HTML comparer.
With v2, IRenderedComponent<TComponent> is inherting from ComponentState.
A component can:
Be disposed
Have disposed event handlers
Have changes or be updated
During/after each render cycle (UpdateDisplayAsync):
Update renderer's RenderCount
Increment the IRenderedComponent.RenderCountIFFRenderTreeDiff.Edits.Count > 0
Component has been updated, has disposed event handlers, or been disposed, notify subscribers (wait-fors).
If any component has RenderTreeDiff.Edits.Count > 0, tell ROOT to recreate markup.
Track start and end indices for each component.
Create or update/patch a single DOM tree
Provide a way for each rendered component to return just the nodes they own.
DOM tree
NOTES and example below:
IRenderedComponent<BunitRootComponent> cut = Render(....);
IRenderedComponent<FooButton> button = cut.FindComponent<FooButton>();
button.Markup // slice of the cut.Markup
button.Nodes //
// Go from component (tree) to element
var buttonElementFromRoot = cut.Find("button");
var buttonElementFromFooButton = button.Find("button");
// Reuse of AngleSharp DOM nodes across rendered components
ReferenceEquals(buttonElementFromRoot, buttonElementFromFooButton);
// Go from element to component tree
IRenderedComponent<FooButton> comp = buttonElementFromFooButton.GetComponent<FooButton>();
// Should be able to see node changes without re-finding for them.
elm.Click();
elm.InnerText.Should().Be("Counter: 1");
With v2,
IRenderedComponent<TComponent>
is inherting fromComponentState
.A component can:
During/after each render cycle (
UpdateDisplayAsync
):RenderCount
IRenderedComponent.RenderCount
IFFRenderTreeDiff.Edits.Count > 0
RenderTreeDiff.Edits.Count > 0
, tell ROOT to recreate markup.DOM tree
NOTES and example below:
component: 4 ... 20 node: