（Angular 单元测试）如何在 Jasmin 中模拟输入属性？

Question

我目前正在尝试为 Angular 单元测试模拟输入属性。不幸的是，我无法进一步了解并反复收到以下错误消息：

TypeError: Cannot read property 'data' of undefined

我的 HTML 模板如下所示

<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <plot [data]="graph.data" [layout]="graph.layout"></plot>
    </div>
  </div>
</div>

我的组件是这样的：

...
export class ChartComponent implements OnInit {

  @Input() currentChart: Chart;

  currentLocationData: any;

  public graph = {
    data: [
      {
        type: 'bar',
        x: [1, 2, 3],
        y: [10, 20, 30],
      }
    ],
    layout: {
      title: 'A simple chart',
    },
    config: {
      scrollZoom: true
    }
  };

  ...
}

我的单元测试目前看起来非常基础，但仍然会抛出上述错误：

describe('ChartComponent', () => {

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ChartComponent],
      imports: [
        // My imports
      ]
    })
      .compileComponents();
  }));

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

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

我尝试了不同的方法来模拟数据属性和 currentChart @Input。

实现此目标并修复单元测试的正确方法是什么？

Answer 1

输入属性就像任何变量一样工作。在您的 beforeEach 中，您可以将其设置为一个值

beforeEach(() => {
  fixture = TestBed.createComponent(ExplorerChartViewComponent);
  component = fixture.componentInstance;
  component.currentChart = someChart; // set input before first detectChanges
  fixture.detectChanges();
});

您可以阅读更多相关信息 here. I prefer this approach。

使用我的首选方法，您将拥有一个类似于

的 TestHost 组件

@Component({
  selector: 'app-testhost-chart',
  template: `<app-chart [currentChart]=chart></app-chart>`, // or whatever your Chart Component Selector is
})
export class TestHostComponent {
  chart = new Chart();
}

然后切换到创建新的测试主机。

 declarations: [ChartComponent, TestHostComponent ],
...
beforeEach(() => {
  fixture = TestBed.createComponent(TestHostComponent );
  component = fixture.debugElement.children[0].componentInstance;
  fixture.detectChanges();
});

不过，我认为我看到了您可能遇到的另外两个问题。特别是因为你正在分配图表

您输入 declarations: [ChartComponent], 但创建 fixture = TestBed.createComponent(ExplorerChartViewComponent); 我认为应该 TestBed.createComponent(ChartComponent)，除非那是 copy/paste 问题。
您的 html 有 <plot [data]="graph.data" [layout]="graph.layout"></plot> 表示您没有声明的绘图组件。您将需要为绘图声明一个组件。我建议做一些与 TestHostComponent 非常相似但与真正的 PlotComponent 具有相同 public 属性的东西，这样您就不会将 PlotComponent 的真正功能和依赖项带入您的 ChartComponent 单元测试中。

（Angular 单元测试）如何在 Jasmin 中模拟输入属性？

(Angular Unit-Test) How to mock input property in Jasmin?

unit-testing

typescript

karma-jasmine

angular

angular-unit-test

（Angular 单元测试）如何在 Jasmin 中模拟输入 属性？

(Angular Unit-Test) How to mock input property in Jasmin?

unit-testing

typescript

karma-jasmine

angular

angular-unit-test

（Angular 单元测试）如何在 Jasmin 中模拟输入属性？