javascript - Angular 4 - 如何解析模板中的连字符变量以进行 Karma 测试？

Question

我在使用 Karma 对 Angular 4 组件进行单元测试时遇到问题。下面是我运行来测试的命令:

tsc && karma start --browsers PhantomJS

我有如下连字符变量，它与 HTML 模板绑定(bind)，并且我验证了绑定(bind)正常工作并且数据显示在页面上(在浏览器中)。

连字符变量 - 在 component.ts 文件中

template-variable-key

但是在单元测试期间，我遇到了一个问题，因为它给出了以下错误:

TypeError: Cannot read property 'layout-permission-title-key' of undefined

<小时/>

我如何在 HTML 模板中定义

(1) 在带有 EXPRESSION 的模板中

<p>{{error['template-variable-key']}}</p>

(2) 或在使用 innerHtml 进行数据绑定(bind)的模板中

<p [innerHtml]="error['template-variable-key']"></p> <!-- or -->

<p [innerHtml]="error?.template-variable-key"></p>

注意:由于在 Angular 以外的许多地方都使用了相同的连字符变量，因此我无法将其更改为驼峰命名法或其他形式。

(1) 和 (2) 都对我不起作用。

预先感谢您的回答:)

Answer 1

您可以尝试的另一件事是在尝试使用错误属性的任何地方添加 *ngIf="error"

<p *ngIf="error" [innerHtml]="error['template-variable-key']"></p>

绑定(bind)正在寻找一个名为 error 的属性，该属性未定义，因此当它尝试访问 template-variable-key 时，您会收到未定义的错误。

您需要模拟组件上的错误对象。

通常，您的规范文件中有一个类似的部分，在您的规范文件中也有这样的部分

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

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

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

在每个之前的第二个中，您可以使用以下方法模拟错误对象

component = fixture.componentInstance;
component.error = { };
component.error['template-variable-key'] = 'Your test data';

或者在你的组件中只有一个默认的错误对象

error = {};