A testing library for Blazor components. Get started testing Blazor components at https://bunit.dev
Anyway, when you get it working, do post a sample in the discussions forum under the show and tell category. Will likely be very useful to others.
[Inject]
private IState<CounterState> CounterState { get; set; } https://github.com/mrpmorris/Fluxor/blob/master/Tutorials/02-Blazor/02A-StateActionsReducersTutorial/README.md
Anyway, it does seem like you can just mock or even better, create fake of
IState, and then in your test, write Services.AddSingleton<IState<CounterState>>(new FakeState(....))
PS: @camelCaseSharp -> https://gitter.im/mrpmorris/fluxor
If you are interested
Hi Egil. I'm writing some tests and running into an issue with context menus. Our solution is using a nuget package (Blazor.ContextMenu v.1.8.0) for context menus in our app. It seems like they may be using the HTML 'oncontextmenu' event rather than the blazor '@oncontextmenu' event, would that make it so that the Element.ContextMenu() call in BUnit can't find the event?
its like they have a c# method that is javascript invocable. If thats the case, you can simply invoke that method yourself.
It looks like they are calling a method in their component called ShowMenu and HideMenu: https://github.com/stavroskasidis/BlazorContextMenu/blob/master/BlazorContextMenu/wwwroot/blazorContextMenu.js#L177
But actually, you might jus be able to get one of these out of the services collection and use that: https://github.com/stavroskasidis/BlazorContextMenu/blob/master/BlazorContextMenu/Services/BlazorContextMenuService.cs#L10
It has hide and show menu methods
That's a good find on the service. It doesn't seem like making the call on the service actually changes my html at this point. Should I be able to call instance methods on their component from my code? It doesn't seem like the ShowMenu and HideMenu methods are publicly available for me to call something like cut.ShowMenu() in my test code.
Otherwise, you can always try to find components in the component tree by using
cut.FindComponent<TypeOfComponent>()
Then you can do e.g.
var menu = cut.FindComponent<ContextMenu>() and then inspect menu.Instanceto see what options you have on the component.
So some times I really want to kick myself for not thinking of something earlier. This is one of those times. This morning I realized that the inline render fragment syntax in razor has the potential for much better razor based tests.
Have small spike, where this is possible:
@inherits TestComponentBase2
@code
{
[Fact]
public void Test1()
{
var cut = RenderFragment(@<div>hello world</div>);
cut.MarkupMatches(@<div>hello world</div>);
}
[Fact]
public void Test2()
{
var cut = RenderComponent<Counter>(@<Counter DarkMode="true">
</Counter>);
Assert.True(cut.Instance.DarkMode);
}
[Fact]
public void Counter_Increments_When_Button_Is_Clicked()
{
var cut = RenderFragment(@<Counter DarkMode="true" />);
cut.Find("button").Click();
cut.Find("p").MarkupMatches(@<p>Current count: 1</p>);
}
}What do you guys think?
I like it a lot
If I want to test a component that has phases. It returns state one and then after it finishes loading returns another state. How can I tell the CUT to rerender after I change the MOQ so it will return the second state? Basically, I want to do the first MarkupMatches(Frag1), change the MOQ so will return the second state, then "somehow tell component to rerender" then do Second MarkupMatches(Frag2)?
Otherwise, how does it work in a real app?
Anyway, to answer your question, you can always call
cut.Render() or cut.SetParametersAndRender(...) if you need to pass new parameters.
Here is the relevant doc: https://bunit.egilhansen.com/docs/interaction/trigger-renders.html
That will return a IRenderedComponent<TComponent>
Running into some behavior I don't understand. I have a Page component. The Page has a Form component. The Form has controls on it. I am asserting on the contents of the form. I have one particular test where the contents of the form controls are not what I'm expecting. When I examine the markup of the Page, the contents are exactly what I expect to see. But when I examine the contents of the form IRenderFragment, retrieved with _RenderedPage.FindComponent<Form>(), they are different, containing values that were set previously in the test but that were subsequently cleared out.
What could be going on here? Is there some need to refresh something? Is there some race condition?
Hi @demonsweatlive, not sure without seeing any code, but it could be a race condition. For that, you might need this: https://bunit.egilhansen.com/docs/verification/async-assertion.html
There is also this method: https://bunit.egilhansen.com/docs/interaction/awaiting-async-state.html
IRenderedComponent<Page> _RenderedPage = context.RenderComponent<Page>(); // initialised early in test//in assertion phase
var markup = _RenderedPage.Markup; //<-------- This markup has exactly what I expect for the Form component.
var form = _RenderedPage.FindComponent<Form>();
var formMarkup = form.Markup; // <---------- This markup is different. It has outdated values
How can they be different?
I have to run pick up the kids, but if you can create a minimal example that reproduces this issue and share it in the github repo through an issue, that would be great.
From what you are telling me it should not be different.
Very difficult to understand what it is about this particular test that could be causing this.
The governor of (Texas?) told him that he expected to lose his seat but was re-elected, and Trump is more popular than him so there is no way Trump could have lost
This guy ran a country?
@mrpmorris its impressive indeed. But thankfully he needs to convince the courts, and so far that has not been going great.