Angular Test Unitaire

Bonjour,

Je bloque sur un test unitaire et je ne trouve pas de solution.
Si quelqu'un pourrait m'aider.
En vous remerciant d'avance.

Code HTML:

<ng-container *ngIf="(isToastVisible$ | async)">
  <div *ngIf="(isAddMode| async)"
    class="position-fixed bottom-0 start-50 translate-middle-x p-3 border border-success bg-success text-white"
    style="z-index: 11">La note a été ajoutée !</div>

  <div *ngIf="!(isAddMode | async)"
    class="position-fixed bottom-0 start-50 translate-middle-x p-3 border border-success bg-success text-white"
    style="z-index: 11">La note a été modifiée !</div>
</ng-container>

Voici le TS:

import { Component, OnInit } from '@angular/core';
import { select, Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { showAddEditNoteToast, AddEditNoteModalMode } from 'src/app/reducers/selectors/selectors';

@Component({
  selector: 'app-toast',
  templateUrl: './toast.component.html',
  styleUrls: ['./toast.component.scss']
})
export class ToastComponent implements OnInit {

  public isToastVisible$: Observable<boolean>;
  public isAddMode$: Observable<boolean>;

  constructor(
    private store: Store
  ) { }

  ngOnInit(): void {
    this.isToastVisible$ = this.store.pipe(select(showAddEditNoteToast));
    this.isAddMode$ = this.store.pipe(select(AddEditNoteModalMode));
  }
}

Code SPEC.TS:

import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
import { ToastComponent } from './toast.component';
import { MockStore, provideMockStore } from '@ngrx/store/testing';
import { Initialstate } from '../../app/reducers/index';
import { setFormMode, showAddEditNoteModal } from 'src/app/reducers/actions/actions';
import { By } from '@angular/platform-browser';

describe('ToastComponent', () => {
  let component: ToastComponent;
  let fixture: ComponentFixture<ToastComponent>;
  let store: MockStore;
  const initialState = Initialstate;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ToastComponent],
      providers: [
        provideMockStore({ initialState })
      ]
    })
      .compileComponents();
    store = TestBed.inject(MockStore)
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ToastComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create Toast component ', fakeAsync(() => {
    store.dispatch(showAddEditNoteModal({ showAddEditNoteModal: true }));
    tick();
    expect(component).toBeTruthy();
  }));

  it('should render text - La note a été ajoutée !', fakeAsync(() => {
    store.dispatch(setFormMode({ isAddMode: true }));
    fixture.detectChanges();
    tick();
    const text = fixture.debugElement.nativeElement;
    expect(text).toEqual('La note a été ajoutée !')
  }))
});

Je pense pense que les 2 tests sont mal écris.
Je veux vérifier que le composant s'affiche bien après le dispatch du store et vérifier le contenu HTML. Je n'arrive pas à tester le comportement asynchrone de NGRX et vérifier que la condition est bien remplie.....
Modifié par allan00958 (23 Dec 2022 - 00:49)

Salut Allan,

Malheureusement, je ne connais pas du tout le sujet (Angular). En outre, j'ai remarqué Rxjs. Il y a quelque temps, j'avais regardé cette librairie. Normalement, dans ton T.U., tu peux très bien te monter un observable.
Modifié par niuxe (24 Dec 2022 - 16:25)