Testing pointer movements

[danielchalmers]

I'm testing a mouse drag on a color picker spectrum:

video6.mp4

[Test]
public void Spectrum_DragPointer()
{
    var comp = Context.RenderComponent<SimpleColorPickerTest>();

    const double x1 = 99.2;
    const double y1 = 200.98;
    var expectedColor1 = new MudColor(35, 34, 50, _defaultColor);

    var overlay = comp.Find(CssSelector);

    // Color should update as soon as pointer is down.
    overlay.PointerDown(new PointerEventArgs { OffsetX = x1, OffsetY = y1 });
    CheckColorRelatedValues(comp, x1, y1, expectedColor1, ColorPickerMode.RGB);

    const double x2 = 117.0;
    const double y2 = 140.0;
    var expectedColor2 = new MudColor(74, 70, 112, 255);

    overlay.PointerMove(new PointerEventArgs { MovementX = x2, MovementY = y2 });

    // Doesn't update after the pointer is moved!
    CheckColorRelatedValues(comp, x2, y2, expectedColor2, ColorPickerMode.RGB);

    // This does update.
    overlay.PointerDown(new PointerEventArgs { OffsetX = x2, OffsetY = y2 });
    CheckColorRelatedValues(comp, x2, y2, expectedColor2, ColorPickerMode.RGB);
}

The color should update when the pointer is down, then again after it moves, but it doesn't update the second time.

Sorry if I missed another discussion or docs, I couldn't find anything.

[linkdotnet]

Hey,

I am not sure how MudBlazor handles this under the hood but if you call PointerDown it doesn’t actually simulate a left-click that persists until you call PointerUp.

What it does (and only that) is to raise the @onpointerdown event of the element in question.

So in contrast to your uploaded video, your Action does not simulate a drag and drop behaviour.

BUnit is not a browser - you might be used to such things with e2e frameworks like cypress,selenium, … but bUnit isn’t a full blown browser that emulates everything.

another good example is css classes - while you can for sure assert that they are given on an element, bUnit doesn’t do anything with them (like display:none and so on).

that said - it might make more sense to concentrate on your logic rather than the 3rd party one. (For me at least it looks like you are integrating a 3rd party component in one of your own ones. Pardon me if this isn’t the case)

[danielchalmers]

Thank you for your detailed response, it's going to be useful to learn more about this subject.

I should have given more info:

• I'm actually writing the test for the component itself in the MudBlazor test suite
• The overlay listens to @onpointerdown, @onpointerup, @onpointermove
  • pointerdown and pointerup simply update the color selector location to where the pointer is
  • pointermove updates the color selector in the same way if e.Buttons == 1

I was able to solve it like this after reviewing the points above:

overlay.PointerMove(new PointerEventArgs { OffsetX = x2, OffsetY = y2, Buttons = 1 });