如何对angular7中具有@Input变量的组件进行单元测试？

Question

我有一个 angular 组件，它有一些 Input() 变量，其中来自 parent 像这样的组件

componet.ts

  @Input() transactions: any[] = [];
  @Input() total: number = 0;
  @Input() cash: number = 0;
  @Input() card: number = 0;
  @Input() cheque: number = 0;


  ngOnInit() {
   this.paidToDate = (this.card || 0) + (this.cash || 0) + (this.cheque || 0);
  }

当我尝试运行单元测试这个组件时，它只有组件的基本单元测试 creation 像这样

component.spec.ts

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

 beforeEach(async(() => {
TestBed.configureTestingModule({
  declarations: [ 
    EstimateTotalComponent
  ],
  imports: [
    FormsModule,
    CheckboxModule,
    DropdownModule,
    TableModule,
    AutoCompleteModule,
    HttpClientModule,
    SharedModule,
    RouterTestingModule,
    CookieModule.forRoot(),
    ToastrModule.forRoot(),
    NgxMaskModule.forRoot(),
    TabViewModule,
    LoadingBarHttpClientModule,
    BrowserAnimationsModule
  ],
  providers: [
    HTTPService,
    HelperService,
    DateService,
    ValidationService,
    CookieService,
    ToastrService,
    SocketService,
    CalculationService,
    DataService,
    DialogService
   ],
   schemas : [ CUSTOM_ELEMENTS_SCHEMA]
 })
  .compileComponents();
}));

 beforeEach(() => {
  fixture = TestBed.createComponent(EstimateTotalComponent);
  component = fixture.componentInstance;
  component.transactions = [];
  component.total = 0;
  component.cash = 0;
  component.card = 0;
  component.cheque = 0;
  fixture.detectChanges();
});

it(UNIT_TEST.ComponentCreated, () => {
 expect(component).toBeTruthy();
});

但是它会抛出这样的错误。

我怎样才能摆脱这个错误？

Answer 1

在beforeEach

中定义所有@Input变量

beforeEach(() => {
  fixture = TestBed.createComponent(EstimateTotalComponent);
  component = fixture.componentInstance;
  component.total=0;
  component.cash = 0;
  component.card = 0;
  component.cheque = 0;
  fixture.detectChanges();
});

如何对angular7中具有@Input变量的组件进行单元测试？

how to unit test a component which has @Input variables in angular7?

typescript

karma-jasmine

angular