如何在 Angular 中对通用组件进行单元测试

Question

I am writing a test for AppleComponent, and which has type <T,U extends BananaComponent<T>> . And there is BananaComponent<T>

target component

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

}

extended component

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

Here is my spec file for testing 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
   });
});

Therefore I have a problem with the following code, because component. could not obtain any variable or function inside BananaComponent.

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

My logic is the types of component and fixture are wrong, but I don't know how to fix it.

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

My question is:

How to correct the code so that component. could obtain the variables and functions inside BananaComponent?

Answer 1

Did you try to give the type of your component during the creation?

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

You should probably create a TestObject Model won't work with generic Type T.

export class TestObject {

}

Answer 2

My misunderstanding about this concept is:

AppleComponent is not really extending from BananaComponent, therefore component. will never be able to obtain anything from BananaComponent.

What is happnening here is just the type of AppleComponent extends the BananaComponent; The purpose is to keep the type of the input value inside the AppleComponent to be identical with the type of input value inside BananaComponent.

Therefore during the test it is still need to write the component, fixture in a right way.

Solution for my quesiton I asked

// 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>

And for a better understanding of the relationship between the types of AppleComponent and BananaComponent, here are the more detailed codes.

AppleComponent

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

BananaComponent

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

   public totalPurchase: T;
}

from the above code, we could see that

1. inside BananaComponent, type T is to make sure the input bananaPurchase has the same type with totalPurchase, eg when bananaPurchase = 1000; then the type is set to number, then the value of totalPurchase has to be a number as well, and vice versa.

2. same situation inside AppleComponent, because it extends the type from BananaComponent, therefore it means the applePurchase should have the same type with bananaPurchase and totalPurchase.