如何在使用 Bunit 自动化脚本时更新 Scroll 值

问题描述

我们需要更新 blazor 平台中 a 元素的 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 代码如下

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

从上面的代码中我们使用JS代码片段来更新DOM元素意味着，它不适合Bunit测试。那么在这种情况下，我如何在 Bunit 脚本中设置 Scroll 值？

解决方法

bUnit 不运行 JavaScript，相反，您可以编写一个测试来验证在单击 onChangeScrollValues 按钮时是否正确调用了 scroll-Js。

这样的东西就足够了：

// arrange
using var ctx = new TestContext();
ctx.JSInterop.Mode = JSRuntimeMode.Loose;

var cut = ctx.RenderComponent<MyComponent>(); // replace MyComponent with the name of the component.

// act
cut.Find("input[value=scroll-Js]").Click();

// assert
cut.JSInterop.VerifyInvoke("onChangeScrollValues");