Jasmine 间谍永远不会被调用

Question

I set up a Jasmine spy to test that when the user clicks a button (triggering the goBack() function), it opens a dialog component, or as far as the test is concerned, calls a thing. It's a really simple test, and I have virtually identical tests that work, but this one doesn't for some reason. The output of the test says Expected spy open to have been called .

component-with-a-button.component.ts

import { MatDialog } from '@angular/material/dialog';

export class ComponentWithAButton {
    constructor(private closeDialog: MatDialog) {}
    // A button triggers the following function
    goBack(): void {
        this.closeDialog.open(CloseDialogComponent);
    }
}

component-with-a-button.component.spec.ts

import { MatDialog } from '@angular/material/dialog';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ComponentWithAButton } from './component-with-a-button.component';

const closeDialogMock = { open: () => {} };

describe('ComponentWithAButton', () => {
    let component: ComponentWithAButton;
    let fixture: ComponentFixture<ComponentWithAButton>;

    beforeEach(async () => {
        await TestBed.configureTestingModule({
            declarations: [ComponentWithAButton],
            providers: [
                {
                    provide: MatDialog,
                    useValue: closeDialogMock,
                }
            ],
        }).compileComponents();
    });

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

    describe('goBack', () => {
        it('should call closeDialog.open', () => {
            const closeDialogSpy = spyOn(closeDialogMock, 'open');
            component.goBack();
            expect(closeDialogSpy).toHaveBeenCalled();
        });
    });
});

Answer 1

As it turns out, jasmine won't let you use two providers of the same type (well, theoretically you should be able to add the multi: true flag to use multiple of the same provider, but it wasn't working for me, so that's something I need to do more reading on), and the final one will take precedence. In the question, I simplified my actual code to focus on where I thought the problem lay. My actual component code looked more like this (notice two MatDialog s instead of one):

import { MatDialog } from '@angular/material/dialog';
import { CloseDialogComponent } from 'some/direcotry/close-dialog.component';
import { SubmitDialogComponent } from '/other/directory/submit-dialog.component';

export class ComponentWithAButton {
    constructor(private closeDialog: MatDialog, private submitDialog: MatDialog) {}

    goBack(): void {
        this.closeDialog.open(CloseDialogComponent);
    }

    submit(): void {
        this.submitDialog.open(SubmitDialogComponent);
    }
}

To resolve the issue of having multiple providers of one type, I reduced the MatDialog s in the constructor to one and wrote a dialog builder function that takes a generic component, so now the component looks more like this:

import { MatDialog } from '@angular/material/dialog';
import { ComponentType } from '@angular/cdk/portal';
import { CloseDialogComponent } from 'some/direcotry/close-dialog.component';
import { SubmitDialogComponent } from '/other/directory/submit-dialog.component';

export class ComponentWithAButton {
    constructor(private dialogConstructor: MatDialog) {}

    goBack(): void {
        this.constructDialog(CloseDialogComponent);
    }

    submit(): void {
        this.constructDialog(SubmitDialogComponent);
    }

    private constructDialog(component: ComponentType<any>) {
        this.dialogConstructor.open(component);
    }
}