Testing and anchor tag click inside a ng-container embbeded in a ng-switch

Question

I´m really new about testing in angular and I, couldn´t have found a solution for this problematic. Im trying to do a test over a method that is called once an anchor tag is clicked. This anchor tag is located inside a ng-container that belongs as case to an ng-switch:

<ng-container [ngSwitch]="layout">
    <ng-container *ngSwitchCase="'public'" >
      <div class="d-flex>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarText"          
        >      
        </button>
      </div>
      <div class="class">
        <ul class="class">
          <ng-container *ngFor="let link of object">
            <li class="nav-item">
              <a
                (click)="navigateToURL(link.route)"
              >
                 {{ string }}
              </a>
            </li>
          </ng-container>
        </ul>
      </div>
    </ng-container>

    <ng-container *ngSwitchCase="'other'">
      <div class="class">
        <ul class="class">
          <ng-container *ngFor="let link of otherObject">
            <li class="nav-item">
              <a id='one'
                (click)="navigateToURL(link.route)"
              >
                {{ other string }}
              </a>
            </li>
          </ng-container>
        </ul>
      </div>
    </ng-container>
  </ng-container>

the method would be some kind of redirection of router

navigateToURL(url:stringstring):void{
 this.router.navigateByURL(url)
}

then on my test

describe('AppComponent [navigation-root]', () => {
  
  let fixture: ComponentFixture<AppComponent>;
  let component: AppComponent;

  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        declarations: [AppComponent],
        providers: [
          {
            provide: Router,
            useValue: routerMock,
          },
        ],
        schemas: [NO_ERRORS_SCHEMA],
      })
        .compileComponents()
        .then(() => {
          fixture = TestBed.createComponent(AppComponent);
          component = fixture.componentInstance;
        })
    
    })
  );

  test('Should create the navigation micro app', () => {
    expect(component).toBeTruthy();
  });



  describe('When user is redirected from  anchor tag click', () => {
   

    test('Should call navigateToURL method from anchor tag on click ', () => {
      const goToRouteSpy = jest.spyOn(component, 'navigateToURL');

      const link = fixture.debugElement.nativeElement.querySelector('[id="one"]') as HTMLElement;
     

      link.click();

      fixture.detectChanges();

      expect......
     
    });
  });
});

But the test fails throwing an error because of not being able to click of null Could someone help me on this? Thank you very much

Answer 1

You have to mock the data first before you can test it.

test('Should call navigateToURL method from anchor tag on click ', () => {
      const goToRouteSpy = jest.spyOn(component, 'navigateToURL');
      // first mock layout to be other
      component.layout = 'other';
      // mock the array of otherObject
      component.otherObject = [{ route: 'abc' }];
      // call fixture.detectChanges() so the HTML is updated with the previous
      // properties
      fixture.detectChanges();
      // hopefully should work now, by the way it is better if you do
      // .querySelector('#one') instead of '[id="one"]'
      const link = fixture.debugElement.nativeElement.querySelector('[id="one"]') as HTMLElement;
     

      link.click();

      fixture.detectChanges();

      expect......
     
    });