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

Ouverte
#10,482 2 commentaires 5 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
35/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
angular, typescript
Domaine
testing, tooling

Piste de recherche

Exécutez ng generate component test -cd OnPush et examinez les fichiers de composant générés ainsi que le fichier .spec, en vous concentrant sur la manière dont le Angular component schematic configure les tests. Utilisez les indications de test Angular liées comme contexte, puis vérifiez que le test généré utilise le modèle du composant hôte de test et que les appels répétés à fixture.detectChanges() déclenchent la détection des changements.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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

Langage dominant
TypeScript
Étoiles
27k
Forks
11.8k
Merge moyen
16 h 35 min
PR mergées (30 j)
176

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de angular/angular-cli

Toutes les issues de angular/angular-cli

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.