Test a negative number with MatInputHarness

Issue

I've been looking for a solution on this topic, and there was a bug ticket that was solved: https://github.com/angular/components/issues/19314

However, I am still not able to manage to test a matInput with type="number", using MatInputHarness, when setting the value to -1.

Here's the sample code as much simplified as possible (Stackblitz):

app.component.ts

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="form">
      <mat-form-field>
        <mat-label>Number input</mat-label>
        <input
          matInput
          type="number"
          formControlName="numberInput"
          name="numberInput"
        />
      </mat-form-field>
    </form>
  `,
})
export class AppComponent {
  public form: FormGroup = new FormGroup({ numberInput: new FormControl() });
}

app.component.spec.ts

import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatInputHarness } from '@angular/material/input/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

let fixture: ComponentFixture<AppComponent>;
let loader: HarnessLoader;

describe('PatientsEnrollComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        ReactiveFormsModule,
        NoopAnimationsModule,
        MatInputModule,
        MatFormFieldModule,
      ],
      declarations: [AppComponent],
    }).compileComponents();

    fixture = TestBed.createComponent(AppComponent);
    loader = TestbedHarnessEnvironment.loader(fixture);
  });

  it('should be marked as invalid', async () => {
    let numberInputHarness = await loader.getHarness(
      MatInputHarness.with({ selector: "[name='numberInput']" })
    );
    let numberInputControl =
      fixture.componentInstance.form.controls['numberInput'];

    await numberInputHarness.setValue('-1');
    // Here it fails, since value is actually set to '1'.
    expect(numberInputControl.value).toBe('-1');
  });
});

Result

When running npm run test, the test fails with the error message being Expected 1 to be '-1', meaning the value is actually set to 1, not -1 as I indicated.

What am I doing wrong here? Many thanks in advance!

Solution

It got fixed on Material 13.3.2.via https://github.com/angular/components/commit/e9734a9c663b0e462e5c3d8ba2126a87aeeb3191.

If you do

await numberInputHarness.setValue('-1');

expect(numberInputControl.value).toBe(-1);

it now works 🎉

Answered By - Gummiees