Angular 6 получает входные данные от другого компонента для тестирования кармы - PullRequest
Новая
       16

Angular 6 получает входные данные от другого компонента для тестирования кармы

0 голосов
/ 10 июля 2019

Итак, я пытаюсь написать тесты кармы для множества компонентов, и многие из них получают данные от родительского компонента.Чтобы попытаться проиллюстрировать, как работают тесты, я создал пример группы из 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 (variableThatStoresTheDataThatTheChildReceives отображается как пустое, если не задано вручную) 

<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 будет иметь значение «Это тест», но вместо этого я получаю «undefined».Я знаю, что вы можете установить ввод вручную следующим образом: 

childComponent.variableThatWillHaveTheInputHardCodedKindOf = 'Manual Text';

, но я пытаюсь запустить тест, используя данные, которые передаются компоненту, когда он не тестируется.

Есть ли способ сделать это?

1 Ответ

0 голосов
/ 10 июля 2019

Вы должны использовать 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.');
  });

});
...