Angular: How test keyboard event in jasmine unit testing

Question

I've created custom directive to populate auto dash. Here is full custom directive code in stackblitz. May i know how to test following lines from mask.ts in jasmine (unit test)?

mask.ts

@HostListener('input', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    const input = event.target as HTMLInputElement;
    let trimmed = input.value.replace(/\s+/g, '');

mask.spec.ts

@Component({
  template: `
    <input type="text" dobMask />
  `,
})
class TestdobMaskComponent {}

describe('dobMask', () => {
  let component: TestdobMaskComponent;
  let fixture: ComponentFixture<TestdobMaskComponent>;
  let inputEl: DebugElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [TestdobMaskComponent],
    });

    fixture = TestBed.createComponent(TestdobMaskComponent);
    component = fixture.componentInstance;
    inputEl = fixture.debugElement.query(By.css('input'));
  });
  it('should auto populate dash when reach 6 characters', () => {
    const input = inputEl.nativeElement as HTMLInputElement;
  });
});

Have you tried this: stackoverflow.com/questions/47101648/… — AliF50
– AliF50, Commented Mar 9, 2020 at 15:22
@Ali yes. I tried few methods as well. None of them working for me. — SKL
– SKL, Commented Mar 9, 2020 at 15:55

AliF50 · Accepted Answer · 2020-03-09 17:01:38Z

2

Try:

it('should auto populate dash when reach 6 characters', () => {
    const input = inputEl.nativeElement as HTMLInputElement;
    input.dispatchEvent(new KeyboardEvent('keydown', { key: ' ' }));
    // put a console.log in onKeyDown to make sure it is triggered.
    fixture.detectChanges();
    // grab a new reference
    const newInputEl = fixture.debugElement.query(By.css('input')) as HTMLInputElement;
    // trimmed is a local variable to the function so I don't know how you're going to test it
   // expect the space got trimmed
    expect(newInputEl.nativeElement.value).toEqual(""); 
  });

edited Mar 9, 2020 at 17:01

answered Mar 9, 2020 at 16:01

AliF50

19.1k2 gold badges29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SKL Over a year ago

input returning true now. How I can acheive let trimmed = input.value.replace(/\s+/g, '');

AliF50 Over a year ago

Check my edit, trimmed is a local variable so it will be difficult to test.

Collectives™ on Stack Overflow

Angular: How test keyboard event in jasmine unit testing

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related