How do I update component variables in Angular unit tests?

Question

I am having a problem where I set the "headerButtons" and "contractLoaded" component variables in my test but it does not seem to change the values. If I console out or use a debugger in the component as the test runs the variables stay as initially defined (undefined and false).

I have tried lots of different combinations but always the same result.

headerButtons is an @Input

let component: HeaderBannerComponent;
  let fixture: ComponentFixture<HeaderBannerComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({ declarations: [HeaderBannerComponent] });
    fixture = TestBed.createComponent(HeaderBannerComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

...

it('should display the correct amount of header buttons', () => {
    const debugEl: DebugElement = fixture.debugElement;

    component.headerButtons = 'basic';
    fixture.detectChanges();

    expect(debugEl.queryAll(By.css('.header-banner__btn-link')).length).toEqual(
      2
    );

    component.headerButtons = 'full';
    component.contractLoaded = true;
    fixture.detectChanges();
    expect(
      debugEl.queryAll(By.css('.header-banner__btn-link')).length
    ).toBeGreaterThan(2);
  });

Component :

import { Component, Input, OnInit } from '@angular/core';
import { KeyValue } from '@angular/common';
import { ContractEventService } from 'src/app/core/services/contract-event.service';

@Component({
  selector: 'app-header-banner',
  templateUrl: './header-banner.component.html',
  styleUrls: ['./header-banner.component.css'],
})
export class HeaderBannerComponent implements OnInit {
  menubar: Map<string, string> = new Map<string, string>();
  contractLoaded: boolean = false;

  @Input() headerTitle: any;
  @Input() headerButtons: string;

  constructor(private contractEventService: ContractEventService) {}

  ngOnInit(): void {
    if (this.headerButtons === 'full') {
      this.contractEventService.getContractLoaded().subscribe(
        (rs) => {
          this.contractLoaded = rs;
          this.setButtons();
        },
        (err) => {
          console.warn('failed to get contractLoaded status', err);
        }
      );
    }
    this.setButtons();
  }

  setButtons(): void {
    this.menubar = new Map<string, string>();
    this.menubar.set('Home', '/iforis/main.do');

    if (this.headerButtons === 'full' && this.contractLoaded) {
      this.menubar.set('Contacts', '/iforis/s/contacts/');
      this.menubar.set('Notes', '/iforis/s/notes/');
    }
    if (this.headerButtons === 'full' && !this.contractLoaded) {
      this.menubar.delete('Contacts');
      this.menubar.delete('Notes');
    }

    this.menubar.set('Exit', '/iforis/exit.do');
  }

  originalOrder = (
    a: KeyValue<string, string>,
    b: KeyValue<string, string>
  ): number => {
    return 0;
  };
}

Template:

<div class="header-banner box-shadow">
  <div class="header-banner__title">
    <span id="headerTitleText" class="header-banner__text">
      {{ headerTitle }}
    </span>
  </div>

  <div class="header-banner__logo">
    <img src="assets/DAFM_Logo_2018.png" />
  </div>

  <div class="header-banner__btn-container">
    <div
      *ngFor="
        let button of menubar | keyvalue: originalOrder;
        let first = first;
        let last = last
      "
      [ngClass]="[
        'header-banner__btn',
        first ? 'header-banner__btn--first' : '',
        last ? 'header-banner__btn--last' : ''
      ]"
    >
      <a href="{{ button.value }}" class="header-banner__btn-link">
        {{ button.key }}
      </a>
    </div>
  </div>
</div>

Answer 1

That is strange. Can you show the HTML and component typescript as well?

I think I have an idea though about the issue you could be facing.

it('should display the correct amount of header buttons', () => {
    // get rid of this variable
    // const debugEl: DebugElement = fixture.debugElement;

    component.headerButtons = 'basic';
    fixture.detectChanges();

    // Change this line to be fixture.debugElement and not debugEl
    expect(fixture.debugElement.queryAll(By.css('.header-banner__btn-link')).length).toEqual(
      2
    );

    component.headerButtons = 'full';
    component.contractLoaded = true;
    fixture.detectChanges();
    // Change this line to be fixture.debugElement and not debugEl
    expect(
      fixture.debugElement.queryAll(By.css('.header-banner__btn-link')).length
    ).toBeGreaterThan(2);
  });

The issue is the debugEl. It becomes stale after you change component variables so you always need a new debugEl after changing variables. I think this is most likely the issue.

====== Edit ====== Maybe we should mock ContractEventService instead of providing the real one.

Try this:

let component: HeaderBannerComponent;
let fixture: ComponentFixture<HeaderBannerComponent>;
let mockContractEventService: jasmine.SpyObj<ContractEventService>;

  beforeEach(() => {
    // the first string argument is just an identifier and is optional
    // the second array of strings are public methods that we need to mock
    mockContractEventService = jasmine.createSpyObj<ContractEventService>('ContractEventService', ['getContractLoaded']);
    TestBed.configureTestingModule({ 
      declarations: [HeaderBannerComponent], 
      // provide the mock when the component asks for the real one
      providers: [{ provide: ContractEventService, useValue: mockContractService }] 
    });
    fixture = TestBed.createComponent(HeaderBannerComponent);
    component = fixture.componentInstance;
    // formatting is off but return a fake value for getContractLoaded
 mockContractEventService.getContractLoaded.and.returnValue(of(true));
    // the first fixture.detectChanges() is when ngOnInit is called
    fixture.detectChanges();
  });

it('should display the correct amount of header buttons', () => {
    // get rid of this variable
    // const debugEl: DebugElement = fixture.debugElement;

    component.headerButtons = 'basic';
    // The issue was that we are not calling setButtons
    // manually call setButtons
    component.setButtons();
    fixture.detectChanges();

    // Change this line to be fixture.debugElement and not debugEl
    expect(fixture.debugElement.queryAll(By.css('.header-banner__btn-link')).length).toEqual(
      2
    );

    component.headerButtons = 'full';
    component.contractLoaded = true;
    // manually call setButtons
    component.setButtons();
    fixture.detectChanges();
    // Change this line to be fixture.debugElement and not debugEl
    expect(
      fixture.debugElement.queryAll(By.css('.header-banner__btn-link')).length
    ).toBeGreaterThan(2);
  });