fix: ioet#141 loading customers reading data from API

Author: enriquezrene

src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.spec.ts

@@ -5,6 +5,7 @@ import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import { CreateCustomerComponent } from './create-customer';
 import { CustomerState, CreateCustomer } from 'src/app/modules/customer-management/store';
 import * as models from 'src/app/modules/shared/models/index';
+import { LoadCustomers } from './../../../../store/customer-management.actions';
 
 describe('CreateCustomerComponent', () => {
   let component: CreateCustomerComponent;
@@ -55,13 +56,14 @@ describe('CreateCustomerComponent', () => {
     expect(component.customerForm.reset).toHaveBeenCalled();
   });
 
-  it('onSubmit and dispatch CreateCustomer action', () => {
+  it('onSubmit, dispatch CreateCustomer and LoadCustomers actions', () => {
     spyOn(store, 'dispatch');
 
     component.onSubmit(customerData);
 
-    expect(store.dispatch).toHaveBeenCalledTimes(1);
+    expect(store.dispatch).toHaveBeenCalledTimes(2);
     expect(store.dispatch).toHaveBeenCalledWith(new CreateCustomer(customerData));
+    expect(store.dispatch).toHaveBeenCalledWith(new LoadCustomers());
   });
 
   it('should call resetCustomerForm', () => {

src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.ts

@@ -1,11 +1,10 @@
-import { LoadCustomers } from './../../../../store/customer-management.actions';
 import { Component, Input, Output, EventEmitter, OnDestroy, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { Store, select } from '@ngrx/store';
 
 import { Subscription } from 'rxjs';
-import { CustomerState, CreateCustomer } from 'src/app/modules/customer-management/store';
-import { getStatusMessage } from 'src/app/modules/customer-management/store/customer-management.selectors';
+import { CustomerState, CreateCustomer, LoadCustomers } from 'src/app/modules/customer-management/store';
+import { getStatusMessage } from './../../../../store/customer-management.selectors';
 
 @Component({
   selector: 'app-create-customer',

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.spec.ts

@@ -1,27 +1,57 @@
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CustomerListComponent } from './customer-list.component';
 import { NgxPaginationModule } from 'ngx-pagination';
+import { allCustomers } from './../../../../store/customer-management.selectors';
+import { CustomerState } from 'src/app/modules/customer-management/store';
 
 describe('CustomerTableListComponent', () => {
   let component: CustomerListComponent;
   let fixture: ComponentFixture<CustomerListComponent>;
+  let store: MockStore<CustomerState>;
+  let mockCustomerSelector;
+
+
+  const state = {
+    data: [{ tenant_id: 'id', name: 'name', description: 'description' }],
+    isLoading: false,
+    message: '',
+  };
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [NgxPaginationModule],
       declarations: [CustomerListComponent],
+      providers: [provideMockStore({ initialState: state })],
     }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(CustomerListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+
+    store = TestBed.inject(MockStore);
+    store.setState(state);
+    mockCustomerSelector = store.overrideSelector(allCustomers, state.data);
   });
 
   it('component should be created', () => {
     expect(component).toBeTruthy();
   });
 
+  it('onNgInit customers are loaded from store executing an action', () => {
+    spyOn(store, 'dispatch');
+
+    component.ngOnInit();
+
+    expect(store.dispatch).toHaveBeenCalled();
+    expect(component.customers).toEqual(state.data);
+  });
+
+  afterEach(() => {
+    fixture.destroy();
+  });
+
 });

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts

@@ -1,7 +1,7 @@
-import { allCustomers } from './../../../../store/customer-management.selectors';
 import { Component, OnInit } from '@angular/core';
 import { Store, select } from '@ngrx/store';
 
+import { allCustomers } from './../../../../store/customer-management.selectors';
 import { LoadCustomers } from './../../../../store/customer-management.actions';
 import { Customer } from './../../../../../shared/models/customer.model';
 import { ITEMS_PER_PAGE } from 'src/environments/environment';

src/app/modules/customer-management/store/customer-management.actions.spec.ts

@@ -23,4 +23,14 @@ describe('CustomerManagmentActions', () => {
     const createActivityFail = new actions.CreateCustomerFail('error');
     expect(createActivityFail.type).toEqual(actions.CustomerManagementActionTypes.CREATE_CUSTOMER_FAIL);
   });
+
+  it('LoadCustomersSuccess type is CustomerManagementActionTypes.LOAD_CUSTOMERS_SUCCESS', () => {
+    const action = new actions.LoadCustomersSuccess([]);
+    expect(action.type).toEqual(actions.CustomerManagementActionTypes.LOAD_CUSTOMERS_SUCCESS);
+  });
+
+  it('LoadCustomersFail type is CustomerManagementActionTypes.LOAD_CUSTOMERS_FAIL', () => {
+    const action = new actions.LoadCustomersFail('error');
+    expect(action.type).toEqual(actions.CustomerManagementActionTypes.LOAD_CUSTOMERS_FAIL);
+  });
 });

src/app/modules/customer-management/store/customer-management.reducers.spec.ts

@@ -6,6 +6,30 @@ describe('customerManagementReducer', () => {
   const initialState: CustomerState = { data: [], isLoading: false, message: '' };
   const customer: Customer = { name: 'aa', description: 'bb', tenant_id: 'cc' };
 
+  it('on LoadCustomer, isLoading is true ', () => {
+    const action = new actions.LoadCustomers();
+    const state = customerManagementReducer(initialState, action);
+
+    expect(state.isLoading).toEqual(true);
+  });
+
+  it('on LoadCustomerSucess, isLoading is false and state has data', () => {
+    const data = [];
+    const action = new actions.LoadCustomersSuccess(data);
+    const state = customerManagementReducer(initialState, action);
+
+    expect(state.isLoading).toEqual(false);
+    expect(state.data).toEqual(data);
+  });
+
+  it('on LoadCustomerFail, isLoading is false and state has empty data', () => {
+    const action = new actions.LoadCustomersFail('doh!!!');
+    const state = customerManagementReducer(initialState, action);
+
+    expect(state.isLoading).toEqual(false);
+    expect(state.data.length).toBe(0);
+  });
+
   it('on CreateCustomer, isLoading is true ', () => {
     const action = new actions.CreateCustomer(customer);
     const state = customerManagementReducer(initialState, action);

src/app/modules/customer-management/store/customer-management.reducers.ts

@@ -5,14 +5,12 @@ export interface CustomerState {
   data: Customer[];
   isLoading: boolean;
   message: string;
-  customers: Customer[];
 }
 
 export const initialState: CustomerState = {
   data: [],
   isLoading: false,
   message: '',
-  customers: [],
 };
 
 export function customerManagementReducer(
@@ -65,8 +63,5 @@ export function customerManagementReducer(
         message: 'An error occurred, try again later.',
       };
     }
-
-    default:
-      return state;
   }
 }