Angular Jasmine Test HTML Injection Fails

Viewed 1132

I am unable to inject my HTML template into my Jasmine test. How do I resolve this error?

Error: This test module uses the component FooDetailComponent which is using a "templateUrl" or "styleUrls", but they were never compiled. Please call "TestBed.compileComponents" before your test.

My test clearly calls compileComponents(), and also sets the templateUrl, so I'm unclear on how to proceed.

foo-detail.component.ts Definition:

@Component({
    selector: 'my-selector',
    templateUrl: './foo-detail.component.html'
})
export class FooDetailComponent implements OnInit, OnDestroy { ... }

foo-detail.component.spec.ts:

describe('Component Tests', () => {

    describe('Foo Management Detail Component', () => {
        let comp: FooDetailComponent;
        let fixture: ComponentFixture<FooDetailComponent>;
        let service: FooService;

        beforeEach(async(() => {
            TestBed.configureTestingModule({
                declarations: [FooDetailComponent],
                providers: [
                    MockBackend,
                    BaseRequestOptions,
                    {
                        provide: Router,
                        useClass: class { navigate = jasmine.createSpy("navigate"); }
                    },
                    FooService
                ]
            }).overrideComponent(FooDetailComponent, {
                set: {
                      // This line, when uncommmented, allows the test to run, but 
                      //  doesn't recognize a template:
                    // template: ''
                      // This line, when uncommented, induces the error:
                    templateUrl : '../../../../../../main/webapp/app/entities/foo/foo-detail.component.html',
                    styleUrls: ['../../../../../../main/webapp/app/entities/foo/foo-create.scss']
                }
            }).compileComponents();
        }));

        beforeEach(() => {
            fixture = TestBed.createComponent(FooDetailComponent);
            comp = fixture.componentInstance;
            service = fixture.debugElement.injector.get(FooService);
        });


        describe('OnInit', () => {
            it('Should call load all on init', () => {
            // GIVEN
            spyOn(service, 'find');
            // WHEN
            comp.ngOnInit();
            // THEN
            service.find("testidentifier");
            expect(service.find).toHaveBeenCalledWith("testidentifier");
            });
        });
    });

});

Full Stack Trace

Failed: Uncaught (in promise): Failed to load %3Cdiv%20id=%22%7B%7Bid%7D%7D <entire htmlenoded template>
resolvePromise@spec/entry.ts:110657:78
resolvePromise@spec/entry.ts:110627:31
spec/entry.ts:110704:31
invokeTask@spec/entry.ts:110310:36
onInvokeTask@spec/entry.ts:109806:49
invokeTask@spec/entry.ts:110309:48
runTask@spec/entry.ts:110077:57
drainMicroTaskQueue@spec/entry.ts:110470:42
run@spec/entry.ts:133028:29
spec/entry.ts:133041:31
flush@spec/entry.ts:59106:11
Error: This test module uses the component FooCreateComponent which is using a "templateUrl" or "styleUrls", but they were never compiled. Please call "TestBed.compileComponents" before your test. in spec/entry.ts (line 10169)
_initIfNeeded@spec/entry.ts:10169:91
createComponent@spec/entry.ts:10247:31
createComponent@spec/entry.ts:10076:48
spec/entry.ts:85022:56
invoke@spec/entry.ts:110277:31
onInvoke@spec/entry.ts:109782:45
invoke@spec/entry.ts:110276:40
run@spec/entry.ts:110027:49
spec/entry.ts:109481:37
spec/entry.ts:9456:34
spec/entry.ts:9503:33
invoke@spec/entry.ts:110277:31
onInvoke@spec/entry.ts:109020:45
onInvoke@spec/entry.ts:109779:47
invoke@spec/entry.ts:110276:40
run@spec/entry.ts:110027:49
spec/entry.ts:9498:32
onHandleError@spec/entry.ts:109030:31
onHandleError@spec/entry.ts:109787:52
handleError@spec/entry.ts:110281:50
runGuarded@spec/entry.ts:110043:55
_loop_1@spec/entry.ts:110539:57
microtaskDrainDone@spec/entry.ts:110548:24
drainMicroTaskQueue@spec/entry.ts:110478:36
run@spec/entry.ts:133028:29
spec/entry.ts:133041:31
flush@spec/entry.ts:59106:11
Error: <spyOn> : could not find an object to spy upon for create()
Usage: spyOn(<object>, <methodName>) in /myHomeDir/portal-frontend/node_modules/jasmine-core/lib/jasmine-core/jasmine.js (line 2067)
spec/entry.ts:85032:22
invoke@spec/entry.ts:110277:31
onInvoke@spec/entry.ts:109782:45
invoke@spec/entry.ts:110276:40
run@spec/entry.ts:110027:49
spec/entry.ts:109481:37
spec/entry.ts:9456:34
spec/entry.ts:9503:33
invoke@spec/entry.ts:110277:31
onInvoke@spec/entry.ts:109020:45
onInvoke@spec/entry.ts:109779:47
invoke@spec/entry.ts:110276:40
run@spec/entry.ts:110027:49
spec/entry.ts:9498:32
onHandleError@spec/entry.ts:109030:31
onHandleError@spec/entry.ts:109787:52
handleError@spec/entry.ts:110281:50
runGuarded@spec/entry.ts:110043:55
_loop_1@spec/entry.ts:110539:57
microtaskDrainDone@spec/entry.ts:110548:24
drainMicroTaskQueue@spec/entry.ts:110478:36
run@spec/entry.ts:133028:29
spec/entry.ts:133041:31
flush@spec/entry.ts:59106:11

Stack:

  • Angular 2.4.4
  • Typescript 2.1.5
  • Jasmine-core 2.5.2
  • Node: ">=7.5.0"
  • JHipster 4.5.2
2 Answers
Related