Fix frontend tests (#436)

* Update CONTRIBUTING.md

* Fix tests

CONTRIBUTING.md

@@ -30,6 +30,9 @@ brew install go
 
 brew install docker
 
+# Frontend tests run with ChromeHeadless browser.
+brew install --cask google-chrome
+
 # Go specific tools
 go install github.com/gzuidhof/tygo@latest
 ```
@@ -48,6 +51,8 @@ make test-frontend
 make test-backend
 ```
 
+**Note**: Running backend tests may take awhile to complete the first time you run
+
 # Start Development Environment
 
 To run Fasten from source, you'll need to create 2 separate processes:
@@ -211,9 +216,12 @@ a CDN or minimal Nginx deployment.
 
 ### How do I run individual frontend tests?
 
-- ng test --include='**/base_client.spec.ts'    
-- ng test --include='lib/**/*.spec.ts'     
+From the `frontend` directory, you can run `ng test` with the `--include` argument.
 
+```bash
+ng test --include='**/badge.component.spec.ts'
+ng test --include='lib/**/*.spec.ts'
+```
 
 ### How do I change the default encryption key and admin credentials
 - FASTEN_ISSUER_JWT_KEY

frontend/src/app/components/fhir-card/datatypes/rtf/rtf.component.spec.ts

@@ -1,19 +1,24 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { RtfComponent } from './rtf.component';
+import { BinaryModel } from 'src/lib/models/resources/binary-model';
 
 describe('RtfComponent', () => {
   let component: RtfComponent;
   let fixture: ComponentFixture<RtfComponent>;
 
+  const rtf: string = "{\\rtf1\\ansi\\deff0 {\\fonttbl {\\f0 Times New Roman;}} \\f0\\fs60 Hello, World! }";
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ RtfComponent ]
+      imports: [ RtfComponent ]
     })
     .compileComponents();
 
     fixture = TestBed.createComponent(RtfComponent);
     component = fixture.componentInstance;
+    component.displayModel = new BinaryModel({});
+    component.displayModel.content = rtf;
     fixture.detectChanges();
   });
 

frontend/src/app/components/medical-record-wizard-add-lab-results/medical-record-wizard-add-lab-results.component.spec.ts

@@ -1,6 +1,10 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { MedicalRecordWizardAddLabResultsComponent } from './medical-record-wizard-add-lab-results.component';
+import { NlmClinicalTableSearchService } from 'src/app/services/nlm-clinical-table-search.service';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { HTTP_CLIENT_TOKEN } from '../../dependency-injection';
+import { HttpHandler } from '@angular/common/http';
 
 describe('MedicalRecordWizardAddLabResultsComponent', () => {
   let component: MedicalRecordWizardAddLabResultsComponent;
@@ -8,7 +12,11 @@ describe('MedicalRecordWizardAddLabResultsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ MedicalRecordWizardAddLabResultsComponent ]
+      imports: [ MedicalRecordWizardAddLabResultsComponent ],
+      providers: [NgbActiveModal, NlmClinicalTableSearchService, {
+        provide: HTTP_CLIENT_TOKEN,
+        useClass: HttpHandler,
+      }]
     })
     .compileComponents();
 

frontend/src/app/directives/image-fallback.directive.spec.ts

@@ -1,8 +1,9 @@
+import { ElementRef } from '@angular/core';
 import { ImageFallbackDirective } from './image-fallback.directive';
 
 describe('ImageFallbackDirective', () => {
   it('should create an instance', () => {
-    const directive = new ImageFallbackDirective();
+    const directive = new ImageFallbackDirective(new ElementRef('img'));
     expect(directive).toBeTruthy();
   });
 });

frontend/src/app/pages/auth-signup-wizard/auth-signup-wizard.component.spec.ts

@@ -1,6 +1,10 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AuthSignupWizardComponent } from './auth-signup-wizard.component';
+import { HttpClient } from '@angular/common/http';
+import { HTTP_CLIENT_TOKEN } from 'src/app/dependency-injection';
+import { FormsModule } from '@angular/forms';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('AuthSignupWizardComponent', () => {
   let component: AuthSignupWizardComponent;
@@ -8,7 +12,14 @@ describe('AuthSignupWizardComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ AuthSignupWizardComponent ]
+      declarations: [ AuthSignupWizardComponent ],
+      imports: [HttpClientTestingModule, FormsModule],
+      providers: [
+        {
+          provide: HTTP_CLIENT_TOKEN,
+          useClass: HttpClient,
+        }
+      ]
     })
     .compileComponents();
 

frontend/src/app/services/platform.service.spec.ts

@@ -1,12 +1,19 @@
 import { TestBed } from '@angular/core/testing';
 
 import { PlatformService } from './platform.service';
+import { HTTP_CLIENT_TOKEN } from '../dependency-injection';
+import { HttpClient, HttpHandler } from '@angular/common/http';
 
 describe('PlatformService', () => {
   let service: PlatformService;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      providers: [HttpClient, HttpHandler, {
+        provide: HTTP_CLIENT_TOKEN,
+        useClass: HttpHandler,
+      }]
+    });
     service = TestBed.inject(PlatformService);
   });