CODEWITHSUNDEEP
angulartestingtypescriptkarma-runner
Nikita Zhuykov
Nikita Zhuykov

Reputation: 1

Angular 2 template parsing error when test is running

So I have a simple component:

galery.comonent.ts

import {Component, Input} from '@angular/core';


@Component({
  selector: 'galery-component',
  templateUrl: 'galery.component.html',
  styleUrls: ['galery.component.css']
})
export class GaleryComponent {
  @Input() userPosts;
}

With a custom tag in it's html file.This tag is a selector of another component of my module.

galery.comonent.html

 <div class="container">
        <post-details class="post-container" *ngFor="let post of userPosts" [singlePost] = "post">
        </post-details>
    </div>

When I try to run my test case It fails on start with this error

  1. If 'post-details' is an Angular component and it has 'singlePost' input, then verify that it is part of this module.
  2. If 'post-details' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

Here is a test code:

test.spec.ts

describe('BannerComponent (inline template)', () => {

  let comp:    GaleryComponent;
  let fixture: ComponentFixture<GaleryComponent>;
  let de:      DebugElement;
  let el:      HTMLElement;


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

  beforeEach(() => {
    fixture = TestBed.createComponent(GaleryComponent); // here test fails

    comp = fixture.componentInstance;
    de = fixture.debugElement.query(By.css('post-details'));
    el = de.nativeElement;
  });

I've added a CUSTOM_ELEMENTS_SCHEMA to my module but nothing works. Here is app.module.ts

app.module.ts

import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {AppComponent} from './app.component';
import {GaleryComponent} from './Components/galeryComponent/galery.component';
import {PostDetailsComponent} from './Components/postDetailsComponent/post-details-component.component';

@NgModule({
  declarations: [
    AppComponent,
    GaleryComponent,
    PostDetailsComponent
  ],
  exports: [GaleryComponent],
  imports: [
    CommonModule,
    NgbModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})

export class AppModule {
}

Maybe someone knows what happened? I've read some answers to similar questions but they were not very helpful.

Upvotes: 0

Views: 1004

Answers (2)

Aniruddha Das
Aniruddha Das

Reputation: 21688

I think the problem is with the property binding [singlePost] and it try to find it in the @Input.

Make sure your property binding is proper.

Upvotes: 0

yurzui
yurzui

Reputation: 214047

I suspect you defined schema in wrong place

Try

TestBed.configureTestingModule({
  declarations: [GaleryComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA] // will work if selector has '-' in its name
})

or

TestBed.configureTestingModule({
  declarations: [GaleryComponent],
  schemas: [NO_ERRORS_SCHEMA]
})

See also

Upvotes: 1

Related Questions