thymikee · ahnpnl · Dec 4, 2021 · Nov 18, 2021 · Dec 4, 2021 · Dec 4, 2021
diff --git a/examples/example-app-yarn-workspace/packages/angular-app/jest-global-mocks.ts b/examples/example-app-yarn-workspace/packages/angular-app/jest-global-mocks.ts
@@ -1,7 +1,11 @@
+import { jest } from '@jest/globals';
+
 Object.defineProperty(window, 'CSS', { value: null });
+
 Object.defineProperty(document, 'doctype', {
   value: '<!DOCTYPE html>',
 });
+
 Object.defineProperty(window, 'getComputedStyle', {
   value: () => {
     return {
@@ -10,6 +14,7 @@ Object.defineProperty(window, 'getComputedStyle', {
     };
   },
 });
+
 /**
  * ISSUE: https://github.com/angular/material2/issues/7101
  * Workaround for JSDOM missing transform property
@@ -22,3 +27,5 @@ Object.defineProperty(document.body.style, 'transform', {
     };
   },
 });
+
+HTMLCanvasElement.prototype.getContext = <typeof HTMLCanvasElement.prototype.getContext>jest.fn();
diff --git a/examples/example-app-yarn-workspace/packages/angular-app/package.json b/examples/example-app-yarn-workspace/packages/angular-app/package.json
@@ -20,6 +20,7 @@
     "@angular/platform-browser": "~12.2.14",
     "@angular/platform-browser-dynamic": "~12.2.14",
     "@angular/router": "~12.2.14",
+    "angular-in-memory-web-api": "^0.11.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.3.1",
     "zone.js": "~0.11.4"

diff --git a/...les/example-app-yarn-workspace/packages/angular-app/src/app/about/about.component.spec.ts b/...les/example-app-yarn-workspace/packages/angular-app/src/app/about/about.component.spec.ts
@@ -0,0 +1,24 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HighlightDirective } from '../shared/highlight.directive';
+
+import { AboutComponent } from './about.component';
+
+let fixture: ComponentFixture<AboutComponent>;
+
+describe('AboutComponent (highlightDirective)', () => {
+  beforeEach(() => {
+    fixture = TestBed.configureTestingModule({
+      declarations: [AboutComponent, HighlightDirective],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }).createComponent(AboutComponent);
+    fixture.detectChanges();
+  });
+
+  it('should have skyblue <h2>', () => {
+    const h2: HTMLElement = fixture.nativeElement.querySelector('h2');
+    const bgColor = h2.style.backgroundColor;
+    expect(bgColor).toBe('skyblue');
+  });
+});
diff --git a/examples/example-app-yarn-workspace/packages/angular-app/src/app/about/about.component.ts b/examples/example-app-yarn-workspace/packages/angular-app/src/app/about/about.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+@Component({
+  template: `
+    <h2 highlight="skyblue">About</h2>
+    <h3>Quote of the day:</h3>
+    <twain-quote></twain-quote>
+  `,
+})
+export class AboutComponent {}
diff --git a/...les/example-app-yarn-workspace/packages/angular-app/src/app/app-initial.component.spec.ts b/...les/example-app-yarn-workspace/packages/angular-app/src/app/app-initial.component.spec.ts
@@ -0,0 +1,69 @@
+import { DebugElement } from '@angular/core';
+import { TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture } from '@angular/core/testing';
+
+import { AppComponent } from './app-initial.component';
+
+describe('AppComponent (initial CLI version)', () => {
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [AppComponent],
+      }).compileComponents();
+    }),
+  );
+  it(
+    'should create the app',
+    waitForAsync(() => {
+      const fixture = TestBed.createComponent(AppComponent);
+      const app = fixture.componentInstance;
+      expect(app).toBeTruthy();
+    }),
+  );
+  it(
+    `should have as title 'app'`,
+    waitForAsync(() => {
+      const fixture = TestBed.createComponent(AppComponent);
+      const app = fixture.componentInstance;
+      expect(app.title).toEqual('app');
+    }),
+  );
+  it(
+    'should render title',
+    waitForAsync(() => {
+      const fixture = TestBed.createComponent(AppComponent);
+      fixture.detectChanges();
+      const compiled = fixture.nativeElement as HTMLElement;
+      expect(compiled.querySelector('h1')?.textContent).toContain('Welcome to app!');
+    }),
+  );
+});
+
+describe('AppComponent (initial CLI version - as it should be)', () => {
+  let app: AppComponent;
+  let de: DebugElement;
+  let fixture: ComponentFixture<AppComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AppComponent],
+    });
+
+    fixture = TestBed.createComponent(AppComponent);
+    app = fixture.componentInstance;
+    de = fixture.debugElement;
+  });
+
+  it('should create the app', () => {
+    expect(app).toBeDefined();
+  });
+
+  it(`should have as title 'app'`, () => {
+    expect(app.title).toEqual('app');
+  });
+
+  it('should render title in an h1 tag', () => {
+    fixture.detectChanges();
+    expect(de.nativeElement.querySelector('h1').textContent).toContain('Welcome to app!');
+  });
+});
diff --git a/examples/example-app-yarn-workspace/packages/angular-app/src/app/app-initial.component.ts b/examples/example-app-yarn-workspace/packages/angular-app/src/app/app-initial.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: '<h1>Welcome to {{title}}!</h1>',
+})
+export class AppComponent {
+  title = 'app';
+}
diff --git a/examples/example-app-yarn-workspace/packages/angular-app/src/app/app-routing.module.ts b/examples/example-app-yarn-workspace/packages/angular-app/src/app/app-routing.module.ts
@@ -1,7 +1,13 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-const routes: Routes = [];
+import { AboutComponent } from './about/about.component';
+
+export const routes: Routes = [
+  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
+  { path: 'about', component: AboutComponent },
+  { path: 'heroes', loadChildren: () => import('./hero/hero.module').then((m) => m.HeroModule) },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

diff --git a/examples/example-app-yarn-workspace/packages/angular-app/src/app/app.component.css b/examples/example-app-yarn-workspace/packages/angular-app/src/app/app.component.css