我想对此 onSubmit 函数执行单元测试,其中肯定提交会导致 MatSnackbar 带有消息“提交成功”。我是 Jasmine Karma 的新手,请指导我在这种情况下对 MatSnackbar 的测试。
组件.ts
import { MatSnackBar } from "@angular/material/snack-bar";
constructor(
private snackBar: MatSnackBar,
private auth: AuthenticateService,
) {}
...
...
onSubmit(e) {
const newYellow = {
G1: e.value.Yellow_G1,
G2: e.value.Yellow_G2,
G3: e.value.Yellow_G3,
G4: e.value.Yellow_G4,
B1: e.value.Yellow_B1,
B2: e.value.Yellow_B2,
B3: e.value.Yellow_B3,
B4: e.value.Yellow_B4,
};
console.log(newYellow);
this.auth.submitnominYellow(newYellow).subscribe(
(res) => {
console.log(res);
this.snackBar.open("Submitted Successfully", "", {
duration: 2000,
});
},
(error) => {
console.log(error);
}
);
}
这是代码submitnomin
功能。auth.service.ts
submitnominYellow(inpobj) {
console.log(inpobj);
return this.http.post(environment.apiUrl + '/api/customize/yellow', inpobj);
}
我的单元测试用例有点像这样。
组件规格
const mockSnackbarMock = jasmine.createSpyObj(['open']);
mockSnackbarMock.open
const mockopblue =
{
success: true
}
const MockAuthService = {
submitnominYellow:(id) => (mockopblue),
getuser:() => (undefined)
};
...
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ YellowCustomizeComponent ],
imports: [HttpClientTestingModule, MatSnackBarModule, FormsModule, RouterTestingModule],
providers:[{provide: MatSnackBar, useValue: mockSnackbarMock},
{provide: AuthenticateService, useValue: MockAuthService}
]
})
.compileComponents();
}));
...
fit('should open the snack bar with correct arguments when form submitted', () => {
const e = {
value:{
Yellow_G1: "YGirlName1",
Yellow_G2: "GirlName2",
Yellow_G3: "GirlName3",
Yellow_G4: "GirlName4",
Yellow_B1: "BoyName1",
Yellow_B2: "BoyName2",
Yellow_B3: "BoyName3",
Yellow_B4: "BoyName4",
}
};
component.onSubmit(e)
console.log('mockSnackbarMock',mockSnackbarMock)
// console.log('yellow onsubmit',component.onSubmit(e));
expect(mockSnackbarMock.open).toHaveBeenCalledWith("Submitted Successfully", "", );
})