How to test Material2 snack-bar?

Question

I have a project on Angular 5 and I encountered with following issue. I have a component ComponentWithSnackBar which triggers displaying of a snack-bar:

showSnackBar() {
  this.snackBar.open('Message text', 'Close', {
    duration: 5000,
    verticalPosition: 'top',
  });
}

It works as expected. But I have no ideas how I can test it. I try to write test:

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

As a result I get error

TypeError: Cannot read property 'textContent' of null

What I do wrong? Thanks for advance!

Answer 1

The following worked for me:

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

I decided do not test fact of displaying of snack-bar, but only fact of call method snackBar.open() with correct arguments:

expect(snackBarSpy.open.calls.count()).toEqual(1);
expect(snackBarSpy.open.calls.first().args).toEqual([message, 'Close', {duration: 5000, verticalPosition: 'top'}]);