如何在 Angular 中對通用組件進行單元測試

Question

我正在為 AppleComponent 編寫一個測試，它的類型為<T,U extends BananaComponent<T>> 。 還有BananaComponent<T>

目標組件

export class AppleComponent<T,U extends BananaComponent<T>>{
   public appleA = 'appleA';
   public appleB = 'appleB';
   public appleC !: U;

}

擴展組件

export abstract class BananaComponent<T> implements OnInit{
   public bananaA = 'bananaA';
   public bananaB = 'bananaB';
}

這是我用於測試AppleComponent的規范文件

import { CommonModule } from '@angular/common';
import { ComponentFixture, TestBed } from '@angular/core/testing';

import {AppleComponent} from '....';
import {BananaComponent} from '....';

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

   beforeEach(()=>{
     TestBed.configureTestingModule({
         declarations:[AppleComponent],
         imports:[BananaComponent],
     });
     fixture = TestBed.creatComponent(AppleComponent);
     component = fixture.componentInstance;
   });

   it('should with defaults',() => {
      expect(component.appleA).toBe('appleA','appleA has appleA as default value'); // passes
      expect(component.bananaA).toBe('bananaA','bananaA has bananaA as default value'); // failes
   });
});

因此我對以下代碼有疑問，因為component. 無法在 BananaComponent 中獲取任何變量或 function。

expect(component.bananaA).toBe('bananaA','bananaA has bananaA as default value');

我的邏輯是組件和夾具的類型是錯誤的，但我不知道如何修復它。

let component: AppleComponent;
let fixture: ComponentFixture<AppleComponent>;

我的問題是：

如何更正該組件的代碼。 可以獲取 BananaComponent 里面的變量和函數嗎？

Answer 1

您是否嘗試在創建過程中提供組件的類型？

fixture = TestBed.createComponent<AppleComponent<TestObject>>(AppleComponent)

您可能應該創建一個 TestObject Model 不適用於通用類型 T。

export class TestObject {

}

Answer 2

我對這個概念的誤解是：

AppleComponent 並不是真正從 BananaComponent 擴展而來，因此是組件。 永遠無法從 BananaComponent 獲得任何東西。

這里發生的只是 AppleComponent 的類型擴展了 BananaComponent； 目的是保持 AppleComponent 內部輸入值的類型與 BananaComponent 內部輸入值的類型相同。

因此在測試過程中仍然需要以正確的方式編寫組件、夾具。

我問的問題的解決方案

// first inside the test to define a random type, then give it to AppleComponent, and BananaComponent.

type typeA = { };  
type typeModel = AppleComponent<typeA, BananaComponent<typeA>>;   

let component: typeModel; 
let fixture: ComponentFixture<typeModel>

為了更好地理解 AppleComponent 和 BananaComponent 的類型之間的關系，這里有更詳細的代碼。

蘋果組件

export class AppleComponent<T,U extends BananaComponent<T>>{
   public appleA = 'appleA';
   public appleB = 'appleB';
   public applePurchase !: U;
}

香蕉組件

export abstract class BananaComponent<T> implements OnInit{
   public bananaA = 'bananaA';
   public bananaB = 'bananaB';
   public bananaPurchase : T;

   public totalPurchase: T;
}

從上面的代碼中，我們可以看到

1. 在 BananaComponent 中，type T 是為了確保輸入的bananaPurchase 與totalPurchase 的類型相同，例如當bananaPurchase = 1000 時； 那么類型設置為數字，那么 totalPurchase 的值也必須是數字，反之亦然。

2. AppleComponent 內部的情況相同，因為它擴展了 BananaComponent 的類型，因此這意味着 applePurchase 應該與bananaPurchase 和 totalPurchase 具有相同的類型。