Javascript 在Angular 6中测试登录组件

我想用Jasmine测试我的登录页面

步骤1：登录组件（HTML组件）

步骤3：服务组件

<form [formGroup]="adminLogin" class="col s12 white" (ngSubmit)="OnSubmit()">
    <div class="row">
        <div class="input-field col s12">
          <i class="material-icons prefix">account_circle</i>
          <input type="text" name="UserName" formControlName="UserName" placeholder="Username" required>
        </div>
      </div>
      <div class="row">
         <div class="input-field col s12">
           <i class="material-icons prefix">vpn_key</i>
           <input type="password" name="Password" formControlName="Password" placeholder="Password" required>
         </div>
       </div>
       <div class="row">
           <div class="input-field col s12">
             <button class="btn-large btn-submit" type="submit">Login</button>
           </div>
         </div>
   </form>

import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse, HttpHeaders } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
import {Observable} from 'rxjs';
import { User } from './user.model';

@Injectable()
export class UserService {
  readonly rootUrl = 'http://localhost:54804';
  constructor(private http: HttpClient) { }


  userAuthentication(userName, password) {
    var data = "username=" + userName + "&password=" + password + "&grant_type=password";
    var reqHeader = new HttpHeaders({ 'Content-Type': 'application/x-www-urlencoded','No-Auth':'True' });
    return this.http.post(this.rootUrl + '/token', data, { headers: reqHeader });
  }

  getUserClaims(){
    return  this.http.get(this.rootUrl+'/api/GetUserClaims'
    ,{headers : new HttpHeaders({'Authorization' : 'Bearer '+localStorage.getItem('userToken')})}
    );
   }

}

代码运行良好

我尝试了以下测试，但我也想测试两种方法，即。 用户身份验证（用户名、密码） getUserClaims（）

有人能帮忙吗

import { async, ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
import{ BrowserModule, By}from '@angular/platform-browser'
import { SignInComponent } from './sign-in.component';
import { FormsModule } from '@angular/forms';
import { UserService } from 'src/app/shared/user.service';
import { HttpClientModule } from '@angular/common/http';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { by } from 'protractor';
import { ReactiveFormsModule } from '@angular/forms';



describe('SignInComponent', () => {
  let component: SignInComponent;
  let fixture: ComponentFixture<SignInComponent>;
  let el: HTMLElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ SignInComponent ],
      imports: [FormsModule, HttpClientModule, RouterTestingModule,ReactiveFormsModule],
      providers: [UserService]
    })
    .compileComponents();
  }));

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

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

  it('Should set submitted to true', async(() => {
     component.OnSubmit();
     expect(component.OnSubmit).toBeTruthy();

  }));

  it('Should call the OnSubmit method', () =>{ fakeAsync(() =>{
    fixture.detectChanges();
    spyOn(component,'OnSubmit');
    el=fixture.debugElement.query(By.css('Login')).nativeElement;
    el.click();
    expect(component.OnSubmit).toHaveBeenCalledTimes(0);
  })

  });

  it('Form should be invalid', async(()=> {
    component.adminLogin.controls['UserName'].setValue('');
    component.adminLogin.controls['Password'].setValue('');
    expect(component.adminLogin.valid).toBeFalsy();
  }));

  it('Form should be valid', async(()=> {
    component.adminLogin.controls['UserName'].setValue('admin');
    component.adminLogin.controls['Password'].setValue('admin123');
    expect(component.adminLogin.valid).toBeTruthy();
  }));

});

从'@angular/core/testing'导入{async，ComponentFixture，TestBed，fakeAsync}；
从“@angular/platform browser”导入{BrowserModule，By}”
从“./sign-in.component”导入{SignInComponent}；
从'@angular/forms'导入{FormsModule}；
从'src/app/shared/user.service'导入{UserService}；
从'@angular/common/http'导入{HttpClientModule}；
从'@angular/Router'导入{Router}；
从“@angular/router/testing”导入{RouterTestingModule}；
从“量角器”导入{by}；
从'@angular/forms'导入{ReactiveFormsModule}；
描述（'SignInComponent'，（）=>{
let分量：SignInComponent；
let夹具：组件夹具；
让el:HTMLElement；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[SignInComponent]，
导入：[FormsModule，HttpClientModule，RouterTestingModule，ReactiveFormsModule]，
提供者：[用户服务]
})
.compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（SignInComponent）；
组件=fixture.componentInstance；
fixture.detectChanges（）；
});
它（'应该创建'，（）=>{
expect（component.toBeTruthy（）；
});
它（'Should set submited to true'，异步（（）=>{
OnSubmit（）；
expect（component.OnSubmit.toBeTruthy（）；
}));
它（'应该调用OnSubmit方法'，（）=>{fakeAsync（（）=>{
fixture.detectChanges（）；
间谍（组件，'OnSubmit'）；
el=fixture.debugElement.query（By.css（'Login'））.nativeElement；
el.click（）；
期望（component.OnSubmit）.tohaveincalledtimes（0）；
})
});
它（'表单应无效'），异步（（）=>{
component.adminLogin.controls['UserName'].setValue（''）；
component.adminLogin.controls['Password'].setValue（''）；
expect（component.adminLogin.valid）.toBeFalsy（）；
}));
它（'表单应该有效'，异步（（）=>{
component.adminLogin.controls['UserName'].setValue（'admin'）；
component.adminLogin.controls['Password'].setValue（'admin123'）；
expect（component.adminLogin.valid）.toBeTruthy（）；
}));
});

看起来您正在为SigningComponent（

sign-in.component.spec.ts

？）编写测试。本测试不应负责检查AuthService中的函数是否正常工作

• 测试组件时，在

  登录.component.spec.ts

  中，不应提供真正的AuthService，而应提供一个模拟。检查以下链接以了解执行此操作的不同方法：。通过这种方式，您可以完全控制服务中的函数返回的内容，以测试组件对不同情况的反应

• 您应该创建一个新文件，

  user.service.spec.ts

  ，专门测试UserService中的两个函数。Angular提供HttpTestingModule来测试HTTP请求，您可以在此处查看：

import { async, ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
import{ BrowserModule, By}from '@angular/platform-browser'
import { SignInComponent } from './sign-in.component';
import { FormsModule } from '@angular/forms';
import { UserService } from 'src/app/shared/user.service';
import { HttpClientModule } from '@angular/common/http';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { by } from 'protractor';
import { ReactiveFormsModule } from '@angular/forms';



describe('SignInComponent', () => {
  let component: SignInComponent;
  let fixture: ComponentFixture<SignInComponent>;
  let el: HTMLElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ SignInComponent ],
      imports: [FormsModule, HttpClientModule, RouterTestingModule,ReactiveFormsModule],
      providers: [UserService]
    })
    .compileComponents();
  }));

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

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

  it('Should set submitted to true', async(() => {
     component.OnSubmit();
     expect(component.OnSubmit).toBeTruthy();

  }));

  it('Should call the OnSubmit method', () =>{ fakeAsync(() =>{
    fixture.detectChanges();
    spyOn(component,'OnSubmit');
    el=fixture.debugElement.query(By.css('Login')).nativeElement;
    el.click();
    expect(component.OnSubmit).toHaveBeenCalledTimes(0);
  })

  });

  it('Form should be invalid', async(()=> {
    component.adminLogin.controls['UserName'].setValue('');
    component.adminLogin.controls['Password'].setValue('');
    expect(component.adminLogin.valid).toBeFalsy();
  }));

  it('Form should be valid', async(()=> {
    component.adminLogin.controls['UserName'].setValue('admin');
    component.adminLogin.controls['Password'].setValue('admin123');
    expect(component.adminLogin.valid).toBeTruthy();
  }));

});