lundi 18 septembre 2017

Testing a component inside another component using Karma

I am too new doing testing with angular 4 and Karma and I need some little help.

I have a component, for example Component A. Inside of this component, in the ComponentA.html, I have a second component called Component B. This component have 2 @Input (MyTitle:string, MyTotal:number) inside and I want to give to Component B two values, and create multiple Component B.

ComponentA.component.ts

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


@Component({
  selector: 'component_A',
  templateUrl: './component_A.component.html',
  styleUrls: ['../app.component.scss']
})

export class Component_A { 
 //SomeCodeOverHere
}

Inside my ComponentA.component.html, I have the next HTML.

  <componentB [myTitle]="'Total'" [myTotal]="myValue.foo"></componentB>

And in my ComponentB.component.ts I have the next code:

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

@Component({
  selector: 'componentB',
  templateUrl: './ComponentB.component.html',
  styleUrls: ['../../app.component.scss']
})

export class ComponentB {

  @Input() myTotal:number = 0;
  @Input() myTitle:string = "";

}

And I have this HTML inside of my ComponentB.component.html:

<div class="col-md-12">
  <span class="noteBoxText" [style.color]="getStyle()">  </span>
</div>
<div class="col-md-12">
  
</div>

If I do a ng test, I have the next error

"Failed: Template parse errors: Can't bind to 'myTitle' since it isn't a known property of 'componentB'. ("x padding5px" [ngClass]="{'checkedFilter': highlightedDiv === 1 }"> ][myTitle]="'Total de validaciones'" [myTotal]="porcentajes.totalValidations"> "): ng:///DynamicTestModule/DvsValidas.html@9:32 Can't bind to 'myTotal' since it isn't a known property of 'componentB'. ("lter': highlightedDiv === 1 }"> ][myTotal]="porcentajes.totalValidations"> "): ng:///DynamicTestModule/DvsValidas.html@9:68 'componentB' is not a known element: 1. If 'componentB' is an Angular component, then verify that it is part of this module. 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ss="insideNoteBox padding5px" [ngClass]="{'checkedFilter': highlightedDiv === 1 }"> [ERROR ->] ][myTitle]="'Total de errores'" [myTotal]="porcentajes.counterErr"> ][myTotal]="porcentajes.counterErr">

Can you help me to do some Test with Karma?

Regards!!

Roth.

Aucun commentaire:

Enregistrer un commentaire