Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Dec 06 22:15
    egil commented #574
  • Dec 06 15:12
    dnfadmin commented #575
  • Dec 06 15:12
    dependabot[bot] labeled #575
  • Dec 06 15:12
    dependabot[bot] opened #575
  • Dec 06 14:46
    rodolfograve commented #574
  • Dec 06 14:46
    rodolfograve synchronize #574
  • Dec 06 13:01
    egil commented #574
  • Dec 06 13:00
    rodolfograve commented #574
  • Dec 06 12:57
    rodolfograve synchronize #574
  • Dec 05 16:40
    egil commented #574
  • Dec 01 17:28
    egil commented #574
  • Dec 01 11:12
    rodolfograve edited #574
  • Dec 01 11:11
    rodolfograve synchronize #574
  • Dec 01 11:08
    rodolfograve commented #573
  • Dec 01 11:06
    dnfadmin commented #574
  • Dec 01 11:05
    rodolfograve edited #574
  • Dec 01 11:05
    rodolfograve edited #574
  • Dec 01 11:05
    rodolfograve edited #574
  • Dec 01 11:05
    rodolfograve edited #574
  • Dec 01 11:05
    rodolfograve edited #574
Egil Hansen
@egilhansen:matrix.org
[m]
Here we are passing in the initial value (optional), and then we're passing in a lambda that to the ValueChanged parameter. In the lambda we simply update the value field in the test, so we know that it was triggered.
Now, in a razor based test, the code is a little more simple:
var value = "initial"
var cut = Render(@<MyComp @bind-Value="value" />);

cut.Find("input").Change("new value");

Assert.Equal("new value", value);
These two tests does the same.
Obviously. I am assuming that doing a cut.Find("input").Change("new value"); triggers the MyComp component to push changes to its ValueChanged parameter.
Hope this helps.
Egil Hansen
@egilhansen:matrix.org
[m]
@gismofx: somebody actually had a similar question on StackOverflow, so here is a more detailed answer for you: https://stackoverflow.com/a/69141650/32809
gismofx
@gismofx
@egilhansen:matrix.org Thank you! I'm looking forward to implementing very soon. I'm asking the repo owners if they prefer cs tests over razor before I commit to the repo.
HUY Phan
@viethuyphan
Hi guys, Are there any ways to test the context menu of table (Syncfusion TreeGrid)? Thanks!
gismofx
@gismofx
I'm testing a component and it's display value is two-way bound. Using setparam doesn't seem to invoke the binding
Egil Hansen
@egilhansen:matrix.org
[m]
@gismofx: what is setparam?
gismofx
@gismofx
@egilhansen:matrix.org Good question... I didn't know either. It's a wrapper method in MudBlazor test project. https://github.com/MudBlazor/MudBlazor/blob/dev/src/MudBlazor.UnitTests/Extensions/IRenderedComponentExtensions.cs
now that I know that, I would rather to vanilla bunit
basically, I need to mockup user inputting data into the text field
I'm not checking the binding itself, but the rendering after the binding.. but this setparam doesn't seem to cut it
Egil Hansen
@egilhansen:matrix.org
[m]
Hmm not sure where to start helping you. Bunit comes with SetParametersAndRender that should work
My version, unlike theirs, is actually strongly typed: https://bunit.dev/docs/interaction/trigger-renders.html#setparametersandrender
gismofx
@gismofx
yea, I will try that
here's my component razor
<MudGrid>
    <MudItem xs="12" sm="4">
        <MudAutocomplete T="string" Label="US States" @bind-Value="ActiveStringHolder.StringValue" SearchFunc="@Search1" 
                         ResetValueOnEmptyText="@resetValueOnEmptyText" 
                         CoerceText="@coerceText" CoerceValue="@coerceValue"/>
    </MudItem>
    <MudItem xs="12" sm="4">
        <MudButton OnClick="(()=>ToggleValue())" Variant="Variant.Outlined">Toggle Value</MudButton>
    </MudItem>
    <MudItem xs="12" md="12" class="flex-column">
        <MudSwitch @bind-Checked="resetValueOnEmptyText" Color="Color.Primary">Reset Value on empty Text</MudSwitch>
        <MudSwitch @bind-Checked="coerceText" Color="Color.Secondary">Coerce Text to Value</MudSwitch>
        <MudSwitch @bind-Checked="coerceValue" Color="Color.Tertiary">Coerce Value to Text (if not found)</MudSwitch>
    </MudItem>
</MudGrid>
I'm changing the value of @bind-Value="ActiveStringHolder.StringValue" via the UI
so it should update the object
gismofx
@gismofx
Pressing the toggle button switches ActiveStringHolder's value
The display will update correctly. If the user changes the StringValue, it should update ActiveStringHolder and update the display
Egil Hansen
@egilhansen:matrix.org
[m]
Ok. are you a maintainer of mud blazor?
gismofx
@gismofx
@egilhansen:matrix.org a contributor :)
justin-feist
@justin-feist
Ok all, I am trying to write bUnit tests using razor files. Test Explorer (VS 2019) sees my "MessageCenter_RendersPage" test, but when it goes to actually execute I get a "No test matches the given testcase filter....." error in the Output window. The test is seen...but not really. I'm missing something, just not exactly sure what.
image.png
5 replies
gismofx
@gismofx
@egilhansen:matrix.org I'm trying more Vanilla approach. I am invoking a button click, but it does not seem to re-render as if I was really using the UI
        public async Task Autocomplete_ChangeBoundValue()
        {
            var comp = Context.RenderComponent<AutocompleteChangeBoundObjectTest>();
            Console.WriteLine(comp.Markup);
            var autocompletecomp = comp.FindComponent<MudAutocomplete<string>>();
            var autocomplete = autocompletecomp.Instance;
            autocompletecomp.SetParametersAndRender(parameters => parameters.Add(p=> p.DebounceInterval, 0));
            autocompletecomp.SetParametersAndRender(parameters => parameters.Add(p => p.CoerceText, true));
            // check initial state
            autocomplete.Value.Should().Be("Florida");
            autocomplete.Text.Should().Be("Florida");
            comp.WaitForAssertion(() => autocompletecomp.Find("input").GetAttribute("value").Should().Be("Florida"));//redundant?
            //Get the button to toggle the value
            var buttonElement = comp.Find("button");
            await comp.InvokeAsync(() => buttonElement.Click());
            autocomplete.Value.Should().Be("Georgia");
            autocomplete.Text.Should().Be("Georgia");
            comp.WaitForAssertion(() => autocompletecomp.Find("input").GetAttribute("value").Should().Be("Georgia"));//redundant?
            //Change the value of the current bound value component
            //insert "Calif"
            autocompletecomp.Find("input").Input("Alabam");
            await Task.Delay(100);
            var args = new KeyboardEventArgs();
            args.Key = "Enter";

            //press Enter key
            autocompletecomp.Find("input").KeyUp(args);

            //The value of the input should be California
            comp.WaitForAssertion(() => autocompletecomp.Find("input").GetAttribute("value").Should().Be("Alabama"));

            autocomplete.Value.Should().Be("Alabama");
            autocomplete.Text.Should().Be("Alabama");
            //Change the bound object
            var markup1 = autocompletecomp.Markup;
            await comp.InvokeAsync(()=> buttonElement.Click());
            //await comp.InvokeAsync(() => comp.Render());
            autocomplete.Value.Should().Be("Florida"); //pass
            autocomplete.Text.Should().Be("Florida"); //fail
            comp.WaitForAssertion(() => autocompletecomp.Find("input").GetAttribute("value").Should().Be("Florida"));//breaks here:
            var markup2 = autocompletecomp.Markup;
            autocomplete.Value.Should().Be("Florida");
            //autocomplete.Text.Should().Be("Florida");

            //Change the bound object back and check again.
            //await buttonComp.InvokeAsync(() => button.OnClick.InvokeAsync());
            await comp.InvokeAsync(() => buttonElement.Click());
            var t1 = autocompletecomp.Find("input").GetAttribute("value");
            var t2 = autocompletecomp.Find("input").GetAttribute("text");
            autocomplete.Value.Should().Be("Alabama");
            autocomplete.Text.Should().Be("Alabama");
        }
how-to-bunit.gif
gismofx
@gismofx
After the string value is changed via the UI and then toggled via the button, the value and text should change. Seems to work via the UI, but not via the test.
(Side note, it would be really cool if you could "record" a test. like the user interacts with the UI, then out spits some bunit api code to write a test with)
Egil Hansen
@egilhansen:matrix.org
[m]
@gismofx: I dont mind helping, but I need a minimal reproducable example that I can download and play with to help. If you can, create a QA in the dicsussion forum on GitHub.
gismofx
@gismofx
@egilhansen:matrix.org thanks! I'll put one together.
Egil Hansen
@egilhansen:matrix.org
[m]
🙂
Brett McDonald
@bfmsoft
[Fact]
public void RendersCorrectly() {
    using var ctx = new TestContext();

    var rc = ctx.RenderComponent<EditForm>(
        @<EditForm Model="TestData" >
            <DataAnnotationsValidator />
            <EnumInputSelect Id="TestCountryId"
                @bind-Value="TestData.TestCountry" @bind-Value:event="ValueChanged" />
            <ValidationSummary></ValidationSummary>
        </EditForm>
    );

    rc.MarkupMatches(
        @<form >
            <select id="TestCountryId" class="valid" value="0" >
                <option value="128">Default</option>
                <option value="129">UnitedStates</option>
            </select>
        </form>
    );

    rc.Find("#TestCountryId").Change("129");
    rc.Render();
    rc.MarkupMatches(
        @<form >
            <select id="TestCountryId" class="valid" value="129" >
                <option value="128">Default</option>
                <option value="129">UnitedStates</option>
            </select>
        </form>
    );
}
I am trying to test a component that basically is a fancy Select. I want to test the returned (for default). Then select on option and then test that is has changed. I feel I am close but The RenderComponent doesn't work? Is there a sample to look at?
SQL-MisterMagoo
@SQL-MisterMagoo
@bfmsoft I don't think RenderComponent<T> takes a RenderFragment like that - you probably just want Render(@<...your markup>)
Egil Hansen
@egilhansen:matrix.org
[m]
@SQL-MisterMagoo is correct :)
I choose to just call that method Render since you simple pass in a RenderFragment that you want if to render.
Egil Hansen
@egilhansen:matrix.org
[m]
I admit that Render<TCom>(RenderFragment) might confuse things. That is added as a shorthand for Render(@<MyComp...). FindComponent<MyComp>(). You use it when you need an IRenderedComponent instead of an IRenderedFragment that Render gives you. RenderComponent always return an IRenderedComponent.
Ps. An IRenderedComponent inherit from IRenderedFragment.
Brett McDonald
@bfmsoft
OK, my problem is if I used Render it returns RenderedFragment. I want to call Render later to rerender the component to reflect the Change (if you look at the fragment). Am I doing the process wrong? I would love a sample or something.
Egil Hansen
@egilhansen:matrix.org
[m]
See my comment above Brett
SQL-MisterMagoo
@SQL-MisterMagoo
oh that's nice! there's so much I have to learn still about bUnit, but I like to learn, so that's good
gismofx
@gismofx
@egilhansen:matrix.org I'm having trouble making a minimal example, but the complete example is on my repo https://github.com/gismofx/MudBlazor/blob/77dd2c1d2ee12d868982a20795f59754f4eecfa4/src/MudBlazor.UnitTests/Components/AutocompleteTests.cs#L607
4 replies
Egil Hansen
@egilhansen:matrix.org
[m]
Ok, I'll see if I can get some time to look at this tomorrow. Mind just creating a QA in the bunit discussion forum so i don't forget. It's almost midnight here in Iceland so I'm off to bed
gismofx
@gismofx
ah! get sleep :) Thanks! I actually made a few changes in my local copy that I just pushed to my repo. I will make a post in bunit repo.
goodnight
Egil Hansen
@egilhansen:matrix.org
[m]
Great. And thank!