Test unitaire, afficher le reste du template et l' ignorer

Version imprimable

Bonjour,
je débute avec jasmine et karma.
Je recherche comment faut t'il faire pour ignorer le reste du template,
voici mon fichier html

Code:

1
2
3
4
5
6
7
8
<div >
	<h1>Welcome to {{title}}!!</h1>
</div>
 
<div *ngIf="no_cookie" [@anim]='state'>
text suivant<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elit erat, mollis euismod arcu a, feugiat sagittis lacus. Curabitur sed vehicula eros, non pellentesque ipsum. Duis facilisis accumsan orci. Morbi justo magna, fermentum ac ornare tincidunt, convallis vitae arcu. Nulla at eleifend sem. Nullam eget nulla in nisl cursus fermentum. Donec turpis nunc, convallis vitae suscipit ac, aliquam eget leo. Proin in cursus sapien. Sed velit purus, consectetur in aliquet et, posuere et erat.
</div>

voici le test qui ne fonctionne pas et qui génère un erreur:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import { TestBed, async } from '@angular/core/testing';
import { RgpdComponent } from './rgpd.component';
 
 
 
describe('RgpdComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        RgpdComponent
      ],
    }).compileComponents();
  }));
 
  it('it should work well', async(() => {
    const fixture = TestBed.createComponent(RgpdComponent);
    const compiled = fixture.debugElement.nativeElement;
    compiled.querySelector('div').textContent;
    expect(true).toBe(true);
  }));
 
 
 
  it('should render title in a h1 tag', async(() => {
    const fixture = TestBed.createComponent(RgpdComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    compiled.querySelector('h1').textContent;
    expect(compiled).toBeTruthy();
  })
  );
 
});

le test ne passe pas car j'ai ajouter du contenu html après la première div fermante,

Citation:

RgpdComponent > should render title in a h1 tag

pour que je le teste puisse ne pas avoir d'erreur, je dois effacer cette partie html:

Code:

1
2
3
<div *ngIf="no_cookie" [@anim]='state'>
text suivant
</div>

visuelement sur le navigateur, le texte à disparu (text suivant) mai j'en ai besoin pour écrire progressivement mon test.
comment je dois faire pour voir "text suivant" mais qui ne puisse pas générer d'erreur ?

merci de vos réponse :)

Comment écrire mon test

J'ai changé de stratégie, je ne cherche plus à ignorer le reste des test, j'ai supprimer tout les fichiers .spec.ts.

Je vais juste me concentrer sur un seul test, voici une vue:
Code:

1 2 3 <div class="uploadfilecontainer" (click)="fileInput.click()" appDragDrop (onFileDropped)="fileProgress($event)"> <input hidden type="file" #fileInput (change)="fileProgress($event.target.files)"> </div>
je souhaite faire un test, j'appelle fileProgress($event) en cliquant sur la div uploadfilecontainter avec la souris,
je souhaite testé la valeur qu'il retourne.
Une fois que j'aurais réussi ce test, je simulerais le click de souris ou le gilsser d'une image.
donc voici mon test:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 beforeEach(() => { fixture = TestBed.createComponent(FormUpldComponent); component = fixture.componentInstance; fixture.detectChanges(); // trigger initial data binding }); it('should call onClick method', () => { const onClickMock = spyOn(component, 'fileProgress'); fixture.debugElement.query(By.css('.uploadfilecontainer')).triggerEventHandler('click', null); expect(onClickMock).toHaveBeenCalled(); });
voici la méthode file progress:
Code:

1 2 3 4 5 fileProgress(event) { this.fileUploadProgress = "ok"; return 200; this.isMulti ? this.fileMulti(event) : this.fileOne(event); }
pour le moment voici l' échec de l'erreur:

Citation:

Error: Expected spy on fileProgress to equal 200.

comment je dois précéder pour que si le clique sur la souris la div "uploadfilecontainer", me donne une réponse 200 après avoir cliquer sur la souris ? pour le moment si le clique sur la zone d'upload, je n'ai pas de message de console, j'ai mis un console log de la date pour voir si le click de souris à bien été pris en compte.
Code:

1 2 3 4 5 6 7 it('should', async(() => { const onClickMock = spyOn(component, 'fileProgress'); let ladate = new Date(); console.log(ladate); fixture.debugElement.query(By.css('.uploadfilecontainer')).triggerEventHandler('click', null); expect(onClickMock).toEqual(200); }));

finalement, j'ai trouvé la solution de pouvoir récupérer la valeur de l'image uploadé,
il faut mettre une temps et après on récupère la valeur

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
it('simulation de depôt de fichier', () => {
    console.log("attente ...");
    setTimeout(() => {
        console.log("after ...");
        let file = component.fileOne;
        console.log(file);
        let filedata = component.fileData.type;
        console.log(filedata);
        const fd = new FormData();
        console.log(fd);
    }, 5000);
    /// console.log(component.preview());
    //fd.append('fichier', this.fileData, this.fileData.name);
});