Discussion :

[keokaz]

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 html :

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

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 :

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
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,

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 html :

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

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

[keokaz]

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 html :

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

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 :

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

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 :

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

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:

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 :

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

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);
      }));

[keokaz]

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 typescript :

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

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);
});