How to update Scroll values while using Bunit automation scripts

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 ?

score 1 · Answer 1 · answered Feb 17 '21 at 09:54

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");

How to update Scroll values while using Bunit automation scripts

1 Answers1