bUnit with MatBlazor components (OnValidSubmit) #248
-
|
Hi, I have the following example code that uses MatBlazor components and validation: The generated code looks like the following (IDs are shortened for regex matching): The login-Model is fairly simple: My testing code looks like the following: But neither the Button So I think in order to solve this issue I have to find out how to populate input into the form text fields. Thank you very much in advance |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 6 replies
-
|
Hi @minimalisticMe, I moved this to the discussions forum. Anyway, the easiest way to figure out what events are bound to what elements is to simply inspect According to your post, your I hope this helps. |
Beta Was this translation helpful? Give feedback.
-
|
Using @egil Might this be a bug? Edit: I am using bUnit 1.0.0-beta-11 |
Beta Was this translation helpful? Give feedback.
-
|
Please see attached a minimal example with that I can reproduce this issue. |
Beta Was this translation helpful? Give feedback.
-
|
I think the issue lies within Meaning the first time |
Beta Was this translation helpful? Give feedback.
-
|
OK, so I figured out why you are probably confused, and the reason is an unfortunate limitation in bUnit, that might be fixed in the future. Any nodes found using Instead, try to use Anyway, I modified @page "/counter"
@using BugRepro.Classes
<h1>Counter</h1>
<EditForm Model="login" OnValidSubmit="@LoginSubmit">
<DataAnnotationsValidator />
<p>
<MatBlazor.MatTextField @bind-Value="@login.Mail" Label="Mail-Address" Icon="mail_outline" Dense="true"></MatBlazor.MatTextField>
<ValidationMessage For="@(() => login.Mail)" />
</p>
<p>
<MatBlazor.MatTextField @bind-Value="@login.Password" Label="Password" Icon="lock_outline" Type="password"></MatBlazor.MatTextField>
<ValidationMessage For="@(() => login.Password)" />
</p>
<p>
<MatBlazor.MatButton Label="Login" Type="Submit" Disabled="@isSubmitting" Raised="true"></MatBlazor.MatButton>
<MatBlazor.MatButton Label="Register" @onclick="NavigateRegister" Outlined="true"></MatBlazor.MatButton>
</p>
</EditForm>
@code {
private LoginModel login;
private bool isSubmitting;
public LoginModel? SubmittedLogin { get; private set; }
protected override Task OnInitializedAsync()
{
login = new LoginModel();
return base.OnInitializedAsync();
}
public async void LoginSubmit(EditContext editContext)
{
SubmittedLogin = login;
isSubmitting = true;
await Task.Delay(0);
isSubmitting = false;
}
}
And here is a passing test: public class CounterTests : TestContext
{
public CounterTests() => Services.AddMockJSRuntime();
[Fact]
public void Test1()
{
// arrange
var testuser = "[email protected]";
var password = "s3cur3_PASS";
var cut = RenderComponent<Counter>();
// act
cut.Find("input[type=text]").Change(testuser);
cut.Find("input[type=password]").Change(password);
cut.Find("form").Submit();
// assert
Assert.Equal(testuser, cut.Instance.SubmittedLogin.Mail);
Assert.Equal(password, cut.Instance.SubmittedLogin.Password);
}
}A few notes:
Hope this helps. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you very much, this was very helpful. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you, glad it worked out. Ps. If you (or your boss) want to support the project, consider hitting the sponsor button on the repo. |
Beta Was this translation helpful? Give feedback.
-
|
Moving answer here to make it easier for others to find. Any nodes found using Instead, try to use Anyway, I modified @page "/counter"
@using BugRepro.Classes
<h1>Counter</h1>
<EditForm Model="login" OnValidSubmit="@LoginSubmit">
<DataAnnotationsValidator />
<p>
<MatBlazor.MatTextField @bind-Value="@login.Mail" Label="Mail-Address" Icon="mail_outline" Dense="true"></MatBlazor.MatTextField>
<ValidationMessage For="@(() => login.Mail)" />
</p>
<p>
<MatBlazor.MatTextField @bind-Value="@login.Password" Label="Password" Icon="lock_outline" Type="password"></MatBlazor.MatTextField>
<ValidationMessage For="@(() => login.Password)" />
</p>
<p>
<MatBlazor.MatButton Label="Login" Type="Submit" Disabled="@isSubmitting" Raised="true"></MatBlazor.MatButton>
<MatBlazor.MatButton Label="Register" @onclick="NavigateRegister" Outlined="true"></MatBlazor.MatButton>
</p>
</EditForm>
@code {
private LoginModel login;
private bool isSubmitting;
public LoginModel? SubmittedLogin { get; private set; }
protected override Task OnInitializedAsync()
{
login = new LoginModel();
return base.OnInitializedAsync();
}
public async void LoginSubmit(EditContext editContext)
{
SubmittedLogin = login;
isSubmitting = true;
await Task.Delay(0);
isSubmitting = false;
}
}
And here is a passing test: public class CounterTests : TestContext
{
public CounterTests() => Services.AddMockJSRuntime();
[Fact]
public void Test1()
{
// arrange
var testuser = "[email protected]";
var password = "s3cur3_PASS";
var cut = RenderComponent<Counter>();
// act
cut.Find("input[type=text]").Change(testuser);
cut.Find("input[type=password]").Change(password);
cut.Find("form").Submit();
// assert
Assert.Equal(testuser, cut.Instance.SubmittedLogin.Mail);
Assert.Equal(password, cut.Instance.SubmittedLogin.Password);
}
}A few notes:
|
Beta Was this translation helpful? Give feedback.
Moving answer here to make it easier for others to find.
Any nodes found using
FindAllis replaced when the component under test re-renders, since the DOM tree is replaced on each render. So you cannot observe changes in elements found usingFindAllbetween renders.Instead, try to use
Findinstead. I have some magic behind that which will update the data on the object, and it will work more as expected.Anyway, I modified
Counterslightly to make for a more useful test - I exposed theLoginModelon submit through theSubmittedLoginproperty. Here it is the fullCounterexample: