Error in Angular

Question

I have this component in angular:

import { Component, AfterViewInit, ElementRef, ViewChild} from '@angular/core';
@Component({
    selector: 'jhi-login-modal',
    templateUrl: './login123.component.html'
})
export class JhiLoginModalComponent implements AfterViewInit {
   a: number;
   @ViewChild('hiddenLabel') hidden: ElementRef;
     ngAfterViewInit() {
      const a = 5;
      console.log('Print a' + a);
     console.log('Print htmlcontent' + this.hidden);
   }
}

My HTML file is like this:

<label #hiddenLabel>Visible!</label>

And then I have a testing file for these where I want to test the html element. But firstly I want to make sure that I can print it and then test the value. Here is my test file:

import { ComponentFixture, TestBed, async, inject, fakeAsync, tick } from '@angular/core/testing';
import { JhiLoginModalComponent } from '../../../../../../main/webapp/app/shared/login/login.component';

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

        let comp: JhiLoginModalComponent;
        let fixture: ComponentFixture<JhiLoginModalComponent>;

    beforeEach(async(() => {
            TestBed.configureTestingModule({
                declarations: [JhiLoginModalComponent]
            })
            .overrideTemplate(JhiLoginModalComponent, '')
            .compileComponents();
        }));

        beforeEach(() => {
            fixture = TestBed.createComponent(JhiLoginModalComponent);
            comp = fixture.componentInstance;
        });
        it ('first test', async(() => {
            console.log('holaaa');
            fixture.detectChanges();
        }));
    });
});

What I get as a result in my console is that test passed. Normally this should be ok. And then it prints holaaa and then print a5 which is again alright. Then it prints Print htmlcontentundefined instead of printing Visible. What is the difference between teh number and teh HTMLElement?? Is there another way to reference the HTML elements?? As much as I have read on this it should be this way.

Thanks!

Kyle Pfromer · Accepted Answer · 2018-05-07 17:20:05Z

It seems that your hiddenLabel child is undefined, meaning it is not being picked up by your component typescript spec file. This is due to the .overrideTemplate(JhiLoginModalComponent, ''). This line replaces your JhiLoginModalComponent template with nothing. Thus, when your JhiLoginModalComponent trys to get the hiddenLabel viewChild it cannot find anything, therefore it is undefined.

You should change your spec to look like the following:

import { ComponentFixture, TestBed, async, inject, fakeAsync, tick } from '@angular/core/testing';
import { JhiLoginModalComponent } from '../../../../../../main/webapp/app/shared/login/login.component';

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

        let comp: JhiLoginModalComponent;
        let fixture: ComponentFixture<JhiLoginModalComponent>;

    beforeEach(async(() => {
            TestBed.configureTestingModule({
                declarations: [JhiLoginModalComponent]
            }).compileComponents();
        }));

        beforeEach(() => {
            fixture = TestBed.createComponent(JhiLoginModalComponent);
            comp = fixture.componentInstance;
            fixture.detectChanges();
        });
        it ('first test', async(() => {
            console.log('holaaa');
            fixture.detectChanges();
        }));
    });
});

Collectives™ on Stack Overflow

Error in Angular

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related