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

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

我的测试如下所示：

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');
  });
});

---

正确理解这些要点：

您不应该在父组件中涵盖子组件的单元测试

您应该只在各自的规范文件中编写组件的单元测试

在为组件编写单元测试时，您不需要担心外部依赖关系（在您的情况下，它是子组件）

您应该提供所有组件依赖项的配置，或者可以包括

NO\u ERROR\u SCHEMA

。所以，这不会给出在测试台配置中包含所有使用组件的引用的错误。 您可以将

NO\u ERROR\u SCHEMA

包括为：

SCHEMA:[无错误\u SCHEMA]

---

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

如果仍然不清楚，并且您仍然无法成功运行单元测试，那么也可以为您的组件添加HTML，我们将对此进行检查。您好，谢谢您的解释。我还是无法理解，因为我。我正在对子组件进行单元测试，只是为了查看是否收到来自父组件的输入。我共享的文件是用于子组件的。我得了2分。三,。但不确定如何确定如何使用

NO_ERROR\u SCHEMA

，因为错误与接收数据不匹配的类型有关。@更新-测试错误显示来自其他组件和服务测试的错误，一旦我注释掉这些错误，我的组件测试在没有视图的情况下通过。HTML仅填充从父级接收的数据。是这样吗？我不太确定。正确，请记住一件事，所以测试任何组件或服务的单元测试，只需运行特定的测试用例，或特定文件的所有测试用例，以便仅获取这些测试的状态。您可以输入“f”来设置优先级，即运行特定的测试用例，如fdescribe或fit（而不是descripe或it）。同样，您可以通过在“descripe”和“it”（xit或descripe）前面输入x来跳过

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() { }

}