Жасмин не отображает содержимое шаблона, когда имитация свойства класса - PullRequest
Новая
       31

Жасмин не отображает содержимое шаблона, когда имитация свойства класса

0 голосов
/ 26 мая 2020

У меня есть следующий шаблон компонента: 

<div class="content p-24" *ngIf="company">

        <h1 class="m-0">
            <mat-icon>radio_button_unchecked</mat-icon>
            {{company.name}}
        </h1>
</div>

и следующий класс: 

export class CompanyDetailComponent implements OnInit {
    company: Company;

    constructor(
        private route: ActivatedRoute,
        private companiesService: CompaniesService,
        private dialogService: DialogService,
        private matDialog: MatDialog,
        private router: Router) {
    }

    async ngOnInit(): Promise<void> {
        const id = +this.route.snapshot.params.companyId;

        this.company = await this.companiesService.getCompanyById(id);
    }

Я имитирую возвращение компании в тестовом классе следующим образом: 

fdescribe('CompanyDetailComponent', () => {
  let component: CompanyDetailComponent;
  let fixture: ComponentFixture<CompanyDetailComponent>;

  const companyId = 1;
  const mockCompany = createMockCompany(companyId);

  beforeEach(() => {
    const mockActivatedRoute = { snapshot: { params: { companyId: companyId }, queryParams: {} } };
    const mockRouter = jasmine.createSpyObj('Router', ['navigate']);
    const mockCompanyService = jasmine.createSpyObj(["getCompanyById"]);
    mockCompanyService.getCompanyById.and.returnValue(Promise.resolve(mockCompany));

    TestBed.configureTestingModule({
      declarations: [CompanyDetailComponent, NotificationsListComponent],
      imports: [
      // imported modules
      ],
      providers: [
        { provide: ActivatedRoute, useValue: mockActivatedRoute },
        { provide: CompaniesService, useValue: mockCompanyService },
        { provide: Router, useValue: mockRouter },
      ]
    });

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

  it('should load company', async () => {
    await fixture.whenStable()

    expect(component.company.id).toEqual(companyId);
    expect(component.company.name).toEqual("Test company");
    expect(component.company.cif).toEqual("Test cif");
  })

  function createMockCompany(companyId: number): Company {
    let mockCompany = new Company();
    mockCompany.id = companyId;
    mockCompany.name = "Test company";
    mockCompany.cif = "Test cif";
    return mockCompany;
  }
});

Этот тест проходит нормально. Теперь я хочу проверить содержимое возвращенного html, но ngIf = "company" не возвращается, так как он считает, что company имеет значение null.

Это тест: 

it('should delete company', async () => {
    const me = await fixture.whenStable()

    let tag = fixture.nativeElement.querySelector('h1');    // returns null

});

Я издевался над компанией и подтвердил, что она установлена ​​в классе. Поэтому почему он не отображает?

...