mardi 6 août 2019

how to write a unit test for angular child component with @input()

I have to write a test for a child component with @Input(). The output is an object and is used in view to populate the values after recieving from the parent. I have tried writing a test for this which doesn't seem to get pass. Any help would be appreciated, newbie to Angular and very very newbie to testing.

My test looks like this:

   import { MetricsComponent } from './scenario-flow.component';

    describe('MetricsComponent', () => {
    let component: MetricsComponent;
    let fixture: ComponentFixture<MetricsComponent>;
    const input = ['1', '2', '3','4', '5', '6', '7', '8', '9','10'];
    const testinput = {id:'1', projectId:'1', name:'scenario One', 
    attributes:null, structures:[], flows:[] };


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

    beforeEach(() => {
        fixture = TestBed.createComponent(MetricsComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should show change in input', () => {
        component.ParentMetrics = 'testinput';

        fixture.detectChanges();
    expect(fixture.nativeElement.querySelector('div').innerText).toEqual('test 
    input');
      });
    });``````

Component is: `````
    import { Component, OnInit, Input } from '@angular/core';
    @Component({
    selector: 'app-metrics',
    templateUrl: './metrics.component.html',
   styleUrls: ['./metrics.component.scss']
    })
    export class MetricsComponent implements OnInit {
   @Input() ParentMetrics:Metrics;

    constructor() { }

   ngOnInit() {
   }


   }

Aucun commentaire:

Enregistrer un commentaire