diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
index 2b0558f513..777c5434f0 100644
--- a/aio/src/app/app.component.html
+++ b/aio/src/app/app.component.html
@@ -12,7 +12,7 @@
-
+
diff --git a/aio/src/app/app.component.spec.ts b/aio/src/app/app.component.spec.ts
index 1753e66d84..7df46cd145 100644
--- a/aio/src/app/app.component.spec.ts
+++ b/aio/src/app/app.component.spec.ts
@@ -25,6 +25,7 @@ import { SearchResultsComponent } from 'app/search/search-results/search-results
import { SearchService } from 'app/search/search.service';
import { SwUpdateNotificationsService } from 'app/sw-updates/sw-update-notifications.service';
import { TocComponent } from 'app/embedded/toc/toc.component';
+import { MdSidenav } from '@angular/material';
describe('AppComponent', () => {
let component: AppComponent;
@@ -262,21 +263,56 @@ describe('AppComponent', () => {
});
describe('hostClasses', () => {
- it('should set the css classes of the host container based on the current doc and navigation view', () => {
- const host = fixture.debugElement;
+ let host: DebugElement;
+ beforeEach(() => {
+ host = fixture.debugElement;
+ });
+ it('should set the css classes of the host container based on the current doc and navigation view', () => {
locationService.go('guide/pipes');
fixture.detectChanges();
- expect(host.properties['className']).toEqual('page-guide-pipes folder-guide view-SideNav');
+
+ checkHostClass('page', 'guide-pipes');
+ checkHostClass('folder', 'guide');
+ checkHostClass('view', 'SideNav');
locationService.go('features');
fixture.detectChanges();
- expect(host.properties['className']).toEqual('page-features folder-features view-TopBar');
+ checkHostClass('page', 'features');
+ checkHostClass('folder', 'features');
+ checkHostClass('view', 'TopBar');
locationService.go('');
fixture.detectChanges();
- expect(host.properties['className']).toEqual('page-home folder-home view-');
+ checkHostClass('page', 'home');
+ checkHostClass('folder', 'home');
+ checkHostClass('view', '');
});
+
+ it('should set the css class of the host container based on the open/closed state of the side nav', () => {
+ const sideNav = host.query(By.directive(MdSidenav));
+
+ locationService.go('guide/pipes');
+ fixture.detectChanges();
+ checkHostClass('sidenav', 'open');
+
+ sideNav.componentInstance.opened = false;
+ sideNav.triggerEventHandler('close', {});
+ fixture.detectChanges();
+ checkHostClass('sidenav', 'closed');
+
+ sideNav.componentInstance.opened = true;
+ sideNav.triggerEventHandler('open', {});
+ fixture.detectChanges();
+ checkHostClass('sidenav', 'open');
+ });
+
+ function checkHostClass(type, value) {
+ const classes = host.properties['className'];
+ const classArray = classes.split(' ').filter(c => c.indexOf(`${type}-`) === 0);
+ expect(classArray.length).toBeLessThanOrEqual(1, `"${classes}" should have only one class matching ${type}-*`);
+ expect(classArray).toEqual([`${type}-${value}`], `"${classes}" should contain ${type}-${value}`);
+ }
});
describe('currentDocument', () => {
diff --git a/aio/src/app/app.component.ts b/aio/src/app/app.component.ts
index 7224c1ca66..356c1cd252 100644
--- a/aio/src/app/app.component.ts
+++ b/aio/src/app/app.component.ts
@@ -219,11 +219,12 @@ export class AppComponent implements OnInit {
}
updateHostClasses() {
+ const sideNavOpen = `sidenav-${this.sidenav.opened ? 'open' : 'closed'}`;
const pageClass = `page-${this.pageId}`;
const folderClass = `folder-${this.folderId}`;
const viewClass = `view-${this.currentNode && this.currentNode.view}`;
- this.hostClasses = `${pageClass} ${folderClass} ${viewClass}`;
+ this.hostClasses = `${sideNavOpen} ${pageClass} ${folderClass} ${viewClass}`;
}
// Dynamically change height of table of contents container