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?