Update 2019/01/28
Made unrelated minor fixes to tests and updated error logging to help track down issue. Updated local storage references and implemented mock services, still receiving same error.
UPDATE (11/10/2018):
InvalidSessionComponent Jasmine Test Error
Stack Trace:
[object ErrorEvent] thrown
Given the ambiguity of this error, further exploration was performed to find out more. Our exploration led us to run Karma in a non-headless browser in order to view the thrown error printed in the browser console. The error (and number one suspect of this failure) was printed to the console as follows:
Uncaught TypeError: _this.handler.handle is not a function
at MergeMapSubscriber.project (_karma_webpack_/webpack:/node_modules/@angular/common/fesm5/http.js:974)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/operators/mergeMap.js:61)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/operators/mergeMap.js:51)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Subscriber.js:54)
at Observable._subscribe (_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/observable/scalar.js:5)
at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Observable.js:43)
at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Observable.js:29)
at MergeMapOperator.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call (_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/operators/mergeMap.js:29)
at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Observable.js:24)
at FilterOperator.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterOperator.call (_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/operators/filter.js:15)
at ____________________Elapsed_5_ms__At__Fri_Nov_09_2018_09_50_54_GMT_0600__Central_Standard_Time_ ()
at Object.onScheduleTask (_karma_webpack_/webpack:/node_modules/zone.js/dist/long-stack-trace-zone.js:108)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask (_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:401)
at Object.onScheduleTask (_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:297)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask (_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:401)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask (_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:232)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask (_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:255)
at scheduleMacroTaskWithCurrentZone (_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:1114)
at _karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:2090
debug.js:15 FAILED InvalidSessionComponent should create
debug.js:21 [object ErrorEvent] thrown
What remains is to locate this point the '_this.handler.handle' is invoked during the creation of the InvalidSessionComponent upon the TestBed and rectify it. Presumably.
Fixes implemented upon InvalidSessionComponent tests up to this current issue:
Stack Trace:
InvalidSessionComponent should create FAILED
Error: StaticInjectorError(DynamicTestModule)[InvalidSessionComponent -> AuthenticationService]:
StaticInjectorError(Platform: core)[InvalidSessionComponent -> AuthenticationService]:
NullInjectorError: No provider for AuthenticationService!
InvalidSessionComponent should create FAILED
Error: StaticInjectorError(DynamicTestModule)[AuthenticationService -> RequestService]:
StaticInjectorError(Platform: core)[AuthenticationService -> RequestService]:
NullInjectorError: No provider for RequestService!
InvalidSessionComponent should create FAILED
Can't bind to 'ngModel' since it isn't a known property of 'input'.
InvalidSessionComponent should create FAILED
Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.
Solution: Many necessary declarations, providers, and imports were missing in order to setup the component on the testbed. Changes are as follows:
Lines 22-45:
beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ InvalidSessionComponent, LoginComponent, AssociateViewComponent, NotFoundComponent, NavbarComponent, FooterComponent, AppComponent ], providers: [ RequestService ], imports: [ FormsModule, HttpClientModule, AppRoutingModule, MatProgressSpinnerModule, RouterTestingModule ] }) .compileComponents(); }));
CHANGED FILES: invalid-session.component.spec.ts
The following changes have been made as of 11/10/18 to successfully repair the other Jasmine tests.
As of this update, the following components have working specs and are available to write additional Jasmine tests for, and run.
associate-view.component.spec.ts error
Error Description and Stack Trace:
AssociateViewComponent should create FAILED
TypeError: Cannot read property 'id' of undefined
Mock services not instantiated and assigned. Instead, actual instances of AssociateService and
AuthenticationService were instantiated, causing problematic behavior running in a headless
browser.
Solution: Instantiate Mock services, not actual service instances. In associate-view.component.spec.ts:
describe('AssociateViewComponent', () => {
// Instantiate mock services by passing null values to inherited constructors
// to prevent erroneous use of injected dependencies provided in parent service classes
const mockAssociateService: MockAssociateService = new MockAssociateService(null); // <----
const mockAuthService: MockAuthenticationService = new MockAuthenticationService(null, null, null); // <----
let component: AssociateViewComponent = new AssociateViewComponent(mockAssociateService, mockAuthService, null); // <----
and
AssociateViewComponent.prototype.ngOnInit = () => {
this.user = mockUser;
this.id = this.user.id;
}
// Perform teardown, resetting AssociateViewComponent's prototype to its initial value
afterEach(() => {
AssociateViewComponent.prototype.ngOnInit = AssociateViewComponentNgOnInit;
});
CHANGED FILES: associate-view.component.spec.ts
predictions.component.ts error
Stack Trace:
PredictionsComponent should create FAILED
Error: StaticInjectorError(DynamicTestModule)[PredictionsComponent -> ClientService]:
StaticInjectorError(Platform: core)[PredictionsComponent -> ClientService]:
NullInjectorError: No provider for ClientService!
Solution: Fixed the import statement for the client-service.service to reflect
the correct path. Additionally, added ClientService as a provider to the component.
Lines ~13-25:
@Component({ ... providers:[ClientService] })
CHANGED FILES: predictions.component.ts
interview-details.component.spec.ts error
Stack Trace:
InterviewDetailsComponent should create FAILED
Failed: Observable_1.Observable.of is not a function
TypeError: Observable_1.Observable.of is not a function
Solution: Observable.of is depreciated as of Rxjs version 6.3. Imported the updated
function that was intended. Changes are as follows:
Line 25:
import { of } from 'rxjs/observable/of';
Line 30:
params: of({id: tid}),
CHANGED FILES: interview-details.component.spec.ts
associate-list-page.component.spec.ts error
Stack Trace:
AssociateListPageComponent should create FAILED
'mat-progress-spinner' is not a known element:
1. If 'mat-progress-spinner' is an Angular component, then verify that it is part of this module.
2. If 'mat-progress-spinner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
AssociateListPageComponent should create FAILED
Error: StaticInjectorError(DynamicTestModule)[MatDialog -> Overlay]:
StaticInjectorError(Platform: core)[MatDialog -> Overlay]:
NullInjectorError: No provider for Overlay!
Solution: Many necessary declarations, providers, and imports were missing in order to setup the component on the testbed. Changes are as follows:
Lines 42 - 64:
declarations: [ AssociateListPageComponent, LoginComponent, InvalidSessionComponent, FormComponent, AssociateViewComponent, NotFoundComponent, NavbarComponent ], providers: [ RequestService, AssociateService, ClientService ], imports:[ FormsModule, AppRoutingModule, RouterTestingModule, MatProgressSpinnerModule, HttpClientModule, OverlayModule, MatDialogModule ]
CHANGED FILES: associate-list-page.comonent.spec.ts
batch-list.component.spec.ts error
Stack Trace:
BatchListComponent should create FAILED
TypeError: Observable_1.Observable.of is not a function
BatchListComponent should pull some batch data on init FAILED
TypeError: Observable_1.Observable.of is not a function
BatchListComponent data length should increase with larger range than default FAILED
TypeError: Observable_1.Observable.of is not a function
Solution: Observable.of is depreciated as of Rxjs version 6.3. Imported the updated
function that was intended. Changes are as follows:
Line 41:
import { of } from 'rxjs/observable/of';
Line 127:
spyOn(testBatchService, ‘getAllBatches’).and.returnValue(of(batches));
Line 135:
spyOn(testBatchService, ‘getBatchesByDate’).and.returnValue(of([batch1, batch2]));
Line 136:
spyOn(testBatchService, ‘getBatchesWithinDates’).and.returnValue(of([batch1, batch2]));
client-mapped.component.spec.ts
Stack Trace:
ClientMappedComponent should create FAILED
TypeError: Observable_1.Observable.of is not a function
ClientMappedComponent should grab data FAILED
TypeError: Observable_1.Observable.of is not a function
ClientMappedComponent should display bar chart by default FAILED
TypeError: Observable_1.Observable.of is not a function
Solution: Observable.of is depreciated as of Rxjs version 6.3. Imported the updated
function that was intended. Changes are as follows:
Line 21:
import { of } from 'rxjs/observable/of';
Line 85:
spyOn(testAssociateService, 'getAllAssociates').and.returnValue(of(associates));
CHANGED FILES: client-mapped.component.spec.ts
Update 2019/01/28
Made unrelated minor fixes to tests and updated error logging to help track down issue. Updated local storage references and implemented mock services, still receiving same error.
UPDATE (11/10/2018):
InvalidSessionComponent Jasmine Test Error
Stack Trace:
Given the ambiguity of this error, further exploration was performed to find out more. Our exploration led us to run Karma in a non-headless browser in order to view the thrown error printed in the browser console. The error (and number one suspect of this failure) was printed to the console as follows:
What remains is to locate this point the '_this.handler.handle' is invoked during the creation of the InvalidSessionComponent upon the TestBed and rectify it. Presumably.
Fixes implemented upon InvalidSessionComponent tests up to this current issue:
Stack Trace:
Solution: Many necessary declarations, providers, and imports were missing in order to setup the component on the testbed. Changes are as follows:
Lines 22-45:
beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ InvalidSessionComponent, LoginComponent, AssociateViewComponent, NotFoundComponent, NavbarComponent, FooterComponent, AppComponent ], providers: [ RequestService ], imports: [ FormsModule, HttpClientModule, AppRoutingModule, MatProgressSpinnerModule, RouterTestingModule ] }) .compileComponents(); }));CHANGED FILES: invalid-session.component.spec.ts
The following changes have been made as of 11/10/18 to successfully repair the other Jasmine tests.
As of this update, the following components have working specs and are available to write additional Jasmine tests for, and run.
associate-view.component.spec.ts error
Error Description and Stack Trace:
AssociateViewComponent should create FAILED
TypeError: Cannot read property 'id' of undefined
Solution: Instantiate Mock services, not actual service instances. In associate-view.component.spec.ts:
and
CHANGED FILES: associate-view.component.spec.ts
predictions.component.ts error
Stack Trace:
Solution: Fixed the import statement for the client-service.service to reflect
the correct path. Additionally, added ClientService as a provider to the component.
Lines ~13-25:
@Component({ ... providers:[ClientService] })CHANGED FILES: predictions.component.ts
interview-details.component.spec.ts error
Stack Trace:
Solution: Observable.of is depreciated as of Rxjs version 6.3. Imported the updated
function that was intended. Changes are as follows:
Line 25:
import { of } from 'rxjs/observable/of';Line 30:
params: of({id: tid}),CHANGED FILES: interview-details.component.spec.ts
associate-list-page.component.spec.ts error
Stack Trace:
Solution: Many necessary declarations, providers, and imports were missing in order to setup the component on the testbed. Changes are as follows:
Lines 42 - 64:
declarations: [ AssociateListPageComponent, LoginComponent, InvalidSessionComponent, FormComponent, AssociateViewComponent, NotFoundComponent, NavbarComponent ], providers: [ RequestService, AssociateService, ClientService ], imports:[ FormsModule, AppRoutingModule, RouterTestingModule, MatProgressSpinnerModule, HttpClientModule, OverlayModule, MatDialogModule ]CHANGED FILES: associate-list-page.comonent.spec.ts
batch-list.component.spec.ts error
Stack Trace:
Solution: Observable.of is depreciated as of Rxjs version 6.3. Imported the updated
function that was intended. Changes are as follows:
Line 41:
import { of } from 'rxjs/observable/of';Line 127:
spyOn(testBatchService, ‘getAllBatches’).and.returnValue(of(batches));Line 135:
spyOn(testBatchService, ‘getBatchesByDate’).and.returnValue(of([batch1, batch2]));Line 136:
spyOn(testBatchService, ‘getBatchesWithinDates’).and.returnValue(of([batch1, batch2]));client-mapped.component.spec.ts
Stack Trace:
ClientMappedComponent should create FAILED
TypeError: Observable_1.Observable.of is not a function
Solution: Observable.of is depreciated as of Rxjs version 6.3. Imported the updated
function that was intended. Changes are as follows:
Line 21:
import { of } from 'rxjs/observable/of';Line 85:
spyOn(testAssociateService, 'getAllAssociates').and.returnValue(of(associates));CHANGED FILES: client-mapped.component.spec.ts