Unit testing 如何在使用Bunit自动化脚本时更新滚动值

我们需要在blazor平台中更新元素的scrollLeft值。我们已经尝试使用下面的代码段通过数据绑定来更新scroll Left属性。但它不起作用。因此，必须使用JS代码更新父元素的scrollLeft属性

@page "/Scroll"

@using Microsoft.JSInterop;

@inject IJSRuntime JSRuntime;

<input type="button" @onclick="@OnScroll" value="scroll" />
<input type="button" @onclick="@OnScrollJs" value="scroll-Js" />

<div id="parentDiv" style="width:500px;height:300px;overflow:auto" scrollLeft="@ScrollLeft" scrollRight="@ScrollRight">
    <div id="childDiv" style="width:1500px;height:1500px"></div>
</div>

@code {
    double ScrollLeft = 0;
    double ScrollRight = 0;

    private void OnScroll()
    {
        ScrollLeft = 200;
        ScrollRight = 200;
    }

    private async void OnScrollJs()
    {
        await JSRuntime.InvokeVoidAsync("onChangeScrollValues", "parentDiv", 200, 200);
    }

}

---

从上面的代码可以看出，当我们使用JS代码片段来更新DOM元素时，它并不适合Bunit测试。那么在这个场景中，我如何在Bunit脚本中设置滚动值呢？

Bunit不运行JavaScript，相反，您可以编写一个测试来验证在单击

Scroll Js

按钮时是否正确调用了

onChangeScrollValues

这样的东西应该足够了：

//排列
使用var ctx=newtestcontext（）；
ctx.JSInterop.Mode=JSRuntimeMode.Loose；
var cut=ctx.RenderComponent（）；//用组件的名称替换MyComponent。
//表演
查找（“输入[value=scroll Js]”。单击（）；
//断言
cut.JSInterop.VerifyInvoke（“onChangeScrollValues”）；

window.onChangeScrollValues = function (id, left, top) {   
  var element = document.getElementById(id);     
  element.scrollLeft = left;     element.scrollTop = top; 
}