How to update Scroll values while using Bunit automation scripts - unit-testing

Question

We have a requirement to update the scrollLeft value of the a element in blazor platform. We have tried to update the scroll Left property through databinding using the below code snippet. But its not working. So it is a mandatory to use the JS code to update the scrollLeft property of the parent element.
#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 code was shown in below
window.onChangeScrollValues = function (id, left, top) {
var element = document.getElementById(id);
element.scrollLeft = left; element.scrollTop = top;
}
From the above code when we use the JS code snippet to update the DOM elements means, it does not suitable for Bunit testing. So in this scenario how I able to set the Scroll values in Bunit scripts ?

Answer 1

bUnit doesn't run JavaScript, instead you can write a test that verifies that the onChangeScrollValues is correctly called when scroll-Js button is clicked.
Something like this should suffice:
// 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");