How to test if Angular Material Dialog is open

1.2k views Asked by At

I am writing a unit test to check whether or not a function call opened the a Material dialog element. I am getting False, whereas the expected result is True. The component function is:

x.component.ts

openCartDialog(): void {
        this.dialog.open(CartComponent);
        this.isCartDialogOpen = true;
}

And my x.component.spec.ts file has the following code and test:

export class DialogMock {
    open(): void {
        return;
    }
}

beforeEach(async(() => {

    TestBed.configureTestingModule({
        declarations: [MainPageComponent, CartComponent, ConfirmButtonComponent],
        imports: [RouterTestingModule, HttpClientModule, MatTabsModule, MatDialogModule],
        providers: [
            { provider: MatDialog, useClass: DialogMock },
        ],
    }).compileComponents();
}));

beforeEach(() => {
    fixture = TestBed.createComponent(MainPageComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
});


it('should open the cart dialog', () => {
       component.openCartDialog();
       expect(component.isCartDialogOpen).toBeTrue();
});

I think the problem lays in my beforeEach() where the CartComponent is not instantialized properly. The Cart component also uses other components in its template...I only included ConfirmButtonComponent in this code, but there are more.

Thanks for your help!

0

There are 0 answers