diff --git a/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts b/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts index a4f4399f59..d02b0d30c6 100644 --- a/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts +++ b/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts @@ -1,25 +1,59 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { MenuService } from '../../../shared/menu/menu.service'; +import { MenuServiceStub } from '../../../shared/testing/menu-service-stub'; +import { CSSVariableService } from '../../../shared/sass-helper/sass-helper.service'; +import { CSSVariableServiceStub } from '../../../shared/testing/css-variable-service-stub'; +import { Component } from '@angular/core'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { AdminSidebarSectionComponent } from './admin-sidebar-section.component'; +import { RouterTestingModule } from '@angular/router/testing'; +import { By } from '@angular/platform-browser'; describe('AdminSidebarSectionComponent', () => { let component: AdminSidebarSectionComponent; let fixture: ComponentFixture; + const menuService = new MenuServiceStub(); + const iconString = 'test'; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ AdminSidebarSectionComponent ] + imports: [NoopAnimationsModule, RouterTestingModule], + declarations: [AdminSidebarSectionComponent, TestComponent], + providers: [ + { provide: 'sectionDataProvider', useValue: { model: { link: 'google.com' }, icon: iconString } }, + { provide: MenuService, useValue: menuService }, + { provide: CSSVariableService, useClass: CSSVariableServiceStub }, + ] + }).overrideComponent(AdminSidebarSectionComponent, { + set: { + entryComponents: [TestComponent] + } }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(AdminSidebarSectionComponent); component = fixture.componentInstance; + spyOn(component as any, 'getMenuItemComponent').and.returnValue(TestComponent); fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); + + it('should set the right icon', () => { + const icon = fixture.debugElement.query(By.css('.shortcut-icon')).query(By.css('i.fas')); + expect(icon.nativeElement.getAttribute('class')).toContain('fa-' + iconString); + }); }); + +// declare a test component +@Component({ + selector: 'ds-test-cmp', + template: `` +}) +class TestComponent { +} diff --git a/src/app/+admin/admin-sidebar/admin-sidebar.component.html b/src/app/+admin/admin-sidebar/admin-sidebar.component.html index 7a339d85f2..b59c1db829 100644 --- a/src/app/+admin/admin-sidebar/admin-sidebar.component.html +++ b/src/app/+admin/admin-sidebar/admin-sidebar.component.html @@ -30,7 +30,7 @@ - +
{ +import { of as observableOf } from 'rxjs'; +import { By } from '@angular/platform-browser'; + +describe('AdminSidebarComponent', () => { let comp: AdminSidebarComponent; let fixture: ComponentFixture; - let menuService: AdminSidebarComponent; + const menuService = new MenuServiceStub(); beforeEach(async(() => { TestBed.configureTestingModule({ imports: [TranslateModule.forRoot(), NoopAnimationsModule], - declarations: [AdminSidebarComponent, MockDirective(NgComponentOutlet)], + declarations: [AdminSidebarComponent], providers: [ { provide: Injector, useValue: {} }, - { provide: MenuService, useClass: MenuServiceStub }, + { provide: MenuService, useValue: menuService }, { provide: CSSVariableService, useClass: CSSVariableServiceStub }, { provide: AuthService, useClass: AuthServiceStub } ], schemas: [NO_ERRORS_SCHEMA] }).overrideComponent(AdminSidebarComponent, { - set: { changeDetection: ChangeDetectionStrategy.Default } + set: { + changeDetection: ChangeDetectionStrategy.Default, + } }).compileComponents(); })); beforeEach(() => { + spyOn(menuService, 'getMenuTopSections').and.returnValue(observableOf([])); fixture = TestBed.createComponent(AdminSidebarComponent); comp = fixture.componentInstance; // SearchPageComponent test instance - menuService = (comp as any).menuService; - // spyOn(comp as any, 'getSectionDataInjector').and.returnValue(new Map()); - // spyOn(comp as any, 'getSectionComponent').and.returnValue(observableOf(MenuSection)); + comp.sections = observableOf([]); fixture.detectChanges(); }); @@ -60,19 +62,80 @@ fdescribe('AdminSidebarComponent', () => { comp.startSlide({ toState: 'collapsed' } as any); }); - it('should set the sidebarClosed to false', () => { - expect(comp.sidebarClosed).toBeTruthy(); + it('should set the sidebarOpen to false', () => { + expect(comp.sidebarOpen).toBeFalsy(); }) }) }); - // describe('expand', () => { - // beforeEach(() => { - // spyOn(menuService, 'expandMenu'); - // comp.expand(new Event('click')); - // }); - // it('should trigger the expandMenu function on the menu service', () => { - // expect(menuService.expandMenu).toHaveBeenCalledWith(comp.menuID); - // }) - // }); + describe('finishSlide', () => { + describe('when expanding', () => { + beforeEach(() => { + comp.sidebarClosed = true; + comp.startSlide({ fromState: 'expanded' } as any); + }); + + it('should set the sidebarClosed to true', () => { + expect(comp.sidebarClosed).toBeTruthy(); + }) + }); + + describe('when collapsing', () => { + beforeEach(() => { + comp.sidebarClosed = false; + comp.startSlide({ fromState: 'collapsed' } as any); + }); + + it('should set the sidebarOpen to true', () => { + expect(comp.sidebarOpen).toBeTruthy(); + }) + }) + }); + + describe('when the collapse icon is clicked', () => { + beforeEach(() => { + spyOn(menuService, 'toggleMenu'); + const sidebarToggler = fixture.debugElement.query(By.css('#sidebar-collapse-toggle')).query(By.css('a.shortcut-icon')); + sidebarToggler.triggerEventHandler('click', {preventDefault: () => {/**/}}); + }); + + it('should call toggleMenu on the menuService', () => { + expect(menuService.toggleMenu).toHaveBeenCalled(); + }); + }); + + describe('when the collapse link is clicked', () => { + beforeEach(() => { + spyOn(menuService, 'toggleMenu'); + const sidebarToggler = fixture.debugElement.query(By.css('#sidebar-collapse-toggle')).query(By.css('.sidebar-collapsible')).query(By.css('a')); + sidebarToggler.triggerEventHandler('click', {preventDefault: () => {/**/}}); + }); + + it('should call toggleMenu on the menuService', () => { + expect(menuService.toggleMenu).toHaveBeenCalled(); + }); + }); + + describe('when the the mouse enters the nav tag', () => { + beforeEach(() => { + spyOn(menuService, 'expandMenuPreview'); + const sidebarToggler = fixture.debugElement.query(By.css('nav.navbar')); + sidebarToggler.triggerEventHandler('mouseenter', {preventDefault: () => {/**/}}); + }); + + it('should call expandPreview on the menuService', () => { + expect(menuService.expandMenuPreview).toHaveBeenCalled(); + }); + }); + describe('when the the mouse leaves the nav tag', () => { + beforeEach(() => { + spyOn(menuService, 'collapseMenuPreview'); + const sidebarToggler = fixture.debugElement.query(By.css('nav.navbar')); + sidebarToggler.triggerEventHandler('mouseleave', {preventDefault: () => {/**/}}); + }); + + it('should call collapseMenuPreview on the menuService', () => { + expect(menuService.collapseMenuPreview).toHaveBeenCalled(); + }); + }); }); diff --git a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts index 48c85876b7..16a9000c07 100644 --- a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts +++ b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts @@ -1,25 +1,83 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { ExpandableAdminSidebarSectionComponent } from './expandable-admin-sidebar-section.component'; +import { MenuService } from '../../../shared/menu/menu.service'; +import { MenuServiceStub } from '../../../shared/testing/menu-service-stub'; +import { CSSVariableService } from '../../../shared/sass-helper/sass-helper.service'; +import { CSSVariableServiceStub } from '../../../shared/testing/css-variable-service-stub'; +import { of as observableOf } from 'rxjs'; +import { Component } from '@angular/core'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { By } from '@angular/platform-browser'; describe('ExpandableAdminSidebarSectionComponent', () => { let component: ExpandableAdminSidebarSectionComponent; let fixture: ComponentFixture; - + const menuService = new MenuServiceStub(); + const iconString = 'test'; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ExpandableAdminSidebarSectionComponent ] + imports: [NoopAnimationsModule], + declarations: [ExpandableAdminSidebarSectionComponent, TestComponent], + providers: [ + { provide: 'sectionDataProvider', useValue: {icon: iconString} }, + { provide: MenuService, useValue: menuService }, + { provide: CSSVariableService, useClass: CSSVariableServiceStub }, + ] + }).overrideComponent(ExpandableAdminSidebarSectionComponent, { + set: { + entryComponents: [TestComponent] + } }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { + spyOn(menuService, 'getSubSectionsByParentID').and.returnValue(observableOf([])); fixture = TestBed.createComponent(ExpandableAdminSidebarSectionComponent); component = fixture.componentInstance; + spyOn(component as any, 'getMenuItemComponent').and.returnValue(TestComponent); fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); + + it('should set the right icon', () => { + const icon = fixture.debugElement.query(By.css('.icon-wrapper')).query(By.css('i.fas')); + expect(icon.nativeElement.getAttribute('class')).toContain('fa-' + iconString); + }); + + describe('when the icon is clicked', () => { + beforeEach(() => { + spyOn(menuService, 'toggleActiveSection'); + const sidebarToggler = fixture.debugElement.query(By.css('a.shortcut-icon')); + sidebarToggler.triggerEventHandler('click', {preventDefault: () => {/**/}}); + }); + + it('should call toggleActiveSection on the menuService', () => { + expect(menuService.toggleActiveSection).toHaveBeenCalled(); + }); + }); + + describe('when the header text is clicked', () => { + beforeEach(() => { + spyOn(menuService, 'toggleActiveSection'); + const sidebarToggler = fixture.debugElement.query(By.css('.sidebar-collapsible')).query(By.css('a')); + sidebarToggler.triggerEventHandler('click', {preventDefault: () => {/**/}}); + }); + + it('should call toggleActiveSection on the menuService', () => { + expect(menuService.toggleActiveSection).toHaveBeenCalled(); + }); + }); }); + +// declare a test component +@Component({ + selector: 'ds-test-cmp', + template: `` +}) +class TestComponent { +} diff --git a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts index 6975bd59d3..4921be77e2 100644 --- a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts +++ b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts @@ -58,7 +58,6 @@ export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionC */ ngOnInit(): void { super.ngOnInit(); - this.subSections = this.menuService.getSubSectionsByParentID(this.menuID, this.section.id); this.sidebarActiveBg = this.variableService.getVariable('adminSidebarActiveBg'); this.sidebarCollapsed = this.menuService.isMenuCollapsed(this.menuID); this.sidebarPreviewCollapsed = this.menuService.isMenuPreviewCollapsed(this.menuID); diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index c88b999786..e079400e85 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -35,11 +35,18 @@ import { AngularticsMock } from './shared/mocks/mock-angulartics.service'; import { AuthServiceMock } from './shared/mocks/mock-auth.service'; import { AuthService } from './core/auth/auth.service'; import { Router } from '@angular/router'; +import { MenuService } from './shared/menu/menu.service'; +import { CSSVariableService } from './shared/sass-helper/sass-helper.service'; +import { CSSVariableServiceStub } from './shared/testing/css-variable-service-stub'; +import { MenuServiceStub } from './shared/testing/menu-service-stub'; +import { HostWindowService } from './shared/host-window.service'; +import { HostWindowServiceStub } from './shared/testing/host-window-service-stub'; let comp: AppComponent; let fixture: ComponentFixture; let de: DebugElement; let el: HTMLElement; +const menuService = new MenuServiceStub(); describe('App component', () => { @@ -64,6 +71,9 @@ describe('App component', () => { { provide: Angulartics2GoogleAnalytics, useValue: new AngularticsMock() }, { provide: AuthService, useValue: new AuthServiceMock() }, { provide: Router, useValue: {} }, + { provide: MenuService, useValue: menuService }, + { provide: CSSVariableService, useClass: CSSVariableServiceStub }, + { provide: HostWindowService, useValue: new HostWindowServiceStub(800) }, AppComponent ], schemas: [CUSTOM_ELEMENTS_SCHEMA] @@ -75,7 +85,6 @@ describe('App component', () => { fixture = TestBed.createComponent(AppComponent); comp = fixture.componentInstance; // component test instance - // query for the
by CSS element selector de = fixture.debugElement.query(By.css('div.outer-wrapper')); el = de.nativeElement; diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 551a6d7b8a..27ff2e1ad5 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -91,7 +91,6 @@ export class AppComponent implements OnInit, AfterViewInit { this.totalSidebarWidth = this.cssService.getVariable('totalSidebarWidth'); const sidebarCollapsed = this.menuService.isMenuCollapsed(MenuID.ADMIN); - //TODO FIX THIS: this.slideSidebarOver = combineLatestObservable(sidebarCollapsed, this.windowService.isXsOrSm()) .pipe( map(([collapsed, mobile]) => collapsed || mobile) @@ -99,7 +98,7 @@ export class AppComponent implements OnInit, AfterViewInit { } private storeCSSVariables() { - const vars = variables.locals; + const vars = variables.locals || {}; Object.keys(vars).forEach((name: string) => { this.cssService.addCSSVariable(name, vars[name]); }) diff --git a/src/app/header/header.component.spec.ts b/src/app/header/header.component.spec.ts new file mode 100644 index 0000000000..c365119074 --- /dev/null +++ b/src/app/header/header.component.spec.ts @@ -0,0 +1,58 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { TranslateModule } from '@ngx-translate/core'; + +import { of as observableOf } from 'rxjs'; +import { ReactiveFormsModule } from '@angular/forms'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { NO_ERRORS_SCHEMA } from '@angular/core'; +import { MenuService } from '../shared/menu/menu.service'; +import { MenuServiceStub } from '../shared/testing/menu-service-stub'; +import { HeaderComponent } from './header.component'; + +let comp: HeaderComponent; +let fixture: ComponentFixture; + +describe('HeaderComponent', () => { + const menuService = new MenuServiceStub(); + + // async beforeEach + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ + TranslateModule.forRoot(), + NoopAnimationsModule, + ReactiveFormsModule], + declarations: [HeaderComponent], + providers: [ + { provide: MenuService, useValue: menuService } + ], + schemas: [NO_ERRORS_SCHEMA] + }) + .compileComponents(); // compile template and css + })); + + // synchronous beforeEach + beforeEach(() => { + spyOn(menuService, 'getMenuTopSections').and.returnValue(observableOf([])); + + fixture = TestBed.createComponent(HeaderComponent); + + comp = fixture.componentInstance; + + }); + + describe('when the toggle button is clicked', () => { + + beforeEach(() => { + spyOn(menuService, 'toggleMenu'); + const navbarToggler = fixture.debugElement.query(By.css('.navbar-toggler')); + navbarToggler.triggerEventHandler('click', null); + }); + + it('should call toggleMenu on the menuService', () => { + expect(menuService.toggleMenu).toHaveBeenCalled(); + }); + + }); +}); diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts index dd055785ab..d1061c72bc 100644 --- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts +++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts @@ -1,25 +1,176 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { ExpandableNavbarSectionComponent } from './expandable-navbar-section.component'; +import { By } from '@angular/platform-browser'; +import { MenuServiceStub } from '../../shared/testing/menu-service-stub'; +import { Component } from '@angular/core'; +import { of as observableOf } from 'rxjs'; +import { HostWindowService } from '../../shared/host-window.service'; +import { MenuService } from '../../shared/menu/menu.service'; +import { HostWindowServiceStub } from '../../shared/testing/host-window-service-stub'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; describe('ExpandableNavbarSectionComponent', () => { let component: ExpandableNavbarSectionComponent; let fixture: ComponentFixture; + const menuService = new MenuServiceStub(); - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ ExpandableNavbarSectionComponent ] - }) - .compileComponents(); - })); + describe('on larger screens', () => { + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [NoopAnimationsModule], + declarations: [ExpandableNavbarSectionComponent, TestComponent], + providers: [ + { provide: 'sectionDataProvider', useValue: {} }, + { provide: MenuService, useValue: menuService }, + { provide: HostWindowService, useValue: new HostWindowServiceStub(800) } + ] + }).overrideComponent(ExpandableNavbarSectionComponent, { + set: { + entryComponents: [TestComponent] + } + }) + .compileComponents(); + })); - beforeEach(() => { - fixture = TestBed.createComponent(ExpandableNavbarSectionComponent); - component = fixture.componentInstance; - fixture.detectChanges(); + beforeEach(() => { + spyOn(menuService, 'getSubSectionsByParentID').and.returnValue(observableOf([])); + + fixture = TestBed.createComponent(ExpandableNavbarSectionComponent); + component = fixture.componentInstance; + spyOn(component as any, 'getMenuItemComponent').and.returnValue(TestComponent); + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + describe('when the mouse enters the section header', () => { + beforeEach(() => { + spyOn(menuService, 'activateSection'); + const sidebarToggler = fixture.debugElement.query(By.css('li.nav-item.dropdown')); + sidebarToggler.triggerEventHandler('mouseenter', { + preventDefault: () => {/**/ + } + }); + }); + + it('should call activateSection on the menuService', () => { + expect(menuService.activateSection).toHaveBeenCalled(); + }); + }); + + describe('when the mouse leaves the section header', () => { + beforeEach(() => { + spyOn(menuService, 'deactivateSection'); + const sidebarToggler = fixture.debugElement.query(By.css('li.nav-item.dropdown')); + sidebarToggler.triggerEventHandler('mouseleave', { + preventDefault: () => {/**/ + } + }); + }); + + it('should call deactivateSection on the menuService', () => { + expect(menuService.deactivateSection).toHaveBeenCalled(); + }); + }); + + describe('when a click occurs on the section header', () => { + beforeEach(() => { + spyOn(menuService, 'toggleActiveSection'); + const sidebarToggler = fixture.debugElement.query(By.css('li.nav-item.dropdown')).query(By.css('a')); + sidebarToggler.triggerEventHandler('click', { + preventDefault: () => {/**/ + } + }); + }); + + it('should not call toggleActiveSection on the menuService', () => { + expect(menuService.toggleActiveSection).not.toHaveBeenCalled(); + }); + }); }); - it('should create', () => { - expect(component).toBeTruthy(); + describe('on smaller, mobile screens', () => { + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [NoopAnimationsModule], + declarations: [ExpandableNavbarSectionComponent, TestComponent], + providers: [ + { provide: 'sectionDataProvider', useValue: {} }, + { provide: MenuService, useValue: menuService }, + { provide: HostWindowService, useValue: new HostWindowServiceStub(300) } + ] + }).overrideComponent(ExpandableNavbarSectionComponent, { + set: { + entryComponents: [TestComponent] + } + }) + .compileComponents(); + })); + + beforeEach(() => { + spyOn(menuService, 'getSubSectionsByParentID').and.returnValue(observableOf([])); + + fixture = TestBed.createComponent(ExpandableNavbarSectionComponent); + component = fixture.componentInstance; + spyOn(component as any, 'getMenuItemComponent').and.returnValue(TestComponent); + fixture.detectChanges(); + }); + + describe('when the mouse enters the section header', () => { + beforeEach(() => { + spyOn(menuService, 'activateSection'); + const sidebarToggler = fixture.debugElement.query(By.css('li.nav-item.dropdown')); + sidebarToggler.triggerEventHandler('mouseenter', { + preventDefault: () => {/**/ + } + }); + }); + + it('should not call activateSection on the menuService', () => { + expect(menuService.activateSection).not.toHaveBeenCalled(); + }); + }); + + describe('when the mouse leaves the section header', () => { + beforeEach(() => { + spyOn(menuService, 'deactivateSection'); + const sidebarToggler = fixture.debugElement.query(By.css('li.nav-item.dropdown')); + sidebarToggler.triggerEventHandler('mouseleave', { + preventDefault: () => {/**/ + } + }); + }); + + it('should not call deactivateSection on the menuService', () => { + expect(menuService.deactivateSection).not.toHaveBeenCalled(); + }); + }); + + describe('when a click occurs on the section header link', () => { + beforeEach(() => { + spyOn(menuService, 'toggleActiveSection'); + const sidebarToggler = fixture.debugElement.query(By.css('li.nav-item.dropdown')).query(By.css('a')); + sidebarToggler.triggerEventHandler('click', { + preventDefault: () => {/**/ + } + }); + }); + + it('should call toggleActiveSection on the menuService', () => { + expect(menuService.toggleActiveSection).toHaveBeenCalled(); + }); + }); }); + }); + +// declare a test component +@Component({ + selector: 'ds-test-cmp', + template: `` +}) +class TestComponent { +} diff --git a/src/app/navbar/navbar-section/navbar-section.component.spec.ts b/src/app/navbar/navbar-section/navbar-section.component.spec.ts index f6845145b3..af46227ec3 100644 --- a/src/app/navbar/navbar-section/navbar-section.component.spec.ts +++ b/src/app/navbar/navbar-section/navbar-section.component.spec.ts @@ -1,21 +1,42 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { NavbarSectionComponent } from './navbar-section.component'; +import { HostWindowService } from '../../shared/host-window.service'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { MenuService } from '../../shared/menu/menu.service'; +import { HostWindowServiceStub } from '../../shared/testing/host-window-service-stub'; +import { Component } from '@angular/core'; +import { MenuServiceStub } from '../../shared/testing/menu-service-stub'; +import { of as observableOf } from 'rxjs'; describe('NavbarSectionComponent', () => { let component: NavbarSectionComponent; let fixture: ComponentFixture; + const menuService = new MenuServiceStub(); beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ NavbarSectionComponent ] + imports: [NoopAnimationsModule], + declarations: [NavbarSectionComponent, TestComponent], + providers: [ + { provide: 'sectionDataProvider', useValue: {} }, + { provide: MenuService, useValue: menuService }, + { provide: HostWindowService, useValue: new HostWindowServiceStub(800) } + ] + }).overrideComponent(NavbarSectionComponent, { + set: { + entryComponents: [TestComponent] + } }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { + spyOn(menuService, 'getSubSectionsByParentID').and.returnValue(observableOf([])); + fixture = TestBed.createComponent(NavbarSectionComponent); component = fixture.componentInstance; + spyOn(component as any, 'getMenuItemComponent').and.returnValue(TestComponent); fixture.detectChanges(); }); @@ -23,3 +44,10 @@ describe('NavbarSectionComponent', () => { expect(component).toBeTruthy(); }); }); +// declare a test component +@Component({ + selector: 'ds-test-cmp', + template: `` +}) +class TestComponent { +} diff --git a/src/app/navbar/navbar.component.spec.ts b/src/app/navbar/navbar.component.spec.ts index fac2b3cfe4..2d937fd84e 100644 --- a/src/app/navbar/navbar.component.spec.ts +++ b/src/app/navbar/navbar.component.spec.ts @@ -1,8 +1,5 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { Store, StoreModule } from '@ngrx/store'; import { TranslateModule } from '@ngx-translate/core'; -import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap'; import { of as observableOf } from 'rxjs'; @@ -10,34 +7,29 @@ import { NavbarComponent } from './navbar.component'; import { ReactiveFormsModule } from '@angular/forms'; import { HostWindowService } from '../shared/host-window.service'; import { HostWindowServiceStub } from '../shared/testing/host-window-service-stub'; -import { RouterStub } from '../shared/testing/router-stub'; -import { Router } from '@angular/router'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import * as ngrx from '@ngrx/store'; -import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { ToggleMenuAction } from '../shared/menu/menu.actions'; -import { MenuID } from '../shared/menu/initial-menus-state'; -import { MenusState } from '../shared/menu/menu.reducer'; +import { Injector, NO_ERRORS_SCHEMA } from '@angular/core'; +import { MenuService } from '../shared/menu/menu.service'; +import { MenuServiceStub } from '../shared/testing/menu-service-stub'; let comp: NavbarComponent; let fixture: ComponentFixture; -let store: Store; describe('NavbarComponent', () => { + const menuService = new MenuServiceStub(); // async beforeEach beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ - StoreModule.forRoot({}), TranslateModule.forRoot(), - NgbCollapseModule.forRoot(), NoopAnimationsModule, ReactiveFormsModule], declarations: [NavbarComponent], providers: [ + { provide: Injector, useValue: {} }, + { provide: MenuService, useValue: menuService }, { provide: HostWindowService, useValue: new HostWindowServiceStub(800) }, - { provide: Router, useClass: RouterStub }, ], schemas: [NO_ERRORS_SCHEMA] }) @@ -46,63 +38,15 @@ describe('NavbarComponent', () => { // synchronous beforeEach beforeEach(() => { + spyOn(menuService, 'getMenuTopSections').and.returnValue(observableOf([])); + fixture = TestBed.createComponent(NavbarComponent); comp = fixture.componentInstance; - store = fixture.debugElement.injector.get(Store) as Store; - spyOn(store, 'dispatch'); }); - describe('when the toggle button is clicked', () => { - - beforeEach(() => { - const navbarToggler = fixture.debugElement.query(By.css('.navbar-toggler')); - navbarToggler.triggerEventHandler('click', null); - }); - - it('should dispatch a NavbarToggleAction', () => { - expect(store.dispatch).toHaveBeenCalledWith(new ToggleMenuAction(MenuID.PUBLIC)); - }); - + it('should create', () => { + expect(comp).toBeTruthy(); }); - - describe('when navCollapsed in the store is true', () => { - let menu: HTMLElement; - - beforeEach(() => { - menu = fixture.debugElement.query(By.css('#collapsingNav')).nativeElement; - spyOnProperty(ngrx, 'select').and.callFake(() => { - return () => { - return () => observableOf({ navCollapsed: true }) - }; - }); - fixture.detectChanges(); - }); - - it('should close the menu', () => { - expect(menu.classList).not.toContain('show'); - }); - - }); - - describe('when navCollapsed in the store is false', () => { - let menu: HTMLElement; - - beforeEach(() => { - menu = fixture.debugElement.query(By.css('#collapsingNav')).nativeElement; - spyOnProperty(ngrx, 'select').and.callFake(() => { - return () => { - return () => observableOf(false) - }; - }); - fixture.detectChanges(); - }); - - it('should open the menu', () => { - expect(menu.classList).toContain('show'); - }); - - }); - }); diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html index 5fee6f89b4..c748395b0f 100644 --- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html +++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html @@ -22,8 +22,6 @@
  • (current) - -
    • diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts b/src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts index 5c5dd11d75..ff4948caa0 100644 --- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts +++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts @@ -229,7 +229,7 @@ describe('AuthNavMenuComponent', () => { component = null; }); it('should render logout dropdown menu', () => { - const logoutDropdownMenu = deNavMenuItem.query(By.css('div[id=logoutDropdownMenu]')); + const logoutDropdownMenu = deNavMenuItem.query(By.css('ul[id=logoutDropdownMenu]')); expect(logoutDropdownMenu.nativeElement).toBeDefined(); }); }) diff --git a/src/app/shared/chips/chips.component.spec.ts b/src/app/shared/chips/chips.component.spec.ts index 7a9461dfd7..d7940303c0 100644 --- a/src/app/shared/chips/chips.component.spec.ts +++ b/src/app/shared/chips/chips.component.spec.ts @@ -148,7 +148,7 @@ describe('ChipsComponent test suite', () => { name: 'mainField', config: { withAuthority:{ - style: 'fa-user' + style: 'fas-user' } } }, @@ -156,10 +156,10 @@ describe('ChipsComponent test suite', () => { name: 'relatedField', config: { withAuthority:{ - style: 'fa-user-alt' + style: 'fas-user-alt' }, withoutAuthority:{ - style: 'fa-user-alt text-muted' + style: 'fas-user-alt text-muted' } } }, @@ -167,10 +167,10 @@ describe('ChipsComponent test suite', () => { name: 'otherRelatedField', config: { withAuthority:{ - style: 'fa-user-alt' + style: 'fas-user-alt' }, withoutAuthority:{ - style: 'fa-user-alt text-muted' + style: 'fas-user-alt text-muted' } } }, @@ -190,7 +190,7 @@ describe('ChipsComponent test suite', () => { it('should show icon for every field that has a configured icon', () => { const de = chipsFixture.debugElement.query(By.css('li.nav-item')); - const icons = de.queryAll(By.css('i.fa')); + const icons = de.queryAll(By.css('i.fas')); expect(icons.length).toBe(4); @@ -198,14 +198,14 @@ describe('ChipsComponent test suite', () => { it('should has text-muted on icon style when field value had not authority', () => { const de = chipsFixture.debugElement.query(By.css('li.nav-item')); - const icons = de.queryAll(By.css('i.fa')); + const icons = de.queryAll(By.css('i.fas')); expect(hasClass(icons[2].nativeElement, 'text-muted')).toBeTruthy(); }); it('should show tooltip on mouse over an icon', () => { const de = chipsFixture.debugElement.query(By.css('li.nav-item')); - const icons = de.queryAll(By.css('i.fa')); + const icons = de.queryAll(By.css('i.fas')); icons[0].triggerEventHandler('mouseover', null); diff --git a/src/app/shared/host-window.service.spec.ts b/src/app/shared/host-window.service.spec.ts index 518059f305..e65285c2be 100644 --- a/src/app/shared/host-window.service.spec.ts +++ b/src/app/shared/host-window.service.spec.ts @@ -4,22 +4,22 @@ import { of as observableOf } from 'rxjs'; import { AppState } from '../app.reducer'; import { HostWindowService, WidthCategory } from './host-window.service'; -enum GridBreakpoint { - SM_MIN = 576, - MD_MIN = 768, - LG_MIN = 992, - XL_MIN = 1200 -} - +import { CSSVariableServiceStub } from './testing/css-variable-service-stub'; describe('HostWindowService', () => { let service: HostWindowService; let store: Store; + enum GridBreakpoint { + SM_MIN = 576, + MD_MIN = 768, + LG_MIN = 992, + XL_MIN = 1200 + }; describe('', () => { beforeEach(() => { const _initialState = { hostWindow: { width: 1600, height: 770 } }; store = new Store(observableOf(_initialState), undefined, undefined); - service = new HostWindowService(store, null); + service = new HostWindowService(store, new CSSVariableServiceStub() as any); }); it('isXs() should return false with width = 1600', () => { @@ -55,7 +55,7 @@ describe('HostWindowService', () => { beforeEach(() => { const _initialState = { hostWindow: { width: 1100, height: 770 } }; store = new Store(observableOf(_initialState), undefined, undefined); - service = new HostWindowService(store, null); + service = new HostWindowService(store, new CSSVariableServiceStub() as any); }); it('isXs() should return false with width = 1100', () => { @@ -91,7 +91,7 @@ describe('HostWindowService', () => { beforeEach(() => { const _initialState = { hostWindow: { width: 800, height: 770 } }; store = new Store(observableOf(_initialState), undefined, undefined); - service = new HostWindowService(store, null); + service = new HostWindowService(store, new CSSVariableServiceStub() as any); }); it('isXs() should return false with width = 800', () => { @@ -127,7 +127,7 @@ describe('HostWindowService', () => { beforeEach(() => { const _initialState = { hostWindow: { width: 600, height: 770 } }; store = new Store(observableOf(_initialState), undefined, undefined); - service = new HostWindowService(store, null); + service = new HostWindowService(store, new CSSVariableServiceStub() as any); }); it('isXs() should return false with width = 600', () => { @@ -163,7 +163,7 @@ describe('HostWindowService', () => { beforeEach(() => { const _initialState = { hostWindow: { width: 400, height: 770 } }; store = new Store(observableOf(_initialState), undefined, undefined); - service = new HostWindowService(store, null); + service = new HostWindowService(store, new CSSVariableServiceStub() as any); }); it('isXs() should return true with width = 400', () => { @@ -197,7 +197,7 @@ describe('HostWindowService', () => { describe('widthCategory', () => { beforeEach(() => { - service = new HostWindowService({} as Store, null); + service = new HostWindowService({} as Store, new CSSVariableServiceStub() as any); }); it('should call getWithObs to get the current width', () => { diff --git a/src/app/shared/menu/menu.service.ts b/src/app/shared/menu/menu.service.ts index 152b3eb91c..067de57aae 100644 --- a/src/app/shared/menu/menu.service.ts +++ b/src/app/shared/menu/menu.service.ts @@ -3,7 +3,7 @@ import { MemoizedSelector, select, Store } from '@ngrx/store'; import { MenuSection, MenuSectionIndex, MenuSections, MenusState, MenuState } from './menu.reducer'; import { AppState, keySelector } from '../../app.reducer'; import { MenuID } from './initial-menus-state'; -import { Observable } from 'rxjs/internal/Observable'; +import { Observable } from 'rxjs'; import { map, switchMap } from 'rxjs/operators'; import { ActivateMenuSectionAction, diff --git a/src/app/shared/testing/css-variable-service-stub.ts b/src/app/shared/testing/css-variable-service-stub.ts index 32f8349019..3bf021eb36 100644 --- a/src/app/shared/testing/css-variable-service-stub.ts +++ b/src/app/shared/testing/css-variable-service-stub.ts @@ -1,8 +1,23 @@ import { Observable } from 'rxjs/internal/Observable'; import { of as observableOf } from 'rxjs'; +const variables = { + smMin: '576px,', + mdMin: '768px,', + lgMin: '992px', + xlMin: '1200px', +} as any; export class CSSVariableServiceStub { getVariable(name: string): Observable { return observableOf('500px'); } -} \ No newline at end of file + + getAllVariables(name: string): Observable { + return observableOf(variables); + } + + addCSSVariable(name: string, value: string): void { + /**/ + } +} +