Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Schematics for Component spec should use test host component when created with `-cd OnPush`

オープン
#10,482 コメント 2 件 リアクション 5 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
35/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
angular, typescript
領域
testing, tooling

調査の方向性

ng generate component test -cd OnPush を実行し、生成されたコンポーネントファイルと .spec ファイルを調査して、Angular component schematic がテストをどのように設定しているかに注目してください。リンクされている Angular のテストガイダンスをコンテキストとして使用し、生成されたテストがテストホストコンポーネントパターンを使用していること、また fixture.detectChanges() の呼び出しを繰り返すと変更検知が実行されることを確認してください。

索引モデルが issue の本文から書いたものです。

説明

area: @schematics/angular feature feature: insufficient votes
Versions
Angular CLI: 1.7.3
Node: 8.9.1
OS: win32 x64
Angular: 5.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

@angular/cli: 1.7.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.4.2
webpack: 3.11.0
Repro steps
  • ng generate component test -cd OnPush
  • Edit the test.component.html to be
{{ checkMe() }}
  • Add the checkMe method to test.component.ts:
checkMe() {
      console.log('change detection was invoked!');
}
  • Edit the generated .spec file to include the following test:
fit('runs change detection', () => {
    fixture.detectChanges();
    fixture.detectChanges();
    fixture.detectChanges();
});
  • Run unit test
Observed behavior

'change detection was invoked!' is logged only once (the initial check on creation of the component) rather than 4 times. That is to say, invoking fixture.detectChanges() does not actually run change detection. This is a known issue and is discussed in https://github.com/angular/angular/issues/12313

LOG: 'change detection was invoked!'
Chrome 65.0.3325 (Windows 10 0.0.0): Executed 1 of 478 SUCCESS (0 secs / 0.138 secs)
Desired behavior

As discussed in the thread linked above, the solution for testing OnPush components is to use the "test host component" pattern as described in the angular.io testing docs.

Therefore, the Angular CLI should use a schematic which uses the test host component when the -cd OnPush flag has been used. Otherwise we get a default test setup which is not fit for purpose (and will cause many wasted hours for devs like me 😓)

主要言語
TypeScript
スター
27k
フォーク
11.8k
平均マージ
17時間 25分
マージ済み PR(30日)
183

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

angular/angular-cli のほかの issue

angular/angular-cli の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。