Cannot read property 'nativeElement' of null with ngif

Question

I am doing some unit tests.

So I have this function:

selectCluster(event: MouseEvent, feature: any) {
    event.stopPropagation(); 
    this.selectedCluster = {geometry: feature.geometry, properties: feature.properties};
  }

and tempplate:


 <mgl-popup *ngIf="selectedCluster" [feature]="selectedCluster">
      
    </mgl-popup>

and I have the test like this:

  fit('Should set selectedCluster when clicked', async(() => {    

    spyOn(component, 'selectCluster').and.callThrough();
    fixture.detectChanges();
    fixture.debugElement.query(By.css('.marker-cluster')).nativeElement.click();
    tick();

    fixture.whenStable().then(() => {
      expect(component.selectCluster).toHaveBeenCalled();
    });
  }));

But I still get this error:

Cannot read property 'nativeElement' of null

So what I have to change?

Thank you

This also use the function:

 <ng-template mglClusterPoint let-feature>
        <div class="marker-cluster" (click)="selectCluster($event, feature)">
          <fa-icon [icon]="faVideo" [styles]="{'stroke': 'black', 'color': 'black'}" size="lg" class="pr-2"></fa-icon>
          <fa-icon [icon]="faWifi" [styles]="{'stroke': 'black', 'color': 'black'}" size="lg" class="pr-2"></fa-icon>
        </div>
      </ng-template>

AliF50 · Accepted Answer · 2020-12-11T13:45:41.640

1

.marker-cluster is not on the page when you attempt to click it, I don't see your full html but I will assume it is related to *ngIf="selectedCluster" being true.

 fit('Should set selectedCluster when clicked', async(() => {    
    // spy on and calling through doesn't actually call the function
    // it makes it so we can determine if the function was called
    // and everytime the function was called, call the actual function
    // and not a null function
    spyOn(component, 'selectCluster').and.callThrough();
    // calling the function will should make selectedCluster true
    component.selectCluster({ stopPropagation: () => null } as MouseEvent, {}); // send your own inputs
    fixture.detectChanges();
    fixture.debugElement.query(By.css('.marker-cluster')).nativeElement.click();

    fixture.whenStable().then(() => {
      expect(component.selectCluster).toHaveBeenCalled();
    });
  }));

edited Dec 11 '20 at 13:45

answered Nov 23 '20 at 20:17

AliF50

16,947
1
21
37

Hi, thank you. I added some more html. But in this case I still get the same error – CodeIsNice Nov 23 '20 at 20:28
Yes, it is related to state = true – CodeIsNice Nov 23 '20 at 20:30
Ok, you have to understand why `marker-cluster` is null at that point in time. Maybe you're not setting up everything correctly for it to be painted? – AliF50 Nov 23 '20 at 20:44
Yes, I understand that I think. Because you are right it is null when the HML is loaded. Because it is from map. Mapbox – CodeIsNice Nov 23 '20 at 20:45
Ok, before calling the first `detectChanges`, make sure it is truthy. – AliF50 Nov 23 '20 at 21:04

Cannot read property 'nativeElement' of null with ngif

1 Answers1