Ngx-bootstrap: [Test]Karma test dropdown menu items will not render correctly.

[JiaLiPassion]

The reproduce repository is here.

https://github.com/JiaLiPassion/ngx-bootstrap-dropdown-test

1. ng serve, everything works.
2. ng test, the sub menu items will not be rendered.

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 3.0.1

Angular: 6.1.0

Issue

1. The application can work without problems.
2. When I run ng test, the dropdown menu items will not be rendered.

What I did is use 2 *ngFor to render a group of drop down menus, and each menu will have an array of sub menu items.

 <div class="collapse navbar-collapse" id="navbarsExampleDefault" [collapse]="isCollapsed">
    <div class="nav navbar-nav navbar-right">
      <div class="btn-group menu-group" dropdown *ngFor="let dropdownGroup of dropdownGroups" placement="right bottom">
        <button id="button-basic" dropdownToggle type="button" class="btn btn-success dropdown-toggle" aria-controls="dropdown-basic">
          {{dropdownGroup.title}}<span class="caret"></span>
        </button>

        <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="button-basic">
          <div *ngFor="let dropdownItem of dropdownGroup.dropdownItems" (click)="menuClicked(dropdownItem)">
            <a class="nav-link" [routerLink]="[dropdownItem.url]">{{dropdownItem.displayName}}</a>
          </div>
        </ul>
      </div>
    </div>

  </div>

When I run ng test, the 2nd *ngFor will not work because dropdownGroup will be undefined, but in ng serve, everything will be fine. So I wonder ngx-bootstrap may dynamically append the dropdown menuitems, so in TestBed, something will not work.

Thanks!

[b0ric]

Can confirm that I have a similar problem in Angular unit tests with *ngFor inside dropdown to generate item. 'li.menuitem' are not being rendered at all:

<div class="dropdown" dropdown [isDisabled]="disabled" #dropdown="bs-dropdown"  [autoClose]="autoClose">
  <button dropdownToggle type="button" class="btn dropdown-toggle">
    <span class="text-truncate">{{ currentSelectionText }}</span>
  </button>
  <ul *dropdownMenu class="dropdown-menu" role="menu">
    <div *ngIf="items.length > 0; then showItems"></div>
    <ng-template #showItems>
      <li role="menuitem" class="dropdown-item text-truncate"
          *ngFor="let item of items; let i = index"
          (click)="onSelect(item, i)">{{item.name}}</li>
    </ng-template>
  </ul>
</div>

While everything works fine in the application.

PS: I'm using Jest, not Karma. So, I think, it's not relevant to the problem