Angular 6 带有@Input 装饰器的 Karma 测试子类

Question

相关问题似乎没有答案，所以我针对我的具体情况问这个问题。

我正在寻找单元测试 Angular 6 组件，它是基本组件的子 class。该基础组件有一个 @Input 装饰器。抽象基 class 像这样：

import { Component, Input } from '@angular/core';
import { dateToUsFormat } from '../../helpers/date-helpers';

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

export class AbstractWidgetComponent {
    @Input() widgetData;
    constructor() {
    }
}

实现方式class是这样的：

import { Component, OnInit } from '@angular/core';
import { AbstractWidgetComponent } from '../abstract-widget/abstract-widget.component';

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

export class WidgetTitleComponent extends AbstractWidgetComponent implements OnInit {

  ngOnInit() {
  }
  get titleReturn () {
    return widget_data.visual.title;
  }
}

所以，看起来很简单。不幸的是，为这一小块代码编写单元测试似乎是不可能的。我想要做的是使用具有特定 widgetData 的 AbstractWidgetComponent 实例化 widget_title 组件。

到目前为止我的代码如下所示：

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

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [ MatCardModule, AbstractWidgetComponent ],
            declarations: [ WidgetTitleComponent ],
            schemas: [ NO_ERRORS_SCHEMA  ]
        })
            .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(WidgetTitleComponent);
        component = fixture.componentInstance;
        component.widgetData = {visual: {title: 'This is a Sample Title'}};
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
        expect(component.titleReturn()).toBe('This is a Sample Title');
    });
});

此代码向我提供了错误，"cannot find name 'widget_data'." 我要说的是，"Sure enough..... But where do I put that?" 我尝试了几种变体，但我有点困惑。

我不是 Angular 或注入方面的专家，但我浏览了一些资源，包括： This GitHub Link, with its associated blog post and this Microsoft post. 我（可能是错误地）希望有一种相当简单的实例化方法基础 class 并通过 Jasmine 自动将其注入运行。这两个链接都涉及构建一个全新的 class。

有没有办法让这个简单，或者我是否需要构建一个测试注入class来配合基础class ？

解决时注意事项：我按预期添加了 no_errors_schema 并且只是将组件属性设置为在 beforeEach.

期间具有我想要的值

Answer 1

您应该在 declarations 数组中包含 AbstractWidgetComponent。导入适用于所有模块，用 @ngModule.

声明

您也可以使用 NO_ERRORS_SCHEMA 选择忽略它们：详情

Answer 2

正如我所见，问题与茉莉花无关，也与您正在扩展另一个组件无关（上面代码的正常服务，也应该给您同样的错误）。

'widget_data' 不存在，我猜你想访问一些属性的扩展 'widgetData' (@Input)？

如果是这种情况，您应该改用 'this.widgetData' 来访问它。这应该可以解决您的错误，之后您应该能够使用@Input 将您的组件作为 "normal" 组件进行测试。（并且如前所述，将您的组件保留在声明中而不是导入中）。

https://angular.io/guide/testing#component-with-inputs-and-outputs

如果没有，并且您想访问 'widget_data.visual.title'，则需要声明它。

Angular 6 带有@Input 装饰器的 Karma 测试子类

Angular 6 Karma Test Subclass with @Input decorator

testing

unit-testing

karma-runner

angular

angular6