Как написать блочные тесты для проверки формы в angular8? - PullRequest
Новая
       21

Как написать блочные тесты для проверки формы в angular8?

0 голосов
/ 22 марта 2020

У меня есть приложение angular, в котором я должен написать модульные тесты для проверки формы.

login.component.html

         <form>
            <div class="row justify-content-center mb-4">
              <div class="col-md-7">
                <img src="../../../../assets/alp_logo_transparent.png" class="img-fluid" alt="">
                <p class="welcome">Sign in to continue</p>
              </div>
            </div>
            <div class="form-group">
              <input type="text" name="email" [(ngModel)]="user.userName" maxlength="35" required>
              <label class="control-label" [ngClass]="{'invalid-input':validate.email}">Username</label>
              <i class="bar" [ngClass]="{'invalid':validate.email}"></i>
              <label class="error-label" *ngIf="validate.email">{{validate.email}}</label>
            </div>

            <div class="form-group mb-15 mt-30">
              <input type="password" name="password" [(ngModel)]="user.password" maxlength="35" required
                (keyup.enter)="onSubmit()">
              <label class="control-label" [ngClass]="{'invalid-input':validate.password}">Password</label>
              <i class="bar" [ngClass]="{'invalid':validate.password}"></i>
              <label class="error-label" *ngIf="validate.password">{{validate.password}}</label>
            </div>
            <div class="row text-center">
              <div class="col-md-12">
                <span class="error-label" *ngIf="validate.general">{{validate.general}}</span>
              </div>
            </div>

            <div class="row">
              <div class="col-sm-12 text-center mt-10 mb-30">
                <button type="button" (click)="onSubmit()" class="btn btn-block btn-primary btn-submit">Sign
                  in</button>
              </div>
              <p class="mt-auto pointer font-primary text-decoration-underline-hover" (click)="forgotPassword()">Forgot Password</p>
            </div>
          </form>

login.component.ts

  onSubmit() {
   if (this.user.userName && this.user.password) {
     this.validate = {};
     this.httpService.login(this.user)
      .then(d => {
      // console.log(this.helperService.jwtDecode(d.token))
      this.cookieService.putObject('alpat', d.token, environment.cookieOption);
      this.router.navigate([this.aclService.getEntry(this.helperService.jwtDecode(d.token).role)]);
     }, error => {
      console.log(error);
      this.validate['password'] = error;
    });
  }
  if (this.user && !this.user.userName) {
   if (this.validate['password']) {
     delete this.validate.password;
   }
   this.validate['email'] = messages.enterUsername;
 }
 if (this.user && !this.user.password) {
  if (this.validate['email']) {
    delete this.validate.email;
   }
   this.validate['password'] = messages.enterPassword;
 }
 if (!this.user.userName && !this.user.password) {
  this.validate['email'] = messages.enterUsername;
  this.validate['password'] = messages.enterPassword;
 }
}

login.component.spec.ts

    beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [LoginComponent],
        imports: [
            BrowserModule,
            FormsModule,
            ReactiveFormsModule,
            HttpClientModule,
            LoadingBarHttpClientModule,
            RouterTestingModule,
            ToastrModule.forRoot(),
            CookieModule.forRoot()
        ],
        providers: [HTTPService, ACLService, HelperService, CookieService, ToastrService]
    })
        .compileComponents().then(() => {
            fixture = TestBed.createComponent(LoginComponent);
            component = fixture.componentInstance;
            component.ngOnInit();
            fixture.detectChanges();
        });
}));

beforeEach(() => {
    fixture = TestBed.createComponent(LoginComponent);
    component = fixture.componentInstance;
    component.ngOnInit();
    fixture.detectChanges();
});

it('should create login page', () => {
    expect(component).toBeTruthy();
});

it('shoud be error on empty password', async(() => {
    component.user.userName = '';
    component.user.password = 'test12';
    fixture.detectChanges();
    spyOn(component, 'onSubmit');
    el = fixture.debugElement.query(By.css('button')).nativeElement;
    el.click();
    expect(Object.keys(component.validate).length).toEqual(1);
}))

Теперь я пишу модульный тест, в котором я помещаю userName значение пустую строку, а затем пытаюсь нажать Submit button, чтобы сгенерировать ошибку, и когда ошибка генерирует так validate object будет иметь key с именем email, содержащим сообщение проверки. Поэтому, когда я запускаю этот тест, я проверяю ключи в validate объекте, но он выдает ошибку типа Expected 0 to Equal 1.

Что я здесь не так делаю?

...