angular / angular/angular-cli

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

Đang mở
#10,482 2 bình luận 5 reaction 0 người được giao Xem trên GitHub
area: @schematics/angular feature feature: insufficient votes
Ngôn ngữ chính
TypeScript
Star
27k
Fork
11.8k
Merge trung bình
14 giờ 23 phút
Pull request đã merge (30 ngày)
162

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Chạy `ng generate component test -cd OnPush` và kiểm tra các tệp component được tạo ra cùng tệp `.spec`, tập trung vào cách Angular component schematic thiết lập các bài kiểm thử. Sử dụng hướng dẫn kiểm thử Angular được liên kết làm ngữ cảnh, sau đó xác minh rằng bài kiểm thử được tạo sử dụng mẫu test host component và các lần gọi lặp lại `fixture.detectChanges()` sẽ gọi cơ chế phát hiện thay đổi.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
testing, tooling
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.