CODEWITHSUNDEEP
angulartypescriptunit-testingkarma-runner
Justin
Justin

Reputation: 159

Angular 6 receive input from another component for Karma unit test

So I'm trying to write Karma tests for a variety of components, and many of them receive input from a parent component. To try to illustrate how tests work, I've created a sample group of 5 different files as a tutorial of sorts: "random.test.component.child.html", "random.test.component.child.ts", "random.test.component.html", "random.test.component.ts", and "random.test.file.spec.ts".

I want to receive input from one component and set the value to the variable of the other ([variable]="value"). I've already tried accessing the variable that should be set directly via the HTML file's input to no avail.

Here are the relevant parts of the files:

random.test.component.child.html (variableThatStoresTheDataThatTheChildReceives shows up as blank unless manually set)

<h2>Also, here's a thing that should load properly: {{variableThatStoresTheDataThatTheChildReceives}}</h2>

random.test.component.child.ts

@Input() variableThatStoresTheDataThatTheChildReceives: any;

random.test.component.html

<!-- The parents pass data to the children. -->
<random-test-child [variableThatStoresTheDataThatTheChildReceives]="dataFromTheParentToTheChild"></random-test-child>

random.test.component.ts

public dataFromTheParentToTheChild:any = "This is a test.";

random.test.file.spec.ts (inside a describe statement)

it('Testing if receiving input from one component to another works properly', () => {

        childFixture.whenStable().then(() => {
            childFixture.detectChanges();
expect(childComponent.variableThatStoresTheDataThatTheChildReceives).toEqual("This is a test.");
        });
});

I'd expect to have the input received from the HTML component result in childComponent.variableThatStoresTheDataThatTheChildReceives equaling "This is a test.", but instead I get "undefined". I know you can set the input manually like so:

childComponent.variableThatWillHaveTheInputHardCodedKindOf = 'Manual Text';

but I'm trying to run the test using the data that gets passed to the component when it's not being tested.

Is there a way to do this?

Upvotes: 1

Views: 1964

Answers (1)

user2216584
user2216584

Reputation: 5602

You should use By.directive to get hold of your child component. Setup your test case like this:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { RandomTestComponent } from './random-test.component';
import { RandomTestChildComponent } from '../random-test-child/random-test-child.component';
import { By } from '@angular/platform-browser';

describe('RandomTestComponent', () => {
  let component: RandomTestComponent;
  let fixture: ComponentFixture<RandomTestComponent>;

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

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

  it('Testing if receiving input from one component to another works properly', () => {

    const childComp: RandomTestChildComponent = fixture.debugElement.query(By.directive(RandomTestChildComponent)).componentInstance;
    expect(childComp).toBeTruthy();
    expect(childComp.variableThatStoresTheDataThatTheChildReceives).toEqual('This is a test.');
  });

});

Upvotes: 3

Related Questions