Set up Karma for unit testing

Author: PabloG02

angular.json

@@ -88,7 +88,8 @@
             "styles": [
               "src/styles.css"
             ],
-            "scripts": []
+            "scripts": [],
+            "karmaConfig": "karma.conf.js"
           }
         },
         "deploy": {

karma.conf.js

@@ -0,0 +1,39 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/dockerfiles-website'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    browsers: ['Chrome'],
+    restartOnFileChange: true
+  });
+};

src/app/app.component.spec.ts

@@ -1,10 +1,14 @@
 import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
+import { provideRouter } from '@angular/router';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [AppComponent],
+      providers: [
+        provideRouter([]),
+      ],
     }).compileComponents();
   });
 
@@ -13,17 +17,4 @@ describe('AppComponent', () => {
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
-
-  it(`should have the 'dockerfiles-website' title`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('dockerfiles-website');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, dockerfiles-website');
-  });
 });

src/app/app.component.ts

@@ -3,7 +3,7 @@ import { RouterOutlet } from '@angular/router';
 import { HeaderComponent } from './core/layout/header/header.component';
 import { FooterComponent } from './core/layout/footer/footer.component';
 import { LandingComponent } from './features/landing/pages/landing/landing.component';
-import { debounceTime, fromEvent, map } from 'rxjs';
+import { fromEvent, map } from 'rxjs';
 
 @Component({
   selector: 'app-root',

src/app/core/layout/header/header.component.spec.ts

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
 
 import { HeaderComponent } from './header.component';
 
@@ -8,7 +9,10 @@ describe('HeaderComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [HeaderComponent]
+      imports: [HeaderComponent],
+      providers: [
+        provideRouter([])
+      ]
     })
     .compileComponents();
 

src/app/core/layout/header/header.component.ts

@@ -1,14 +1,13 @@
 import { ChangeDetectionStrategy, Component, ElementRef, Renderer2, signal } from '@angular/core';
 import { NavigationEnd, RouterLink, Router } from '@angular/router';
-import { SearchGuidedComponent } from "../../../features/containers/pages/search-guided/search-guided.component";
 import { ThemeService } from '../../../services/theme.service';
 
 @Component({
     selector: 'app-header',
     standalone: true,
     templateUrl: './header.component.html',
     styleUrl: './header.component.css',
-    imports: [RouterLink, SearchGuidedComponent],
+    imports: [RouterLink],
     host: {'[class.dark]':'isDarkTheme'},
     changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/features/containers/pages/container/container.component.spec.ts

@@ -1,4 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { RouterTestingHarness } from '@angular/router/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 
 import { ContainerComponent } from './container.component';
 
@@ -8,13 +12,20 @@ describe('ContainerComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ContainerComponent]
+      imports: [ContainerComponent],
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        provideRouter([
+          { path: 'container/:name', component: ContainerComponent }
+        ])
+      ]
     })
     .compileComponents();
-    
-    fixture = TestBed.createComponent(ContainerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
+
+    const harness = await RouterTestingHarness.create();
+    component = await harness.navigateByUrl('/container/bedtools', ContainerComponent);
+    harness.detectChanges();
   });
 
   it('should create', () => {

src/app/features/containers/pages/search-guided/search-guided.component.spec.ts

@@ -1,4 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
 
 import { SearchGuidedComponent } from './search-guided.component';
 
@@ -8,7 +12,13 @@ describe('SearchGuidedComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [SearchGuidedComponent]
+      imports: [SearchGuidedComponent],
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        provideNoopAnimations(),
+        provideRouter([]),
+      ],
     })
     .compileComponents();
 

src/app/features/landing/components/contributor-card/contributor-card.component.spec.ts

@@ -1,18 +1,32 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ContributorCardComponent } from './contributor-card.component';
+import { Contributor } from '../../models/contributor.model';
+import * as Organization from '../../../../models/organization';
 
 describe('ContributorCardComponent', () => {
   let component: ContributorCardComponent;
   let fixture: ComponentFixture<ContributorCardComponent>;
 
+  const contributor: Contributor = {
+    name: 'John Doe',
+    description: 'A contributor',
+    photo: 'photo.jpg',
+    contactInfo: {
+      email: '[email protected]',
+      orcid: '0000-0000-0000-0000',
+    },
+    organizations: [Organization.SING],
+  };
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ContributorCardComponent]
     })
     .compileComponents();
 
     fixture = TestBed.createComponent(ContributorCardComponent);
+    fixture.componentRef.setInput('contributor', contributor);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/features/landing/pages/landing/landing.component.spec.ts

@@ -1,14 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { LandingComponent } from './landing.component';
+import { provideRouter } from '@angular/router';
 
 describe('LandingComponent', () => {
   let component: LandingComponent;
   let fixture: ComponentFixture<LandingComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [LandingComponent]
+      imports: [LandingComponent],
+      providers: [
+        provideRouter([
+          { path: 'search', component: LandingComponent }
+        ]),
+      ],
     })
     .compileComponents();
 

src/app/features/tutorials/pages/tutorial/tutorial.component.spec.ts

@@ -1,4 +1,9 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { RouterTestingHarness } from '@angular/router/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideMarkdown } from 'ngx-markdown';
 
 import { TutorialComponent } from './tutorial.component';
 
@@ -8,13 +13,21 @@ describe('TutorialComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [TutorialComponent]
+      imports: [TutorialComponent],
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        provideMarkdown(),
+        provideRouter([
+          { path: 'tutorials/:name', component: TutorialComponent }
+        ])
+      ]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(TutorialComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
+    const harness = await RouterTestingHarness.create();
+    component = await harness.navigateByUrl('/tutorials/docker-in-docker', TutorialComponent);
+    harness.detectChanges();
   });
 
   it('should create', () => {

src/app/features/tutorials/pages/tutorials-landing/tutorials-landing.component.spec.ts

@@ -1,4 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 
 import { TutorialsLandingComponent } from './tutorials-landing.component';
 
@@ -8,10 +10,14 @@ describe('TutorialsLandingComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [TutorialsLandingComponent]
+      imports: [TutorialsLandingComponent],
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+      ],
     })
     .compileComponents();
-    
+
     fixture = TestBed.createComponent(TutorialsLandingComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/search-list/search-list.component.spec.ts

@@ -6,13 +6,22 @@ describe('ReasonCardComponent', () => {
   let component: ReasonCardComponent;
   let fixture: ComponentFixture<ReasonCardComponent>;
 
+  const reason = {
+    icon: 'labs',
+    title: 'title',
+    description: 'description'
+  };
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ReasonCardComponent]
     })
     .compileComponents();
 
     fixture = TestBed.createComponent(ReasonCardComponent);
+    fixture.componentRef.setInput('icon', reason.icon);
+    fixture.componentRef.setInput('title', reason.title);
+    fixture.componentRef.setInput('description', reason.description);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/shared/components/reason-card/reason-card.component.spec.ts

@@ -1,23 +1,44 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
 import { TabsComponent } from './tabs.component';
 
 describe('TabsComponent', () => {
   let component: TabsComponent;
   let fixture: ComponentFixture<TabsComponent>;
 
+  const tabs = [{ label: 'Tab 1', active: true }, { label: 'Tab 2' }];
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [TabsComponent]
+      imports: [TabsComponent],
     })
     .compileComponents();
 
     fixture = TestBed.createComponent(TabsComponent);
+    fixture.componentRef.setInput('tabs', tabs);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should display the tabs', () => {
+    const tabsRendered = fixture.debugElement.queryAll(By.css('.tab'));
+    expect(tabsRendered.length).toBe(tabs.length);
+  });
+
+  it('should display the active tab', () => {
+    const activeTab = fixture.debugElement.query(By.css('input:checked'));
+    expect(activeTab.nativeElement.id).toContain(tabs[0].label);
+  });
+
+  it('should emit the selected tab on onSelectTab', () => {
+    spyOn(component.activeTab, 'emit');
+    const expectedTab = 'Test Tab';
+    component.onSelectTab(expectedTab);
+    expect(component.activeTab.emit).toHaveBeenCalledWith(expectedTab);
+  });
 });