ThomasBurleson · February 23, 2025 02:51 · Aug 12, 2018 · Aug 12, 2018 · Aug 12, 2018 · Aug 12, 2018
diff --git a/cars.facade.spec.ts b/cars.facade.spec.ts
@@ -11,9 +11,9 @@ import { NxModule } from '@nrwl/nx';
  * NgRx feature slice for 'Cars' state
  */
 import { LoadCars, CarsLoaded } from './cars.actions';
-import { CarsState, Entity, initialState, carsReducer } from './cars.reducer';
 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

diff --git a/cars.facade.spec.ts b/cars.facade.spec.ts
@@ -12,7 +12,6 @@ import { NxModule } from '@nrwl/nx';
  */
 import { LoadCars, CarsLoaded } from './cars.actions';
 import { CarsState, Entity, initialState, carsReducer } from './cars.reducer';
-
 import { CarsEffects } from './cars.effects';
 import { CarsFacade } from './cars.facade';
 

diff --git a/cars.facade.spec.ts b/cars.facade.spec.ts
@@ -88,9 +88,10 @@ describe('CarsFacade', () => {
     });
 
     /**
-     * Use `CarsLoaded` to manually submit list for state management
+     * Use `CarsLoaded` to manually submit list for state management and
+     * test that our observable is properly streaming data changes.
      */
-    it('allCars$ should return the loaded list; and loaded flag == true', async (done) => {
+    it('allCars$ should return the current list', async (done) => {
       try {
         let list = await readFirst(facade.allCars$);
         let isLoaded = await readFirst(facade.loaded$);

diff --git a/cars.facade.spec.ts b/cars.facade.spec.ts
@@ -98,7 +98,10 @@ describe('CarsFacade', () => {
         expect(list.length).toBe(0);
         expect(isLoaded).toBe(false);
 
-        store.dispatch(new CarsLoaded([  // Add two (2) cars to our NgRx 'cars' state
+        // 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')
         ]));

diff --git a/cars.facade.spec.ts b/cars.facade.spec.ts
@@ -72,17 +72,13 @@ describe('CarsFacade', () => {
 
         expect(list.length).toBe(0);    // initially empty
         expect(isLoaded).toBe(false);   // initially not loaded
-
-        // Note: the default Nx schematic-generated logic in `cars.effects.ts`        
-        //       will simulate a load and return an empty array. Developers
-        //       must customize with their own logic.
-
-        facade.loadAll();               
+
+        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(isLoaded).toBe(true);    // data load completed
         expect(list.length).toBe(0);  
 
         done();
@@ -102,9 +98,7 @@ describe('CarsFacade', () => {
         expect(list.length).toBe(0);
         expect(isLoaded).toBe(false);
 
-        // Update our 'cars' state with two (2) cars loaded
-
-        store.dispatch(new CarsLoaded([
+        store.dispatch(new CarsLoaded([  // Add two (2) cars to our NgRx 'cars' state
           createCars('AAA'),
           createCars('BBB')
         ]));

diff --git a/cars.facade.spec.ts b/cars.facade.spec.ts
@@ -16,9 +16,11 @@ import { CarsState, Entity, initialState, carsReducer } from './cars.reducer';
 import { CarsEffects } from './cars.effects';
 import { CarsFacade } from './cars.facade';
 
-
-interface TestSchema {
-  'cars' : CarsState
+/**
+ * The full-app NgRx state only has a 'cars' feature slice
+ */
+interface TestSchema {  
+  'cars' : CarsState  
 }
 
 describe('CarsFacade', () => {
@@ -29,7 +31,7 @@ describe('CarsFacade', () => {
   beforeEach(() => {
     createCars = ( id:string, name = '' ): Entity => ({
        id,
-       name: name || `name-${id}`
+       name: name ? `name-${id}` : id
     });
   });
 

diff --git a/cars.facade.spec.ts b/cars.facade.spec.ts
@@ -10,16 +10,15 @@ import { NxModule } from '@nrwl/nx';
 /**
  * NgRx feature slice for 'Cars' state
  */
-import { CarsQuery } from './Cars.selectors';
-import { LoadCars, CarsLoaded } from './Cars.actions';
-import { CarsState, Entity, initialState, CarsReducer } from './Cars.reducer';
+import { LoadCars, CarsLoaded } from './cars.actions';
+import { CarsState, Entity, initialState, carsReducer } from './cars.reducer';
 
-import { CarsEffects } from './Cars.effects';
-import { CarsFacade } from './Cars.facade';
+import { CarsEffects } from './cars.effects';
+import { CarsFacade } from './cars.facade';
 
 
 interface TestSchema {
-  'Cars' : CarsState
+  'cars' : CarsState
 }
 
 describe('CarsFacade', () => {
@@ -34,12 +33,12 @@ describe('CarsFacade', () => {
     });
   });
 
-  describe('used in NgModule', () => {
+  describe('used in NgModule', async (done) => {
 
     beforeEach(() => {
       @NgModule({
         imports: [
-          StoreModule.forFeature('Cars', CarsReducer, { initialState }),
+          StoreModule.forFeature('cars', carsReducer, { initialState }),
           EffectsModule.forFeature([CarsEffects])
         ],
         providers: [CarsFacade]

diff --git a/cars.facade.spec.ts b/cars.facade.spec.ts
@@ -71,16 +71,18 @@ describe('CarsFacade', () => {
 
         expect(list.length).toBe(0);    // initially empty
         expect(isLoaded).toBe(false);   // initially not loaded
-
+        
         // Note: the default Nx schematic-generated logic in `cars.effects.ts`        
-        //       will simulate a load and return an empty array.
+        //       will simulate a load and return an empty array. Developers
+        //       must customize with their own logic.
+
         facade.loadAll();               
 
         list = await readFirst(facade.allCars$);
         isLoaded = await readFirst(facade.loaded$);
 
-        expect(list.length).toBe(0);
-        expect(isLoaded).toBe(true);
+        expect(isLoaded).toBe(true);  // data load completed
+        expect(list.length).toBe(0);  
 
         done();
       } catch (err) {

diff --git a/cars.facade.spec.ts b/cars.facade.spec.ts
@@ -99,6 +99,8 @@ describe('CarsFacade', () => {
         expect(list.length).toBe(0);
         expect(isLoaded).toBe(false);
 
+        // Update our 'cars' state with two (2) cars loaded
+
         store.dispatch(new CarsLoaded([
           createCars('AAA'),
           createCars('BBB')

diff --git a/cars.facade.spec.ts b/cars.facade.spec.ts
@@ -69,10 +69,12 @@ describe('CarsFacade', () => {
         let list = await readFirst(facade.allCars$);
         let isLoaded = await readFirst(facade.loaded$);
 
-        expect(list.length).toBe(0);
-        expect(isLoaded).toBe(false);
+        expect(list.length).toBe(0);    // initially empty
+        expect(isLoaded).toBe(false);   // initially not loaded
 
-        facade.loadAll();
+        // Note: the default Nx schematic-generated logic in `cars.effects.ts`        
+        //       will simulate a load and return an empty array.
+        facade.loadAll();               
 
         list = await readFirst(facade.allCars$);
         isLoaded = await readFirst(facade.loaded$);

diff --git a/cars.facade.spec.ts b/cars.facade.spec.ts
@@ -0,0 +1,118 @@
+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 { CarsQuery } from './Cars.selectors';
+import { LoadCars, CarsLoaded } from './Cars.actions';
+import { CarsState, Entity, initialState, CarsReducer } from './Cars.reducer';
+
+import { CarsEffects } from './Cars.effects';
+import { CarsFacade } from './Cars.facade';
+
+
+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}`
+    });
+  });
+
+  describe('used in NgModule', () => {
+
+    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);
+        expect(isLoaded).toBe(false);
+
+        facade.loadAll();
+
+        list = await readFirst(facade.allCars$);
+        isLoaded = await readFirst(facade.loaded$);
+
+        expect(list.length).toBe(0);
+        expect(isLoaded).toBe(true);
+
+        done();
+      } catch (err) {
+        done.fail(err);
+      }
+    });
+
+    /**
+     * Use `CarsLoaded` to manually submit list for state management
+     */
+    it('allCars$ should return the loaded list; and loaded flag == true', async (done) => {
+      try {
+        let list = await readFirst(facade.allCars$);
+        let isLoaded = await readFirst(facade.loaded$);
+
+        expect(list.length).toBe(0);
+        expect(isLoaded).toBe(false);
+
+        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);
+      }
+    });
+  });
+
+});
No results found