要在Angular中测试带有用户交互的警告弹窗,我们需要使用模拟器库。我们可以使用ng-mock-alert模拟弹出窗口并模拟用户交互。下面是一个简单的示例。
首先,让我们安装ng-mock-alert:
npm install ng-mock-alert --save-dev
接下来,在你的组件中使用弹出窗口的代码应该是这样的:
import { AlertService } from './alert.service';
export class MyComponent {
constructor(private alertService: AlertService) {}
showAlert() {
const msg = 'Are you sure?';
this.alertService.confirm(msg).then((result) => {
if (result) {
console.log('OK');
} else {
console.log('CANCEL');
}
});
}
}
现在是我们的测试:
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MyComponent } from './my.component';
import { AlertService } from './alert.service';
import { NgMockAlertModule } from 'ng-mock-alert';
describe('MyComponent', () => {
let component: MyComponent;
let fixture: ComponentFixture;
let alertService: AlertService;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MyComponent ],
imports: [ NgMockAlertModule ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
alertService = TestBed.inject(AlertService);
spyOn(alertService, 'confirm');
});
it('should show alert', async(() => {
component.showAlert();
expect(alertService.confirm).toHaveBeenCalled();
}));
});
我们首先导入了NgMockAlertModule,然后我们注入了AlertService,并使用spyOn方法来捕获confirm方法的调用。
在我们的测试用例中,我们只是调用showAlert方法,并检查是否调用了AlertService的confirm方法。
现在,我们的测试用例应该是可以运行的,并且在运行过程中不会弹出任何窗口。