Kendo-dropdown unit test in angular with Jasmine

Question

I am trying to use Jasmine/Karma to run integration test on my angular application. We are predominantly using the kendo controls in the application. When writing a test suite to test the kendo drop down component where I am unable to get the reference of the kendo dropdown control in the spec file. Your help is highly appreciated.

TestBed.configureTestingModule({
      declarations: [ XXXX,YYYY,ZZZZ],
      imports:[HttpClientModule,RouterTestingModule,FormsModule ,ReactiveFormsModule ],
      providers:[ WebApiService,YYYY,ZZZZ],
    })
    .compileComponents();

beforeEach(() => {
    fixture = TestBed.createComponent(CreateCustomerComponent);
    component = fixture.componentInstance;
    datePipe=new DatePipe("en-US");
    fixture.detectChanges();
  });

it('#should the length of dropdown is greater than one',()=>{
    const trigger = fixture.debugElement.query(By.css('#dropDownId')).nativeElement;
    expect(trigger).toBeTruthy();
   
  });

html
<kendo-floatinglabel
  [text]="Customer"
>
  <kendo-dropdownlist
    [id]="'dropDownId'"
    [data]="DataItems"
    [textField]="'DataText'"
    [valueField]="'DataValue'"
    [(ngModel)]="selectedItem"
    
  >
  </kendo-dropdownlist>

</kendo-floatinglabel>

The test is breaking due to undefined value in the trigger variable.

Answer 1

You're missing the import of the Kendo controls module. Here's what worked for me.

import { InputsModule } from '@progress/kendo-angular-inputs';

Then add InputsModule to the list of imports in your TestBed.configureTestingModule module definition:

imports:[InputsModule, HttpClientModule, RouterTestingModule, FormsModule, ReactiveFormsModule],