我有一个关于 Angular 5 的项目,我遇到了以下问题。我有一个 触发显示 snackbar 的组件 ComponentWithSnackBar:
showSnackBar() {
this.snackBar.open('Message text', 'Close', {
duration: 5000,
verticalPosition: 'top',
});
}
它按预期工作。但我不知道如何测试它。我尝试编写测试:
describe('ComponentWithSnackBar', () => {
let snackBar: MatSnackBar;
let overlayContainer: OverlayContainer;
let overlayContainerElement: HTMLElement;
function createComponent<T>(component: Type<T>, providers: Provider[] = [], declarations: any[] = []): ComponentFixture<T> {
TestBed.configureTestingModule({
imports: [AppModule, RouterTestingModule, NoopAnimationsModule],
declarations: declarations,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers,
}).compileComponents();
inject([MatSnackBar, OverlayContainer], (sb: MatSnackBar, oc: OverlayContainer) => {
snackBar = sb;
overlayContainer = oc;
overlayContainerElement = oc.getContainerElement();
})();
return TestBed.createComponent<T>(component);
}
it(`Should display snack-bar`, fakeAsync(() => {
const fixture = createComponent(ComponentWithSnackBar);
const component: ComponentWithSnackBar = fixture.debugElement.componentInstance;
fixture.detectChanges();
const button = fixture.debugElement.query(By.css('button')); //button which triggers method showSnackBar
button.triggerEventHandler('click', null);
fixture.detectChanges();
flush();
const messageElement = overlayContainerElement.querySelector('snack-bar-container');
expect(messageElement.textContent).toContain('Message text');
}));
});
结果我得到错误
TypeError: Cannot read property 'textContent' of null
我做错了什么?感谢您的提前!
最佳答案
以下对我有用:
describe('MyComponent', () => {
let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;
let element: any;
let overlayContainer: OverlayContainer;
let overlayContainerElement: HTMLElement;
let snackBar: MatSnackBar;
....
beforeEach(() => {
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
element = fixture.nativeElement;
fixture.detectChanges();
});
beforeEach(inject([MatSnackBar, OverlayContainer],
(sb: MatSnackBar, oc: OverlayContainer) => {
snackBar = sb;
overlayContainer = oc;
overlayContainerElement = oc.getContainerElement();
}));
....
it('should show my success message', () => {
const containerElement = overlayContainerElement.querySelector('simple-snack-bar');
expect(containerElement.textContent).toContain('My success text');
});
关于angular - 如何测试Material2 snack-bar?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49640113/