0

我们需要更新 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 脚本中设置滚动值？

4

1 回答 1

1

bUnit 不运行 JavaScript，而是您可以编写一个测试来验证单击按钮onChangeScrollValues时是否正确调用了 bUnit。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");
于 2021-02-17T09:54:43.167 回答