Fix frontend test errors and remove logs (#462)

* add karma verbose reporter

* Move fontawesome imports to separate module for easier testing imports

* add some missing imports/declarations

* remove console.logs

* add .catch where i got rid of empty .then

frontend/karma.conf.js

@@ -8,7 +8,8 @@ module.exports = function(config) {
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
+      require('karma-verbose-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma'),
     ],
     client: {
       jasmine: {
@@ -41,7 +42,11 @@ module.exports = function(config) {
     },
 
     // coverage reporter generates the coverage
-    reporters: ['progress', 'coverage'],
+    reporters: [
+      'progress',
+      'coverage',
+      // 'verbose'
+    ],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,

frontend/package.json

@@ -86,6 +86,7 @@
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
+    "karma-verbose-reporter": "^0.0.8",
     "protractor": "~7.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

frontend/src/app/app.component.spec.ts

@@ -2,6 +2,7 @@ import { TestBed, async } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 import {HttpClientTestingModule} from '@angular/common/http/testing';
+import { ToastComponent } from './components/toast/toast.component';
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
@@ -11,7 +12,7 @@ describe('AppComponent', () => {
         HttpClientTestingModule
       ],
       declarations: [
-        AppComponent
+        AppComponent, ToastComponent
       ],
     }).compileComponents();
   }));

frontend/src/app/app.component.ts

@@ -39,7 +39,6 @@ export class AppComponent implements OnInit {
       if (event.url?.startsWith('/auth') || event.url?.startsWith('/desktop')) {
         this.showHeader = false;
       } else {
-        // console.log("NU")
         this.showHeader = true;
       }
 
@@ -48,5 +47,3 @@ export class AppComponent implements OnInit {
     }
   }
 }
-
-

frontend/src/app/app.module.ts

@@ -10,9 +10,6 @@ import { DashboardComponent } from './pages/dashboard/dashboard.component';
 import { MedicalSourcesComponent } from './pages/medical-sources/medical-sources.component';
 import { NgChartsModule } from 'ng2-charts';
 import {SharedModule} from './components/shared.module';
-import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome'
-import { fas } from '@fortawesome/free-solid-svg-icons';
-import { far } from '@fortawesome/free-regular-svg-icons';
 import { ResourceDetailComponent } from './pages/resource-detail/resource-detail.component';
 import { AuthSignupComponent } from './pages/auth-signup/auth-signup.component';
 import { AuthSigninComponent } from './pages/auth-signin/auth-signin.component';
@@ -42,6 +39,7 @@ import {FhirCardModule} from './components/fhir-card/fhir-card.module';
 import {FhirDatatableModule} from './components/fhir-datatable/fhir-datatable.module';
 import { AuthSignupWizardComponent } from './pages/auth-signup-wizard/auth-signup-wizard.component';
 import {ShowFirstRunWizardGuard} from './auth-guards/show-first-run-wizard-guard';
+import { IconsModule } from './icon-module';
 
 @NgModule({
   declarations: [
@@ -67,7 +65,6 @@ import {ShowFirstRunWizardGuard} from './auth-guards/show-first-run-wizard-guard
     FormsModule,
     ReactiveFormsModule,
     BrowserModule,
-    FontAwesomeModule,
     SharedModule,
     FhirCardModule,
     FhirDatatableModule,
@@ -82,7 +79,8 @@ import {ShowFirstRunWizardGuard} from './auth-guards/show-first-run-wizard-guard
     InfiniteScrollModule,
     NgSelectModule,
     WidgetsModule,
-    DirectivesModule
+    DirectivesModule,
+    IconsModule,
   ],
   providers: [
     {
@@ -112,8 +110,4 @@ import {ShowFirstRunWizardGuard} from './auth-guards/show-first-run-wizard-guard
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA] //required for lhncbc/lforms (webcomponent)
 })
-export class AppModule {
-  constructor(library: FaIconLibrary) {
-    library.addIconPacks(fas, far);
-  }
-}
+export class AppModule {}

frontend/src/app/components/fhir-card/common/table/table.component.spec.ts

@@ -41,7 +41,7 @@ describe('TableComponent', () => {
   it('encodes urls properly', () => {
     spyOn(console, 'log').and.callThrough();
     const link = fixture.debugElement.nativeElement.querySelector('a');
-    console.log(link);
+
     expect(link.href).toContain(
       '/explore/123-456-789%3D/resource/aHR0cHM6Ly93d3cubWVyY3kubmV0L3NpdGVzL2RlZmF1bHQvZmlsZXMvZG9jdG9yX2ltYWdlcy9kZXNrdG9wLzE2NTk4ODYwNTktbS5qcGc%3D'
     );

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

@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { RtfComponent } from './rtf.component';
 import { BinaryModel } from 'src/lib/models/resources/binary-model';
+import { RTFJS } from 'rtf.js';
 
 describe('RtfComponent', () => {
   let component: RtfComponent;
@@ -15,6 +16,8 @@ describe('RtfComponent', () => {
     })
     .compileComponents();
 
+    RTFJS.loggingEnabled(false);
+
     fixture = TestBed.createComponent(RtfComponent);
     component = fixture.componentInstance;
     component.displayModel = new BinaryModel({});

frontend/src/app/components/fhir-card/fhir-card/fhir-card.component.ts

@@ -62,7 +62,6 @@ export class FhirCardComponent implements OnInit, OnChanges {
 
     let componentType = this.typeLookup(this.displayModel?.source_resource_type)
     if(componentType != null){
-      console.log("Attempting to create fhir display component", this.displayModel, componentType)
       const componentRef = viewContainerRef.createComponent<FhirCardComponentInterface>(componentType);
       componentRef.instance.displayModel = this.displayModel;
       componentRef.instance.showDetails = this.showDetails;

frontend/src/app/components/fhir-card/resources/fallback/fallback.component.spec.ts

@@ -1,14 +1,27 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { FallbackComponent } from './fallback.component';
+import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
 
 describe('FallbackComponent', () => {
   let component: FallbackComponent;
   let fixture: ComponentFixture<FallbackComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ FallbackComponent ]
+      imports: [ FallbackComponent ],
+      providers: [
+        {
+          provide: HIGHLIGHT_OPTIONS,
+          useValue: {
+            coreLibraryLoader: () => import('highlight.js/lib/core'),
+            lineNumbersLoader: () => import('highlightjs-line-numbers.js'), // Optional, only if you want the line numbers
+            languages: {
+              json: () => import('highlight.js/lib/languages/json')
+            },
+          }
+        },
+      ]
     })
     .compileComponents();
 

frontend/src/app/components/fhir-datatable/datatable-generic-resource/datatable-generic-resource.component.spec.ts

@@ -4,6 +4,7 @@ import { DatatableGenericResourceComponent } from './datatable-generic-resource.
 import {HTTP_CLIENT_TOKEN} from '../../../dependency-injection';
 import {HttpClient} from '@angular/common/http';
 import {HttpClientTestingModule} from '@angular/common/http/testing';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 
 describe('ListGenericResourceComponent', () => {
   let component: DatatableGenericResourceComponent;
@@ -12,7 +13,7 @@ describe('ListGenericResourceComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [ DatatableGenericResourceComponent ],
-      imports: [HttpClientTestingModule],
+      imports: [HttpClientTestingModule, NgxDatatableModule],
       providers: [
         {
           provide: HTTP_CLIENT_TOKEN,

frontend/src/app/components/fhir-datatable/datatable-generic-resource/datatable-generic-resource.component.ts

@@ -65,7 +65,6 @@ export class DatatableGenericResourceComponent implements OnInit, ResourceListCo
   }
 
   ngOnInit(): void {
-    console.log("INIT GENERIC RESOURCE")
     this.currentPage = {offset: 0}
 
     this.changePage(this.currentPage)
@@ -75,7 +74,6 @@ export class DatatableGenericResourceComponent implements OnInit, ResourceListCo
   }
 
   changePage(page: PageInfo){
-    console.log("Requesting page:" + JSON.stringify(page))
     this.currentPage = page;
     this.fastenApi.getResources(this.resourceListType, this.sourceId, null, this.currentPage.offset)
       .subscribe((resourceList: ResourceFhir[]) => {
@@ -100,7 +98,6 @@ export class DatatableGenericResourceComponent implements OnInit, ResourceListCo
 
 
   renderList(resourceList: ResourceFhir[]){
-    console.log("GENERIC RESOURCE RENDERLSIT")
     this.columns = this.columnDefinitions.map((defn) => {
       let column = {name: defn.title, prop: defn.title.replace(/[^A-Z0-9]/ig, "_"), sortable: false}
       return column
@@ -152,15 +149,3 @@ export class DatatableGenericResourceComponent implements OnInit, ResourceListCo
 ///////////////////////////////////////////////////////////////////////////////////////
 // START OVERRIDES
 ///////////////////////////////////////////////////////////////////////////////////////
-
-
-
-
-
-
-
-
-
-
-
-

frontend/src/app/components/fhir-datatable/fhir-datatable/fhir-datatable.component.ts

@@ -68,7 +68,6 @@ export class FhirDatatableComponent implements OnInit, OnChanges {
 
     let componentType = this.typeLookup(this.resourceListType)
     if(componentType != null){
-      console.log("Attempting to create component", this.resourceListType, componentType)
       const componentRef = viewContainerRef.createComponent<ResourceListComponentInterface>(componentType);
       componentRef.instance.totalElements = this.selectedTotalElements;
       componentRef.instance.resourceListType = this.resourceListType;

frontend/src/app/components/glossary-lookup/glossary-lookup.component.ts

@@ -30,7 +30,6 @@ export class GlossaryLookupComponent implements OnInit {
   ngOnInit(): void {
     this.fastenApi.getGlossarySearchByCode(this.code, this.codeSystem).subscribe(result => {
       this.loading = false
-      console.log(result)
       this.url  = result?.url
       this.source = result?.publisher
       this.description = this.sanitized.bypassSecurityTrustHtml(result?.description)

frontend/src/app/components/glossary-lookup/glossary-lookup.stories.ts

@@ -32,12 +32,10 @@ const withHttpClientProvider: DecoratorFunction<any> = (storyFunc, context) => {
   class MockHttpClient extends HttpClient {
 
     get(): Observable<any> {
-      // console.log("CALLED getGlossarySearchByCode in MockFastenApiService")
       return of(httpClientResp)
     }
   }
 
-  // console.log("Inside withHttpClientProvider DecoratorFunction", code, codeSystem)
   return moduleMetadata({ providers: [{ provide: HTTP_CLIENT_TOKEN, useClass: MockHttpClient }] })(
     storyFunc,
     context

frontend/src/app/components/header/header.component.spec.ts

@@ -6,14 +6,15 @@ import {RouterModule} from '@angular/router';
 import {RouterTestingModule} from '@angular/router/testing';
 import {HTTP_CLIENT_TOKEN} from '../../dependency-injection';
 import {HttpClient} from '@angular/common/http';
+import { IconsModule } from 'src/app/icon-module';
 
 describe('HeaderComponent', () => {
   let component: HeaderComponent;
   let fixture: ComponentFixture<HeaderComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [ HttpClientTestingModule, RouterTestingModule, RouterModule ],
+      imports: [ HttpClientTestingModule, RouterTestingModule, RouterModule, IconsModule ],
       declarations: [ HeaderComponent ],
       providers: [
         {

frontend/src/app/components/header/header.component.ts

@@ -95,12 +95,10 @@ export class HeaderComponent implements OnInit, OnDestroy {
     this.newSupportRequest = newSupportRequest
   }
   submitSupportForm() {
-    console.log("submitting support form", this.newSupportRequest)
     this.loading = false
 
     this.fastenApi.supportRequest(this.newSupportRequest).subscribe((resp: any) => {
         this.loading = false
-        console.log(resp);
         this.submitSuccess = true
         //show success toast? close modal?
       },

frontend/src/app/components/medical-record-wizard-add-attachment/medical-record-wizard-add-attachment.component.ts

@@ -38,7 +38,6 @@ export class MedicalRecordWizardAddAttachmentComponent implements OnInit {
   }
 
   onAttachmentFileChange($event){
-    console.log("onAttachmentFileChange")
     let fileInput = $event.target as HTMLInputElement;
     if (fileInput.files && fileInput.files[0]) {
       let processingFile = fileInput.files[0]

frontend/src/app/components/medical-record-wizard-add-encounter/medical-record-wizard-add-encounter.component.ts

@@ -72,7 +72,6 @@ export class MedicalRecordWizardAddEncounterComponent implements OnInit {
     }
   }
   selectionChanged(event) {
-    console.log("SELECTION CHANGED", event)
     this.selectedEncounter = event
   }
   get submitEnabled() {
@@ -108,7 +107,6 @@ export class MedicalRecordWizardAddEncounterComponent implements OnInit {
           let parsed = RecResourceRelatedDisplayModel(graphResponse.results["Encounter"]?.[0])
           let encounterDisplayModelWithRelated = parsed.displayModel as EncounterModel
 
-          console.log("Found encounter (and related resources)", encounterDisplayModelWithRelated)
           this.activeModal.close({
             action: this.activeId,
             data: encounterDisplayModelWithRelated

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

@@ -43,7 +43,6 @@ export class MedicalRecordWizardAddLabResultsComponent implements OnInit {
   ngOnInit(): void {
 
     // const parent: HTMLElement = document.getElementById('lhcFormContainer');
-    // console.log("Adding Form to page", this.questionnaire)
     // LForms.Util.addFormToPage(this.questionnaire, parent);
     this.resetLabPanelForm()
   }
@@ -60,26 +59,18 @@ export class MedicalRecordWizardAddLabResultsComponent implements OnInit {
       null,
       {bundleType: "transaction"}
     )
-    console.log(formData)
 
     this.activeModal.close({
       action: 'create',
       data: formData
     });
   }
-  onFormReady(e){
-    console.log("onFormReady", e)
-  }
-  onError(e){
-    console.log("onError", e)
-  }
 
   private resetLabPanelForm() {
     this.newLabPanelTypeaheadForm = new FormGroup({
       data: new FormControl(null, Validators.required),
     })
     this.newLabPanelTypeaheadForm.valueChanges.subscribe(form => {
-      console.log("CHANGE LabPanel IN MODAL", form)
       let val = form.data
       if(val && val.id){
         this.loading = true

frontend/src/app/components/medical-record-wizard-add-organization/medical-record-wizard-add-organization.component.ts

@@ -74,7 +74,6 @@ export class MedicalRecordWizardAddOrganizationComponent implements OnInit {
     }
   }
   selectionChanged(event) {
-    console.log("SELECTION CHANGED", event)
     this.selectedOrganization = event
   }
   get submitEnabled() {
@@ -160,7 +159,6 @@ export class MedicalRecordWizardAddOrganizationComponent implements OnInit {
       data: new FormControl(null, Validators.required),
     })
     this.newOrganizationTypeaheadForm.valueChanges.subscribe(form => {
-      console.log("CHANGE Organization IN MODAL", form)
       let val = form.data
 
       if(val == null){

frontend/src/app/components/medical-record-wizard-add-practitioner/medical-record-wizard-add-practitioner.component.ts

@@ -74,7 +74,6 @@ export class MedicalRecordWizardAddPractitionerComponent implements OnInit {
     }
   }
   selectionChanged(event) {
-    console.log("SELECTION CHANGED", event)
     this.selectedPractitioner = event
   }
   get submitEnabled() {
@@ -168,7 +167,6 @@ export class MedicalRecordWizardAddPractitionerComponent implements OnInit {
       data: new FormControl(null, Validators.required),
     })
     this.newPractitionerTypeaheadForm.valueChanges.subscribe(form => {
-      console.log("CHANGE INDIVIDUAL IN MODAL", form)
       let val = form.data
       if(val == null){
         //reset the dependant fields (user cleared the text box)