SetupVoid

[thalaeg]

I have a test like follows

public void NewButton_DefaultsToButtonTag()
{
    // import my module. works fine
    var jsModule = JSInterop.SetupModule("import", new string[] { "./_content/HeadlessUI/common.js" });
    
    var button = new HtmlElement();
    // create some parameters that would be passed in the same as the actual method
    var runtimeHandler = jsModule.SetupVoid("preventDefaultKeyBehaviorOnKeys", button.ElementReference, new List<string> { KeyboardKey.Enter, KeyboardKey.Space });                 
    var component = RenderComponent<HUIButton>();
    runtimeHandler.SetVoidResult();

    var myButton = component.Find("button");
    Assert.NotNull(myButton );
}

This is testing this code. Code that I know works in production. You'll see the buttonElement is an HtmlElement (a class that inherits from Component Base. It has access to the ElementReference I pass in).

This is how I believe this should work. I pass in my identifier and args in the Test, yet the params aren't passed through or recognized as the same.

I get the following error message

Bunit.JSRuntimeUnhandledInvocationException : The invocation of 'preventDefaultKeyBehaviorOnKeys' with arguments [Microsoft.AspNetCore.Components.ElementReference, System.Collections.Generic.List`1[System.String]] was not expected.

What gives?

In the mean time I just have used SetupVoid() with no arguments and that works but I would prefer to be specific.

[egil]

Hi @thalaeg

Think you need to update your test code to look like this:

public void NewButton_DefaultsToButtonTag()
{
    // you do not have to specify the "import" identifier. Instead, just provide the module name.
    var jsModule = JSInterop.SetupModule("./_content/HeadlessUI/common.js");   
    
    // When no parameters are specified to the SetupVoid method, besides the function name, it will match parameter kinds.
    // runtimeHandler.SetVoidResult(); this can be done anywhere in this method below this point. 
    // to keep the test simple, you can set it here
    jsModule.SetupVoid("preventDefaultKeyBehaviorOnKeys").SetVoidResult(); 
    
    // alternative to the line above is to simply set the jsModule to run in loose mode, that means it will match all invocations to it
    // if you do this, you do not need the SetupVoid line above.
    jsModule.Mode = JSRuntimeMode.Loose;
   
    var component = RenderComponent<HUIButton>();

    var myButton = component.Find("button");
    Assert.NotNull(myButton );
}

What gives?

In the mean time I just have used SetupVoid() with no arguments and that works but I would prefer to be specific.

The problem is that the ElementReference you are matching with in your code is no the same as the one you using in the call. Since you cannot get access to the htmlButton in your component under test before you render it, you have to instead look at the invocations instead if it is important that the right element reference has been pass to the preventDefaultKeyBehaviorOnKeys call.

To verify that, you can do soemthing like this:

// assuming myButton is the button that should be passed as an element reference
var myButton = component.Find("button");

var invocation = jsModule.VerifyInvoke("preventDefaultKeyBehaviorOnKeys");
invocation.Arguments[0].ShouldBeElementReferenceTo(myButton);

// You can inspect the other arguments pass to the method by looking into the arguments array.

And yes, that JSInterop documentation does need some love to make these things clearer!

[thalaeg]

Hi @egil . I thought the solution was also jsModule.SetupVoid("preventDefaultKeyBehaviorOnKeys").SetVoidResult();, but when I tried that previously, I still get the error

Bunit.JSRuntimeUnhandledInvocationException : The invocation of 'preventDefaultKeyBehaviorOnKeys' with the argument [System.Collections.Generic.List`1[System.String]] was not expected.

So I made a quick and simple project with a test project so you can see that it does indeed fail. Everything is newest and up to date.
https://github.com/thalaeg/RazorTestBugLibrary

However, I now understand WHY it should be that way from your explaination. As I said in a previous PR for Bunit, I am hoping to commit to this repo some more. Maybe I will start by looking at the JSInterop stuff in the docs

[egil]

OK, glad to hear it.

If you have any suggestions for how to improve the JSInterop APIs please let me know. I have some ideas myself, including making it easier to write setup code. It is something that could use additional helper methods to make some scenarios easier.

[thalaeg]

I think my response above may not have been clear.

I tried jsModule.SetupVoid("preventDefaultKeyBehaviorOnKeys").SetVoidResult(); previously to asking my question. Doing it that way still sends off an error.

https://github.com/thalaeg/RazorTestBugLibrary is a library as a proof of the error/bug. I can make a bug report for this if you prefer.

As for the JSInterop testing API, I will certainly think on it. I'll do some evaluating of the methods and share my thoughts.
I think the primary issues would be solved with #300 as the improved messages help to guide people.