5

我有一个关于 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”

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

4

4 回答 4

7

以下对我有用：

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');
 });
于 2019-02-01T22:18:18.557 回答
1

我决定不测试显示小吃店的事实，而只测试snackBar.open()具有正确参数的调用方法的事实：

expect(snackBarSpy.open.calls.count()).toEqual(1);
expect(snackBarSpy.open.calls.first().args).toEqual([message, 'Close', {duration: 5000, verticalPosition: 'top'}]);
于 2018-04-04T10:03:49.603 回答
0

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

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

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

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 的代码吗？

于 2018-04-04T00:44:51.503 回答
-1 
const mockSnackbar = jasmine.createSpyObj(['open']);

it('test desc'()=>{
    component.showSnackBar()
        expect(mockSnackbar.open).tohavebeencalled();
        expect(mockSnackbar.open).tohavebeencalledwith('Message text',
            'Close', {
                duration: 5000,
                verticalPosition: 'top',
            });
})
于 2019-08-09T14:22:13.017 回答