Получение Uncaught TypeError: Невозможно прочитать свойство name из пустого значения, выдаваемого при тестировании компонента.

Question

Итак, я пытаюсь протестировать этот компонент и его простой компонент, который получает значение из наблюдаемой и отображает его на экране. По какой-то причине, когда я пытаюсь его протестировать, он выдает ошибку Uncaught TypeError: Cannot read property 'name' of null thrown.

Я инициализирую переменную userProfile, поэтому она должна быть там, если только я не неправильно понимаю ошибку. Что я могу сделать, чтобы передать это?

Вот файл компонента:

import { Component, OnInit } from '@angular/core';
import { environment } from '../../../../environments/environment';
import { AuthService } from 'src/app/auth/auth.service';

@Component({
  selector: 'user-dropdown',
  templateUrl: './user-dropdown.component.html',
  styleUrls: ['./user-dropdown.component.scss']
})
export class UserDropdownComponent implements OnInit {

  ENV = environment;
  userProfile: Object = {};

  constructor(
    private authService: AuthService
  ) { }

  ngOnInit() {
    this.authService.getUserProfile().subscribe(response => {
      this.userProfile = response.profile;
    }, err => { console.log(err); });
  }

  logout(): void {
    this.authService.logout();
  }
}

вот файл спецификации:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { UserDropdownComponent } from './user-dropdown.component';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FilterPipe } from '../../filters/filter.pipe';
import { AuthService } from 'src/app/auth/auth.service';
import { HttpClient, HttpHandler } from '@angular/common/http';
import { CookieService } from 'ngx-cookie-service';
import { Router } from '@angular/router';
import { of } from 'rxjs';

describe('UserDropdownComponent', () => {
  let component: UserDropdownComponent;
  let fixture: ComponentFixture<UserDropdownComponent>;
  let authServiceStub: any;

  beforeEach(async(() => {
    authServiceStub = {
      getUserProfile: () => of({ profile: {} })
    };

    TestBed.configureTestingModule({
      declarations: [
        UserDropdownComponent,
        FilterPipe
      ],
      schemas: [ NO_ERRORS_SCHEMA ],
      imports: [
        NgbModule,
      ],
      providers: [
        {
          provide: AuthService,
          useValue: authServiceStub
        },
        HttpClient,
        HttpHandler,
        CookieService,
        {
          provide: Router,
          useClass: class { navigate = jasmine.createSpy('navigate'); }
        }
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(UserDropdownComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

и вотHTML, где он ссылается на userProfile.name:

<li *ngIf="userProfile" class="nav-item" ngbDropdown #userDropdown="ngbDropdown" display="dynamic" placement="bottom-right">
  <a class="nav-link" role="button" id="userDropdown" ngbDropdownToggle>
    <i class="fas fa-user-circle"></i>
    {{ userProfile.name }}
    <div ngbDropdownMenu aria-labelledby="userDropdown" class="dropdown-menu">
      <a class="dropdown-item">Profile</a>
      <a class="dropdown-item">My Downloads</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" (click)="logout()">Logout</a>
    </div>
  </a>
</li>

Answer 1

Я думаю, что это правильное поведение. У вас есть свойство «userProfile», инициализированное для пустого объекта, следовательно, в ngIf оно будет иметь значение true, поскольку пустой объект является истинным значением. Вам следует инициализировать его как неопределенное или нулевое, если вы не хотите, чтобы блок html отображался, если не определен userProfile.