Estoy trabajando en pruebas unitarias con jazmín y karma como componente angular. En el componente de plantilla, se utiliza un componente desplegable personalizado:
<div class="my-modal-body"> <form [formGroup]="form" class="form-horizontal"> <div class="padding-dropdown"> <my-form-wrapper label="Dateiformat" labelClass="col-lg-4 two-col-label-size" inputClass="col-lg-8 two-col-input-size" > <my-dropdown [items]="exportOptionen" formControlName="dateiTyp" (selectedChange)="exportFileChange($event)" > </my-dropdown> </my-form-wrapper> </div>En mis pruebas, trato de probar el cambio de valor, pero no puedo hacerlo funcionar. Sin embargo, trato de establecer el valor, exportFileChange no se activa. Y sé que el componente es correcto, porque ya está en producción. Entonces tiene que ser la prueba la que falla.
Aquí está mi prueba:
it('dateiTyp auswahl excel', waitForAsync(() => { spyOn(component, 'exportFileChange'); dateiTyp.setValue('Excel'); component.dateiTyp.setValue('Excel', { emitEvent: true }); fixture.detectChanges(); fixture.whenStable().then( () => { expect(component.exportFileChange).toHaveBeenCalled(); let exDiv = fixture.debugElement.query(By.css("#excelExportDiv")); expect(exDiv).not.toBeNull(); } ); }));Al cambiar la selección, se debe llamar al método exportFileChange(event) y en la plantilla aparece un div. El método exportFileChange-Method en el componente solo cambia un valor booleano. Probé cambiando el booleano en la prueba y funcionó, pero el evento aún no se activó.
Estas son las partes más relevantes de la configuración:
describe('ExportModalComponent', () => { [...] let dateiTyp: jasmine.SpyObj<FormControl>; let dateiTypChange: Subject<string>; [...] beforeEach( waitForAsync(() => { [...] dateiTyp = jasmine.createSpyObj('dateiTyp', ['value', 'setValue']); formGroup.get.withArgs('dateiTyp').and.returnValue(dateiTyp); dateiTypChange = new Subject(); Object.defineProperty(dateiTyp, 'valueChanges', { value: dateiTypChange }); [...]y my-dropdown.component.d.ts:
export declare class myDropdownComponent implements ControlValueAccessor, OnInit, OnChanges { [...] }Puedo cambiar la plantilla ExportModal o el componente ExportModal, pero no puedo cambiar la implementación o el uso de myDropdownComponent.
Estoy agradecido por cada ayuda!
¡Gracias!
Esta no es una respuesta completa, pero debería ayudarte.
Esta es una buena lectura. En este tipo de situaciones, solo uso triggerEventHandler en DebugElement .
Algo como esto:
it('should do abc', () => { // get a handle on the debugElement const myDropDown = fixture.debugElement.query(By.css('my-dropdown')); // the first argument is the name of the event you would like to trigger // and the 2nd argument of type object (or anything) is the $event you want to mock for the calling function myDropDown.triggerEventHandler('selectedChange', { /* mock $event here */}); // continue with tests });No estoy completamente seguro de cómo están conectados sus componentes, pero esa es la mejor manera que he encontrado para generar eventos personalizados para componentes personalizados.