Javascript 在角度应用程序中运行ng测试时获取零喷油器错误

在我的angular应用程序中，我成功创建了一个网页。它执行得非常完美

但当我使用ng测试时，它显示了业力中的一些错误。像

超级用户.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { DashboardService } from '../dashboard.service';
import { environment } from 'src/environments/environment';
import { NotifyService } from '../notify.service';
import { AuthserviceService } from '../authservice.service';


@Component({
  selector: 'app-superuser',
  templateUrl: './superuser.component.html',
  styleUrls: ['./superuser.component.css']
})
export class SuperuserComponent implements OnInit {
constructor(private ds: DashboardService,private http:HttpClient) { }
  public superuser: any;
  public userlist: any;
  public last_login: any;
  public logi_ip: any;
  public usersloginstatus: any;
 
  ngOnInit() {
   // this.userslastlogin();
    //this.ds.dronedetails(localStorage.getItem('token'));
    this.ds.userslastlogin()
      .subscribe((usersloginstatus) => {
        this.usersloginstatus = usersloginstatus;

        console.log('obj4', usersloginstatus);
        this.superuser = this.usersloginstatus.superuser;
       // this.superuser.sort((a,b) => a.last_login.localeCompare(b.last_login));
        this.userlist = this.usersloginstatus.users;
        console.log('obj5', this.superuser);
        console.log('obj6', this.userlist);
      },


        err => {
          console.log("Error", err)
        }
      );

  }

 
  createActivity(){

    var userurlconf = '';
    let userprof = JSON.parse(localStorage.getItem('profile'));
    if (userprof.usertype == 'Admin') {
      userurlconf = '/api/activity/adminhistory';
    } else if (userprof.usertype == 'Super User') {
      userurlconf = '/api/activity/superuserhistory';
    } else {
      userurlconf = '/api/activity/userhistory';
    }
let httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Token ' + localStorage.getItem('token')
      })
    };
    this.http.post(environment.apiUrl + userurlconf,  httpOptions).subscribe(
      (dataforlogin) => {
        console.log(dataforlogin);
  
      },
      err => {
        console.log("Error", err)
      }
  
    );
  
  }

}

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { environment } from '../environments/environment';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';

declare let L: any;

@Injectable({
  providedIn: 'root'
})
export class DashboardService {
  public datas: any[];
  public mac: any;
  public ssid: any;
  public sensors: any[];
  public id: string;
  jammer: any;
  public drones: any;
  public Drone: any;
 public dataforlogin: any[];
  public profile: any;
  public userslogin: any;
  public usertype: string;
  public usersloginstatus: any
  getData: any;
  constructor(private http: HttpClient, private router: Router) {
  }

  dronedetails(): Observable<object> {
    let httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Token ' + localStorage.getItem('token')
      })
    };

    return this.http.get(environment.apiUrl + '/api/data/json', httpOptions)
    
  }
  
  setValues() {

  }
  
  sensordetails(): Observable<any> {
    let httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Token ' + localStorage.getItem('token')
      })
    };
    return this.http.get(environment.apiUrl + '/api/sensors', httpOptions)

}
jammerdetails(): Observable<any> {
    let httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Token ' + localStorage.getItem('token')
      })
    };
    return this.http.get(environment.apiUrl + '/api/jammers', httpOptions)
    //for lastlogin users

  }


  userslastlogin(): Observable<any> {
    let httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Token ' + localStorage.getItem('token')
      })
    };
    return this.http.get(environment.apiUrl +'/api/activity/loginusers', httpOptions)

  }
  }

import { inject, TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { DashboardService } from './dashboard.service';
import { HttpClient,HttpClientModule, HttpErrorResponse } from '@angular/common/http';

describe('DashboardService', () => {

  
  beforeEach(() => TestBed.configureTestingModule({
    imports: [HttpClientModule,HttpClientTestingModule,HttpClient],
    providers: [DashboardService]
  }));

  it('should be created', () => {
    const service: DashboardService = TestBed.get(DashboardService);
    expect(service).toBeTruthy();
  });

  /*it('should be created', inject([DashboardService], (service:DashboardService) => {
    expect(service).toBeTruthy();
  }));*/


});

dashboard.service.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { DashboardService } from '../dashboard.service';
import { environment } from 'src/environments/environment';
import { NotifyService } from '../notify.service';
import { AuthserviceService } from '../authservice.service';


@Component({
  selector: 'app-superuser',
  templateUrl: './superuser.component.html',
  styleUrls: ['./superuser.component.css']
})
export class SuperuserComponent implements OnInit {
constructor(private ds: DashboardService,private http:HttpClient) { }
  public superuser: any;
  public userlist: any;
  public last_login: any;
  public logi_ip: any;
  public usersloginstatus: any;
 
  ngOnInit() {
   // this.userslastlogin();
    //this.ds.dronedetails(localStorage.getItem('token'));
    this.ds.userslastlogin()
      .subscribe((usersloginstatus) => {
        this.usersloginstatus = usersloginstatus;

        console.log('obj4', usersloginstatus);
        this.superuser = this.usersloginstatus.superuser;
       // this.superuser.sort((a,b) => a.last_login.localeCompare(b.last_login));
        this.userlist = this.usersloginstatus.users;
        console.log('obj5', this.superuser);
        console.log('obj6', this.userlist);
      },


        err => {
          console.log("Error", err)
        }
      );

  }

 
  createActivity(){

    var userurlconf = '';
    let userprof = JSON.parse(localStorage.getItem('profile'));
    if (userprof.usertype == 'Admin') {
      userurlconf = '/api/activity/adminhistory';
    } else if (userprof.usertype == 'Super User') {
      userurlconf = '/api/activity/superuserhistory';
    } else {
      userurlconf = '/api/activity/userhistory';
    }
let httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Token ' + localStorage.getItem('token')
      })
    };
    this.http.post(environment.apiUrl + userurlconf,  httpOptions).subscribe(
      (dataforlogin) => {
        console.log(dataforlogin);
  
      },
      err => {
        console.log("Error", err)
      }
  
    );
  
  }

}

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { environment } from '../environments/environment';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';

declare let L: any;

@Injectable({
  providedIn: 'root'
})
export class DashboardService {
  public datas: any[];
  public mac: any;
  public ssid: any;
  public sensors: any[];
  public id: string;
  jammer: any;
  public drones: any;
  public Drone: any;
 public dataforlogin: any[];
  public profile: any;
  public userslogin: any;
  public usertype: string;
  public usersloginstatus: any
  getData: any;
  constructor(private http: HttpClient, private router: Router) {
  }

  dronedetails(): Observable<object> {
    let httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Token ' + localStorage.getItem('token')
      })
    };

    return this.http.get(environment.apiUrl + '/api/data/json', httpOptions)
    
  }
  
  setValues() {

  }
  
  sensordetails(): Observable<any> {
    let httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Token ' + localStorage.getItem('token')
      })
    };
    return this.http.get(environment.apiUrl + '/api/sensors', httpOptions)

}
jammerdetails(): Observable<any> {
    let httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Token ' + localStorage.getItem('token')
      })
    };
    return this.http.get(environment.apiUrl + '/api/jammers', httpOptions)
    //for lastlogin users

  }


  userslastlogin(): Observable<any> {
    let httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Token ' + localStorage.getItem('token')
      })
    };
    return this.http.get(environment.apiUrl +'/api/activity/loginusers', httpOptions)

  }
  }

import { inject, TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { DashboardService } from './dashboard.service';
import { HttpClient,HttpClientModule, HttpErrorResponse } from '@angular/common/http';

describe('DashboardService', () => {

  
  beforeEach(() => TestBed.configureTestingModule({
    imports: [HttpClientModule,HttpClientTestingModule,HttpClient],
    providers: [DashboardService]
  }));

  it('should be created', () => {
    const service: DashboardService = TestBed.get(DashboardService);
    expect(service).toBeTruthy();
  });

  /*it('should be created', inject([DashboardService], (service:DashboardService) => {
    expect(service).toBeTruthy();
  }));*/


});

我尝试了多种方法来克服这个问题，但我无法解决它

---

有谁能帮我解决这个问题。

错误在于

SuperUserComponent

，您共享的

spec

文件是

仪表板服务的

不管怎样，您应该创建一个
DashboardService
的
Mock
服务，并将其与
useClass
一起使用

让我帮助您了解
超级用户.component.spec.ts
：


class export MockDashboardService{
    userslastlogin(){
      return of({
         // whatever response is returned by http call as per the actual service
      })
    }
}

describe('SuperuserComponent', () => {
    let component: SuperuserComponent;
    let fixture: ComponentFixture<SuperuserComponent>;

       beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [SuperuserComponent],
            imports: [ ... required imports],
            providers: [
                { provide: DashboardService, useClass: MockDashboardService},

                // similarly replace other services
            ]
        }).compileComponents();
    }));

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

});


类导出MockDashboardService{
userslastlogin（）{
归还({
//http调用根据实际服务返回的响应
})
}
}
描述（'SuperuserComponent'，（）=>{
let组件：超级用户组件；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[SuperuserComponent]，
导入：[…所需导入]，
供应商：[
{提供：DashboardService，useClass:MockDashboardService}，
//以类似方式取代其他服务
]
}).compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（超级用户组件）；
组件=fixture.componentInstance；
})
});

你可以参考。对于您的此代码，您可以参考最佳实践
错误在于
超级用户组件
，您共享的
规范
文件属于
仪表板服务

不管怎样，您应该创建一个
DashboardService
的
Mock
服务，并将其与
useClass
一起使用

让我帮助您了解
超级用户.component.spec.ts
：


class export MockDashboardService{
    userslastlogin(){
      return of({
         // whatever response is returned by http call as per the actual service
      })
    }
}

describe('SuperuserComponent', () => {
    let component: SuperuserComponent;
    let fixture: ComponentFixture<SuperuserComponent>;

       beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [SuperuserComponent],
            imports: [ ... required imports],
            providers: [
                { provide: DashboardService, useClass: MockDashboardService},

                // similarly replace other services
            ]
        }).compileComponents();
    }));

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

});


类导出MockDashboardService{
userslastlogin（）{
归还({
//http调用根据实际服务返回的响应
})
}
}
描述（'SuperuserComponent'，（）=>{
let组件：超级用户组件；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[SuperuserComponent]，
导入：[…所需导入]，
供应商：[
{提供：DashboardService，useClass:MockDashboardService}，
//以类似方式取代其他服务
]
}).compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（超级用户组件）；
组件=fixture.componentInstance；
})
});

你可以参考。对于您的这段代码，您可以参考最佳实践
请随时向上投票也请随时向上投票