All geek questions in one place

Angular Jasmine HTML Failure

I cannot insert my HTML template into my Jasmine test. How to fix this error?

Error: this test module uses the FooDetailComponent component, which uses "templateUrl" or "styleUrls", but they have never been compiled. Before testing, call "TestBed.compileComponents".

My test explicitly calls compileComponents()and also sets templateUrl, so I don't understand how to do this.

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
+4
2

@DBosley @AluanHaddad. :

  • , then, @DBosley.

  • templateUrl overrideComponent.

  • karma.conf.js , Github, :

    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

  • N , mocks providers TestBed.configureTestingModule:

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

, , . , , , .

, , . .overrideComponent, , @Component decorator, .overrideComponent .

, , , .then() .compileComponents()

, , - :

beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [FooDetailComponent],
        providers: [
            MockBackend,
            BaseRequestOptions,
            {
                provide: Router,
                useClass: class { navigate = jasmine.createSpy("navigate"); }
            },
            FooService
        ]
    }).compileComponents().then(()=>{
        fixture = TestBed.createComponent(FooDetailComponent);
        comp = fixture.componentInstance;
        service = fixture.debugElement.injector.get(FooService);
    });
}));

, / .then() beforeEach(), .

0

Source: https://habr.com/ru/post/1681835/

More articles:


All Articles