import { async , ComponentFixture , TestBed } from '@angular/core/testing' ; import { RouterTestingModule } from '@angular/router/testing' ; import { By } from '@angular/platform-browser' ; import { NgxsModule , Store } from '@ngxs/store' ; import { CartPageComponent } from './cart-page.component' ; import { PayComponent } from '../../components/pay/pay.component' ; import { GetCoffeeListSuccess , AddToCart , RemoveOneCartItem , RemoveCartItem } from '../../state/app.actions' ; import { AppState } from '../../state/app.state' ; import { HttpClientModule } from '@angular/common/http' ; describe ( 'CartPageComponent' , ( ) => { let component ; let fixture ; let store ; beforeEach ( async ( ( ) => { TestBed . configureTestingModule ( { imports : [ RouterTestingModule , NgxsModule . forRoot ( [ AppState ] ) , HttpClientModule , ] , declarations : [ CartPageComponent , PayComponent ] } ) . compileComponents ( ) ; } ) ) ; beforeEach ( ( ) => { fixture = TestBed . createComponent ( CartPageComponent ) ; component = fixture . componentInstance ; fixture . detectChanges ( ) ; store = TestBed . get ( Store ) ; } ) ; beforeEach ( ( ) => { store . dispatch ( new GetCoffeeListSuccess ( [ { name : 'coffee aa' , price : 10 , recipe : [ ] } , { name : 'coffee bb' , price : 2 , recipe : [ ] } , ] ) ) ; store . dispatch ( new AddToCart ( 'coffee aa' ) ) ; store . dispatch ( new AddToCart ( 'coffee aa' ) ) ; store . dispatch ( new AddToCart ( 'coffee bb' ) ) ; fixture . detectChanges ( ) ; } ) ; it ( 'should create' , ( ) => { expect ( component ) . toBeTruthy ( ) ; } ) ; it ( 'should show 2 items in list' , ( ) => { const [ header , ... list ] = fixture . debugElement . queryAll ( By . css ( 'li' ) ) ; const expected = 2 ; expect ( list . length ) . toBe ( expected ) ; } ) ; it ( 'should dispatch AddToCart' , ( ) => { const addOneItemButton = fixture . debugElement . query ( By . css ( '.unit-controller button:nth-child(1)' ) ) ; const expectedEvent = new AddToCart ( 'coffee aa' ) ; const dispatcher = spyOn ( store , 'dispatch' ) ; addOneItemButton . triggerEventHandler ( 'click' , null ) ; expect ( dispatcher ) . toHaveBeenCalledWith ( expectedEvent ) ; } ) ; it ( 'should dispatch RemoveOneCartItem' , ( ) => { const removeOneItemButton = fixture . debugElement . query ( By . css ( '.unit-controller button:nth-child(2)' ) ) ; const expectedEvent = new RemoveOneCartItem ( 'coffee aa' ) ; const dispatcher = spyOn ( store , 'dispatch' ) ; removeOneItemButton . triggerEventHandler ( 'click' , null ) ; expect ( dispatcher ) . toHaveBeenCalledWith ( expectedEvent ) ; } ) ; it ( 'should dispatch RemoveCartItem' , ( ) => { const removeItemButton = fixture . debugElement . query ( By . css ( '.delete' ) ) ; const expectedEvent = new RemoveCartItem ( 'coffee aa' ) ; const dispatcher = spyOn ( store , 'dispatch' ) ; removeItemButton . triggerEventHandler ( 'click' , null ) ; expect ( dispatcher ) . toHaveBeenCalledWith ( expectedEvent ) ; } ) ; } ) ;