角度测试：预期已调用间谍间谍AuthenticationService.checkUsername

Question

我正在学习Angular测试，到目前为止，它非常令人沮丧。 我想测试我的注册组件，但这给了我以下错误。

预期已调用间谍间谍AuthenticationService.checkUsername。

这是我要测试的组件。 我目前正在测试方法checkUniqueUsername()是否按计划工作。 当我调用该消息时，当authService.checkUsername()方法返回{obj: true}时，我希望属性uniqueUsernameMessage包含字符串'already exists' 。

不幸的是，它返回上面的错误，并且对于属性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');
    })
  )
});

Answer 1

这行：

component.mySignupForm.value.username = fakeUsername;

不会更改FormControl的值。 username值仍为null 。 因此，当您检查其有效性时， if的条件为false 。

反应形式是不可变的。 如果要为任何FormControl设置新值，则应使用.setValue() 。

像这样：

component.mySignupForm.get（ '用户名'）的setValue（fakeUsername）。

希望这可以帮助 ：）