typescript 使用async / await测试NgRx Facade。

Posted 2021-05-20

import { NgModule } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { readFirst } from '@nrwl/nx/testing';

import { EffectsModule } from '@ngrx/effects';
import { StoreModule, Store } from '@ngrx/store';

import { NxModule } from '@nrwl/nx';

/**
 * NgRx feature slice for 'Cars' state
 */
import { LoadCars, CarsLoaded } from './cars.actions';
import { CarsEffects } from './cars.effects';
import { CarsFacade } from './cars.facade';
import { CarsState, Entity, initialState, carsReducer } from './cars.reducer';

/**
 * The full-app NgRx state only has a 'cars' feature slice
 */
interface TestSchema {  
  'cars' : CarsState  
}

describe('CarsFacade', () => {
  let facade: CarsFacade;
  let store: Store<TestSchema>;
  let createCars;

  beforeEach(() => {
    createCars = ( id:string, name = '' ): Entity => ({
       id,
       name: name ? `name-${id}` : id
    });
  });

  describe('used in NgModule', async (done) => {

    beforeEach(() => {
      @NgModule({
        imports: [
          StoreModule.forFeature('cars', carsReducer, { initialState }),
          EffectsModule.forFeature([CarsEffects])
        ],
        providers: [CarsFacade]
      })
      class CustomFeatureModule {}

      @NgModule({
        imports: [
          NxModule.forRoot(),
          StoreModule.forRoot({}),
          EffectsModule.forRoot([]),
          CustomFeatureModule,
        ]
      })
      class RootModule {}
      TestBed.configureTestingModule({ imports: [RootModule] });

      store = TestBed.get(Store);
      facade = TestBed.get(CarsFacade);
    });

    /**
     * The initially generated facade::loadAll() returns empty array
     */
    it('loadAll() should return empty list with loaded == true', async (done) => {
      try {
        let list = await readFirst(facade.allCars$);
        let isLoaded = await readFirst(facade.loaded$);

        expect(list.length).toBe(0);    // initially empty
        expect(isLoaded).toBe(false);   // initially not loaded
                
        facade.loadAll();               // In our case loadAll() always returns an empty array.

        list = await readFirst(facade.allCars$);
        isLoaded = await readFirst(facade.loaded$);

        expect(isLoaded).toBe(true);    // data load completed
        expect(list.length).toBe(0);  

        done();
      } catch (err) {
        done.fail(err);
      }
    });

    /**
     * Use `CarsLoaded` to manually submit list for state management and
     * test that our observable is properly streaming data changes.
     */
    it('allCars$ should return the current list', async (done) => {
      try {
        let list = await readFirst(facade.allCars$);
        let isLoaded = await readFirst(facade.loaded$);

        expect(list.length).toBe(0);
        expect(isLoaded).toBe(false);

        // Here we are testing our NgRx actions, reducers, and selectors.
        // Simulate results of a loadAll() and add two (2) cars to our NgRx 'cars' state. 
        
        store.dispatch(new CarsLoaded([  
          createCars('AAA'),
          createCars('BBB')
        ]));

        list = await readFirst(facade.allCars$);
        isLoaded = await readFirst(facade.loaded$);

        expect(list.length).toBe(2);
        expect(isLoaded).toBe(true);

        done();
      } catch (err) {
        done.fail(err);
      }
    });
  });

});