Ng-select: Open select dropdown in Angular unit test

[ejasarevic]

Describe the bug
For several Jasmine unit tests we used to manually open select dropdown and assert some conditions for expected items in the control. After upgrading to any of 2.x.x version of library, click event listener is not present anymore on div with ng-control class (ng-control was also replaced with ng-select-container). We also tried to trigger new MouseEvent('mousedown') on div.ng-select-container.ng-has-value target as we found in the src/tests of the library, but without success. Is it possible to trigger click event from unit tests and open select dropdown?

Reproducible example

To Reproduce
In older versions of the library, we used something like:

let control = fixture.debugElement.query(By.css('ng select .ng-control')).nativeElement;
control.click();
fixture.detectChanges();
-- dropdown is opened -- 

Now we tried to achieve the same with new selectors:

let control = fixture.debugElement.query(By.css('ng select .ng-select-container')).nativeElement;
control.click();
fixture.detectChanges();
-- dropdown is opened --

Expected behavior
Triggering click event on ng-select or some other control will open the dropdown as in older versions.

Desktop (please complete the following information):

• OS: [e.g. any]
• Browser [e.g. ChromeHeadless]
• Version [e.g. 70]

Additional context
Please point to if this questions/issue was previously answered somewhere.

[varnastadeus]

check this test https://github.com/ng-select/ng-select/blob/master/src/ng-select/ng-select.component.spec.ts#L2112

[jburtondev]

I have used this and it works well. It's based on the testing utilities in the testing/helpers.ts file in the ng-select repository:

1. Create a file and add this (or add to an existing file if you prefer)

import { DebugElement } from '@angular/core';
import { ComponentFixture } from '@angular/core/testing';
import { By } from '@angular/platform-browser';

/*
* Utils based on ng-select helper functions:
  https://github.com/ng-select/ng-select/blob/3018a1098ba2ad06fbdf4dfe60209087cbd68185/src/ng-select/testing/helpers.ts
*/
export function getNgSelectElement(fixture: ComponentFixture<any>): DebugElement {
    return fixture.debugElement.query(By.css('ng-select'));
  }

export function triggerKeyDownEvent(element: DebugElement, which: number, key = ''): void {
  element.triggerEventHandler('keydown', {
      which: which,
      key: key,
      preventDefault: () => { },
  });
}

2. Import the functions into your test file and use them like this:

// Open the dropdown
triggerKeyDownEvent(getNgSelectElement(fixture), 32);
fixture.detectChanges();

[ejasarevic]

@jburtondev Works like a charm! Thanks!