Question

我必须使用@Input（）为子组件编写测试。输出是一个对象，在视图中用于从父级接收后填充值。我尝试为此编写测试，但似乎没有通过。任何帮助将不胜感激，对于Angular是新手，对于测试是非常新手。

我的测试如下：

import { async, ComponentFixture, TestBed, } from '@angular/core/testing';
import { MetricsComponent } from './scenario-flow.component';

describe('MetricsComponent', () => {
  let component: MetricsComponent;
  let fixture: ComponentFixture<MetricsComponent>;
  const input = ['1', '2', '3','4', '5', '6', '7', '8', '9','10'];
  const testinput = {id:'1', projectId:'1', name:'scenario One', 
  attributes:null, structures:[], flows:[] };

  beforeEach(async(() => {
    TestBed.configureTestingModule({ 
      declarations: [ MetricsComponent ]
    }).compileComponents();
  }));

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

  it('should show change in input', () => {
    component.ParentMetrics = 'testinput';
    fixture.detectChanges();
    expect(fixture.nativeElement.querySelector('div').innerText).toEqual('test 
    input');
  });
});

组件为：

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-metrics',
  templateUrl: './metrics.component.html',
  styleUrls: ['./metrics.component.scss']
})

export class MetricsComponent implements OnInit {
  @Input() ParentMetrics:Metrics;

  constructor() { }

  ngOnInit() { }

}

Answer 1

正确理解以下几点：

您不应在父组件中涵盖子组件的单元测试。
您仅应在各自的规格文件中编写组件的单元测试。
在编写组件的单元测试时，您无需担心外部依赖关系（在您的情况下，它是子组件）。
您应该提供所有组件依赖项的配置，或者可以包含NO_ERROR_SCHEMA。因此，在TestBed配置中包括所有已使用组件的引用时，不会出现错误。您可以将NO_ERROR_SCHEMA包括为：

schemas: [NO_ERROR_SCHEMA]

希望，我消除了您的疑虑。

如何使用@input（）为有角度的子组件编写单元测试

1 个答案: