コンポーネントの単体テストを角度1.5で記述しようとしています。私はそのコンポーネントとそのdomノードをユニットテストしたい。このコンポーネントには、かなり複雑な子コンポーネントが含まれています。子コンポーネントを無視して角度1.5ユニットテストコンポーネント
私の目標は、子コンポーネントをコンパイルせずに外部コンポーネントをユニットテストすることです。
DOMもテストしたいので、このテストでは$ componentControllerを使用するだけでは不十分です。ここで
は私が達成したいものの短い例です:
コンポーネントコード:私の成分のための
angular.module('app').component('myComponent', {
bindings: {
username: '<',
},
template: `
<span>{{ $ctrl.username }}</span>
<my-complex-component />
`
controller: function() {}
});
ユニットテスト:
it('my-component should render username', function() {
var template = '<my-component username="username"></my-component>',
element,
scope,
date;
scope = $rootScope.$new();
scope.username = 'John';
element = $compile(template)(scope);
scope.$digest();
username = element.find('span');
expect(username.text()).to.be.equal('John');
});
私のコンプレックス成分インスタンス化するべきではありません。それはそのままテンプレートに抵抗するはずです。ユニットテストの要素を作成すると、
<span>John</span>
<my-complex-component />
になる必要がありますこれを行う方法はありますか?
私が知っているように、それは期待どおりに動作します。コンポーネントをコンパイルすると、内部コンポーネントはコンパイルされません。単に 'console.log(element)'を見てください。 –
残念ながら、my-componentとmy-complex-componentはどちらもモジュールアプリにあります。モジュールをモックするためにangular.mock.module( 'app')を呼び出さなければならないので、両方のコンポーネントをロードし、my-complex-componentもコンパイルしようとします。 –
あなたは 'my-complex-component'をモックしようとすることができます。 mockingに関する[この回答](http://stackoverflow.com/questions/17533052/how-do-you-mock-directives-to-enable-unit-testing-of-higher-level-directive#answer-21923462)を参照してください。代わりに[$ compileProvider.component](https://docs.angularjs.org/api/ng/provider/$compileProvider#component)を使用してください – user2718281