类型具有私有属性模拟服务单元测试Angular 7的单独声明答案

【问题标题】：Types have separate declarations of a private property mock service unit test Angular 7类型具有私有属性模拟服务单元测试Angular 7的单独声明
【发布时间】：2019-09-13 21:17:49
【问题描述】：

我正在尝试创建一个 mockService，但我收到一个错误“类型有单独的私有属性声明”，对我来说，声明似乎是相等的并且没有不同，但它说不在错误中。我在一个注入了服务的组件中做这个测试！！！是的，我想在这里用模拟测试来测试它。

我的模拟服务代码：

class MockDataservice {   
result: any;
constructor(private http: HttpClient){
    sendCodeToServer() {
     return this.result;
     } 
}

describe('HomePage', () => 
...
{
 ...  
beforeEach(() => { 
...
    service = new MockDataservice(http);  
    component = new HomePage(platform, service, splash, statusbar, barcode, alert, http, loading, router);

原来的服务：

export class DataStorageService {
    result: any;
      constructor(private http: HttpClient) {
      }

sendToServer(data) {
const headers = new HttpHeaders().set('Content-Type', 'application/json');
   return new Promise((resolve, reject) => {
   this.http.post(endpoindURL, data, { headers: headers })
        .toPromise().then((data) => {
          resolve(data);
        }).catch((err) => {
          console.log(err);
          reject(err);
        });
    });
  }
}

组件中的服务使用：

export class HomePage {
barcodeScannerOptions: BarcodeScannerOptions;
    constructor(private platform: Platform, private **dataStorageService**: 
    DataStorageService,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar, private barcodeScanner: BarcodeScanner, public 
    alertController: AlertController,
    private http: HttpClient, private loadingController: LoadingController, 
    private router: Router) {

    this.initializeApp();

    this.barcodeScannerOptions = {
          showTorchButton: true,
          showFlipCameraButton: true
        };
      }

    function doesSomething(){
    this.dataStorageService.sendToServer(data).then((res) => {
    }

我在 home.spec 文件中的 service 一词中得到了错误

component = new HomePage(platform, service, splash, statusbar, 条形码、警报、http、加载、路由器）；

错误是

MockDataservice 不可分配给类型参数 //数据存储服务。类型有单独的声明私有财产http.ts

【问题讨论】：

你能正确格式化你的代码吗？
@fjc 现在已经正确格式化了，你可以看看吗？
您是否有理由手动实例化被测单元而不是让Testbed 这样做？
在下面查看我的答案

标签： angular unit-testing ionic-framework

【解决方案1】：

因此，这是正在发生的事情的详尽答案。我构建了一个重现该行为的最小示例：Broken example on TypeScript Playground。您实际上可以看到完全相同的错误消息。

这是怎么回事？ Component 期望在其构造函数中有一个实际的 Service 类的实例。 MockService 不是 Service。它只是巧合地具有相同的构造函数参数和相同的方法名称。编译器不知道两者实际上是兼容的（即实现相同的接口），因此会抛出错误。

我们如何解决这个问题？使用实际的面向对象抽象。由于Service 和MockService 实际上是可以互换的，我们需要让编译器知道这一点。我们如何做到这一点？ 通过让它们实现相同的接口。

我们将只定义一个Service 接口。我们将有一个ConcreteService，它包含默认行为，并实现Service。我们还将拥有我们的MockService，它将实现相同的Service，但具有模拟行为：Working example on TypeScript playground。，

【讨论】：

非常感谢您回答我的问题！这对我有很大帮助