angular / angular/angular-cli

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

未關閉
#10,482 2 則留言 5 個 reaction 已指派 0 人 在 GitHub 檢視
area: @schematics/angular feature feature: insufficient votes
主要語言
TypeScript
星號
27k
分支
11.8k
平均合併
14 小時 23 分鐘
30 天內合併 PR
162

描述

### 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:
```TypeScript
checkMe() {
console.log('change detection was invoked!');
}
```
* Edit the generated .spec file to include the following test:
```TypeScript
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](https://angular.io/guide/testing#component-inside-a-test-host).

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

貢獻指南

開啟貢獻指南

研究方向

執行 `ng generate component test -cd OnPush` 並檢查產生的元件檔案和 `.spec` 檔案,重點關注 Angular component schematic 如何設定測試。以連結的 Angular 測試指南作為脈絡,接著確認產生的測試使用測試主機元件模式,且重複呼叫 `fixture.detectChanges()` 會觸發變更偵測。

由索引模型根據 Issue 內容生成。

評估

技術堆疊
angular, typescript
領域
testing, tooling
Issue 類型
缺陷
難度
3/5
預估耗時
1-2 天
活躍度
停滯
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。