Angular 6从另一个组件接收输入以进行Karma单元测试 [英] Angular 6 receive input from another component for Karma unit test

问题描述

因此，我正在尝试为各种组件编写Karma测试，其中许多测试是从父组件接收输入的.为了说明测试的工作方式，我创建了一个由5个不同文件组成的示例组，作为各种教程:"random.test.component.child.html"，"random.test.component.child.ts"，"random.test.component.html"，"random.test.component.ts"和"random.test.file.spec.ts".

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".

我想从一个组件接收输入并将该值设置为另一个组件的变量([variable] ="value").我已经尝试访问应该直接通过HTML文件输入设置的变量，但没有用.

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会显示为空白)

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

random.test.component.child.ts

@Input() variableThatStoresTheDataThatTheChildReceives: any;

random.test.component.html

random.test.component.html

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

random.test.component.ts

random.test.component.ts

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

random.test.file.spec.ts(在describe语句内)

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.");
        });
});

我希望从HTML组件收到的输入会导致childComponent.variableThatStoresTheDataThatTheChildReceives等于"This is a test."，但是我却得到了"undefined".我知道您可以像这样手动设置输入:

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?

推荐答案

您应该使用By.directive来获取子组件.像这样设置测试用例:

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.');
  });

});

这篇关于Angular 6从另一个组件接收输入以进行Karma单元测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！