Emulate scroll/wheel event in Angular/spectator test

Question

I have written a directive to prevent scroll/wheel events on certain inputs.

I'd like to test this functionality, by first verifying that scrolling in a <input type="number \> field, will modify the value. And thats where I'm stuck now.

I have written a test component for this purpose, and it looks like this:

@Component({
  selector: 'test-scroll-input',
  standalone: true,
  imports: [MatInputModule, ReactiveFormsModule],
  template: `
    <form [formGroup]="form" autocomplete="off">
      <mat-form-field>
        <mat-label>Værdi</mat-label>
        <input matInput type="number" formControlName="value" />
      </mat-form-field>
    </form>
  `,
})
class TestScrollInputComponent {
  public form = new FormGroup({
    value: new FormControl(1),
  });
}

beforeEach(() => {
  spectator = createComponent();
});

Can someone help me out here?

My goal is to wite a test which scrolls in the input, and expect the value to differ from the original value (1). A pseudocode example below:

it('should change the input from 1 to 2, when scrolling in the input field',()=>{
  inputElement = spectator.query('input[type="number"]');

  spectator.click(inputElement);
  // insert scroll event here

  expect(spectator.component.form.controls.value.value).toBe(2)
)};

Answer 1

Just fire the event:

el.dispatchEvent(new CustomEvent('scroll'))

or

el.dispatchEvent(new CustomEvent('wheel', { detail: { deltaY: 1 } }))