I don't understand why my unit tests fail. How do I check that my asynchronous condition has been fulfilled after store dispatch ? I want to check 3 things:
1/ My component is truthy afer dispatch (after condition is set to true)
2/ The inner text is correct when the mode is AddMode ('La note a été ajoutée)
3/ The inner text is correct when the mode is not AddMode ('la note a été modifiée')

I am using 'fakeAsync' to test asynchronous behavior but it doesn't works as expected.

What am I missing ?

Thank you all.

HTML code:

<ng-container *ngIf="(isToastVisible$ | async)">
  <div *ngIf="(isAddMode| async)"
    
    style="z-index: 11">La note a été ajoutée !</div>

  <div *ngIf="!(isAddMode | async)"
    
    style="z-index: 11">La note a été modifiée !</div>
</ng-container>

TypeScript:

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

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

CodePudding user response：

Your first test should pass even without the action dispatch or tick, as it's just checking the component instance was created rather than anything specific that the action does.

In the second one, you need to check against the text content of the div element:

const text = fixture.debugElement.query(By.css('div')).nativeElement.innerText;

You also might need to use trim() on text.