Angular 6 从另一个组件接收输入以进行 Karma 单元测试

Question

所以我正在尝试为各种组件编写 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".

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

以下是文件的相关部分：

random.test.component.child.html（变量ThatStoresTheDataThatTheChildReceives显示为空白，除非手动设置）

<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（在描述语句中）

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"。我知道您可以像这样手动设置输入：

childComponent.variableThatWillHaveTheInputHardCodedKindOf = 'Manual Text';

但我正在尝试运行使用未测试时传递给组件的数据进行测试。

有办法吗？

Answer 1

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

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 单元测试

Angular 6 receive input from another component for Karma unit test

unit-testing

typescript

karma-runner

angular