如何在angular 2中编译html? [英] How to compile html in angular 2?

问题描述

我开始学习角度2，并希望通过单元测试来解决问题.因此，我希望我所有的指令/组件都可以通过测试编写.

I started to learn angular 2 and want to get things right with unit test. So I want all my directives/components to write with tests.

在angularJS(第一个版本)中测试指令您使用 $ compile .这是来自doc的示例:

In angularJS (first version) to test directive You use $compile. Here's example from doc:

  it('Replaces the element with the appropriate content', function() {
    var element = $compile("<a-great-eye></a-great-eye>")($rootScope);
    $rootScope.$digest();
    expect(element.html()).toContain("lidless, wreathed in flame, 2 times");
  });

如何在angular 2中编译html文本以编写测试?

How to compile html text in angular 2 to write a test?

我想测试最简单的方向性

I want to test simpliest direcive:

import {Component} from 'angular2/core';
@Component({
  selector: 'email',
  template: `Hello Email`
})
export class EmailComponent {
}

推荐答案

使用 TestComponentBuilder ，如本示例中所示

Use TestComponentBuilder like shown in this example from https://github.com/angular/angular/blob/9e44dd85ada181b11be869841da2c157b095ee07/modules/angular2/test/common/directives/ng_for_spec.ts

it('should reflect added elements',
       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
         tcb.overrideTemplate(TestComponent, TEMPLATE)
             .createAsync(TestComponent)
             .then((fixture) => {
               fixture.detectChanges();

               (<number[]>fixture.debugElement.componentInstance.items).push(3);
               fixture.detectChanges();

               expect(fixture.debugElement.nativeElement).toHaveText('1;2;3;');
               async.done();
             });
       }));

这篇关于如何在angular 2中编译html?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！