角度测试:ngOnInit方法，它依赖于模板和文档对象

Question

我用Angular(2+(开发了一个应用程序，现在我正在测试每个应用程序.ts文件，以获得很好的代码覆盖率。我有个问题。我正在测试一个组件，该组件在ngOnInit生命周期方法中使用document对象来引用HTML模板的一些元素。这是一个代码示例：

export class MyComponent implements OnInit {
element;
ngOnInit() {
this.element = document.getElementById('myElementId');
this.element.className = 'blur'
}
}

其中CCD_ 4是我的模板的CCD_。至于测试，下面是代码的一部分：

describe('MyComponent  Tests', () => {
let fixture: ComponentFixture<MyComponent>;
let component: MyComponent;
let rootElement: DebugElement;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [MyComponent],
imports: [MyComponentModule,  RouterTestingModule],
providers: [],
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
})    
});
});

beforeEach(() => {
fixture = TestBed.createComponent(IndexPageComponent);
component = fixture.componentInstance;
fixture.detectChanges();
rootElement = fixture.debugElement;
});
it("Should created", fakeAsync(() => {
expect(component).toBeTruthy();
}));
});

当我开始测试时，它会给我一个失败的结果，并出现以下错误：无法将属性"className"设置为null。基本上，fixture.detectChanges()行激活了我的组件的ngOnInit()方法，但就好像测试文件上的组件实例没有与HTML模板链接一样。由于这个原因，this.element.className = 'blur'行是组件功能的基础，它被当作一个空指针来评估。如何解决这个问题并测试好组件？

Answer 1

正如angular所说，尽量不要更改代码中的DOM。

相反，你的模板应该是这样的：

<myElementId [class]="ElementIdClass" / >

在你的ngOnInit中，类似于：

ElementIdClass = "blur"

然后测试.ts 会更容易