Модульное тестирование связи между братьями и сестрами в Angular 2

Question

Как кто-то проверяет связь между двумя родственными компонентами в Angular 2? Кажется, я не могу найти какой-либо жизнеспособный ресурс в Интернете.

app.component.html

<comp1 #a></comp1>
<comp2 [x]="a.get()"></comp2>

где get() это функция внутри comp1 компонент, значение которого я передаю одной из переменных класса компонента comp2, Как я могу проверить это эффективно?

app.component является родительским компонентом comp1 а также comp2 и окружает их.

Answer 1

Упомянутый вами фрагмент дает частичное представление. Но я думаю, что вы хотите проверить, влияют ли изменения данных одного компонента на данные другого компонента.

it('should xx', async(() => {
    const fixture = TestBed.createComponent(ParentComponent);
    fixture.detectChanges();

    const child1 = fixture.debugElement.queryAll(By.directive(ChildComponent1))[0];
    const but = child1.queryAll(By.css('#some_element'))[0].nativeElement; // change data in child1
    fixture.detectChanges(); // detect changes

    const child2 = fixture.debugElement.queryAll(By.directive(ChildComponent2))[0];
    const child2info = child2.queryAll(By.css('some_element'))[1].nativeElement.innerHTML;
    expect(child2info).toBe('some_data'); // check if reflected in child2
  }));

Итак, в основном вы используете By.directive() получить элементы DOM для дочернего компонента. После того, как вы это сделали, вам нужно отредактировать DOM, используя nativeElement,

После редактирования используйте By.directive() еще раз, чтобы извлечь элементы DOM для второго дочернего компонента, а затем дополнительно проверить его DOM на предмет изменений данных.

Примечание: для изменения данных в ChildComponent1сделать что-то вроде but.value = "something" (если это <input> коробка), а затем создать Event прежде чем позвонить detectChanges(),