Discussion :

[sinzen]

Bonjour à tous,

Je fait des tests unitaires sur un composant. sur TypeScript et Jasmine
Seulement je doit setter la valeur de la classe parent ce que n'arrive pas a faire.

voici mon code de la classe enfant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
...
export class MyChildComponent extends MyParentComponent {
 
    .........
     myFunnyFuntion() {
         console.log('here I need to set my value this.propertyParent', this.propertyParent);
         // in the test I setted propertyParent to false but it still to 'true' in here !!??
         if(this.propertyParent === false)
          {
              dosometing..
          }
      }
}

et ma classe parent:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
.....
export class MyParentComponent {
 
   ......
   protected propertyParent: boolean = true;
   ......
    get propertyParent(): boolean {
       return this.propertyParent;
    }
 
    set propertyParent(value: boolean) {
        this.propertyParent = value;
    }
}

et pour les tests unitaire je fait:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
describe('Component tests', () => {
   let fixture: ComponentFixture<MyChildComponent>;
   let component: MyChildComponent;
   beforeEach(() => {
        ....... 
        // initiate child component
        fixture = TestBed.createComponent(MyChildComponent);
        component = fixture.componentInstance;
   }
   it('should be set the value propertyParent', () => {
       spyOn(component, 'propertyParent'); 
       // here I want to access to propertyParent, by default is setted to true
       component.propertyParent = false;
       // !!!!  the test is passing, 
       expect(component.propertyParent).toBe(false);
       // but my expectation is to enter into the condition in ChildComponent. never enter in it
       component.myFunnyFunction();
       fixture.detectChanges();
 
}

[Marco46]

On peut voir le code des constructeurs ?

A mon avis tu devrais utiliser super.props au lieu de this.props dans ta classe enfante.

Sinon d'un point de vue conceptuel, hériter des composants en Angular c'est à peu près comme hériter des scopes en AngularJS, c'est très dangereux.

[sinzen]

Merci pour ta réaction.

Si c'est très dangereux comme tu dis.
Quel sont les risques ou soucis qui peuvent apparaître ?

Un petit exemple plus complet et en accord avec ce que je fais:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
...
export abstract class ParentComponent { 
   protected propertyParent = true;
   constructor(propertyParent){
     this.propertyParent = propertyParent;
   }
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
...
export class ChildComponent extends ParentComponent{
    constructor(propertyParent){
        super(propertyParent);
    }
}

Dans mon projet j'utilise des composants générique de classe abstraite
Pour créer des éléments html comme:
- des input autocomplete
- des input pour les mot de passe
...

Et ensuite un formulaire qui instancie mes composant enfants

[Marco46]

Est-ce que ça serait pas le spyOn qui interfère ?

Je n'en vois pas l'utilité pour ton test d'ailleurs. Un spy c'est pour savoir si une fonction a été appelée (via toHaveBeenCalled et toHaveBeenCalledWith).

Autre question, quelle est la valeur de propertyParent à l'exécution ? Tu fais un test strict sur false, donc que la valeur soit true ou undefined tu ne passes pas dans ton block. Or selon la valeur ce n'est probablement pas le même problème.

Pour l'héritage je ne vois pas tellement à quoi pourrait correspondre un composant d'IHM abstrait.

D'une manière plus générale cette vidéo devrait bien introduire le problème entre composition et héritage :

[sinzen]

Merci pour le partage..!