Generic wrapper around testable component for required dependencies #1421
-
|
I'm testing a MudBlazor component that spawns another element using a @* PopoverProviderWrapper *@
<MudPopoverProvider />
@ChildContent
@code {
[Parameter]
public RenderFragment ChildContent { get; set; }
}var child = RenderComponent<MyChildComponent>(p =>
p.Add(x => x.Xyz, xyz)
);
var cut = RenderComponent<PopoverProviderWrapper>(p =>
p.AddChildContent(child)
);Is this the canonical way of doing it? I need the child to be an IRenderedComponent to do the actual testing, how do I make that work? Thank you! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 8 replies
-
|
Hey @danielchalmers you might want to checkout the following discussion we had earlier: #663 (reply in thread) Does that fit your needs? |
Beta Was this translation helpful? Give feedback.
-
|
Wow, thanks for taking time to reply on vacation - I'll look into everything you said and would be very grateful for any examples when you have the time. I have several unit tests but I'm also wanting to test the app itself. Going through typical user interactions like clicking a button to open a dialog, interact with it, then close that dialog. I'm not trying to test the 3rd party components as much as I'm trying to make sure it all works together. I was rendering a page and testing that, but I have the MudBlazor dialog provider in the MainLayout of the main app so I'm not able to find the dialogs due to only seeing the markup of the page. I want my tests to break due to changes in my dependencies because that would break it for the users anyway. Hope you enjoy your trip! |
Beta Was this translation helpful? Give feedback.
-
|
@linkdotnet Wanted to see if I could get some examples for this, no rush :) |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the ping! Totally forgot. Pardon me. My idea would be something like this: @inherits TestContext
@code {
[Fact]
public void MyTest()
{
var container = Render(@<MainLayout><Body><YourTestComponent/></Body></MainLayout>);
Services.AddScoped<MyService>(_ => new MyFakeService());
var cut = container.FindComponent<YourTestComponent>();
cut.Find("button").Click();
cut.Find("p").TextContent.Should().NotBeEmpty();
}
}Basically you're taking your Does that help you? |
Beta Was this translation helpful? Give feedback.
-
|
I think I'm trying to replace the custom layout plus child content: <MudPopoverProvider />
<MudDialogProvider />
@ChildContent
@code {
[Parameter]
public RenderFragment ChildContent { get; set; }
}var layout = RenderComponent<TestLayout>(wp =>
wp.AddChildContent<DataPointView>(p =>
p.Add(x => x.Point, point) // Required on first render.
)
);
var dpv = layout.FindComponent<DataPointView>();with my actual app's MainLayout: @inherits LayoutComponentBase
@inject ILogger<MainLayout> logger
<MudThemeProvider Theme="_theme" IsDarkMode="_isDarkMode" DefaultScrollbar />
<MudPopoverProvider />
<MudDialogProvider />
<div class="page">
@Body
</div>and something like: var dpv = RenderComponent<DataPointView>();
var layout = RenderComponent<MainLayout>(p =>
// Cannot implicitly convert type 'Microsoft.AspNetCore.Components.RenderFragment' to 'Microsoft.AspNetCore.Components.EventCallback'
p.Add(x => x.Body, dpv.Instance)
);But I think what I'm actually looking for is some kind of fluent builder that lets me define layouts and their children all at once with parameters and a better syntax than var layout = RenderComponent<MainLayout>(wp =>
{
var dpv = wp.RenderAndAddComponent<DataPointView>(
wp.Body,
p => p.Add(x => x.Point, point)
)
}
);
dpv.FindAll(".mud-toggle-item").Count.Should().Be(2);
cut.Find(".mud-link").Click(); // Open dialog (handled by MudDialogProvider in MainLayout)
layout.Find(".submit-button").Click(); // Submit the dialog which is located in the layout, not the DataPointView.Is that kind of feature outside the scope of the library if I worked out a PR? Ultimately I'm just looking to avoid creating a bunch of |
Beta Was this translation helpful? Give feedback.
-
|
You might be better of using the razor style code instead of "plain old cs" files. I think that would ease some of the code you have by a lot. |
Beta Was this translation helpful? Give feedback.
Hey @danielchalmers
you might want to checkout the following discussion we had earlier: #663 (reply in thread)
Does that fit your needs?