Тестирование перетаскивания для компонента, используя sortablejs

Question

Я хотел бы проверить перетаскивание моего сортируемого компонента js с помощью метода dragAndDropElementByClassName. К сожалению, это не переключает пункты меню, и я получаю следующую ошибку.

 should display the pages sidebar menu and allow the user to reorder pages
      - Expected 'About' to equal 'Home'.
      - Expected 'Home' to equal 'About'.

Есть предложения, как это исправить? Мой тестовый код выглядит следующим образом:

  it('should display the pages sidebar menu and allow the user to reorder pages', () => {
    Helpers.clickOnElementByClassName('builder-sidebar-menu-pages-icon').then(function () {
      Helpers.getElementCountByClassName('page-row-option', 2);

      Helpers.getElementTextByClassName('builder-sidebar-pages-title-0').then(function (pageTitle) {
        expect(pageTitle).toEqual('Home');
      });

      Helpers.getElementTextByClassName('builder-sidebar-pages-title-1').then(function (pageTitle) {
        expect(pageTitle).toEqual('About');
      });

      // Test fails here, order of menu items does not change
      Helpers.dragAndDropElementByClassName('page-row-option-item-1', 0, 40).then(() => {
        Helpers.getElementTextByClassName('builder-sidebar-pages-title-1').then(function (pageTitle) {
          expect(pageTitle).toEqual('Home');
        });

        Helpers.getElementTextByClassName('builder-sidebar-pages-title-0').then(function (pageTitle) {
          expect(pageTitle).toEqual('About');
        });
      });
    });
  });

Моя функция перетаскивания выглядит следующим образом:

  static dragAndDropElementByClassName(className, x, y) {
    const dragAndDropElement = element(by.className(className));
    return browser.actions()
      .dragAndDrop(dragAndDropElement, { x: x, y: y })
      .perform();
  }

Мой компонент:

<div [sortablejsOptions]="menuSortableOptions" [sortablejs]="menuOptions" style="padding-top: 1em">
  <div (dragstart)="onDragStart()"
       (drop)="onDragExit()"
       *ngFor="let menuOption of menuOptions; let i = index"
       class="row list-item-row-color list-item-row-option page-row-option page-row-option-item-{{ i }} justify-content-center align-items-center"
       style="font-size: 0.8em">
    <div class="col-md-2" style="padding: 0.5em;">
      <button class="btn btn-square btn-options btn-block btn-lg btn-drag-menu" type="button">
        <i class="ti-menu"></i>
      </button>
    </div>
    <div class="col-md-8 row-color h-100 d-table">
      <div class="align-items-center d-table-cell align-middle builder-sidebar-pages-title-{{ i }}" style="padding-left: 5px">
        {{ menuOption }}
      </div>
    </div>
  </div>
</div>