我是茉莉花的新手,并尝试学习如何在Angular4中为我的组件编写单元测试。成分。现在,当我尝试运行测试时,无法找到null的属性" classelist"。这是我到目前为止尝试的。
component.ts
ngOnInit() {
document.querySelector('.button-visible').classList.add('hidden');
}
这是我在我的规格ts文件中尝试做的。
component.spec.ts
describe('AppComponent', () => {
let component = AppComponent;
let fixture: ComponentFixture<AppComponent>;
let compiledElement;
});
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [AppComponent]
.....
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AppComponent);
component = fixture.componentInstance;
compiledElement = fixture.debugElement.nativeElement;
fixture.detectChanges();
});
it('should create component', () => {
expect(compiledElement.querySelector('button.button-visible').classList).toContain('hidden');
expect(component).toBeTruthy();
});
});
我无法弄清楚如何测试。任何帮助都将不胜感激。
为了在需要查找其以外的组件时运行测试项目。在您的情况下,您需要一个包含具有button-visible
类的DOM节点的测试组件。
您可以在测试规格中创建一个测试组件以使用:
@Component({
template: `
<button class="button-visible">Test Button</button>
<app-component></app-component>
`,
})
class TestHostComponent {
}
然后,您需要更改测试设置以包括并使用此新组件:
describe('AppComponent', () => {
let fixture: ComponentFixture<TestHostComponent>;
let testHostComponent: TestHostComponent;
let component: AppComponent;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [AppComponent, TestHostComponent]
.....
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TestHostComponent);
testHostComponent = fixture.componentInstance;
component = fixture.debugElement.query(By.directive(AppComponent)).componentInstance;
fixture.detectChanges();
});
});
您可以运行测试以查看测试组件中的按钮是否应用了类:
it('should add "hidden" class to HTML elements with "button-visible" class', () => {
const buttonElement = fixture.debugElement.query(By.css('.button-visible.hidden'));
expect(buttonElement).toBeTruthy();
});
我今天遇到了类似的问题编写单元测试。我想出了以下解决方案:
describe('AppComponent', () => {
let component = AppComponent;
let fixture: ComponentFixture<AppComponent>;
let compiledElement;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [AppComponent]
.....
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AppComponent);
component = fixture.componentInstance;
compiledElement = fixture.debugElement.nativeElement;
compiledElement.innerHTML += "<button class='button-visible'>Test Button</button>";
fixture.detectChanges();
});
it('should create component', () => {
expect(compiledElement.querySelector('button.button-visible').classList).toContain('hidden');
expect(component).toBeTruthy();
});
});