Получение неопределенной ошибки при запуске теста

Question

Привет, у меня есть этот компонент только с параметром @Input. поэтому полученные предложения от коллег-членов stackoverflow должны проверить, отображаются ли данные в html. Я написал тестовый пример для этого, но каким-то образом, когда я запускаю тест, я получаю

TypeError: Cannot read property 'querySelector' of undefined

код ts:

import { Component, Input } from '@angular/core';
import { XxxInfo } from './xxx-info';

@Component({
    selector: 'wf-xxx-info',
    templateUrl: './xxx-info.component.html'
})
export class XxxInfoComponent{

    @Input() header: XxxInfo;
    constructor() {
    }
}

Код спецификации:

describe('xxx Information Component',()=>{
let component: XxxInfoComponent;
let fixture: ComponentFixture<XxxInfoComponent>;
let xxxInfo: XxxInfo;
let nativeElement : HTMLElement;

beforeEach(async(()=>{
    TestBed.configureTestingModule({
        imports: [IonicModule],
        declarations: [xxxInfoComponent]
    }).compileComponents();
}));

beforeEach(()=>{
    fixture = TestBed.createComponent(xxxInfoComponent);
    component = fixture.componentInstance;
    let aaa = new AAA();
    aaa = {
        ...
    };
    xxxInfo = new XxxInfo("abc",aaa);
    component.header = xxxInfo;
    fixture.detectChanges();
    nativeElement = fixture.nativeElement;
});
it('should create',()=>{
    expect(component).toBeTruthy();
});
it('should show job code',()=>{
    let code= nativeElement.querySelector('.details').innerHTML;
    expect(code).toEqual('TEST');
});

});

Что мне здесь не хватает? любые выводы будут полезны, спасибо.