События модульного тестирования CdkDragDrop

Итак, я работаю над модульным тестированием своего приложения Angular. Я использую Angular Material, и у меня есть компонент, который использует CDK cdk API перетаскивания перетаскивания.

html код выглядит так

<mat-card class="interventionCard">
  <div  cdkDropListGroup class="container">
    <div cdkDropList
         [cdkDropListData]="interventionsTodo" (cdkDropListDropped)="drop($event)" class="dragContainer">
      <div class="dragInter" *ngFor="let i of interventionsTodo" cdkDrag><img src="{{i.imgSrc}}" class="interventionIc" alt=""></div>
      <a class="resetInv" (click)="reset()"><div class="dragInter"><img src="../assets/images/simulation-intervention/noIntervention.svg" class="interventionIc" alt=""></div></a><!---->
    </div>

    <div class="dropContainer">
      <div cdkDropList [cdkDropListData]="interventionsDoneNow" (cdkDropListDropped)="drop($event)" class="dropZone">
        <div class="dragInterDropped" *ngFor="let i of interventionsDoneNow" cdkDrag><img src="{{i.imgSrc}}" class="interventionIc" alt=""></div>
      </div>
        <div class="connectorL"></div>
      <div cdkDropList [cdkDropListData]="interventionsDonePlus5" (cdkDropListDropped)="drop($event)" class="dropZone">
        <div class="dragInterDropped" *ngFor="let i of interventionsDonePlus5" cdkDrag><img src="{{i.imgSrc}}" class="interventionIc"></div>
      </div>
      <div class="connectorL"></div>
      <div cdkDropList  [cdkDropListData]="interventionsDonePlus10" (cdkDropListDropped)="drop($event)" class="dropZone">
        <div class="dragInterDropped" *ngFor="let i of interventionsDonePlus10" cdkDrag><img src="{{i.imgSrc}}" class="interventionIc" alt=""></div>
      </div>
      <div class="connectorL"></div>
      <div cdkDropList  [cdkDropListData]="interventionsDonePlus15" (cdkDropListDropped)="drop($event)" class="dropZone">
        <div class="dragInterDropped" *ngFor="let i of interventionsDonePlus15" cdkDrag><img src="{{i.imgSrc}}" class="interventionIc" alt=""></div>
      </div>
      <div class="connectorL"></div>
      <div cdkDropList  [cdkDropListData]="interventionsDonePlus20" (cdkDropListDropped)="drop($event)" class="dropZone">
        <div class="dragInterDropped" *ngFor="let i of interventionsDonePlus20" cdkDrag><img src="{{i.imgSrc}}" class="interventionIc" alt=""></div>
      </div>
      <div class="connectorL"></div>
      <div cdkDropList  [cdkDropListData]="interventionsDonePlus25" (cdkDropListDropped)="drop($event)" class="dropZone">
        <div class="dragInterDropped" *ngFor="let i of interventionsDonePlus25" cdkDrag><img src="{{i.imgSrc}}" class="interventionIc" alt=""></div>
      </div>
      <div class="connectorL"></div>
      <div cdkDropList [cdkDropListData]="interventionsDonePlus30" (cdkDropListDropped)="drop($event)" class="dropZone">
        <div class="dragInterDropped" *ngFor="let i of interventionsDonePlus30" cdkDrag><img src="{{i.imgSrc}}" class="interventionIc" alt=""></div>
      </div>
    </div>

Все отлично, теперь у меня есть событие cdkDropListDroppet, которое вызывает функцию drop()

    drop(event: CdkDragDrop<{ imgSrc: string }[], any>) {
     if (event.previousContainer === event.container) {
       moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
     } else {
         if(event.container.data === this.interventionsTodo){
         this.deleteSpecificItemFromTimeline(event.previousContainer.data[0]);
         }else if(event.container.data.length <1){
           copyArrayItem(event.previousContainer.data,
             event.container.data,
             event.previousIndex,
             event.currentIndex);
         }
      }
    }

это отлично работает, теперь я тестирую угловое приложение (jasmine/karma) и я пытаюсь отправить событие CdkDragDrop, чтобы проверить функциональность моей функции drop().

Итак, в документации angular есть небольшая глава о тестировании DOM компонентов, где упоминается, что вы должны получить htmlElement, где вы хотите запустить событие, которое я делаю следующим образом: угловые документы

    let Dbg = fixture.debugElement;
    let htE = Dbg.nativeElement.querySelector(".dragContainer");

теперь у меня есть элемент, на котором я хочу запустить событие, поэтому полный код выглядит так

    let Dbg = fixture.debugElement;
      let htE = Dbg.nativeElement.querySelector(".dragContainer");

      htE.addEventListener('CdkDragDrop', (ev:any) => {
        component.drop(ev);
      });
      let bla = htE.dispatchEvent(new Event('cdkDropListDropped'));

Итак, bla возвращает true, что (если я не ошибаюсь) означает, что событие было запущено, но ничего не происходит. fixture.detectchanges() происходит автоматически.. я пытался отладить его, чтобы увидеть, что происходит, но функция прослушивателя никогда не запускается, и я искал везде, чтобы найти ответ, но, похоже, ничего не нашел в такого рода тестировании событий.

Отличным исходным ресурсом для примеров модульных тестов являются тесты, расположенные в исходном коде библиотеки: github.com/angular/components/tree/master/src/cdk/drag-drop.

Alexander Staroselsky 22.05.2019 17:16

Привет, можешь найти решение? Я столкнулся с подобной ситуацией в моем модульном тесте сейчас.

Jun Ee 28.06.2019 03:44

Hei Jun, поэтому в ссылке, упомянутой Александром, есть много примеров того, как тестировать CdkDragDrop.. но проблема здесь с Angular, поэтому, если вы проверите тесты в репо, предоставленном Алексом, вы в основном найдете некоторые импорты вокруг @angular /core/testing .. и проблема здесь в том, что этот тестовый модуль недоступен публично из-за того, что он не был должным образом отформатирован и прокомментирован и еще много чего. Итак, на данный момент вы не можете проверить свои материалы.. по крайней мере, это то, что я узнал, я надеюсь, что это поможет

TunaTheCat 28.06.2019 17:57
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
7
3
5 922
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

сводная таблица-боковая панель.component.spec.ts показывает, как могут выглядеть соответствующие модульные тесты.

любая ссылка stackblitz для модульного тестирования функции перетаскивания cdk?

sattva_venu 05.05.2020 17:31

Другие вопросы по теме