bUnit and MatBlazor bind-Value

[neroes]

Hi
I have a blazor project where i use MatBlazor Components,
but when i try to run it on my status component

Status:
    <MatSelectValue @bind-Value="@bucket.BucketStatus" Items="@statusOptions" ValueSelector="@(i=>i)" FullWidth="true"></MatSelectValue> <!--ValueSelector is nessasary for the dropdownlist to work-->

@code {
    [Parameter]
    public BucketModel bucket { get; set; }
}

which when i run

using var ctx = new TestContext();
var jsruntime = ctx.Services.AddMockJSRuntime();
var bucketParameter = ComponentParameterFactory.Parameter("bucket", bucket);
var cut = ctx.RenderComponent<BucketSection>(bucketParameter);

becomes

Status:
      <div class=""mat-select mdc-select mdc-select--filled"" style=""width: 100%"" id=""matBlazor_id_34e71d9c-4a07-48df-9467-781e17782b33"" >
        <div class=""mdc-select__anchor"">
          <span class=""mdc-select__ripple""></span>
          <span class=""mdc-select__selected-text ""></span>
          <span class=""mdc-select__dropdown-icon"">
            <svg class=""mdc-select__dropdown-icon-graphic"" viewBox=""7 10 10 5"">
              <polygon class=""mdc-select__dropdown-icon-inactive"" stroke=""none"" fill-rule=""evenodd"" points=""7 10 12 15 17 10""></polygon>
              <polygon class=""mdc-select__dropdown-icon-active"" stroke=""none"" fill-rule=""evenodd"" points=""7 15 12 10 17 15""></polygon>
            </svg>
          </span>
          <span class=""mdc-line-ripple""></span>
        </div>
        <div class=""mdc-select__menu mdc-menu mdc-menu-surface"" style=""width: 100%;"">
          <ul class=""mdc-list"">
            <li data-value=""0"" class=""mat-option mdc-list-item"" style="""" id=""matBlazor_id_48600f6c-c5d1-4122-b277-891d258be35a"" role=""option"" >
              <span class=""mdc-list-item__ripple""></span>
              <span class=""mdc-list-item__text"">Ignored</span>
            </li>
            <li data-value=""1"" class=""mat-option mdc-list-item"" style="""" id=""matBlazor_id_54f22045-f3e7-4b60-a26d-2c91592e997d"" role=""option"" >
              <span class=""mdc-list-item__ripple""></span>
              <span class=""mdc-list-item__text"">Await new occurence</span>
            </li>
            <li data-value=""2"" class=""mat-option mdc-list-item"" style="""" id=""matBlazor_id_b6f6354f-dc46-4cfe-82e0-44d34b977635"" role=""option"" >
              <span class=""mdc-list-item__ripple""></span>
              <span class=""mdc-list-item__text"">Resolve</span>
            </li>
            <li data-value=""3"" class=""mat-option mdc-list-item"" style="""" id=""matBlazor_id_ef769a25-7c8b-4bcf-a46f-b36f796d34a4"" role=""option"" >
              <span class=""mdc-list-item__ripple""></span>
              <span class=""mdc-list-item__text"">Not Evaluated</span>
            </li>
          </ul>
        </div>
      </div>

the intent however is that line 4 is supposed to look like this <span class=""mdc-select__selected-text "">@bucket.status</span>
anybody know how to fix this issue?

ps. i'm aware that the formatting of my code is awfully, so if somebody could tell me how to handle new lines in code sections that would also be great

[neroes]

if i set JSRuntimeMockMode.Strict then i get

System.AggregateException : One or more errors occurred. (The invocation of 'matBlazor.matTextField.init' with the argument [Microsoft.AspNetCore.Components.ElementReference] was not expected.)
---- Bunit.TestDoubles.UnplannedJSInvocationException : The invocation of 'matBlazor.matTextField.init' with the argument [Microsoft.AspNetCore.Components.ElementReference] was not expected.

[egil]

Hey, thanks for reaching out.

We will have to reach out to the MatBlazor folks and ask what is needed to emulate the their javascript code. I am no expert in it, but they can helpfully help.

[neroes]

that would be great, i'm really more of a backend developer trying my hand at some full stack so i'm kinda on open waters

[egil]

Lets ping @SamProf and see if they can help.

[egil]

ps. i'm aware that the formatting of my code is awfully, so if somebody could tell me how to handle new lines in code sections that would also be great

If you want to do format a block of code, you have to wrap it in triple ```. See the edits I made to your post.

[neroes]

thanks