angular / angular/angular-cli

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

Abierto
#10,482 2 comentarios 5 reacciones 0 asignados Ver en GitHub
area: @schematics/angular feature feature: insufficient votes
Lenguaje dominante
TypeScript
Estrellas
27k
Forks
11.8k
Merge medio
14 h 23 min
PR fusionados (30 d)
162

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Ejecuta `ng generate component test -cd OnPush` e inspecciona los archivos de componente generados y el archivo `.spec`, centrándote en cómo el Angular component schematic configura las pruebas. Usa como contexto las indicaciones de testing de Angular enlazadas y, después, verifica que la prueba generada utiliza el patrón de componente host de prueba y que las llamadas repetidas a `fixture.detectChanges()` invocan la detección de cambios.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
testing, tooling
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.