如何在 Angular 中为 @HostListener('document:click',[$event]) 编写此代码段的单元测试

Question

Look into the code and provide an clear explanation.

        @HostListener('document:click',[$event])
        clickout(event){
        if(event.target.className!=='some blah some blah'){
            if(this.dropdownlist && this.dropdownlist.nativeElement){
               if(!this.dropdownlist.nativeElement.contains(event.target)){
                       this.somehandlingdropdown(true);
                }
             }
           }
         }

Answer 1

Welcome to SO.

You can create event in your test:

const event = new KeyboardEvent('keydown', {
   key: 'ArrowDown',
   altKey: true
});

document.dispatchEvent(event);
fixture.detectChanges();

Answer 2

You are trying to click dropdown list and check target value which has className attribute value to be 'some string value' and its equivalent native element value

Something like:

it('should test the clickout function', () => {
   const event = { target: { className: 'some blah some bah'} };
   component.clickout(event);
   expect(component.somehandlingdropdown).toBeFalsy(); <-- what ever 
                            your set value here check toBeTrue or toBeFalsy
   });