如何测试Material2 Snak-bar？

Question

我有一个关于Angular 5的项目，遇到以下问题。我有一个组件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：无法读取null的属性'textContent'

我做错了什么？感谢前进！

Answer 1

受到https://github.com/angular/material2/blob/master/src/lib/snack-bar/snack-bar.spec.ts中示例的启发，以下对我有用：

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');
 });

Answer 2

当我尝试使用材质对话框测试组件时，我遇到了类似的问题。我没有找到解决方案，但我想我应该分享我所知道的：

如果您在运行时在测试上放置断点并检查范围，则overlayContainerElement（即带有 class 的 div cdk-overlay-container）没有子节点。

另外，如果您将以下内容添加到测试末尾的 Expect 语句之前：

console.log("overlay wrapper", document.getElementsByClassName('cdk-global-overlay-wrapper')[0]);
// and or
console.log("snackbar text", document.getElementsByClassName('snack-bar-container')[0]); // or whatever class you gave this item

他们都记录未定义。

我的理论是，角度变化检测不会在涉及显示材料部分（例如对话框或小吃栏）的组件上运行，这就是它们在测试期间为空/不显示的原因。

您还可以分享 ComponentWithSnackBar 的代码吗？