feat(aio): add deploy mode to version picker

See #18287

aio/src/app/app.component.html

@@ -21,8 +21,8 @@
     <aio-nav-menu *ngIf="!isSideBySide" [nodes]="topMenuNarrowNodes" [currentNode]="currentNodes?.TopBarNarrow" [isWide]="false"></aio-nav-menu>
     <aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNodes?.SideNav" [isWide]="isSideBySide"></aio-nav-menu>
 
-    <div class="doc-version" title="Angular docs version {{currentDocVersion?.title}}">
+    <div class="doc-version">
-      <aio-select (change)="onDocVersionChange($event.index)" [options]="docVersions" [selected]="docVersions && docVersions[0]"></aio-select>
+      <aio-select (change)="onDocVersionChange($event.index)" [options]="docVersions" [selected]="currentDocVersion"></aio-select>
     </div>
   </md-sidenav>
 

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

@@ -274,26 +274,49 @@ describe('AppComponent', () => {
     describe('SideNav version selector', () => {
       let selectElement: DebugElement;
       let selectComponent: SelectComponent;
-      beforeEach(() => {
+
+      function setupSelectorForTesting(mode?: string) {
+        createTestingModule('a/b', mode);
+        initializeTest();
         component.onResize(sideBySideBreakPoint + 1); // side-by-side
         selectElement = fixture.debugElement.query(By.directive(SelectComponent));
         selectComponent = selectElement.componentInstance;
+      }
+
+      it('should select the version that matches the deploy mode', () => {
+        setupSelectorForTesting();
+        expect(selectComponent.selected.title).toContain('stable');
+        setupSelectorForTesting('next');
+        expect(selectComponent.selected.title).toContain('next');
+        setupSelectorForTesting('archive');
+        expect(selectComponent.selected.title).toContain('v4');
       });
 
-      it('should pick first (current) version by default', () => {
+      it('should add the current raw version string to the selected version', () => {
-        expect(selectComponent.selected.title).toEqual(component.versionInfo.raw);
+        setupSelectorForTesting();
+        expect(selectComponent.selected.title).toContain(`(v${component.versionInfo.raw})`);
+        setupSelectorForTesting('next');
+        expect(selectComponent.selected.title).toContain(`(v${component.versionInfo.raw})`);
+        setupSelectorForTesting('archive');
+        expect(selectComponent.selected.title).toContain(`(v${component.versionInfo.raw})`);
       });
 
       // Older docs versions have an href
-      it('should navigate when change to a version with an href', () => {
+      it('should navigate when change to a version with a url', () => {
-        selectElement.triggerEventHandler('change', { option: component.docVersions[1] as Option, index: 1});
+        setupSelectorForTesting();
-        expect(locationService.go).toHaveBeenCalledWith(TestHttp.docVersions[0].url);
+        const versionWithUrlIndex = component.docVersions.findIndex(v => !!v.url);
+        const versionWithUrl = component.docVersions[versionWithUrlIndex];
+        selectElement.triggerEventHandler('change', { option: versionWithUrl, index: versionWithUrlIndex});
+        expect(locationService.go).toHaveBeenCalledWith(versionWithUrl.url);
       });
 
       // The current docs version should not have an href
       // This may change when we perfect our docs versioning approach
-      it('should not navigate when change to a version without an href', () => {
+      it('should not navigate when change to a version without a url', () => {
-        selectElement.triggerEventHandler('change', { option: component.docVersions[0] as Option, index: 0});
+        setupSelectorForTesting();
+        const versionWithoutUrlIndex = component.docVersions.findIndex(v => !v.url);
+        const versionWithoutUrl = component.docVersions[versionWithoutUrlIndex];
+        selectElement.triggerEventHandler('change', { option: versionWithoutUrl, index: versionWithoutUrlIndex});
         expect(locationService.go).not.toHaveBeenCalled();
       });
     });
@@ -627,7 +650,7 @@ describe('AppComponent', () => {
     describe('footer', () => {
       it('should have version number', () => {
         const versionEl: HTMLElement = fixture.debugElement.query(By.css('aio-footer')).nativeElement;
-        expect(versionEl.textContent).toContain(TestHttp.versionFull);
+        expect(versionEl.textContent).toContain(TestHttp.versionInfo.full);
       });
     });
 
@@ -936,7 +959,21 @@ class TestSearchService {
 }
 
 class TestHttp {
-  static versionFull = '4.0.0-local+sha.73808dd';
+
+  static versionInfo = {
+    raw: '4.0.0-rc.6',
+    major: 4,
+    minor: 0,
+    patch: 0,
+    prerelease: [ 'local' ],
+    build: 'sha.73808dd',
+    version: '4.0.0-local',
+    codeName: 'snapshot',
+    isSnapshot: true,
+    full: '4.0.0-local+sha.73808dd',
+    branch: 'master',
+    commitSHA: '73808dd38b5ccd729404936834d1568bd066de81'
+  };
 
   static docVersions: NavigationNode[] = [
     { title: 'v2', url: 'https://v2.angular.io' }
@@ -979,22 +1016,7 @@ class TestHttp {
     ],
     "docVersions": TestHttp.docVersions,
 
-    "__versionInfo": {
+    "__versionInfo": TestHttp.versionInfo,
-      "raw": "4.0.0-rc.6",
-      "major": 4,
-      "minor": 0,
-      "patch": 0,
-      "prerelease": [
-        "local"
-      ],
-      "build": "sha.73808dd",
-      "version": "4.0.0-local",
-      "codeName": "snapshot",
-      "isSnapshot": true,
-      "full": TestHttp.versionFull,
-      "branch": "master",
-      "commitSHA": "73808dd38b5ccd729404936834d1568bd066de81"
-    }
   };
 
   get(url: string) {

aio/src/app/app.component.ts

@@ -160,12 +160,24 @@ export class AppComponent implements OnInit {
 
     // Compute the version picker list from the current version and the versions in the navigation map
     combineLatest(
-      this.navigationService.versionInfo.map(versionInfo => ({ title: versionInfo.raw, url: null })),
+      this.navigationService.versionInfo,
-      this.navigationService.navigationViews.map(views => views['docVersions']),
+      this.navigationService.navigationViews.map(views => views['docVersions']))
-      (currentVersion, otherVersions) => [currentVersion, ...otherVersions])
+      .subscribe(([versionInfo, versions]) => {
-      .subscribe(versions => {
+        // TODO(pbd): consider whether we can lookup the stable and next versions from the internet
-        this.docVersions = versions;
+        const computedVersions = [
-        this.currentDocVersion = this.docVersions[0];
+          { title: 'next', url: 'https://next.angular.io' },
+          { title: 'stable', url: 'https://angular.io' },
+        ];
+        if (this.deployment.mode === 'archive') {
+          computedVersions.push({ title: `v${versionInfo.major}`, url: null });
+        }
+        this.docVersions = [...computedVersions, ...versions];
+
+        // Find the current version - eithers title matches the current deployment mode
+        // or its title matches the major version of the current version info
+        this.currentDocVersion = this.docVersions.find(version =>
+          version.title === this.deployment.mode || version.title === `v${versionInfo.major}`);
+        this.currentDocVersion.title += ` (v${versionInfo.raw})`;
       });
 
     this.navigationService.navigationViews.subscribe(views => {