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

Question

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 { async, ComponentFixture, TestBed, } from '@angular/core/testing';
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() { }

}

Neeraj Shende · Accepted Answer · 2019-08-07 05:31:03Z

3

Understand these point properly:

You should not cover unit tests for child component in your parent component.
You should write unit test of component in their respective spec file only.
You don't need to bother about external dependencies (in your case, it's child component), when writing unit tests for the component.
You should provide the configuration either all the component dependencies, or you can include NO_ERROR_SCHEMA. So, this will not give error for including references of the all the used components in TestBed configuration. You can include NO_ERROR_SCHEMA as:

schemas: [NO_ERROR_SCHEMA]

Hope, I cleared your doubts.

answered Aug 7, 2019 at 5:31

Neeraj Shende

3581 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Neeraj Shende Over a year ago

If it's still not clear, and you still not able to run unit test successfully then add the HTML for your component as well, will check that.

fahzsh Over a year ago

Hi thanks for explanation. I am still unable to understand, for 1. I am doing a unit test for child component only to see if I receive the input from the parent component. The files I shared are for the child component. I got 2. and 3. but unsure how to sure how to use NO_ERROR_SCHEMA as the error is exactly about the types not matching the receiving data.

fahzsh Over a year ago

@UPDATE - The test error showed errors from other component and services tests and once i commented those out, my component test passed without the view. HTML is only populating the data recieved from parent. Is that right? I am not too sure.

Neeraj Shende Over a year ago

Correct, remember one thing as well, So testing unit test for any component or service, just run specific tests cases, or all the test cases of specific file in order to get the status of those tests only. You can put "f" in order to set the priority i.e. to run particular tests cases like fdescribe or fit (instead of describe or it).

Neeraj Shende Over a year ago

Similarly you can skip in the same manner by putting x in front of the "describe" and "it" (xit or describe)

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related