我正在学习Angular测试,到目前为止,它非常令人沮丧。我想测试我的注册组件,但这给了我以下错误。
预期的间谍AuthenticationService.checkUsername已被 叫。
这是我要测试的组件。我目前正在测试方法checkUniqueUsername()
是否按计划工作。当我调用该消息时,我期望uniqueUsernameMessage
方法返回'already exists'
authService.checkUsername()
包含字符串{obj: true}
。
不幸的是,它返回上述错误,并且对于属性uniqueUsernameMessage
的值,它返回的是undefined而不是预期的.contains(already exists)
。
有人可以帮我弄清楚我出了什么问题吗?
Signup.component.ts
@Component({
selector: 'app-sign-up',
templateUrl: 'sign-up.component.html',
styleUrls: ['sign-up.component.css']
})
export class SignUpComponent implements OnInit {
mySignupForm: FormGroup;
countries = countries;
uniqueUsernameMessage;
uniqueEmailMessage;
formSubmitted = false;
@Output() closeSubmenu = new EventEmitter();
constructor(
private authService: AuthenticationService,
private route: Router,
private navigationService: NavigationService){}
ngOnInit() {
this.mySignupForm = new FormGroup({
firstName: new FormControl(null, Validators.required),
lastName: new FormControl(null, Validators.required),
username: new FormControl(null, [Validators.required, Validators.minLength(5), Validators.maxLength(15)]),
birthDate: new FormControl(null, Validators.required),
password1: new FormControl(null, [Validators.required, Validators.minLength(6), Validators.maxLength(15)]),
password2: new FormControl(null, Validators.required),
email: new FormControl(null, [Validators.required, Validators.email]),
country: new FormControl(null, Validators.required),
house: new FormControl(null, Validators.required)
})
}
checkUniqueUsername() {
if ((this.mySignupForm.value.username >= 5 && this.mySignupForm.value.username <= 15) || null ){
this.authService.checkUsername(this.username.value)
.pipe(debounceTime(500))
.subscribe((result: any) => {
if (result.obj) {
console.log('result', result);
this.uniqueUsernameMessage = "This username already exists. Please pick another one."
} else {
this.uniqueUsernameMessage = null;
}
})
}
}
}
signup.component.spec.ts
describe('signup', () => {
let component: SignUpComponent;
let fixture: ComponentFixture<SignUpComponent>;
let authService;
beforeEach(async(() => {
const authServiceSpy = jasmine.createSpyObj('AuthenticationService', ['checkUsername', 'checkEmailUniqueness', 'signup']);
TestBed.configureTestingModule({
declarations: [SignUpComponent],
providers: [
{
provide: AuthenticationService,
useValue: authServiceSpy
},
NavigationService
],
imports: [
RouterTestingModule],
schemas: [NO_ERRORS_SCHEMA]
})
.compileComponents();
authService = TestBed.get(AuthenticationService);
}));
beforeEach(() => {
fixture = TestBed.createComponent(SignUpComponent);
component = fixture.componentInstance;
// fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should warn user if username already exists', fakeAsync(() => {
const fakeUsername = "testUsername"
authService.checkUsername.and.returnValue(of({obj: true}));
fixture.detectChanges();
component.mySignupForm.value.username = fakeUsername;
fixture.detectChanges();
component.checkUniqueUsername();
tick(500);
expect(authService.checkUsername).toHaveBeenCalled();
expect(component.uniqueUsernameMessage).toContain('already exists');
})
)
});
答案 0 :(得分:0)
此行:
component.mySignupForm.value.username = fakeUsername;
不会更改FormControl的值。 username
的值仍为null
。因此,当您检查其有效性时,if
内部的条件为false
。
反应形式是不可变的。如果要为任何FormControl设置新值,则应使用.setValue()
。
赞:
component.mySignupForm.get('用户名').setValue(fakeUsername);
希望这会有所帮助:)