如何在angular指令测试中模拟removeChild或appendChild函数调用？

Question

I am facing issue in angular directive testing with mocking the dom manipulation api's removeChild or appendChild functions. directive is created to add/remove the items to dropdown menu.

I have tried mocking the DOM manipulation API's removeChild or appendChild functions with jasmine.createSpyObj , but is not mocking the call and the call is going to actual function call and throwing error.

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();
});

below is the console error.

context.js:248 ERROR TypeError: Cannot read property 'parentNode' of undefined 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

@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> , styles: ['mat-list-item { display: block; }']

})

class TestMenuDropDownComponent {

}

Answer 2

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