node.js – Angular Jasmine测试HTML注入失败

我无法将我的 HTML模板注入我的Jasmine测试中.我该如何解决这个错误？

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.

我的测试清楚地调用了compileComponents(),并且还设置了templateUrl,因此我不清楚如何继续.

foo-detail.component.ts定义：

@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");
            });
        });
    });

});

全栈跟踪

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

堆：

> Angular 2.4.4
>打字稿2.1.5
> Jasmine-core 2.5.2
>节点：“> = 7.5.0”
> JHipster 4.5.2

由于@DBosley和@AluanHaddad解决了这个问题.这是我做的：

>重构我的代码以使用@DBosley建议的then模式.
>在overrideComponent中重新启用templateUrl.
>按照this modification found on Github更新我的karma.conf.js,这会产生更多描述性的堆栈跟踪：

Failed: Uncaught (in promise): Error: Template parse errors:
'jhi-alert-error' is not a known element:
    1. If 'jhi-alert-error' is an Angular component, then verify that it is 
      part of this module.
    2. If 'jhi-alert-error' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA"
      to the '@NgModule.schemas' of this component to suppress this message. 
    ("</div>
        <hr>
        [ERROR ->]<jhi-alert-error></jhi-alert-error>
        <dl class="row">
        </dl>
    "): FooComponent@4:4
    Can't bind to 'routerLink' since it isn't a known property of 'button'. ("

        <button type="button"
                [ERROR ->][routerLink]="['/', { outlets: { ..."
            "): FooComponent

>通过在TestBed.configureTestingModule的providers部分中添加模拟来修复缺少的N依赖项：

(first time)
Failed: Uncaught (in promise): Error: No provider for JhiAlertErrorComponent!
(Nth time)
Failed: Uncaught (in promise): Error: No provider for BarService!