1- import { async , ComponentFixture , TestBed } from '@angular/core/testing' ;
2- import { MockStore , provideMockStore } from '@ngrx/store/testing' ;
3-
4- import { NgxPaginationModule } from 'ngx-pagination' ;
5- import { CustomerListComponent } from './customer-list.component' ;
6- import { allCustomers } from './../../../../store/customer-management.selectors' ;
7- import { CustomerState , SetCustomerToEdit , DeleteCustomer } from 'src/app/modules/customer-management/store' ;
1+ import { async , ComponentFixture , TestBed } from '@angular/core/testing' ;
2+ import { MockStore , provideMockStore } from '@ngrx/store/testing' ;
3+
4+ import { NgxPaginationModule } from 'ngx-pagination' ;
5+ import { CustomerListComponent } from './customer-list.component' ;
6+ import {
7+ CustomerManagementActionTypes ,
8+ CustomerState ,
9+ DeleteCustomer ,
10+ LoadCustomers ,
11+ SetCustomerToEdit
12+ } from 'src/app/modules/customer-management/store' ;
13+ import { DataTablesModule } from 'angular-datatables' ;
14+ import { ActionsSubject } from '@ngrx/store' ;
815
916describe ( 'CustomerTableListComponent' , ( ) => {
1017 let component : CustomerListComponent ;
1118 let fixture : ComponentFixture < CustomerListComponent > ;
1219 let store : MockStore < CustomerState > ;
13- let mockCustomerSelector ;
20+ const actionSub : ActionsSubject = new ActionsSubject ( ) ;
1421
1522 const state = {
16- data : [ { tenant_id : 'id' , name : 'name' , description : 'description' } ] ,
23+ data : [ { tenant_id : 'id' , name : 'name' , description : 'description' } ] ,
1724 isLoading : false ,
1825 message : '' ,
1926 customerIdToEdit : '' ,
2027 customerId : ''
2128 } ;
2229
2330
24-
2531 beforeEach ( async ( ( ) => {
2632 TestBed . configureTestingModule ( {
27- imports : [ NgxPaginationModule ] ,
33+ imports : [ NgxPaginationModule , DataTablesModule ] ,
2834 declarations : [ CustomerListComponent ] ,
2935 providers : [
30- provideMockStore ( { initialState : state } )
36+ provideMockStore ( { initialState : state } ) ,
37+ { provide : ActionsSubject , useValue : actionSub }
3138 ] ,
3239 } ) . compileComponents ( ) ;
3340 } ) ) ;
3441
3542 beforeEach ( ( ) => {
3643 fixture = TestBed . createComponent ( CustomerListComponent ) ;
3744 component = fixture . componentInstance ;
38- fixture . detectChanges ( ) ;
3945
4046 store = TestBed . inject ( MockStore ) ;
4147 store . setState ( state ) ;
42- mockCustomerSelector = store . overrideSelector ( allCustomers , state . data ) ;
48+ fixture . detectChanges ( ) ;
49+
4350 } ) ;
4451
4552 it ( 'component should be created' , ( ) => {
4653 expect ( component ) . toBeTruthy ( ) ;
4754 } ) ;
4855
49- it ( 'onNgInit customers are loaded from store executing an action' , ( ) => {
56+ it ( 'when the component is initialized the load customer action is triggered ' , ( ) => {
5057 spyOn ( store , 'dispatch' ) ;
5158
5259 component . ngOnInit ( ) ;
5360
54- expect ( store . dispatch ) . toHaveBeenCalled ( ) ;
55- expect ( component . customers ) . toEqual ( state . data ) ;
61+ expect ( store . dispatch ) . toHaveBeenCalledWith ( new LoadCustomers ( ) ) ;
5662 } ) ;
5763
5864 it ( 'onClick edit, dispatch SetCustomerToEdit and enable customer form' , ( ) => {
@@ -72,7 +78,71 @@ describe('CustomerTableListComponent', () => {
7278 expect ( store . dispatch ) . toHaveBeenCalledWith ( new DeleteCustomer ( '1' ) ) ;
7379 } ) ;
7480
81+ const params = [
82+ { actionName : 'delete' , actionType : CustomerManagementActionTypes . DELETE_CUSTOMER_SUCCESS } ,
83+ { actionName : 'update' , actionType : CustomerManagementActionTypes . UPDATE_CUSTOMER_SUCCESS } ,
84+ { actionName : 'create' , actionType : CustomerManagementActionTypes . CREATE_CUSTOMER_SUCCESS }
85+ ] ;
86+
87+ params . map ( param =>
88+ it ( `on success ${ param . actionName } , ( ) => {
89+ const actionSubject = TestBed . get ( ActionsSubject ) as ActionsSubject ;
90+ const action = {
91+ type : param . actionType
92+ } ;
93+ spyOn ( store , 'dispatch' ) ;
94+
95+ actionSubject . next ( action ) ;
96+
97+ expect ( store . dispatch ) . toHaveBeenCalledWith ( new LoadCustomers ( ) ) ;
98+ } ) ) ;
99+
100+ params . map ( param =>
101+ it ( `on success ${ param . actionName } , ( ) => {
102+ const actionSubject = TestBed . get ( ActionsSubject ) as ActionsSubject ;
103+ const action = {
104+ type : param . actionType
105+ } ;
106+ actionSubject . next ( action ) ;
107+
108+ expect ( component . showCustomerForm ) . toBe ( false ) ;
109+ } ) ) ;
110+
111+ it ( 'on success load customers, the customer list should be populated' , ( ) => {
112+ const actionSubject = TestBed . get ( ActionsSubject ) as ActionsSubject ;
113+ const action = {
114+ type : CustomerManagementActionTypes . LOAD_CUSTOMERS_SUCCESS ,
115+ payload : state . data
116+ } ;
117+
118+ actionSubject . next ( action ) ;
119+
120+ expect ( component . customers ) . toEqual ( state . data ) ;
121+ } ) ;
122+
123+ // it('on success load customer and the datatable was already initialized, then the datatable should be destroyed ' +
124+ // 'before reloading the customer data', () => {
125+ // const actionSubject = TestBed.get(ActionsSubject) as ActionsSubject;
126+ // component.isDtInitialized = true;
127+ // const action = {
128+ // type: CustomerManagementActionTypes.LOAD_CUSTOMERS_SUCCESS,
129+ // payload: state.data
130+ // };
131+ // const dtApi: DataTables.Api = jasmine.createSpyObj<DataTables.Api>('dtApi', ['destroy']);
132+ // component.dtElement.dtInstance = Promise.resolve(dtApi);
133+ // spyOn(component.dtElement.dtInstance, 'then');
134+ //
135+ // actionSubject.next(action);
136+ //
137+ // expect(component.dtElement.dtInstance.then).toHaveBeenCalled();
138+ // // TODO Improve this test. This is not testing the datatable is destroyed
139+ // // expect(dtApi.destroy).toHaveBeenCalled();
140+ // });
141+
75142 afterEach ( ( ) => {
143+ component . dtTrigger . unsubscribe ( ) ;
144+ component . changeCustomerSubscription . unsubscribe ( ) ;
145+ component . loadCustomersSubscription . unsubscribe ( ) ;
76146 fixture . destroy ( ) ;
77147 } ) ;
78148} ) ;
0 commit comments