mercredi 19 septembre 2018

Expected spy AuthenticationService.checkUsername to have been called

I'm learning Angular testing and so far it has been pretty frustrating. I wanted to test my signup component, but it gave me the following error.

Expected spy AuthenticationService.checkUsername to have been called.

This is the component I am trying to test. I am currently testing whether the method checkUniqueUsername() works as planned. When I call the message I expect the property uniqueUsernameMessage to contain the string 'already exists' when the authService.checkUsername() method returns {obj: true}

Unfortunately it returns the above error and for the value of the property uniqueUsernameMessage it returns undefined instead of the expected .contains(already exists).

Can someone help me figure out where I went wrong?

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');
    })
  )
});

Aucun commentaire:

Enregistrer un commentaire