import { NO_ERRORS_SCHEMA } from '@angular/core' ; import { TestBed , ComponentFixture } from '@angular/core/testing' ; import { AppConfigService , FileModel , UploadService , UserPreferencesService } from '@alfresco/adf-core' ; import { AppLayoutComponent } from './app-layout.component' ; import { AppTestingModule } from '../../../testing/app-testing.module' ; import { Store } from '@ngrx/store' ; import { AppStore , SetSelectedNodesAction , ResetSelectionAction } from '@alfresco/aca-shared/store' ; import { Router , NavigationStart } from '@angular/router' ; import { of , Subject } from 'rxjs' ; import { By } from '@angular/platform-browser' ; class MockRouter { private url = 'some-url' ; private subject = new Subject ( ) ; events = this . subject . asObservable ( ) ; routerState = { snapshot : { url : this . url } } ; navigateByUrl ( url ) { const navigationStart = new NavigationStart ( 0 , url ) ; this . subject . next ( navigationStart ) ; } } describe ( 'AppLayoutComponent' , ( ) => { let fixture ; let component ; let appConfig ; let userPreference ; let store ; let router ; let uploadService ; let fakeFileList ; beforeEach ( ( ) => { TestBed . configureTestingModule ( { imports : [ AppTestingModule ] , providers : [ Store , { provide : Router , useClass : MockRouter } ] , declarations : [ AppLayoutComponent ] , schemas : [ NO_ERRORS_SCHEMA ] } ) ; fixture = TestBed . createComponent ( AppLayoutComponent ) ; component = fixture . componentInstance ; appConfig = TestBed . inject ( AppConfigService ) ; store = TestBed . inject ( Store ) ; router = TestBed . inject ( Router ) ; userPreference = TestBed . inject ( UserPreferencesService ) ; fakeFileList = [ new FileModel ( new File ( [ ] , 'fakeFile' ) ) ] ; uploadService = TestBed . inject ( UploadService ) ; } ) ; beforeEach ( ( ) => { appConfig . config . languages = [ ] ; appConfig . config . locale = 'en' ; } ) ; describe ( 'sidenav state' , ( ) => { it ( 'should get state from configuration' , ( ) => { appConfig . config . sideNav = { expandedSidenav : false , preserveState : false } ; fixture . detectChanges ( ) ; expect ( component . expandedSidenav ) . toBe ( false ) ; } ) ; it ( 'should resolve state to true is no configuration' , ( ) => { appConfig . config . sidenav = { } ; fixture . detectChanges ( ) ; expect ( component . expandedSidenav ) . toBe ( true ) ; } ) ; it ( 'should get state from user settings as true' , ( ) => { appConfig . config . sideNav = { expandedSidenav : false , preserveState : true } ; spyOn ( userPreference , 'get' ) . and . callFake ( ( key ) => { if ( key === 'expandedSidenav' ) { return 'true' ; } return 'false' ; } ) ; fixture . detectChanges ( ) ; expect ( component . expandedSidenav ) . toBe ( true ) ; } ) ; it ( 'should get state from user settings as false' , ( ) => { appConfig . config . sidenav = { expandedSidenav : false , preserveState : true } ; spyOn ( userPreference , 'get' ) . and . callFake ( ( key ) => { if ( key === 'expandedSidenav' ) { return 'false' ; } return 'true' ; } ) ; fixture . detectChanges ( ) ; expect ( component . expandedSidenav ) . toBe ( false ) ; } ) ; } ) ; it ( 'should reset selection before navigation' , ( ) => { const selection = [ { entry : { id : 'nodeId' , name : 'name' } } ] ; spyOn ( store , 'dispatch' ) . and . stub ( ) ; fixture . detectChanges ( ) ; store . dispatch ( new SetSelectedNodesAction ( selection ) ) ; router . navigateByUrl ( 'somewhere/over/the/rainbow' ) ; fixture . detectChanges ( ) ; expect ( store . dispatch [ 'calls' ] . mostRecent ( ) . args ) . toEqual ( [ new ResetSelectionAction ( ) ] ) ; } ) ; it ( 'should close menu on mobile screen size' , ( ) => { component . minimizeSidenav = false ; component . layout . container = { isMobileScreenSize : true , toggleMenu : ( ) => { } } ; spyOn ( component . layout . container , 'toggleMenu' ) ; fixture . detectChanges ( ) ; component . hideMenu ( { preventDefault : ( ) => { } } as any ) ; expect ( component . layout . container . toggleMenu ) . toHaveBeenCalled ( ) ; } ) ; it ( 'should close menu on mobile screen size also when minimizeSidenav true' , ( ) => { fixture . detectChanges ( ) ; component . minimizeSidenav = true ; component . layout . container = { isMobileScreenSize : true , toggleMenu : ( ) => { } } ; spyOn ( component . layout . container , 'toggleMenu' ) ; fixture . detectChanges ( ) ; component . hideMenu ( { preventDefault : ( ) => { } } as any ) ; expect ( component . layout . container . toggleMenu ) . toHaveBeenCalled ( ) ; } ) ; describe ( 'File Uploading Dialog' , ( ) => { it ( 'should the uploading file dialog be visible on the left when the showFileUploadingDialog is true' , async ( ) => { fixture . detectChanges ( ) ; await fixture . whenStable ( ) ; uploadService . addToQueue ( ... fakeFileList ) ; fixture . detectChanges ( ) ; await fixture . whenStable ( ) ; const fileUploadingDialog = fixture . debugElement . query ( By . css ( 'adf-file-uploading-dialog' ) ) ; expect ( fileUploadingDialog . attributes [ 'position' ] ) . toEqual ( 'left' ) ; expect ( component . showFileUploadingDialog ) . toEqual ( true ) ; expect ( fileUploadingDialog ) . not . toEqual ( null ) ; } ) ; it ( 'should the uploading file dialog not be visible when the showFileUploadingDialog is false' , async ( ) => { spyOn ( store , 'select' ) . and . returnValue ( of ( false ) ) ; fixture . detectChanges ( ) ; await fixture . whenStable ( ) ; uploadService . addToQueue ( ... fakeFileList ) ; fixture . detectChanges ( ) ; await fixture . whenStable ( ) ; const fileUploadingDialog = fixture . debugElement . query ( By . css ( 'adf-file-uploading-dialog' ) ) ; expect ( component . showFileUploadingDialog ) . toEqual ( false ) ; expect ( fileUploadingDialog ) . toEqual ( null ) ; } ) ; } ) ; } ) ;