fix(docs-infra): update app code to work with Ivy (#28530)

This commit also enables more tests to be run on CI with Ivy.

PR Close #28530

.circleci/config.yml

@@ -292,11 +292,21 @@ jobs:
 
   test_aio_local_ivy:
     <<: *job_defaults
+    docker:
+      # Needed because the AIO tests and the PWA score test depend on Chrome being available.
+      - image: *browsers_docker_image
     steps:
       - *attach_workspace
       - *init_environment
         # Build aio with Ivy (using local Angular packages)
       - run: yarn --cwd aio build-with-ivy --progress=false
+        # Run PWA-score tests
+        # (Run before unit and e2e tests, which destroy the `dist/` directory.)
+      - run: yarn --cwd aio test-pwa-score-localhost $CI_AIO_MIN_PWA_SCORE
+        # Run unit tests
+      - run: yarn --cwd aio test --progress=false --watch=false
+        # Run e2e tests
+      - run: yarn --cwd aio e2e --configuration=ci
 
   test_aio_tools:
     <<: *job_defaults

aio/scripts/switch-to-ivy.js

@@ -33,7 +33,7 @@ function _main() {
   const oldTsConfigStr = readFileSync(tsConfigPath, 'utf8');
   const oldTsConfigObj = parse(oldTsConfigStr);
   const newTsConfigObj = extend(true, oldTsConfigObj, NG_COMPILER_OPTS);
-  const newTsConfigStr = JSON.stringify(newTsConfigObj, null, 2);
+  const newTsConfigStr = `${JSON.stringify(newTsConfigObj, null, 2)}\n`;
   console.log(`\nNew config: ${newTsConfigStr}`);
   writeFileSync(tsConfigPath, newTsConfigStr);
 

aio/src/app/custom-elements/code/code-example.component.spec.ts

@@ -23,10 +23,10 @@ describe('CodeExampleComponent', () => {
     });
 
     fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+
     hostComponent = fixture.componentInstance;
     codeExampleComponent = hostComponent.codeExampleComponent;
-
-    fixture.detectChanges();
   });
 
   it('should be able to capture the code snippet provided in content', () => {

aio/src/app/custom-elements/code/code-tabs.component.spec.ts

@@ -23,10 +23,10 @@ describe('CodeTabsComponent', () => {
     });
 
     fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+
     hostComponent = fixture.componentInstance;
     codeTabsComponent = hostComponent.codeTabsComponent;
-
-    fixture.detectChanges();
   });
 
   it('should get correct tab info', () => {

aio/src/app/custom-elements/toc/toc.component.spec.ts

@@ -63,6 +63,9 @@ describe('TocComponent', () => {
       expect(tocComponent.type).toEqual('None');
     });
 
+    describe('(once the lifecycle hooks have run)', () => {
+      beforeEach(() => fixture.detectChanges());
+
       it('should not display anything when no h2 or h3 TocItems', () => {
         tocService.tocList.next([tocItem('H1', 'h1')]);
         fixture.detectChanges();
@@ -239,6 +242,7 @@ describe('TocComponent', () => {
         });
       });
     });
+  });
 
   describe('when in side panel (not embedded)', () => {
     let fixture: ComponentFixture<HostNotEmbeddedTocComponent>;

aio/src/app/search/search-box/search-box.component.spec.ts

@@ -38,7 +38,7 @@ describe('SearchBoxComponent', () => {
     it('should get the current search query from the location service',
           fakeAsync(inject([LocationService], (location: MockLocationService) => {
       location.search.and.returnValue({ search: 'initial search' });
-      component.ngOnInit();
+      component.ngAfterViewInit();
       expect(location.search).toHaveBeenCalled();
       tick(300);
       expect(host.searchHandler).toHaveBeenCalledWith('initial search');

aio/src/app/search/search-box/search-box.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, ElementRef, EventEmitter, Output } from '@angular/core';
+import { AfterViewInit, Component, ViewChild, ElementRef, EventEmitter, Output } from '@angular/core';
 import { LocationService } from 'app/shared/location.service';
 import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
@@ -24,7 +24,7 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
     (focus)="doFocus()"
     (click)="doSearch()">`
 })
-export class SearchBoxComponent implements OnInit {
+export class SearchBoxComponent implements AfterViewInit {
 
   private searchDebounce = 300;
   private searchSubject = new Subject<string>();
@@ -40,7 +40,7 @@ export class SearchBoxComponent implements OnInit {
   /**
    * When we first show this search box we trigger a search if there is a search query in the URL
    */
-  ngOnInit() {
+  ngAfterViewInit() {
     const query = this.locationService.search()['search'];
     if (query) {
       this.query = query;

aio/tests/e2e/src/app.e2e-spec.ts

@@ -239,7 +239,9 @@ describe('site App', function() {
       /* tslint:disable:max-line-length */
       expect(page.ghLinks.get(0).getAttribute('href'))
         .toMatch(/https:\/\/github\.com\/angular\/angular\/edit\/master\/aio\/content\/guide\/http\.md\?message=docs%3A%20describe%20your%20change\.\.\./);
-    });
+    // TODO(gkalpak): This test often times out with Ivy (because loading `guide/http` takes a lot of time).
+    //                Remove the timeout once the performance issues have been fixed.
+    }, 60000);
 
     it('should not be present on top level pages', () => {
       page.navigateTo('features');