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]
@gismofx are you writing tests in razor or cs files?
Egil Hansen
@egilhansen:matrix.org
[m]
In razor files its super easy. Just define a local variable in your test, and bind it to the parameter like normal, e.g. Render(@<MyComp @bind-Value="variable" />)
Then you trigger whatever you need in the component to make it update the value, e.g. a click handler, and then you can assert against the local variable.
With .cs based tests, you just need to both pass in the original variable to the "Value" parameter, and a func that should be invoked when the value changes to the "ValueChanged" parameter.
I'm on my phone now, so hard to show more code, but do let me know if it answers it for you.
gismofx
@gismofx
@egilhansen:matrix.org I'm doing tests in .cs. Ill take a crack at it and come back if any questions. Thanks!
Egil Hansen
@egilhansen:matrix.org
[m]
@gismofx: if you have a component MyComp with an input field that is linked/bound to a Value parameter, and when it is changed, the ValueChanged EventCallback is triggered, then the following should work:
var value = "initial";
var cut = RenderComponent<MyComp>(ps => ps.Add(p => p.Value, value).Add(p => p.ValueChanged, x => value = x)));

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

Assert.Equal("new value", value);
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.
Egil Hansen
@egilhansen:matrix.org
[m]
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