Angular 登录模块的测试难度

我一直在测试我的登录模块，但订阅没有得到测试，我无法检查本地存储也。我是一个初学者，到目前为止，我已经做到了这一点

从'@angular/core/testing'导入{async，ComponentFixture，TestBed}；
从“@angular/material”导入{MatSelectModule、MatInputModule、MatCardModule、MatButtonModule、MatDatepickerModule、MatNativeDateModule}；
从'@angular/forms'导入{FormGroup，FormsModule，FormControl，FormBuilder，Validators，ReactiveFormsModule}；
从“@angular/router/testing”导入{RouterTestingModule}；
从'@angular/common/http'导入{HttpClientModule}；
从“@angular/platform browser/animations”导入{BrowserAnimationsModule}；
从“./login.component”导入{LoginComponent}；
描述（'LoginComponent'，（）=>{
let组件：LoginComponent；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[LoginComponent]，
导入：[RouterTestingModule、ReactiveFormsModule、FormsModule、MatSelectModule、HttpClientModule、MatInputModule、BrowserAnimationsModule、MatCardModule、MatButtonModule、MatDatepickerModule、MatNativeDateModule]，
})
.compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（LoginComponent）；
组件=fixture.componentInstance；
fixture.detectChanges（）；
});
它（'应该创建'，（）=>{
expect（component.toBeTruthy（）；
});
});在类中有一个名为
loginService
的依赖项。在测试组件时，无需将实际服务添加到
提供者
阵列。但是您必须提供模拟或存根服务作为登录服务

首先像这样创建一个模拟服务对象

const loginSuject = new Subject();

const mockLoginServce = {
   loginUser: () => {
     return loginSuject.asObservable();
   }
}

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MatSelectModule, MatInputModule, MatCardModule, MatButtonModule, MatDatepickerModule, MatNativeDateModule } from '@angular/material';
import { FormGroup, FormsModule, FormControl, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { LoginComponent } from './login.component';

import { Subject } from 'rxjs';

describe('LoginComponent', () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;
  let service: LoginService;

  const loginSuject = new Subject();

  const mockLoginServce = {
    loginUser: () => {
      return loginSuject.asObservable();
    }
  }

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [LoginComponent],
      imports: [RouterTestingModule, ReactiveFormsModule, FormsModule, MatSelectModule, HttpClientModule, MatInputModule, BrowserAnimationsModule, MatCardModule, MatButtonModule, MatDatepickerModule, MatNativeDateModule],
      providers: [{ provide: LoginService, useValue: mockLoginServce }]
    })
      .compileComponents();
    service = TestBed.get(LoginService);
  }));

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

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

  describe('#loginUser tests', () => {
    it('Should return a valid response when loginService.loginUser is invoked', () => {
      const reponseData = { toke: 'asdasdasd' };
      loginSuject.next(reponseData);
      const loginUserData = {} // add the object here
      service.loginUser(loginUserData).subscribe((res) => {
        expect(res).toEqual(reponseData);
      });
    });
  });
});

正如您在这里看到的，我已经从
logiuser
方法返回了一个主题作为observer。我们必须这样做，因为实际方法还返回一个
可观察的

然后，您必须将模拟服务添加到
测试床
提供者数组中。并使用
TestBed.get（）
方法获取提供程序实例

 TestBed.configureTestingModule({
      declarations: [ LoginComponent ],
      imports: [], // your import go here.
      providers: [{provide: LoginService, useValue: mockLoginServce}]
    })
    .compileComponents();

 service = TestBed.get(LoginService);

当您测试组件的
logiuser
方法时，应该调用
subject.next（）
。您可以将响应对象传递到
下一个方法中

你的测试服应该是这样的

const loginSuject = new Subject();

const mockLoginServce = {
   loginUser: () => {
     return loginSuject.asObservable();
   }
}

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MatSelectModule, MatInputModule, MatCardModule, MatButtonModule, MatDatepickerModule, MatNativeDateModule } from '@angular/material';
import { FormGroup, FormsModule, FormControl, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { LoginComponent } from './login.component';

import { Subject } from 'rxjs';

describe('LoginComponent', () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;
  let service: LoginService;

  const loginSuject = new Subject();

  const mockLoginServce = {
    loginUser: () => {
      return loginSuject.asObservable();
    }
  }

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [LoginComponent],
      imports: [RouterTestingModule, ReactiveFormsModule, FormsModule, MatSelectModule, HttpClientModule, MatInputModule, BrowserAnimationsModule, MatCardModule, MatButtonModule, MatDatepickerModule, MatNativeDateModule],
      providers: [{ provide: LoginService, useValue: mockLoginServce }]
    })
      .compileComponents();
    service = TestBed.get(LoginService);
  }));

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

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

  describe('#loginUser tests', () => {
    it('Should return a valid response when loginService.loginUser is invoked', () => {
      const reponseData = { toke: 'asdasdasd' };
      loginSuject.next(reponseData);
      const loginUserData = {} // add the object here
      service.loginUser(loginUserData).subscribe((res) => {
        expect(res).toEqual(reponseData);
      });
    });
  });
});

从'@angular/core/testing'导入{async，ComponentFixture，TestBed}；
从“@angular/material”导入{MatSelectModule、MatInputModule、MatCardModule、MatButtonModule、MatDatepickerModule、MatNativeDateModule}；
从'@angular/forms'导入{FormGroup，FormsModule，FormControl，FormBuilder，Validators，ReactiveFormsModule}；
从“@angular/router/testing”导入{RouterTestingModule}；
从'@angular/common/http'导入{HttpClientModule}；
从“@angular/platform browser/animations”导入{BrowserAnimationsModule}；
从“./login.component”导入{LoginComponent}；
从'rxjs'导入{Subject}；
描述（'LoginComponent'，（）=>{
let组件：LoginComponent；
let夹具：组件夹具；
let服务：LoginService；
const loginsject=新主题（）；
常量mockLoginServce={
登录用户：（）=>{
return loginsObject.asObservable（）；
}
}
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[LoginComponent]，
导入：[RouterTestingModule、ReactiveFormsModule、FormsModule、MatSelectModule、HttpClientModule、MatInputModule、BrowserAnimationsModule、MatCardModule、MatButtonModule、MatDatepickerModule、MatNativeDateModule]，
提供程序：[{provide:LoginService，useValue:mockLoginServce}]
})
.compileComponents（）；
service=TestBed.get（LoginService）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（LoginComponent）；
组件=fixture.componentInstance；
fixture.detectChanges（）；
});
它（'应该创建'，（）=>{
expect（component.toBeTruthy（）；
});
描述（“#登录用户测试”，（）=>{
它（'调用loginService.loginUser时应返回有效响应'，（）=>{
const reponseData={toke:'asdasdasd'}；
loginsject.next（reponseData）；
const loginUserData={}//在此处添加对象
service.loginUser（loginUserData）.subscribe（（res）=>{
expect（res）.toEqual（responsedata）；
});
});
});
});

您可以在
中找到更多关于测试具有相关性的角度组件的信息，我们需要您的组件代码，如果抛出错误，错误输出（作为文本，而不是图像）。如果你仅仅依靠代码覆盖率，让我告诉你，你实际上没有测试任何东西。您的代码覆盖率显示了已运行的内容，但您无法通过当前的“测试”防止任何副作用。@trichetriche hi我在上面的帖子中添加了登录组件。请查收。非常感谢。