[AAE-1838] Sidenav Unit test (#5468)

* [AAE-1838] Sidenav Unit test

* fixed linter

lib/core/layout/components/sidenav-layout/sidenav-layout.component.spec.ts

@@ -17,7 +17,7 @@
 
 /*tslint:disable: ban*/
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { SidenavLayoutComponent } from './sidenav-layout.component';
 import { Component, Input } from '@angular/core';
@@ -31,6 +31,7 @@ import { UserPreferencesService } from '../../../services/user-preferences.servi
 import { CommonModule } from '@angular/common';
 import { Direction } from '@angular/cdk/bidi';
 import { of } from 'rxjs';
+import { setupTestBed } from '@alfresco/adf-core';
 
 @Component({
     selector: 'adf-layout-container',
@@ -49,49 +50,6 @@ export class DummyLayoutContainerComponent {
     toggleMenu() {}
 }
 
-describe('SidenavLayoutComponent', () => {
-
-    let fixture: ComponentFixture<any>,
-        mediaMatcher: MediaMatcher,
-        mediaQueryList: any;
-
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                CommonModule,
-                PlatformModule,
-                LayoutModule,
-                MaterialModule
-            ],
-            declarations: [
-                DummyLayoutContainerComponent,
-                SidenavLayoutComponent,
-                SidenavLayoutContentDirective,
-                SidenavLayoutHeaderDirective,
-                SidenavLayoutNavigationDirective
-            ],
-            providers: [
-                MediaMatcher,
-                { provide: UserPreferencesService, useValue: { select: () => of()} }
-            ]
-        });
-    }));
-
-    beforeEach(() => {
-        mediaQueryList = {
-            matches: false,
-            addListener: () => {},
-            removeListener: () => {}
-        };
-    });
-
-    afterEach(() => {
-        fixture.destroy();
-        TestBed.resetTestingModule();
-    });
-
-    describe('Template transclusion', () => {
-
 @Component({
     selector: 'adf-test-component-for-sidenav',
     template: `
@@ -116,15 +74,196 @@ describe('SidenavLayoutComponent', () => {
                 </adf-sidenav-layout-content>
             </adf-sidenav-layout>`
 })
-        class SidenavLayoutTesterComponent {}
+export class SidenavLayoutTesterComponent {}
 
-        beforeEach(async(() => {
-            TestBed.configureTestingModule({ declarations: [ SidenavLayoutTesterComponent ] }).compileComponents();
-        }));
+describe('SidenavLayoutComponent', () => {
+
+    let fixture: ComponentFixture<any>,
+        mediaMatcher: MediaMatcher,
+        mediaQueryList: any,
+        component: SidenavLayoutComponent;
+
+    setupTestBed({
+        imports: [
+            CommonModule,
+            PlatformModule,
+            LayoutModule,
+            MaterialModule
+        ],
+        declarations: [
+            DummyLayoutContainerComponent,
+            SidenavLayoutComponent,
+            SidenavLayoutContentDirective,
+            SidenavLayoutHeaderDirective,
+            SidenavLayoutNavigationDirective
+        ],
+        providers: [
+            MediaMatcher,
+            { provide: UserPreferencesService, useValue: { select: () => of() } }
+        ]
+    });
+
+    beforeEach(() => {
+        mediaQueryList = {
+            mediaFn: null,
+            matches: false,
+            addListener:  function (mediaFn) { this.mediaFn = mediaFn; },
+            removeListener: () => {}
+        };
+
+        mediaMatcher = TestBed.get(MediaMatcher);
+        spyOn(mediaMatcher, 'matchMedia').and.callFake((mediaQuery) => {
+            mediaQueryList.originalMediaQueryPassed = mediaQuery;
+            spyOn(mediaQueryList, 'addListener').and.callThrough();
+            spyOn(mediaQueryList, 'removeListener').and.stub();
+            return mediaQueryList;
+        });
+
+        fixture = TestBed.createComponent(SidenavLayoutComponent);
+        component = fixture.componentInstance;
+    });
+
+    afterEach(() => {
+        fixture.destroy();
+        TestBed.resetTestingModule();
+    });
+
+    describe('General behaviour', () => {
+
+        beforeEach(() => fixture.detectChanges());
+
+        it('should pass through input parameters', () => {
+            component.sidenavMin = 1;
+            component.sidenavMax = 2;
+            component.hideSidenav = true;
+            component.expandedSidenav = false;
+            fixture.detectChanges();
+
+            const layoutContainerComponent = fixture.debugElement.query(By.directive(DummyLayoutContainerComponent)).componentInstance;
+
+            expect(layoutContainerComponent.sidenavMin).toBe(component.sidenavMin);
+            expect(layoutContainerComponent.sidenavMax).toBe(component.sidenavMax);
+            expect(layoutContainerComponent.hideSidenav).toBe(component.hideSidenav);
+            expect(layoutContainerComponent.expandedSidenav).toBe(component.expandedSidenav);
+            expect(layoutContainerComponent.mediaQueryList.originalMediaQueryPassed).toBe(`(max-width: 600px)`);
+        });
+
+        it('addListener of mediaQueryList should have been called', () => {
+            expect(mediaQueryList.addListener).toHaveBeenCalledTimes(1);
+            expect(mediaQueryList.addListener).toHaveBeenCalledWith(component.onMediaQueryChange);
+        });
+
+        it('addListener of mediaQueryList should have been called', () => {
+            fixture.destroy();
+
+            expect(mediaQueryList.removeListener).toHaveBeenCalledTimes(1);
+            expect(mediaQueryList.removeListener).toHaveBeenCalledWith(component.onMediaQueryChange);
+        });
+    });
+
+    describe('toggleMenu', () => {
+
+        beforeEach(() => fixture.detectChanges());
+
+        it('should toggle the isMenuMinimized if the mediaQueryList.matches is false (we are on desktop)', () => {
+            mediaQueryList.matches = false;
+            component.isMenuMinimized = false;
+
+            component.toggleMenu();
+
+            expect(component.isMenuMinimized).toBe(true);
+        });
+
+        it('should set the isMenuMinimized to false if the mediaQueryList.matches is true (we are on mobile)', () => {
+            mediaQueryList.matches = true;
+            component.isMenuMinimized = true;
+
+            component.toggleMenu();
+
+            expect(component.isMenuMinimized).toBe(false);
+        });
+
+        it('should expand nav bar when mobile view switched', () => {
+            mediaQueryList.matches = true;
+            component.isMenuMinimized = true;
+            component.expanded.subscribe((expanded) => expect(expanded).toBeTruthy());
+            mediaQueryList.mediaFn();
+        });
+    });
+
+    describe('menuOpenState', () => {
+
+        it('should be true by default', (done) => {
+            fixture.detectChanges();
+
+            component.menuOpenState$.subscribe((value) => {
+                expect(value).toBe(true);
+                done();
+            });
+        });
+
+        it('should be the same as the expanded Sidenav value by default', (done) => {
+            component.expandedSidenav = false;
+            fixture.detectChanges();
+
+            component.menuOpenState$.subscribe((value) => {
+                expect(value).toBe(false);
+                done();
+            });
+        });
+
+        it('should emit value on toggleMenu action', (done) => {
+            component.expandedSidenav = false;
+            fixture.detectChanges();
+
+            component.toggleMenu();
+
+            component.menuOpenState$.subscribe((value) => {
+                expect(value).toBe(true);
+                done();
+            });
+        });
+    });
+});
+
+describe('Template transclusion', () => {
+
+    let fixture: ComponentFixture<any>,
+        mediaMatcher: MediaMatcher;
+    const mediaQueryList = {
+            matches: false,
+            addListener: () => {},
+            removeListener: () => {}
+        };
+
+    setupTestBed({
+        imports: [
+            CommonModule,
+            PlatformModule,
+            LayoutModule,
+            MaterialModule
+        ],
+        declarations: [
+            DummyLayoutContainerComponent,
+            SidenavLayoutTesterComponent,
+            SidenavLayoutComponent,
+            SidenavLayoutContentDirective,
+            SidenavLayoutHeaderDirective,
+            SidenavLayoutNavigationDirective
+        ],
+        providers: [
+            MediaMatcher,
+            { provide: UserPreferencesService, useValue: { select: () => of() } }
+        ]
+    });
 
     beforeEach(() => {
         mediaMatcher = TestBed.get(MediaMatcher);
-            spyOn(mediaMatcher, 'matchMedia').and.returnValue(mediaQueryList);
+        spyOn(mediaMatcher, 'matchMedia').and.callFake(() => {
+            spyOn(mediaQueryList, 'addListener').and.stub();
+            spyOn(mediaQueryList, 'removeListener').and.stub();
+            return mediaQueryList;
+        });
 
         fixture = TestBed.createComponent(SidenavLayoutTesterComponent);
         fixture.detectChanges();
@@ -191,144 +330,7 @@ describe('SidenavLayoutComponent', () => {
 
         it('should contain the transcluded content template', () => {
             const injectedElement = fixture.debugElement.query(injectedElementSelector);
-
             expect(injectedElement === null).toBe(false);
         });
     });
 });
-
-    describe('General behaviour', () => {
-
-        let component: SidenavLayoutComponent;
-
-        beforeEach(async(() => {
-            TestBed.compileComponents();
-        }));
-
-        beforeEach(() => {
-            mediaMatcher = TestBed.get(MediaMatcher);
-            spyOn(mediaMatcher, 'matchMedia').and.callFake((mediaQuery) => {
-                mediaQueryList.originalMediaQueryPassed = mediaQuery;
-                spyOn(mediaQueryList, 'addListener').and.stub();
-                spyOn(mediaQueryList, 'removeListener').and.stub();
-                return mediaQueryList;
-            });
-
-            fixture = TestBed.createComponent(SidenavLayoutComponent);
-            component = fixture.componentInstance;
-            fixture.detectChanges();
-        });
-
-        it('should pass through input parameters', () => {
-            component.sidenavMin = 1;
-            component.sidenavMax = 2;
-            component.hideSidenav = true;
-            component.expandedSidenav = false;
-            fixture.detectChanges();
-
-            const layoutContainerComponent = fixture.debugElement.query(By.directive(DummyLayoutContainerComponent)).componentInstance;
-
-            expect(layoutContainerComponent.sidenavMin).toBe(component.sidenavMin);
-            expect(layoutContainerComponent.sidenavMax).toBe(component.sidenavMax);
-            expect(layoutContainerComponent.hideSidenav).toBe(component.hideSidenav);
-            expect(layoutContainerComponent.expandedSidenav).toBe(component.expandedSidenav);
-            expect(layoutContainerComponent.mediaQueryList.originalMediaQueryPassed).toBe(`(max-width: 600px)`);
-        });
-
-        it('addListener of mediaQueryList should have been called', () => {
-            expect(mediaQueryList.addListener).toHaveBeenCalledTimes(1);
-            expect(mediaQueryList.addListener).toHaveBeenCalledWith(component.onMediaQueryChange);
-        });
-
-        it('addListener of mediaQueryList should have been called', () => {
-            fixture.destroy();
-
-            expect(mediaQueryList.removeListener).toHaveBeenCalledTimes(1);
-            expect(mediaQueryList.removeListener).toHaveBeenCalledWith(component.onMediaQueryChange);
-        });
-    });
-
-    describe('toggleMenu', () => {
-
-        let component;
-
-        beforeEach(async(() => {
-            TestBed.compileComponents();
-        }));
-
-        beforeEach(() => {
-            mediaMatcher = TestBed.get(MediaMatcher);
-            spyOn(mediaMatcher, 'matchMedia').and.returnValue(mediaQueryList);
-
-            fixture = TestBed.createComponent(SidenavLayoutComponent);
-            component = fixture.componentInstance;
-            fixture.detectChanges();
-        });
-
-        it('should toggle the isMenuMinimized if the mediaQueryList.matches is false (we are on desktop)', () => {
-            mediaQueryList.matches = false;
-            component.isMenuMinimized = false;
-
-            component.toggleMenu();
-
-            expect(component.isMenuMinimized).toBe(true);
-        });
-
-        it('should set the isMenuMinimized to false if the mediaQueryList.matches is true (we are on mobile)', () => {
-            mediaQueryList.matches = true;
-            component.isMenuMinimized = true;
-
-            component.toggleMenu();
-
-            expect(component.isMenuMinimized).toBe(false);
-        });
-    });
-
-    describe('menuOpenState', () => {
-
-        let component;
-
-        beforeEach(async(() => {
-            TestBed.compileComponents();
-        }));
-
-        beforeEach(() => {
-            mediaMatcher = TestBed.get(MediaMatcher);
-            spyOn(mediaMatcher, 'matchMedia').and.returnValue(mediaQueryList);
-
-            fixture = TestBed.createComponent(SidenavLayoutComponent);
-            component = fixture.componentInstance;
-        });
-
-        it('should be true by default', (done) => {
-            fixture.detectChanges();
-
-            component.menuOpenState$.subscribe((value) => {
-                expect(value).toBe(true);
-                done();
-            });
-        });
-
-        it('should be the same as the expanded Sidenav value by default', (done) => {
-            component.expandedSidenav = false;
-            fixture.detectChanges();
-
-            component.menuOpenState$.subscribe((value) => {
-                expect(value).toBe(false);
-                done();
-            });
-        });
-
-        it('should emit value on toggleMenu action', (done) => {
-            component.expandedSidenav = false;
-            fixture.detectChanges();
-
-            component.toggleMenu();
-
-            component.menuOpenState$.subscribe((value) => {
-                expect(value).toBe(true);
-                done();
-            });
-        });
-    });
-});