How to test mousedown and keydown elements when there is no onchange handler for specific element

[OuttaSpaceTime]

Hey,

I try to test Radzen Dropdown with AllowFilter, but I am not able to use cut.Find(...).Change(...) since I get the following error:

Bunit.MissingEventHandlerException : The element does not have an event handler for the event 'onchange'. It does
however have event handlers for these events, 'onmousedown', 'onkeydown'.

As a simple workaround I would just try to change the bind value for the element instead of choosing it with code but it seems to be only a workaround.

When I look at the markup I can just find an empty onclick:

  <p>    <div onclick="" class="rz-dropdown valid rz-clear" blazor:onmousedown="4" style="width:300px" tabindex="0" blazor:onkeydown="5" id="RootCategorySelect" blazor:elementReference="">

So it has an empty onclick for it.

How can I make it work with using onmousedown and onkeydown? I was not able to find reasonable examples with bunit and these methods. Or would it make sense to put something into onclick instead and make work somehow?

My test code:

   [Test]
       public void EditSkill_ItCreatesRootCategoryChildHardkill()
       {
           using var ctx = new Bunit.TestContext();
           ctx.Services.AddSingleton(_skillService);
           ctx.JSInterop.Mode = JSRuntimeMode.Loose;
           var cut = ctx.RenderComponent<Team01.Pages.Skill.EditSkill>();

           cut.Find("#TypeInput").Change("Hardskill");
           cut.Find("#NameInput").Change("NewRootChild");
           //cut.Find("#RootCategorySelect").Change("RootCategorySkill");
           //cut.Instance.chosenRootCategory = 
           cut.Find("form").Submit();

           Assert.AreEqual(new Skill() {Id = 5, Type = SkillType.Hardskill, Name = "NewRootChild", ParentSkill = SkillData.SkillsWithCategories(2)[0], ParentId = 1}, 
               DataHelper.QueryData<Skill>("Skill", 5, _config));
       }

TypeInput and NameInput belong to and EditForm with OnValidSubmit="@HandleValidSubmit"

In the HandleValidSubmit I just set chosenRootCagory for the currentSkill.

in my component I have:

[...]

  <RadzenDropDown Id="RootCategorySelect" AllowClear="true" TValue="Team01.Models.Skill" Style="width:300px"
                                                Data=@_rootCategorySkillList TextProperty="Name"
                                                @bind-Value=@chosenRootCategory
                                                Change=@(args => OnRootCategorySelected(args))/>

[...]

private async void OnRootCategorySelected(object selectedSkill)
        {
            //has to be set to null every time so second DropDown is reloaded
            chosenRootChildCategory = null;
            //get all child skills from root category


            if (selectedSkill != null)
            {
                _childCategorySkillList = await SkillServiceAsync.GetAllChildSkillsFormParent(chosenRootCategory.Id);
                //if first root category is already a skillList without further categories (i.e. Datenbanken)
                if (_allSkillList.Any(skill => skill.Id == _childCategorySkillList[0].Id))
                    _childCategorySkillList = null;

                StateHasChanged();
            }
        }

Please let me know if you need further code and thanks in advance!

[egil]

Hi @FelixOutta,

Hey,

I try to test Radzen Dropdown with AllowFilter, but I am not able to use cut.Find(...).Change(...) since I get the following error:

Are you the developer of Radzen Dropdown or are you using it in a component of your own? If its the latter, then you might just want to use the (current in preview) feature in bUnit that allows you to replace a component with a dummy, to not have it be part of a test.

E.g.:

// arrange
using var ctx = new Bunit.TestContext();
ctx.ComponentFactories.UseDummyFor<RadzenDropDown>();
var cut = ctx.RenderComponent<Team01.Pages.Skill.EditSkill>();
var selectedSkill = ...;

// Act
var dummyDropdown = cut.FindComponent<Dummy<RadzenDropDown>>(); // This finds the dummy that replaces
var changeMethod = dummyDropdown.Instance.GetParameter(p => p.Change); // Finds the method you have passed as parameter to the RadzenDropDown Change parameter, i.e. the OnRootCategorySelected method
changeMethod.InvokeAsync(selectedSkill); // invoke the method to emulate that users selected a value through the RadzenDropDown in the browser.

// Assert
...

The example code above requires the preview version of bUnit available on nuget. Also, I wrote the code from memory, so it might not compile, but it should give you an idea of how to proceed.

Bunit.MissingEventHandlerException : The element does not have an event handler for the event 'onchange'. It does
however have event handlers for these events, 'onmousedown', 'onkeydown'.

Change() method only works when there is an @onchange event handler added to the element in the Blazor component.

As a simple workaround I would just try to change the bind value for the element instead of choosing it with code but it seems to be only a workaround.

When I look at the markup I can just find an empty onclick:

  <p>    <div onclick="" class="rz-dropdown valid rz-clear" blazor:onmousedown="4" style="width:300px" tabindex="0" blazor:onkeydown="5" id="RootCategorySelect" blazor:elementReference="">

So it has an empty onclick for it.

The empty onclick is not added by a blazor event handler binding. If it was, it would be prefixed with blazor:, like blazor:onmousedown is.

How can I make it work with using onmousedown and onkeydown? I was not able to find reasonable examples with bunit and these methods. Or would it make sense to put something into onclick instead and make work somehow?

All @onXXXXX event handler types in Blazor can be triggered through methods of the same name, sans on, so for @onmousedown there is a cut.Find("elm").MouseDown() method.

Hope this helps.

[egil]

For unit testing, then I would normally not include database or infrastructure in my tests. Instead, I work with abstractions of those that I can easily fake or mock during testing, and pass those into my components. That makes it much simpler in some cases to create stable and predictable tests.

As to why you are getting the MultipleActiveResultSets, it might be because you are running your tests in parallel?

[OuttaSpaceTime]

Ok it doesnt seem like a real unit test since there are several methods involved here like HandleValidSubmit, OnInitialized and the frist dropdown change method. Once the first dropdown works I would actually include a second dropdown as well for some tests. I would have to mock several methods to get each test working properly, but all the other tests worked for now.

The tests are not run in parallel, it fails with the above error mars when I just run this test alone. I have some database interaction within my SetUp and TearDown but the are not async. This wasn't a problem for the other tests as well which already do stuff with the SkillService Functions.

For me it felt like the mars error seems to be connected with the .InvokeAsync because I dont have mars activated and my method just work fine on integrationtest with the database and on the browser:

   [Test]
            public async Task GetAllChildSkillsFormParent_ReturnsCorrectList()
            {
                List<Skill> childSkills = new() {SkillData.SkillsWithCategories(2)[1]};
                var queriedChildSkills =
                    await _skillServiceAsync.GetAllChildSkillsFormParent(SkillData.SkillsWithCategories(2)[0].Id);

                Assert.AreEqual(childSkills, queriedChildSkills);
            }

the whole method looks like:

        public async Task<List<Skill>> GetAllChildSkillsFormParent(int skillId)
        {
            var sql = "Select * from dbo.Skill where ParentId = @Id;";
            var skillList = (await DbConnection.QueryAsync<Skill>(sql, new {Id = skillId})).ToList();
            skillList = await SetAllParents(skillList);
            return skillList;
        }

Something else I tried wich I saw in the bunit tests from radzen here:

  cut.FindComponent<RadzenDropDown<Skill>>().SetParametersAndRender(parameters => 
               parameters.Add(p => p.Change, args =>
               {
                   new Skill {
                       Name = "RootCategorySkill", Type = SkillType.Hardskill, Id = 1, ParentId = 0
                   };
               })); 

but it fails with:

Bunit.Rendering.ComponentDisposedException : The component has been removed from the render tree by the renderer and is no longer available for inspection. ComponentId = 9.

Is this supposed to happen?

So I think it would be sufficient to just mock the service here, since I have already testet my services on the database.
Would it be possible to mock the service only for a specific method? since all other methods are working fine or would I have to mock the complete service and pass it before rendering?

I actually tried simple mocking like this:

 public async Task EditSkill_ItCreatesRootCategoryChildHardkill_4()
       {
           var mockedSkillService = new Mock<ISkillServiceAsync>();
           mockedSkillService.Setup(
                   u => u.GetAllChildSkillsFormParent(SkillData.SkillsWithCategories(2)[0].Id))
               .ReturnsAsync(SkillData.ChildSkills);
           using var ctx = new Bunit.TestContext();
           ctx.Services.AddSingleton(mockedSkillService);

            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
           ctx.ComponentFactories.UseDummyFor<RadzenDropDown<Skill>>();

           var cut = ctx.RenderComponent<Team01.Pages.Skill.EditSkill>();

but then I get the error

System.InvalidOperationException : Cannot provide a value for property 'SkillServiceAsync' on type 'Team01.Pages.Skill.EditSkill'. There is no registered service of type 'Team01.Services.Interfaces.ISkillServiceAsync'.

for this line var cut = ctx.RenderComponent<Team01.Pages.Skill.EditSkill>();

What is going on? Sorry for coming up with so much stuff but I was not able to find a complete example for mocking a repository pattern service with bunit. I mostly saw just mocking simple functions like I tried before.

[egil]

No worries. Learning to write good stable tests are not easy. Lots of things you need to know.

It seems you are using Moq for your mocking, right?

In that case, I think this line:

ctx.Services.AddSingleton(mockedSkillService)

should be:

ctx.Services.AddSingleton(mockedSkillService.Object)

Personally, I prefer using a fake instead of a mocks for things like those. If you want to see an example of that, you can check out my run through the Blazing Pizza Workshop here: https://github.com/egil/blazor-workshop

I did it like on twitch and all the recordings are here if you want my thought process as well: http://bit.ly/tdd-blazing-pizza-workshop

[OuttaSpaceTime]

Thanks a lot, I will have a look!

[OuttaSpaceTime]

@egil I was able to find the error. It was actually because bunit was doing everything so fast with the services that my method who used two times the same connection and was called async from two different methods closed one connection before the other was able to complete its task with it.

[OuttaSpaceTime]

using a fresh connection for the failing line solved error. My method was called two times within the initializing process of the page and tried to use the same connection.

using IDbConnection dbConnection = new SqlConnection(DatabaseUtils.ConnectionString);
var results = (await dbConnection.QueryAsync<Skill>(sql, new { ids = Ids })).ToList();

[egil]

Great you discovered a solution.