Update tests to pass

package.json

@@ -37,6 +37,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
+    "ng-mocks": "^14.12.2",
     "typescript": "~5.4.2"
   }
-}
+}

src/app/app.component.spec.ts

@@ -13,19 +13,4 @@ describe('AppComponent', () => {
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
-
-  it(`should have the 'chuck-norris-joke-generator' title`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('chuck-norris-joke-generator');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain(
-      'Hello, chuck-norris-joke-generator',
-    );
-  });
 });

src/app/chuck-norris-joke-generator/chuck-norris-joke-generator.service.spec.ts

@@ -1,12 +1,15 @@
 import { TestBed } from '@angular/core/testing';
 
 import { ChuckNorrisJokeGeneratorService } from './chuck-norris-joke-generator.service';
+import { provideHttpClient } from '@angular/common/http';
 
 describe('ChuckNorrisJokeGeneratorService', () => {
   let service: ChuckNorrisJokeGeneratorService;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      providers: [provideHttpClient()],
+    });
     service = TestBed.inject(ChuckNorrisJokeGeneratorService);
   });
 

src/app/home/home.component.spec.ts

@@ -1,17 +1,19 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { HomeComponent } from './home.component';
+import { JokesComponent } from '../jokes/jokes.component';
+
+import { MockComponent } from 'ng-mocks';
 
 describe('HomeComponent', () => {
   let component: HomeComponent;
   let fixture: ComponentFixture<HomeComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [HomeComponent]
-    })
-    .compileComponents();
-
+      imports: [HomeComponent, MockComponent(JokesComponent)],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(HomeComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/joke-store/joke-store.service.spec.ts

@@ -1,12 +1,15 @@
 import { TestBed } from '@angular/core/testing';
 
 import { JokeStoreService } from './joke-store.service';
+import { ChuckNorrisJokeGeneratorService } from '../chuck-norris-joke-generator/chuck-norris-joke-generator.service';
 
 describe('JokeStoreService', () => {
   let service: JokeStoreService;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      providers: [{ provide: ChuckNorrisJokeGeneratorService, useValue: {} }],
+    });
     service = TestBed.inject(JokeStoreService);
   });
 

src/app/jokes/jokes.component.spec.ts

@@ -1,17 +1,32 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { JokesComponent } from './jokes.component';
+import { JokeStoreService } from '../joke-store/joke-store.service';
+import { of } from 'rxjs';
+import { CommonModule } from '@angular/common';
 
 describe('JokesComponent', () => {
   let component: JokesComponent;
   let fixture: ComponentFixture<JokesComponent>;
 
   beforeEach(async () => {
+    const jokesStoreService = jasmine.createSpyObj('JokeStoreService', [
+      'getJokes',
+    ]);
+    jokesStoreService.getJokes.and.returnValue(
+      of(['Chuck Norris can divide by zero.'])
+    );
+
     await TestBed.configureTestingModule({
-      imports: [JokesComponent]
-    })
-    .compileComponents();
-
+      imports: [JokesComponent, CommonModule],
+      providers: [
+        {
+          provide: JokeStoreService,
+          useValue: jokesStoreService,
+        },
+      ],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(JokesComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
@@ -20,4 +35,13 @@ describe('JokesComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(JokesComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('li')?.textContent).toContain(
+      'Chuck Norris can divide by zero.'
+    );
+  });
 });

src/app/jokes/jokes.component.ts

@@ -15,8 +15,6 @@ export class JokesComponent {
 
   constructor(private jokeStoreService: JokeStoreService) {
     // TODO: Look into using async pipe?
-    this.jokeStoreService.getJokes().subscribe((jokes) => {
-      this.jokes = jokes;
-    });
+    this.jokeStoreService.getJokes().subscribe((jokes) => (this.jokes = jokes));
   }
 }