Angular - Unit testing focusing on button

Question

I am attempting to unit test whether my button has been focused on, but I cannot seem to get the spy to work correctly?

I saw [this post][1], but it hasn't helped fully.

Am I missing something obvious?

component.ts

ngOnInit() {
    // autofocus on the cancel button to guard against mistakes
    document.getElementById('cancel').focus();
  }

score 2 · Accepted Answer · 2018-08-30 10:18:22Z

2

The focus is flawed to start with.

When using Angular, you should not use document to fetch your elements.

Use a viewChild instead.

@ViewChild('cancel') cancelButton: ElementRef<HtmlButtonElement>;
ngAfterViewInit() {
  this.cancelButton.nativeElement.focus();
}

Now your test looks like this

it('should focus cancel button', () => {
  spyOn(component.cancelButton.nativeElement, 'focus');
  component.ngAfterViewInit();
  expect(component.cancelButton.nativeElement.focus).toHaveBeenCalledWith();
});

EDIT If you still want to use your way, consider using By.css() :

it('should autofocus on cancel button on init', () => {
  const cancelButton = fixture.debugElement.query(By.css('#cancel'));
  spyOn(cancelButton, 'focus');
  component.ngOnInit();
  expect(cancelButton.focus).toHaveBeenCalled();
});

edited Aug 30, 2018 at 10:18

answered Aug 30, 2018 at 9:29

user4676340

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

5 Comments

Amit Chigadani Over a year ago

Yes, take advantage of fixture instead of relying on document to get html elements.

physicsboy Over a year ago

@trichetriche - I implemented the @ViewChild but it is saying that it can't find name 'cancelButton'?

user4676340 Over a year ago

is your button something like <button #cancel>Cancel</button> ? You need to give it a template variable reference with #cancel

physicsboy Over a year ago

Yeah I just noticed that after googling. It also appears that you don't need the first colon ':' after ('cancel') :? And it should be HTML not Html in HtmlButtonElement :-)

user4676340 Over a year ago

@physicsboy woops, TY for the typo ! Also, ElementRef<HtmlButtonElement> is used to type your element : when you write this.cancelButton.nativeElement, if you append a dot, you will have intellisense for an HTML button element. Not mandatory, but practical !

Amit Chigadani · Accepted Answer · 2018-08-30 10:07:41Z

2

Recall ngOnInit() after your spy has been created in your spec, as pointed by @trichietrichie

Also, take advantage of fixture instead of relying on document to fetch html elements.

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

    fixture = TestBed.createComponent(ConfirmationComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();    
    component.ngOnInit();
  });

  it('should autofocus on cancel button on init', () => {
    const cancelButton = fixture.debugElement.query(By.css('#cancel'));
    spyOn(cancelButton.nativeElement, 'focus'); // create spy here   
    component.ngOnInit();
    expect(cancelButton.focus).toHaveBeenCalled();
  });

edited Aug 30, 2018 at 10:07

answered Aug 30, 2018 at 9:26

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

9 Comments

user4676340 Over a year ago

or recall ngOnInit so you don't create [it.count] times a spy that you use once ?

Amit Chigadani Over a year ago

Hmm, I see the issue, so he has to postpone the ngOnInit() invokation.

user4676340 Over a year ago

Yes & no : ngOnInit will be called at every component instanciation (which is at every it since we create it in a beforeEach) : but ngOnInit being just a specifically named function, you can just call it a second time, this time with a spy so that you can monitor it. So not really postponed, but recalled.

user4676340 Over a year ago

Again, no ! lifecycle hooks are here to ensure you can have access to specific elements (for instance, you won't get ViewContainerRef in ngOnInit, but you will in ngAfterViewInit). Hooks are just functions called by Angular. For instance, I implemented something similar with a decorator, that is getting trigerred by events. The functions ran are called ngOnCustomEvent(eventType: string) : nothing prevents me from running them when I want, but I know for a fact that they will be ran when a custom event occurs, without me having to call them by hand.

user4676340 Over a year ago

Even better than removing the downvote ! Fully valid answers deserve upvotes :)

|

Collectives™ on Stack Overflow

Angular - Unit testing focusing on button

2 Answers 2

5 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related