Question

我正在开始一个新的Angular 2应用程序。我有一个简单的组件，基本上是一个下拉选择框。该组件将一些对象作为属性（在应用程序中，通过组件的包含模板中的DOM元素的属性）。

Angular 2的官方文档还没有测试组件的示例。我如何测试组件的实际视图 - 检查是否根据组件上设置的数据创建了适当的DOM元素？

我可以通过ng.core.Injector.resolveAndCreate([...dependencies...]).get(MyClassName)创建我的一个组件。但这并没有真正构建视图，或者让我传入数据作为我刚刚创建的组件的属性。

Answer 1

按照您在文档中看到的内容和repo源代码并不那么困难。这是我制作的设置并且有效。

首先来自我采用jasmine示例设置的文档

Task

然后设置angular2的设置。您可能已经知道，在ES5中编写时，必须使用UMD包

<link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
<script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
<script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>

现在重要的部分，测试。这里的主要任务是创建一个测试组件

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/rxjs/bundles/Rx.umd.min.js"></script>
<script src="node_modules/angular2/bundles/angular2-all-testing.umd.dev.js"></script>

创建组件后，可以使用TestComponentBuilder

进行测试

var TestComponent = ng.core.
    Component({
        selector: 'cmp',
        template : '' // Left it blank, we override it when testing
    }).Class({
        constructor: function() {
            this.someProperty = 'Initial value';
        }
    });

请注意，我使用的是ng.testing.describe('Component building', function() { ng.testing.it('should detect when a property changes', ng.testing.inject([ng.testing.TestComponentBuilder], function(tcb) { tcb .overrideTemplate(TestComponent, '<div>{{someProperty}}</div>') .createAsync(TestComponent) .then(function(fixture) { // Triggers change detection so // the div actually contains the property value fixture.detectChanges(); // Check if the div contains the correct value expect(fixture.nativeElement.innerText).toEqual('Initial value'); // Change property's value fixture.componentInstance.someProperty = 'New value'; // Triggers change detection again fixture.detectChanges(); // Check, again, if the div contains the new value expect(fixture.nativeElement.innerText).toEqual('New value'); }); })); });，因为来自jasmine的这些函数已修补以使用angular2。

从这一点开始，它将非常容易继续。您已经拥有整个仓库以查看他们的specs。一个有趣的是NgFor。您可以按照TS / ES6示例进行操作，它们是相同的。

这里有一个plnkr，有一个重复工作。

<强>参考

您也可以查看Julie Ralph的repo (ng2-test-seed)和她的talk at AngularConnect 2015

我希望它有所帮助。

测试ES5中的Angular 2组件？

1 个答案: