自定义snackbar的单元测试，带有驳回操作

Question

我定义了许多不同的方法来打开海关小吃吧，有持续时间和没有持续时间，有驳回事件和没有驳回事件，例如：

showError(title: string, message: string): void {
this.zone.run(() => {
this.snackBar.openFromComponent(NotificationSnackbarComponent, {
duration: 3000,
data: {
title,
message,
snackType: 'error',
closeSnackbar: () => {
this.snackBar.dismiss();
},
},
});
});
}

我如何对此事件进行单元测试：

closeSnackbar: () => {   this.snackBar.dismiss(); },

我试过这个方法：

it('should show notification smackbar from showError', () => {
const spy = spyOn(snackBar, 'openFromComponent');
const snackBarSpy = spyOn(snackBar, 'dismiss');
service.showError('Title', 'Message');
expect(spy).toHaveBeenCalled();
snackBar.dismiss();
expect(snackBarSpy).toHaveBeenCalled()
});

但是我需要测试CCD_ 1而不是CCD_。我不知道我怎样才能使用那个方法。我以前有这个每个配置：

let service: NotificationService;
let snackBar: MatSnackBar;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
MatSnackBarModule
],
providers: [
{ provide: MatSnackBarRef, useValue: {} },
{ provide: MAT_SNACK_BAR_DATA, useValue: {} },
]
});
service = TestBed.inject(NotificationService);
snackBar = TestBed.inject(MatSnackBar);
});

知道吗？谢谢

Answer 1

试试下面的内容，我添加了注释。希望你能跟随并理解。

let service: NotificationService;
let snackBar: MatSnackBar;
let mockSnackBarRef: jasmine.SpyObj<MatSnackBarRef>;
beforeEach(() => {
// the first string ('SnackBarRef') is used for debugging purposes
// the second array of strings are public methods you would like to mock
mockSnackBarRef = jasmine.createSpyObj<MatSnackBarRef>('SnackBarRef', ['openFromComponent', 'dismiss']);
TestBed.configureTestingModule({
imports: [
MatSnackBarModule
],
providers: [
// change it to provide the mock - I assume this.snackBar is
// MatSnackBarRef
{ provide: MatSnackBarRef, useValue: mockSnackBarRef },
{ provide: MAT_SNACK_BAR_DATA, useValue: {} },
]
});
service = TestBed.inject(NotificationService);
snackBar = TestBed.inject(MatSnackBar);
});
....
it('should show notification smackbar from showError', () => {
service.showError('Title', 'Message');
// expect method to be called
expect(mockSnackBarRef.openFromComponent).toHaveBeenCalled();
// get the 2nd argument of the most recent call of openFromComponent
const secondArgument = mockSnackBarRef.openFromComponent.calls.mostRecent().args[1];
// call the closeSnackbar
secondArgument.data.closeSnackbar();
// expect the dismiss to be called
expect(mockSnackBarRef.dismiss).toHaveBeenCalled();
});