Доступ к nativeElement пользовательского углового тега HTML

Question

Я пишу угловой тест Жасмина для стороннего слайдера (https://www.npmjs.com/package/angular2-ui-switch) в моем приложении, используя следующий код:

HTML:

<ui-switch id="EditSwitch" name="EditSwitch" (change)="togglePageState()"></ui-switch>

Машинопись.spec-файл:

  it('clicking slider changes page state', async () => {
    fixture.detectChanges();

    spyOn(component, 'togglePageState');

    let slider = fixture.debugElement.query(By.css('#EditSwitch')).nativeElement;
    slider.change();
    fixture.whenStable().then(() => {
      expect(component.togglePageState).toHaveBeenCalled();
    });

  });

Однако всякий раз, когда я запускаю модульный тест, я получаю сообщение об ошибке:

HeadlessChrome 0.0.0 (Windows 10 0.0.0) Test Configuration Component clicking slider changes page state FAILED
        Failed: Cannot read property 'nativeElement' of null
        TypeError: Cannot read property 'nativeElement' of null
            at Object.<anonymous> src/app/configuration/configuration.component.spec.ts:105:71)
            at step (http://localhost:9876/_karma_webpack_/main.bundle.js:89:23)
            at Object.next (http://localhost:9876/_karma_webpack_/main.bundle.js:70:53)
            at http://localhost:9876/_karma_webpack_/main.bundle.js:64:71
            at new ZoneAwarePromise node_modules/zone.js/dist/zone.js:891:1)
            at webpackJsonp../src/app/configuration/configuration.component.spec.ts.__awaiter (http://localhost:9876/_karma_webpack_/main.bundle.js:60:12)
            at UserContext.<anonymous> src/app/configuration/configuration.component.spec.ts:100:52)
            at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:388:1)
            at ProxyZoneSpec.webpackJsonp../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke node_modules/zone.js/dist/zone-testing.js:288:1)
            at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:387:1)
.......

Я полагаю, что это потому, что я использую пользовательский тег HTML 'ui-switch'.

Как использовать nativeElement в этом пользовательском HTML-теге 'ui-switch'? Есть ли альтернативный подход, который мне нужно использовать вместо nativeElement?

Спасибо!

Answer 1

UI-переключатель во время выполнения вставит в него некоторые другие теги.Вы должны либо проверить эти nativeElement, используя его уникальный класс или идентификатор.

Невозможно проверить UI-переключатель напрямую.