Как смоделировать вызов функции removeChild или appendChild при тестировании угловых директив?

Question

Я столкнулся с проблемой в тестировании угловых директив с издевательством над домом манипулирование функциями api removeChild или appendChild. создается директива для добавления / удаления элементов в выпадающем меню.

Я пытался насмехаться над API-интерфейсом манипуляции DOM removeChild или appendChild работает с jasmine.createSpyObj, но не дразнит вызов и вызов переходит к фактическому вызову функции и выдаёт ошибку.

it('TestCase: appMenuDropDown Directive',() => {
    var rendererMock;
    const debugEl: HTMLElement = fixture.debugElement.nativeElement;
    rendererMock =  jasmine.createSpyObj('rendererMock',['removeChild']);
    rendererMock.removeChild(); /*mocking removeChild call*/
    const inputEl: HTMLElement = debugEl.querySelector('.list-item');
    inputEl.click();
    fixture.detectChanges();
    expect(rendererMock.removeChild).toHaveBeenCalled();
});

ниже - ошибка консоли.

context.js: 248 ОШИБКА TypeError: Невозможно прочитать свойство 'parentNode' из неопределенного at MenuDropDownDirective ../ src / app / directives / menu-drop-down.directive.ts.MenuDropDownDirective.clickListener

@Directive({ selector: '[appMenuDropDown]' })
export class MenuDropDownDirective {
    @Input() subMenuContainer: ElementRef;
    constructor(private el: ElementRef, private renderer: Renderer2) {}
    @HostListener('click') clickListener() {
        const sourceElement: any = this.el.nativeElement;
        const targetElement: any = this.subMenuContainer;
        if (sourceElement.children.length > 1) {
            this.renderer.removeChild(targetElement.parentNode, targetElement);
        } else {
            this.renderer.appendChild(sourceElement, targetElement);
        }
    }
}

Answer 1

it('TestCase: appMenuDropDown Directive appendChild',fakeAsync(() => {
    const debugEl: HTMLElement = fixture.debugElement.nativeElement;
    const inputEl: HTMLElement = debugEl.querySelector('.list-item');
    inputEl.click();
    console.log(inputEl.children.length);
    expect(inputEl.children.length).toBeGreaterThan(1)
    tick();
    inputEl.click();
    expect(inputEl.children.length).toEqual(1);
}));

Answer 2

@ Component ({template: <mat-nav-list> <mat-list-item> <div class='list-item' appMenuDropDown [subMenuContainer]="subMenuList" mat-list-item>test1 <span>test2 </span> </div> </mat-list-item> </mat-nav-list> <mat-nav-list> <ul #subMenuList> <li>child1</li> <li>child2</li> </ul> </mat-nav-list>, стили: ['mat-list-item {display: block;}']

})

class TestMenuDropDownComponent {

}