帶有@Input裝飾器的Angular 6 Karma測試子類

Question

似乎沒有相關問題的答案，因此我要針對我的具體情況詢問這一問題。

我希望對作為基礎組件子類的Angular 6組件進行單元測試。 該基本組件具有@Input裝飾器。 像這樣的抽象基類：

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

這樣的實現類：

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

此代碼為我提供了錯誤“找不到名稱'widget_data'”。 我對它說：“足夠……。但是我要放在哪里？” 我嘗試了幾種變體，但有些困惑。

我既不是Angular專家也不是注射專家，但我瀏覽了以下資源： GitHub鏈接，相關的博客文章和Microsoft文章。 我（可能是錯誤地）希望實例化基類並將其注入以通過Jasmine自動運行的相當簡單的方法。 這兩個鏈接都涉及建立一個全新的類。

有沒有辦法使之簡單 ，或者我需要建立一個與基礎類一起使用的測試注入類？

解決方案時的注意事項：我按預期添加了no_errors_schema，只是將component屬性設置為具有我在beforeEach期間想要的值。

Answer 1

您應該在declarations數組中具有AbstractWidgetComponent 。 導入適用於所有使用@ngModule聲明的模塊。

您還可以選擇使用NO_ERRORS_SCHEMA忽略它們： 這篇文章中的詳細信息

Answer 2

正如我所看到的，該問題與茉莉花或您正在擴展其他組件的事實無關（上面代碼的正常服務也應給您同樣的錯誤）。

'widget_data'不存在，我想您想訪問擴展的'widgetData'（@Input）的某些屬性嗎？

如果是這種情況，則應改為使用“ this.widgetData”來訪問它。 這應該可以解決您的錯誤，然后您應該可以使用@Input將您的組件測試為“正常”組件。 （如前所述，將組件保留為聲明而不是導入）。

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

如果不是，並且您想訪問“ widget_data.visual.title”，則需要對其進行聲明。