feat(aio): add marketing class to AppComponent <aio-shell> on mkt page (#16395)

Also navigation.json Doc page should be hidden in sidebar, shown in top

aio/content/navigation.json

@@ -6,8 +6,7 @@
     },
     {
       "url": "docs",
-      "title": "Docs",
+      "title": "Docs"
-      "hidden": true
     },
     {
       "url": "resources",

aio/src/app/app.component.spec.ts

@@ -274,6 +274,22 @@ describe('AppComponent', () => {
       expect(docViewer.innerText).toMatch(/Features/i);
     });
 
+    const marketingClassName = 'marketing';
+
+    it('should not have marketing CSS class on host element for a guide page (guide/pipes)', () => {
+      locationService.go('guide/pipes');
+      fixture.detectChanges();
+      const classes: string[] = fixture.nativeElement.className;
+      expect(classes).not.toContain(marketingClassName);
+    });
+
+    it('should have marketing CSS class on host element for a marketing page', () => {
+      locationService.go('features');
+      fixture.detectChanges();
+      const classes: string[] = fixture.nativeElement.className;
+      expect(classes).toContain(marketingClassName);
+    });
+
     it('should update the document title', () => {
       const titleService = TestBed.get(Title);
       spyOn(titleService, 'setTitle');

aio/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, HostListener, OnInit,
+import { Component, ElementRef, HostBinding, HostListener, OnInit,
          QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { MdSidenav } from '@angular/material';
 
@@ -25,6 +25,10 @@ export class AppComponent implements OnInit {
   pageId: string;
   currentDocument: DocumentContents;
   footerNodes: NavigationNode[];
+
+  @HostBinding('class.marketing')
+  isMarketing = false;
+
   isStarting = true;
   isSideBySide = false;
   private isSideNavDoc = false;
@@ -94,6 +98,7 @@ export class AppComponent implements OnInit {
       if (this.previousNavView === currentNode.view) { return; }
       this.previousNavView = currentNode.view;
       this.isSideNavDoc = currentNode.view === sideNavView;
+      this.isMarketing = !this.isSideNavDoc;
       this.sideNavToggle(this.isSideNavDoc && this.isSideBySide);
     });
 

aio/src/app/layout/nav-menu/nav-menu.component.spec.ts

@@ -1,28 +1,15 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-
 import { NavMenuComponent } from './nav-menu.component';
+import { NavigationNode } from 'app/navigation/navigation.service';
 
+// Testing the component class behaviors, independent of its template
+// No dependencies, no life-cycle hooks. Just new it and test :)
+// Let e2e tests verify how it displays.
 describe('NavMenuComponent', () => {
-  let component: NavMenuComponent;
+  it('should filter out hidden nodes', () => {
-  let fixture: ComponentFixture<NavMenuComponent>;
+    const component = new NavMenuComponent();
-
+    const nodes: NavigationNode[] =
-  beforeEach(() => {
+      [ { title: 'a' }, { title: 'b', hidden: 'true'}, { title: 'c'} ];
-    TestBed.configureTestingModule({
+    component.nodes = nodes;
-      declarations: [ NavMenuComponent ],
+    expect(component.filteredNodes).toEqual([ nodes[0], nodes[2] ]);
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
   });
 });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(NavMenuComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  // TODO: Add TestHostComponent and tests.
-});