Тест Угловой 2 компонент в ES5?

Question

Я начинаю новое приложение Angular 2. У меня есть простой компонент, который по сути является выпадающим списком выбора. Компонент принимает несколько объектов в качестве свойств (в приложении через атрибуты элемента DOM компонента в содержащихся шаблонах).

В официальных документах для Angular 2 пока нет примеров тестирования компонентов. Как проверить фактический вид компонента - проверить, созданы ли соответствующие элементы DOM на основе данных, заданных на компоненте?

Я могу создать один из моих компонентов, выполнив ng.core.Injector.resolveAndCreate([...dependencies...]).get(MyClassName). Но это фактически не создает представление или не позволяет мне передавать данные, которые должны быть установлены как свойства только что созданного компонента.

Answer 1

Следующее, что вы видите в документах и ​​исходном коде репо, не так уж сложно. Вот настройка, которую я создал, и она работает.

Первый из Документов я взял жасмин пример настройки

<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> 

Тогда angular2 это установка. Вы уже знаете, что когда вы пишете в ES5 вы должны использовать UMD пучки

<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> 

Теперь важная часть, тестирование. Основная задачей здесь является созданием тестового компонента

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

После создания компоненты, вы можете проверить его с помощью TestComponentBuilder

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

Заметьте, что я использую ng.testing.(describe/it/etc), потому что были исправлены эти функции от жасмина работать с угловым2.

С этого момента это будет очень легко продолжить. У вас уже есть полное репо, чтобы увидеть их specs. Интересный для NgFor. Вы можете следовать примерам TS/ES6, они одинаковы.

Вот plnkr с репродукцией.

Ссылка

Вы можете проверить, а Джули Ральфа repo (ng2-test-seed) и ее talk at AngularConnect 2015

Я надеюсь, что это помогает.