How to use toSelector method in Cypress

...57        items: ['0'],58        allowItemDeleting: true,59        itemDeleteMode: 'test'60    });61    const $items = $list.find(toSelector(LIST_ITEM_CLASS));62    const $item = $items.eq(0);63    $item.trigger('dxpreparetodelete');64    assert.strictEqual($list.hasClass(SWITCHABLE_MENU_SHIELD_POSITIONING_CLASS), true, 'shield positioning class added');65    assert.strictEqual($item.hasClass(SWITCHABLE_MENU_ITEM_SHIELD_POSITIONING_CLASS), true, 'positioning class added');66    $item.trigger('dxpreparetodelete');67    assert.strictEqual($list.hasClass(SWITCHABLE_MENU_SHIELD_POSITIONING_CLASS), false, 'shield positioning class removed');68    assert.strictEqual($item.hasClass(SWITCHABLE_MENU_ITEM_SHIELD_POSITIONING_CLASS), false, 'positioning class removed');69});70QUnit.test('active state should be enabled while item prepared to delete', function(assert) {71    const clock = sinon.useFakeTimers();72    try {73        const $list = $('#templated-list').dxList({74            items: ['0'],75            allowItemDeleting: true,76            itemDeleteMode: 'test'77        });78        const $items = $list.find(toSelector(LIST_ITEM_CLASS));79        const $item = $items.eq(0);80        const pointer = pointerMock($item);81        $item.trigger('dxpreparetodelete');82        pointer.start('touch').down();83        clock.tick(1000);84        assert.ok(!$item.hasClass('dx-state-active'), 'item is not activated');85        $item.trigger('dxpreparetodelete');86        pointer.start('touch').down();87        clock.tick(1000);88        assert.ok($item.hasClass('dx-state-active'), 'item is activated');89    } finally {90        clock.restore();91    }92});93QUnit.test('click should remove delete ready class', function(assert) {94    const clickHandledStub = sinon.stub();95    const $list = $('#templated-list').dxList({96        items: ['0', '1'],97        onItemClick: clickHandledStub,98        allowItemDeleting: true,99        itemDeleteMode: 'test'100    });101    const $items = $list.find(toSelector(LIST_ITEM_CLASS));102    const $item = $items.eq(0);103    $item.trigger('dxpreparetodelete');104    assert.strictEqual($item.hasClass(SWITCHABLE_DELETE_READY_CLASS), true, 'delete ready class added for testing');105    $item.trigger('dxclick');106    assert.strictEqual($item.hasClass(SWITCHABLE_DELETE_READY_CLASS), false, 'delete ready class removed');107    assert.strictEqual(clickHandledStub.callCount, 0, 'click action is not triggered');108});109QUnit.test('click on item should not remove delete ready class if widget is disabled', function(assert) {110    const clickHandledStub = sinon.stub();111    const $list = $('#templated-list').dxList({112        items: ['0'],113        disabled: true,114        onItemClick: clickHandledStub,115        allowItemDeleting: true,116        itemDeleteMode: 'test'117    });118    $('#templated-list').dxList('instance');119    const $items = $list.find(toSelector(LIST_ITEM_CLASS));120    const $item = $items.eq(0);121    $item.trigger('dxpreparetodelete');122    $item.trigger('dxclick');123    assert.strictEqual($item.hasClass(SWITCHABLE_DELETE_READY_CLASS), true, 'delete ready class not removed');124    assert.strictEqual(clickHandledStub.callCount, 0, 'click action is not triggered');125});126QUnit.test('shields should be generated', function(assert) {127    const $list = $('#templated-list').dxList({128        items: ['0', '1', '2', '3'],129        allowItemDeleting: true,130        itemDeleteMode: 'test'131    });132    const $topShield = $list.find(toSelector(SWITCHABLE_DELETE_TOP_SHIELD_CLASS));133    const $bottomShield = $list.find(toSelector(SWITCHABLE_DELETE_BOTTOM_SHIELD_CLASS));134    assert.ok($topShield.length, 'top shield generated');135    assert.ok($bottomShield.length, 'bottom shield generated');136    assert.ok($topShield.is(':hidden'), 'top shield disabled');137    assert.ok($bottomShield.is(':hidden'), 'bottom shield disabled');138});139QUnit.test('prepare delete should add shields before and after element', function(assert) {140    const $list = $('#templated-list').dxList({141        items: ['0', '1', '2', '3'],142        allowItemDeleting: true,143        itemDeleteMode: 'test'144    });145    const $items = $list.find(toSelector(LIST_ITEM_CLASS));146    const $item = $items.eq(1);147    const $topShield = $list.find(toSelector(SWITCHABLE_DELETE_TOP_SHIELD_CLASS));148    const $bottomShield = $list.find(toSelector(SWITCHABLE_DELETE_BOTTOM_SHIELD_CLASS));149    $item.trigger('dxpreparetodelete');150    assert.ok($topShield.is(':visible'), 'top shield enabled');151    assert.ok($bottomShield.is(':visible'), 'bottom shield enabled');152    assert.ok(Math.abs($topShield.height() - ($item.offset().top - $list.offset().top)) < 1, 'top shield dimensions correct');153    assert.ok(Math.abs($bottomShield.height() - ($list.outerHeight() - $item.outerHeight() - ($item.offset().top - $list.offset().top))) < 1, 'bottom shield dimensions correct');154});155QUnit.test('pointerdown on shields should cancel delete', function(assert) {156    const $list = $('#templated-list').dxList({157        items: ['0', '1', '2', '3'],158        allowItemDeleting: true,159        itemDeleteMode: 'test'160    });161    const $items = $list.find(toSelector(LIST_ITEM_CLASS));162    const $item = $items.eq(1);163    const $topShield = $list.find(toSelector(SWITCHABLE_DELETE_TOP_SHIELD_CLASS));164    const $bottomShield = $list.find(toSelector(SWITCHABLE_DELETE_BOTTOM_SHIELD_CLASS));165    $item.trigger('dxpreparetodelete');166    pointerMock($topShield).start().down();167    assert.strictEqual($item.hasClass(SWITCHABLE_DELETE_READY_CLASS), false, 'delete canceled');168    $item.trigger('dxpreparetodelete');169    pointerMock($bottomShield).start().down();170    assert.strictEqual($item.hasClass(SWITCHABLE_DELETE_READY_CLASS), false, 'delete canceled');171});172QUnit.test('prepare delete should add shield above item content', function(assert) {173    const $list = $('#templated-list').dxList({174        items: ['0'],175        allowItemDeleting: true,176        itemDeleteMode: 'test',177        itemTemplate: () => {178            return $('<div>').append($('<div>').addClass(LIST_ITEM_CONTENT_CLASS));179        }180    });181    const $items = $list.find(toSelector(LIST_ITEM_CLASS));182    const $item = $items.eq(0);183    const itemContentShield = () => { return $list.find(toSelector(LIST_ITEM_CONTENT_CLASS)).find(toSelector(SWITCHABLE_DELETE_ITEM_CONTENT_SHIELD_CLASS)); };184    assert.ok(!itemContentShield().length, 'shield not added');185    $item.trigger('dxpreparetodelete');186    assert.ok(itemContentShield().length, 'shield added');187    $item.trigger('dxpreparetodelete');188    assert.ok(!itemContentShield().length, 'shield removed');189});190QUnit.test('prepare delete should disable scrolling', function(assert) {191    const $list = $('#templated-list').dxList({192        items: ['0'],193        allowItemDeleting: true,194        itemDeleteMode: 'test',195        useNativeScrolling: false196    });197    const $items = $list.find(toSelector(LIST_ITEM_CLASS));198    const $item = $items.eq(0);199    $item.trigger('dxpreparetodelete');200    let event = $.Event({ type: 'dxscrollstart' });201    $list.find('.dx-scrollable-wrapper').trigger(event);202    assert.strictEqual(event.cancel, true, 'scroll disabled');203    $item.trigger('dxpreparetodelete');204    event = $.Event({ type: 'dxscrollstart' });205    $list.find('.dx-scrollable-container').trigger(event);206    assert.strictEqual(event.cancel, undefined, 'scroll enabled');207});208QUnit.test('forget delete should not enable scrolling that already was disabled', function(assert) {209    const $list = $('#templated-list').dxList({210        items: ['0'],211        allowItemDeleting: true,212        itemDeleteMode: 'test'213    });214    const $items = $list.find(toSelector(LIST_ITEM_CLASS));215    const $item = $items.eq(0);216    const scrollView = $list.dxScrollView('instance');217    scrollView.option('disabled', true);218    $item.trigger('dxpreparetodelete');219    assert.strictEqual(scrollView.option('disabled'), true, 'scroll disabled');220    $item.trigger('dxpreparetodelete');221    assert.strictEqual(scrollView.option('disabled'), true, 'scroll disabled reset');222});223const SWITCHABLE_DELETE_BUTTON_CONTAINER_CLASS = 'dx-list-switchable-delete-button-container';224const SWITCHABLE_DELETE_BUTTON_WRAPPER_CLASS = 'dx-list-switchable-delete-button-wrapper';225const SWITCHABLE_DELETE_BUTTON_INNER_WRAPPER_CLASS = 'dx-list-switchable-delete-button-inner-wrapper';226const SWITCHABLE_DELETE_BUTTON_CLASS = 'dx-list-switchable-delete-button';227QUnit.module('switchable button delete decorator', {228    beforeEach: function() {229        fx.off = true;230        const testDecorator = SwitchableButtonEditDecorator.inherit({231            modifyElement: function(config) {232                this.callBase.apply(this, arguments);233                const $itemElement = $(config.$itemElement);234                $itemElement.on('dxpreparetodelete', $.proxy((e) => {235                    this._toggleDeleteReady($itemElement);236                }, this));237            }238        });239        decoratorRegistry.register('menu', 'test', testDecorator);240    },241    afterEach: function() {242        fx.off = false;243        delete decoratorRegistry.registry.menu.test;244    }245});246QUnit.test('list item markup', function(assert) {247    const $list = $('#templated-list').dxList({248        items: ['0'],249        allowItemDeleting: true,250        itemDeleteMode: 'test'251    });252    const $items = $list.find(toSelector(LIST_ITEM_CLASS));253    const $item = $items.eq(0);254    assert.strictEqual($item.children(toSelector(SWITCHABLE_DELETE_BUTTON_CONTAINER_CLASS)).length, 0, 'delete button won\'t rendered');255});256QUnit.test('button should be added only when item is ready to delete', function(assert) {257    const $list = $('#templated-list').dxList({258        items: ['0'],259        allowItemDeleting: true,260        itemDeleteMode: 'test'261    });262    const $items = $list.find(toSelector(LIST_ITEM_CLASS));263    const $item = $items.eq(0);264    $item.trigger('dxpreparetodelete');265    const $deleteButton = $item266        .children(toSelector(SWITCHABLE_DELETE_BUTTON_CONTAINER_CLASS))267        .children(toSelector(SWITCHABLE_DELETE_BUTTON_WRAPPER_CLASS))268        .children(toSelector(SWITCHABLE_DELETE_BUTTON_INNER_WRAPPER_CLASS))269        .children(toSelector(SWITCHABLE_DELETE_BUTTON_CLASS));270    assert.ok($deleteButton.hasClass('dx-button'), 'button generated');271    $item.trigger('dxpreparetodelete');272    assert.strictEqual($deleteButton.parents().length, 3, 'button removed');273});274QUnit.test('delete button click should delete list item', function(assert) {275    assert.expect(1);276    const $list = $('#templated-list').dxList({277        items: ['0'],278        allowItemDeleting: true,279        itemDeleteMode: 'test'280    });281    const list = $list.dxList('instance');282    const $items = $list.find(toSelector(LIST_ITEM_CLASS));283    const $item = $items.eq(0);284    $item.trigger('dxpreparetodelete');285    list.deleteItem = ($itemElement) => {286        assert.strictEqual($itemElement.get(0), $item.get(0), 'item is deleted');287        return $.Deferred().resolve().promise();288    };289    const $deleteButton = $item.find(toSelector(SWITCHABLE_DELETE_BUTTON_CLASS));290    $deleteButton.trigger('dxclick');291});292const TOGGLE_DELETE_SWITCH_CLASS = 'dx-list-toggle-delete-switch';293QUnit.test('switchable delete button should has button content on the second deleting', function(assert) {294    const $list = $('#templated-list').dxList({295        items: ['0', '1', '2'],296        allowItemDeleting: true,297        itemDeleteMode: 'toggle'298    });299    let $item = $list.find(toSelector(LIST_ITEM_CLASS)).eq(0);300    let $deleteToggle = $item.children(toSelector(LIST_ITEM_BEFORE_BAG_CLASS)).children(toSelector(TOGGLE_DELETE_SWITCH_CLASS));301    $deleteToggle.trigger('dxclick');302    let $deleteButton = $item.find(toSelector(SWITCHABLE_DELETE_BUTTON_CLASS));303    $deleteButton.trigger('dxclick');304    $item = $list.find(toSelector(LIST_ITEM_CLASS)).eq(0);305    $deleteToggle = $item.children(toSelector(LIST_ITEM_BEFORE_BAG_CLASS)).children(toSelector(TOGGLE_DELETE_SWITCH_CLASS));306    $deleteToggle.trigger('dxclick');307    $deleteButton = $item.find(toSelector(SWITCHABLE_DELETE_BUTTON_CLASS));308    assert.strictEqual($deleteButton.children('.dx-button-content').length, 1, 'button container has content');309});310QUnit.module('toggle delete decorator');311QUnit.test('toggling delete toggle button should switch delete ready class', function(assert) {312    const $list = $('#templated-list').dxList({313        items: ['0'],314        allowItemDeleting: true,315        itemDeleteMode: 'toggle'316    });317    const $items = $list.find(toSelector(LIST_ITEM_CLASS));318    const $item = $items.eq(0);319    const $deleteToggle = $item.children(toSelector(LIST_ITEM_BEFORE_BAG_CLASS)).children(toSelector(TOGGLE_DELETE_SWITCH_CLASS));320    $deleteToggle.trigger('dxclick');321    assert.ok($item.hasClass(SWITCHABLE_DELETE_READY_CLASS), 'delete ready class added if toggle pressed');322});323QUnit.test('animation should stop after first click, toggle', function(assert) {324    const fxStopSpy = sinon.spy(fx, 'stop');325    const $list = $('#templated-list').dxList({326        items: ['0'],327        allowItemDeleting: true,328        itemDeleteMode: 'toggle'329    });330    const $items = $list.find(toSelector(LIST_ITEM_CLASS));331    const $item = $items.eq(0);332    const $deleteToggle = $item.children(toSelector(LIST_ITEM_BEFORE_BAG_CLASS)).children(toSelector(TOGGLE_DELETE_SWITCH_CLASS));333    $deleteToggle.trigger('dxclick');334    const $buttonContainer = $item.find(toSelector(SWITCHABLE_DELETE_BUTTON_CONTAINER_CLASS));335    assert.strictEqual(fxStopSpy.callCount, 3);336    assert.strictEqual(fxStopSpy.getCall(1).args[0][0], $buttonContainer[0], 'stop is called on button container');337    assert.strictEqual(fxStopSpy.getCall(1).args[1], false, 'without jump to end');338    fx.stop.restore();339});340const STATIC_DELETE_BUTTON_CLASS = 'dx-list-static-delete-button';341QUnit.module('static delete decorator');342QUnit.test('delete button click should delete list item', function(assert) {343    assert.expect(1);344    const $list = $('#list').dxList({345        items: ['0'],346        allowItemDeleting: true,347        itemDeleteMode: 'static'348    });349    const list = $list.dxList('instance');350    const $items = $list.find(toSelector(LIST_ITEM_CLASS));351    const $item = $items.eq(0);352    list.deleteItem = ($itemElement) => {353        assert.strictEqual($itemElement.get(0), $item.get(0), 'item is deleted');354        return $.Deferred().resolve().promise();355    };356    const $deleteButton = $item.find(toSelector(STATIC_DELETE_BUTTON_CLASS));357    $deleteButton.trigger('dxclick');358});359QUnit.test('click on delete button should not raise item click event when item deleting is deferred', function(assert) {360    const clickHandledStub = sinon.stub();361    const $list = $('#templated-list').dxList({362        items: ['0'],363        allowItemDeleting: true,364        itemDeleteMode: 'static',365        onItemDeleting: () => {366            return $.Deferred().promise();367        },368        onItemClick: clickHandledStub369    });370    const $items = $list.find(toSelector(LIST_ITEM_CLASS));371    const $item = $items.eq(0);372    const $deleteButton = $item.find(toSelector(STATIC_DELETE_BUTTON_CLASS));373    $deleteButton.trigger('dxclick');374    assert.strictEqual(clickHandledStub.callCount, 0, 'click action is not triggered');375});376QUnit.module('slideButton delete decorator');377QUnit.test('item swiping should add delete ready class', function(assert) {378    const $list = $('#templated-list').dxList({379        items: ['0'],380        allowItemDeleting: true,381        itemDeleteMode: 'slideButton'382    });383    const $items = $list.find(toSelector(LIST_ITEM_CLASS));384    const $item = $items.eq(0);385    pointerMock($item).start().swipeEnd(1);386    assert.ok($item.hasClass(SWITCHABLE_DELETE_READY_CLASS), 'delete ready class added if item swiped');387});388QUnit.test('item swiping should not add delete ready class if widget is disabled', function(assert) {389    const $list = $('#templated-list').dxList({390        items: ['0'],391        disabled: true,392        allowItemDeleting: true,393        itemDeleteMode: 'slideButton'394    });395    const $items = $list.find(toSelector(LIST_ITEM_CLASS));396    const $item = $items.eq(0);397    const startEvent = pointerMock($item).start().swipeStart().lastEvent();398    assert.ok(startEvent.cancel, 'swipe canceled in disabled widget');399});400QUnit.test('animation should stop after first click, slideButton', function(assert) {401    const fxStopSpy = sinon.spy(fx, 'stop');402    const $list = $('#templated-list').dxList({403        items: ['0', '1', '2'],404        allowItemDeleting: true,405        itemDeleteMode: 'slideButton'406    });407    const $items = $list.find(toSelector(LIST_ITEM_CLASS));408    const $item = $items.eq(0);409    pointerMock($item).start().swipeEnd(1);410    const $buttonContainer = $item.find(toSelector(SWITCHABLE_DELETE_BUTTON_CONTAINER_CLASS));411    assert.strictEqual(fxStopSpy.callCount, 3);412    assert.strictEqual(fxStopSpy.getCall(1).args[0][0], $buttonContainer[0], 'stop is called on button container');413    assert.strictEqual(fxStopSpy.getCall(1).args[1], false, 'without jump to end');414    fx.stop.restore();415});416const SLIDE_MENU_WRAPPER_CLASS = 'dx-list-slide-menu-wrapper';417const SLIDE_MENU_CONTENT_CLASS = 'dx-list-slide-menu-content';418const SLIDE_MENU_BUTTONS_CONTAINER_CLASS = 'dx-list-slide-menu-buttons-container';419const SLIDE_MENU_BUTTONS_CLASS = 'dx-list-slide-menu-buttons';420const SLIDE_MENU_BUTTON_CLASS = 'dx-list-slide-menu-button';421const SLIDE_MENU_BUTTON_MENU_CLASS = 'dx-list-slide-menu-button-menu';422const SLIDE_MENU_CLASS = 'dx-list-slide-menu';423const position = ($element) => {424    return translator.locate($element).left;425};426QUnit.module('slideItem delete decorator', {427    beforeEach: function() {428        fx.off = true;429    },430    afterEach: function() {431        fx.off = false;432    }433});434QUnit.test('list item markup', function(assert) {435    const $list = $('#templated-list').dxList({436        items: ['0'],437        allowItemDeleting: true,438        itemDeleteMode: 'slideItem'439    });440    const $items = $list.find(toSelector(LIST_ITEM_CLASS));441    const $item = $items.eq(0);442    assert.ok($item.hasClass(SLIDE_MENU_WRAPPER_CLASS), 'class added to list item');443    const $itemContent = $item.children(toSelector(SLIDE_MENU_CONTENT_CLASS));444    assert.strictEqual($itemContent.length, 1, 'content generated');445    assert.strictEqual($itemContent.text(), 'Item Template', 'content moved in inner div');446    const deleteButtonContent = () => {447        return $item448            .children(toSelector(SLIDE_MENU_BUTTONS_CONTAINER_CLASS))449            .children(toSelector(SLIDE_MENU_BUTTONS_CLASS))450            .children(toSelector(SLIDE_MENU_BUTTON_CLASS));451    };452    assert.strictEqual(deleteButtonContent().length, 0, 'button is not generated');453});454QUnit.test('icon should not be rendered when custom item template is used', function(assert) {455    const $list = $('#templated-list').dxList({456        items: [{ icon: 'box', text: 'Item 1' }],457        itemTemplate: (data) => {458            return $('<div>').text('$: ' + data.text);459        }460    });461    assert.strictEqual($list.find('.' + LIST_ITEM_ICON_CONTAINER_CLASS).length, 0, 'item content has not been rendered');462});463QUnit.test('swipe should prepare item for delete', function(assert) {464    const $list = $('#templated-list').dxList({465        items: ['0'],466        allowItemDeleting: true,467        itemDeleteMode: 'slideItem'468    });469    const $items = $list.find(toSelector(LIST_ITEM_CLASS));470    const $item = $items.eq(0);471    const pointer = pointerMock($item);472    pointer.start().swipeStart().swipe(-0.01);473    const $itemContent = $item.find(toSelector(SLIDE_MENU_CONTENT_CLASS));474    const $deleteButtonContainer = $item.find(toSelector(SLIDE_MENU_BUTTONS_CONTAINER_CLASS));475    const $deleteButton = $item.find(toSelector(SLIDE_MENU_BUTTONS_CLASS));476    assert.ok(position($itemContent) < 0, 'item moved');477    const containerPositionDifference = $item.width() - position($deleteButtonContainer);478    assert.ok(containerPositionDifference > 0 && containerPositionDifference < $deleteButton.outerWidth(), 'button container moved');479    assert.ok(position($deleteButton) < 0 && position($deleteButton) > -$deleteButton.outerWidth(), 'button moved');480    pointer.swipeEnd(-1, -0.5);481    assert.roughEqual(position($itemContent), -$deleteButton.outerWidth(), 0.251, 'item animated');482    assert.roughEqual(position($deleteButtonContainer), $item.width() - $deleteButton.outerWidth(), 0.251, 'button container animated');483    assert.strictEqual(position($deleteButton), 0, 'button animated');484    assert.ok($item.hasClass(SWITCHABLE_DELETE_READY_CLASS), 'item ready for delete');485    fx.off = false;486    pointer.start().swipeStart().swipe(0.5).swipeEnd(1);487    assert.strictEqual(position($itemContent), 0, 'item animated back');488    assert.strictEqual(position($deleteButtonContainer), $item.width(), 'button container animated back');489    assert.roughEqual(position($deleteButton), -$deleteButton.outerWidth(), 0.251, 'button animated back');490});491QUnit.test('swipe should not prepare item for delete if widget is disabled', function(assert) {492    const $list = $('#templated-list').dxList({493        items: ['0'],494        disabled: true,495        allowItemDeleting: true,496        itemDeleteMode: 'slideItem'497    });498    const $items = $list.find(toSelector(LIST_ITEM_CLASS));499    const $item = $items.eq(0);500    const startEvent = pointerMock($item).start().swipeStart().lastEvent();501    assert.ok(startEvent.cancel, 'swipe canceled');502});503QUnit.test('swipe should be canceled if swipe in opposite direction', function(assert) {504    const $list = $('#templated-list').dxList({505        items: ['0'],506        allowItemDeleting: true,507        itemDeleteMode: 'slideItem'508    });509    const $items = $list.find(toSelector(LIST_ITEM_CLASS));510    const $item = $items.eq(0);511    const startEvent = pointerMock($item).start().swipeStart().swipe(0.1).lastEvent();512    assert.ok(startEvent.cancel, 'swipe canceled');513});514QUnit.test('swipe should not be canceled if swipe in opposite direction and item is ready to delete', function(assert) {515    const $list = $('#templated-list').dxList({516        items: ['0'],517        allowItemDeleting: true,518        itemDeleteMode: 'slideItem'519    });520    const $items = $list.find(toSelector(LIST_ITEM_CLASS));521    const $item = $items.eq(0);522    pointerMock($item).start().swipeStart().swipe(-0.5).swipeEnd(-1, -0.5);523    const startEvent = pointerMock($item).start().swipeStart().swipe(0.1).lastEvent();524    assert.ok(!startEvent.cancel, 'swipe canceled');525});526QUnit.test('swipe should not move item righter', function(assert) {527    const $list = $('#templated-list').dxList({528        items: ['0'],529        allowItemDeleting: true,530        itemDeleteMode: 'slideItem'531    });532    const $items = $list.find(toSelector(LIST_ITEM_CLASS));533    const $item = $items.eq(0);534    const $itemContent = $item.find(toSelector(SLIDE_MENU_CONTENT_CLASS));535    pointerMock($item).start().swipeStart().swipe(0.5);536    assert.strictEqual(position($itemContent), 0, 'item not moved');537});538QUnit.test('swipe loop should not be canceled', function(assert) {539    const $list = $('#templated-list').dxList({540        items: ['0'],541        allowItemDeleting: true,542        itemDeleteMode: 'slideItem'543    });544    const $items = $list.find(toSelector(LIST_ITEM_CLASS));545    const $item = $items.eq(0);546    const startEvent = pointerMock($item).start().swipeStart().swipe(-0.5).swipe(0.5).lastEvent();547    assert.ok(!startEvent.cancel, 'item returned back');548});549QUnit.test('click should undo readiness to delete', function(assert) {550    const $list = $('#templated-list').dxList({551        items: ['0'],552        allowItemDeleting: true,553        itemDeleteMode: 'slideItem'554    });555    const $items = $list.find(toSelector(LIST_ITEM_CLASS));556    const $item = $items.eq(0);557    const $itemContent = $item.find(toSelector(SLIDE_MENU_CONTENT_CLASS));558    const $deleteButton = $item.find(toSelector(SLIDE_MENU_BUTTONS_CLASS));559    pointerMock($item).start().swipeStart().swipe(-0.5).swipeEnd(-1);560    $itemContent.trigger('dxclick');561    assert.strictEqual(position($itemContent), 0, 'item moved back');562    assert.ok(!$item.hasClass(SWITCHABLE_DELETE_READY_CLASS), 'item not ready for delete');563    assert.strictEqual($deleteButton.parents().length, 0, 'button removed');564});565QUnit.test('click on button should remove item', function(assert) {566    const $list = $('#templated-list').dxList({567        items: ['0'],568        allowItemDeleting: true,569        itemDeleteMode: 'slideItem'570    });571    const list = $list.dxList('instance');572    const $items = $list.find(toSelector(LIST_ITEM_CLASS));573    const $item = $items.eq(0);574    list.deleteItem = ($itemElement) => {575        assert.strictEqual($itemElement.get(0), $item.get(0), 'item is deleted');576        return $.Deferred().resolve().promise();577    };578    pointerMock($item).start().swipeStart().swipe(-0.5).swipeEnd(-1, -0.5);579    const $deleteButton = $item.find(toSelector(SLIDE_MENU_BUTTON_CLASS));580    $deleteButton.trigger('dxclick');581});582QUnit.test('click on button should not cause item click event if confirmation present', function(assert) {583    const clickHandledStub = sinon.stub();584    const $list = $('#templated-list').dxList({585        items: ['0'],586        allowItemDeleting: true,587        itemDeleteMode: 'slideItem',588        onItemDeleting: () => {589            return $.Deferred().promise();590        },591        onItemClick: clickHandledStub592    });593    const $items = $list.find(toSelector(LIST_ITEM_CLASS));594    const $item = $items.eq(0);595    pointerMock($item).start().swipeStart().swipe(-0.5).swipeEnd(-1);596    const $deleteButton = $item.find(toSelector(SLIDE_MENU_BUTTON_CLASS));597    $deleteButton.trigger('dxclick');598    assert.strictEqual(clickHandledStub.callCount, 0, 'item click action not fired');599});600QUnit.test('click on button should not remove item if widget disabled', function(assert) {601    assert.expect(0);602    const $list = $('#templated-list').dxList({603        items: ['0'],604        allowItemDeleting: true,605        itemDeleteMode: 'slideItem',606        onItemDeleted: (e) => {607            assert.ok(false, 'delete action executed');608        }609    });610    const list = $list.dxList('instance');611    const $items = $list.find(toSelector(LIST_ITEM_CLASS));612    const $item = $items.eq(0);613    const $deleteButton = $item.find(toSelector(SLIDE_MENU_BUTTONS_CLASS));614    pointerMock($item).start().swipeStart().swipe(-0.5).swipeEnd(-1);615    list.option('disabled', true);616    $deleteButton.trigger('dxclick');617});618QUnit.test('button should have no text for the Material theme', function(assert) {619    const origIsMaterial = themes.isMaterial;620    themes.isMaterial = () => { return true; };621    const $list = $('#templated-list').dxList({622        items: ['0'],623        allowItemDeleting: true,624        itemDeleteMode: 'slideItem'625    });626    const $items = $list.find(toSelector(LIST_ITEM_CLASS));627    const $item = $items.eq(0);628    pointerMock($item).start().swipeStart().swipe(-0.5).swipeEnd(-1, -0.5);629    const $deleteButton = $item.find(toSelector(SLIDE_MENU_BUTTON_CLASS));630    assert.strictEqual($deleteButton.text(), '', 'button has no text for Material theme');631    themes.isMaterial = origIsMaterial;632});633QUnit.test('button should have no text for the Generic theme', function(assert) {634    const $list = $('#templated-list').dxList({635        items: ['0'],636        allowItemDeleting: true,637        itemDeleteMode: 'slideItem'638    });639    const $items = $list.find(toSelector(LIST_ITEM_CLASS));640    const $item = $items.eq(0);641    pointerMock($item).start().swipeStart().swipe(-0.5).swipeEnd(-1, -0.5);642    const $deleteButton = $item.find(toSelector(SLIDE_MENU_BUTTON_CLASS));643    assert.ok($deleteButton.text().length > 0, 'button has a text for Generic theme');644});645const INKRIPPLE_WAVE_SHOWING_CLASS = 'dx-inkripple-showing';646const INKRIPPLE_MATERIAL_SHOW_TIMEOUT = 100;647QUnit.test('button should have no inkRipple after fast swipe for Material theme', function(assert) {648    const origIsMaterial = themes.isMaterial;649    const origCurrent = themes.current;650    const clock = sinon.useFakeTimers();651    themes.isMaterial = () => { return true; };652    themes.current = () => { return 'material'; };653    const $list = $('#templated-list').dxList({654        items: ['0'],655        allowItemDeleting: true,656        itemDeleteMode: 'slideItem'657    });658    const $item = $list.find(toSelector(LIST_ITEM_CLASS)).eq(0);659    const pointer = pointerMock($item);660    let args;661    let inkRippleShowingWave;662    const testArgs = [{663        afterTouchTimeout: INKRIPPLE_MATERIAL_SHOW_TIMEOUT,664        afterSwipeTimeout: INKRIPPLE_MATERIAL_SHOW_TIMEOUT,665        result: 0,666        message: 'button has no inkRipple after short touch before swipe for Material theme',667    }, {668        afterTouchTimeout: INKRIPPLE_MATERIAL_SHOW_TIMEOUT * 1.2,669        afterSwipeTimeout: INKRIPPLE_MATERIAL_SHOW_TIMEOUT * 0.8,670        result: 1,671        message: 'button has inkRipple after long touch before swipe for Material theme',672    }];673    for(let i = 0; i < testArgs.length; i++) {674        args = testArgs[i];675        pointer.start('touch').down();676        clock.tick(args.afterTouchTimeout);677        pointer.start().swipeStart().swipe(-0.5).swipeEnd(-1);678        clock.tick(args.afterSwipeTimeout);679        inkRippleShowingWave = $item.find(toSelector(INKRIPPLE_WAVE_SHOWING_CLASS));680        assert.strictEqual(inkRippleShowingWave.length, args.result, args.message);681        pointer.start('touch').up();682        clock.tick(400);683    }684    clock.restore();685    themes.isMaterial = origIsMaterial;686    themes.current = origCurrent;687});688QUnit.test('inkRipple feedback should not be broken if swipe in opposite direction', function(assert) {689    const $list = $('#templated-list').dxList({690        items: ['0'],691        allowItemDeleting: true,692        itemDeleteMode: 'slideItem',693        useInkRipple: true694    });695    const $items = $list.find(toSelector(LIST_ITEM_CLASS));696    const $item = $items.eq(0);697    const clock = sinon.useFakeTimers();698    const pointer = pointerMock($item);699    pointer.start().swipeStart().swipe(0.01);700    clock.tick(50);701    pointer.start('touch').up();702    clock.tick(50);703    pointer.start('touch').down();704    clock.tick(100);705    const inkRippleShowingWave = $item.find(toSelector(INKRIPPLE_WAVE_SHOWING_CLASS));706    assert.strictEqual(inkRippleShowingWave.length, 1, 'inkripple feedback works right after swipe in opposite direction');707    pointer.start('touch').up();708    clock.restore();709});710QUnit.test('swipe should prepare item for delete in RTL mode', function(assert) {711    const $list = $('#templated-list').dxList({712        items: ['0'],713        rtlEnabled: true,714        allowItemDeleting: true,715        itemDeleteMode: 'slideItem'716    });717    const $items = $list.find(toSelector(LIST_ITEM_CLASS));718    const $item = $items.eq(0);719    const pointer = pointerMock($item);720    pointer.start().swipeStart().swipe(0.01);721    const $itemContent = $item.find(toSelector(SLIDE_MENU_CONTENT_CLASS));722    const $deleteButtonContainer = $item.find(toSelector(SLIDE_MENU_BUTTONS_CONTAINER_CLASS));723    const $deleteButton = $item.find(toSelector(SLIDE_MENU_BUTTONS_CLASS));724    assert.ok(position($itemContent) > 0, 'item moved');725    const containerPositionDifference = position($deleteButtonContainer);726    assert.ok(containerPositionDifference < 0 && containerPositionDifference > -$deleteButton.outerWidth(), 'button container moved');727    assert.ok(position($deleteButton) > 0 && position($deleteButton) < $deleteButton.outerWidth(), 'button moved');728    pointer.swipeEnd(1, 0.5);729    assert.roughEqual(position($itemContent), $deleteButton.outerWidth(), 0.251, 'item animated');730    assert.strictEqual(position($deleteButtonContainer), 0, 'button container animated');731    assert.strictEqual(position($deleteButton), 0, 'button animated');732    assert.ok($item.hasClass(SWITCHABLE_DELETE_READY_CLASS), 'item ready for delete');733    fx.off = false;734    pointer.start().swipeStart().swipe(-0.5).swipeEnd(-1);735    assert.strictEqual(position($itemContent), 0, 'item animated back');736    assert.roughEqual(position($deleteButtonContainer), -$deleteButton.outerWidth(), 0.251, 'button container animated back');737    assert.roughEqual(position($deleteButton), $deleteButton.outerWidth(), 0.251, 'button animated back');738});739QUnit.test('swipe should not move item lefter in RTL mode', function(assert) {740    const $list = $('#templated-list').dxList({741        items: ['0'],742        rtlEnabled: true,743        allowItemDeleting: true,744        itemDeleteMode: 'slideItem'745    });746    const $items = $list.find(toSelector(LIST_ITEM_CLASS));747    const $item = $items.eq(0);748    const $itemContent = $item.find(toSelector(SLIDE_MENU_CONTENT_CLASS));749    pointerMock($item).start().swipeStart().swipe(-0.5);750    assert.strictEqual(position($itemContent), 0, 'item not moved');751});752QUnit.test('multiple swipes should not break deletion', function(assert) {753    const origFxOff = fx.off;754    const clock = sinon.useFakeTimers();755    try {756        fx.off = false;757        const $list = $('#templated-list').dxList({758            items: ['0'],759            allowItemDeleting: true,760            itemDeleteMode: 'slideItem'761        });762        const $items = $list.find(toSelector(LIST_ITEM_CLASS));763        const $item = $items.eq(0);764        const pointer = pointerMock($item).start();765        pointer.swipeStart().swipe(-0.5).swipeEnd(-1);766        clock.tick(300);767        pointer.swipeStart().swipe(0.5).swipeEnd(1);768        clock.tick(200);769        pointer.swipeStart().swipe(-0.5);770        assert.ok($item.hasClass(SWITCHABLE_MENU_ITEM_SHIELD_POSITIONING_CLASS), 'positioning is turned on');771        pointer.swipeEnd(-1);772        clock.tick(300);773        const $deleteButtonContainer = $item.find(toSelector(SLIDE_MENU_BUTTONS_CONTAINER_CLASS));774        assert.ok($deleteButtonContainer.length, 'delete button present');775    } finally {776        fx.off = origFxOff;777        clock.restore();778    }779});780QUnit.test('optimizations', function(assert) {781    const origOuterWidth = renderer.fn.outerWidth;782    const outerWidthStub = sinon.stub();783    try {784        const $list = $('#templated-list').dxList({785            items: ['0'],786            allowItemDeleting: true,787            itemDeleteMode: 'slideItem'788        });789        const $items = $list.find(toSelector(LIST_ITEM_CLASS));790        const $item = $items.eq(0);791        const pointer = pointerMock($item);792        renderer.fn.outerWidth = function() {793            outerWidthStub();794            return origOuterWidth.apply(this, arguments);795        };796        pointer.start().swipeStart().swipe(0.5).swipeEnd(1);797        pointer.start().swipeStart().swipe(0.5).swipeEnd(1);798    } finally {799        assert.strictEqual(outerWidthStub.callCount, 2, 'outerWidth should be calculated only once for item and button');800        renderer.fn.outerWidth = origOuterWidth;801    }802});803QUnit.module('slide menu decorator', {804    beforeEach: function() {805        fx.off = true;806    },807    afterEach: function() {808        fx.off = false;809    }810});811QUnit.test('list item markup', function(assert) {812    const $list = $('#templated-list').dxList({813        items: ['0'],814        menuMode: 'slide',815        menuItems: [{ text: 'menu' }, { text: 'menu' }]816    });817    const $items = $list.find(toSelector(LIST_ITEM_CLASS));818    const $item = $items.eq(0);819    const pointer = pointerMock($item);820    const deleteButtonContent = () => {821        return $item822            .children(toSelector(SLIDE_MENU_BUTTONS_CONTAINER_CLASS))823            .children(toSelector(SLIDE_MENU_BUTTONS_CLASS))824            .children(toSelector(SLIDE_MENU_BUTTON_CLASS));825    };826    pointer.start().swipeStart().swipe(-0.5).swipeEnd(-1, -0.5);827    assert.strictEqual(deleteButtonContent().length, 1, 'menu button was generated');828    assert.ok(deleteButtonContent().hasClass(SLIDE_MENU_BUTTON_MENU_CLASS), 'menu button has correct class');829    assert.strictEqual(deleteButtonContent().text(), 'More', 'menu button text is correct');830});831QUnit.test('list item markup with one button', function(assert) {832    const $list = $('#templated-list').dxList({833        items: ['0'],834        menuMode: 'slide',835        menuItems: [{ text: 'menu' }]836    });837    const $items = $list.find(toSelector(LIST_ITEM_CLASS));838    const $item = $items.eq(0);839    const pointer = pointerMock($item);840    const deleteButtonContent = () => {841        return $item842            .children(toSelector(SLIDE_MENU_BUTTONS_CONTAINER_CLASS))843            .children(toSelector(SLIDE_MENU_BUTTONS_CLASS))844            .children(toSelector(SLIDE_MENU_BUTTON_CLASS));845    };846    pointer.start().swipeStart().swipe(-0.5).swipeEnd(-1, -0.5);847    assert.strictEqual(deleteButtonContent().length, 1, 'menu button was generated');848    assert.ok(deleteButtonContent().hasClass(SLIDE_MENU_BUTTON_MENU_CLASS), 'menu button has correct class');849    assert.strictEqual(deleteButtonContent().text(), 'menu', 'menu button text is correct');850});851QUnit.test('click on menu item should open menu', function(assert) {852    const $list = $('#templated-list').dxList({853        items: ['0'],854        menuMode: 'slide',855        menuItems: [{ text: 'menu' }, { text: 'menu' }]856    });857    const $items = $list.find(toSelector(LIST_ITEM_CLASS));858    const $item = $items.eq(0);859    const pointer = pointerMock($item);860    const deleteButtonContent = () => {861        return $item862            .children(toSelector(SLIDE_MENU_BUTTONS_CONTAINER_CLASS))863            .children(toSelector(SLIDE_MENU_BUTTONS_CLASS))864            .children(toSelector(SLIDE_MENU_BUTTON_CLASS));865    };866    pointer.start().swipeStart().swipe(-0.5).swipeEnd(-1, -0.5);867    deleteButtonContent().trigger('dxclick');868    const $menu = $list.find(toSelector(SLIDE_MENU_CLASS));869    const menu = $menu.dxActionSheet('instance');870    const $menuItems = $(menu.itemElements());871    assert.strictEqual($menuItems.length, 2, 'menu items was rendered');872    assert.strictEqual(menu.option('visible'), true, 'menu is shown');873    assert.strictEqual($menuItems.text(), 'menumenu', 'menu text is correct');874});875QUnit.test('click on menu toggle should not turn off ready to delete', function(assert) {876    const $list = $('#templated-list').dxList({877        items: ['0'],878        menuMode: 'slide',879        menuItems: [{ text: 'menu' }, { text: 'menu' }]880    });881    const $items = $list.find(toSelector(LIST_ITEM_CLASS));882    const $item = $items.eq(0);883    const pointer = pointerMock($item);884    const deleteButtonContent = () => {885        return $item886            .children(toSelector(SLIDE_MENU_BUTTONS_CONTAINER_CLASS))887            .children(toSelector(SLIDE_MENU_BUTTONS_CLASS))888            .children(toSelector(SLIDE_MENU_BUTTON_CLASS));889    };890    pointer.start().swipeStart().swipe(-0.5).swipeEnd(-1, -0.5);891    deleteButtonContent().trigger('dxclick');892    assert.strictEqual(deleteButtonContent().length, 1, 'ready to delete mode is enabled');893});894QUnit.test('menu item action should be fired after item click', function(assert) {895    assert.expect(2);896    const $list = $('#templated-list').dxList({897        items: ['0'],898        menuMode: 'slide',899        menuItems: [900            {901                text: 'menu',902                action: (e) => {903                    assert.strictEqual($(e.itemElement).get(0), $item.get(0));904                }905            },906            {907                text: 'menu'908            }909        ]910    });911    const $items = $list.find(toSelector(LIST_ITEM_CLASS));912    const $item = $items.eq(0);913    const pointer = pointerMock($item);914    const deleteButtonContent = () => {915        return $item916            .children(toSelector(SLIDE_MENU_BUTTONS_CONTAINER_CLASS))917            .children(toSelector(SLIDE_MENU_BUTTONS_CLASS))918            .children(toSelector(SLIDE_MENU_BUTTON_CLASS));919    };920    pointer.start().swipeStart().swipe(-0.5).swipeEnd(-1, -0.5);921    deleteButtonContent().trigger('dxclick');922    const $menu = $list.find(toSelector(SLIDE_MENU_CLASS));923    const menu = $menu.dxActionSheet('instance');924    const $menuItems = $(menu.itemElements());925    $menuItems.eq(0).trigger('dxclick');926    assert.strictEqual(deleteButtonContent().length, 0, 'ready to delete mode is disabled');927});928QUnit.test('menu item action should be fired after item click', function(assert) {929    assert.expect(3);930    const $list = $('#templated-list').dxList({931        items: ['0'],932        menuMode: 'slide',933        menuItems: [934            {935                text: 'menu',936                action: (e) => {937                    assert.strictEqual(isRenderer(e.itemElement), !!config().useJQuery, 'itemElement is correct');938                    assert.strictEqual($(e.itemElement).get(0), $item.get(0));939                }940            }941        ]942    });943    const $items = $list.find(toSelector(LIST_ITEM_CLASS));944    const $item = $items.eq(0);945    const pointer = pointerMock($item);946    const deleteButtonContent = () => {947        return $item948            .children(toSelector(SLIDE_MENU_BUTTONS_CONTAINER_CLASS))949            .children(toSelector(SLIDE_MENU_BUTTONS_CLASS))950            .children(toSelector(SLIDE_MENU_BUTTON_CLASS));951    };952    pointer.start().swipeStart().swipe(-0.5).swipeEnd(-1, -0.5);953    deleteButtonContent().trigger('dxclick');954    assert.strictEqual(deleteButtonContent().length, 0, 'ready to delete mode is disabled');955});956QUnit.test('click on menu toggle should cause item click event', function(assert) {957    const origFxOff = fx.off;958    const clickHandledStub = sinon.stub();959    try {960        const $list = $('#templated-list').dxList({961            items: ['0'],962            menuMode: 'slide',963            menuItems: [964                {965                    text: 'menu',966                    action: () => {}967                }968            ],969            onItemClick: clickHandledStub970        });971        const $items = $list.find(toSelector(LIST_ITEM_CLASS));972        const $item = $items.eq(0);973        const pointer = pointerMock($item);974        const deleteButtonContent = () => {975            return $item976                .children(toSelector(SLIDE_MENU_BUTTONS_CONTAINER_CLASS))977                .children(toSelector(SLIDE_MENU_BUTTONS_CLASS))978                .children(toSelector(SLIDE_MENU_BUTTON_CLASS));979        };980        pointer.start().swipeStart().swipe(-0.5).swipeEnd(-1, -0.5);981        fx.off = false;982        deleteButtonContent().trigger('dxclick');983        assert.strictEqual(clickHandledStub.callCount, 0, 'click on item not fired');984    } finally {985        fx.off = origFxOff;986    }987});988QUnit.test('click on menu toggle should cause item click event if at least 2 menu items present', function(assert) {989    const origFxOff = fx.off;990    const clickHandledStub = sinon.stub();991    try {992        const $list = $('#templated-list').dxList({993            items: ['0'],994            menuMode: 'slide',995            menuItems: [996                {997                    text: 'menu'998                },999                {1000                    text: 'menu'1001                }1002            ],1003            onItemClick: clickHandledStub1004        });1005        const $items = $list.find(toSelector(LIST_ITEM_CLASS));1006        const $item = $items.eq(0);1007        const pointer = pointerMock($item);1008        const deleteButtonContent = () => {1009            return $item1010                .children(toSelector(SLIDE_MENU_BUTTONS_CONTAINER_CLASS))1011                .children(toSelector(SLIDE_MENU_BUTTONS_CLASS))1012                .children(toSelector(SLIDE_MENU_BUTTON_CLASS));1013        };1014        pointer.start().swipeStart().swipe(-0.5).swipeEnd(-1, -0.5);1015        fx.off = false;1016        deleteButtonContent().trigger('dxclick');1017        assert.strictEqual(clickHandledStub.callCount, 0, 'click on item not fired');1018    } finally {1019        fx.off = origFxOff;1020    }1021});1022QUnit.module('swipe delete decorator', {1023    beforeEach: function() {1024        fx.off = true;1025    },1026    afterEach: function() {1027        fx.off = false;1028    }1029});1030QUnit.test('delete item by swipe gesture', function(assert) {1031    const $list = $('#templated-list').dxList({1032        items: [0, 1, 2],1033        allowItemDeleting: true,1034        itemDeleteMode: 'swipe'1035    });1036    const list = $list.dxList('instance');1037    const $item = $(list.itemElements()).eq(0);1038    const pointer = pointerMock($item);1039    list.deleteItem = ($itemElement) => {1040        assert.strictEqual($itemElement.get(0), $item.get(0), 'item is deleted');1041        return $.Deferred().resolve().promise();1042    };1043    pointer.start().swipeStart().swipe(0.5).swipeEnd(1);1044});1045QUnit.test('item should be at normal position if confirmation not passed', function(assert) {1046    const $list = $('#templated-list').dxList({1047        items: [0, 1, 2],1048        allowItemDeleting: true,1049        itemDeleteMode: 'swipe'1050    });1051    const list = $list.dxList('instance');1052    const $item = $(list.itemElements()).eq(0);1053    const pointer = pointerMock($item);1054    list.deleteItem = ($itemElement) => {1055        return $.Deferred().reject();1056    };1057    pointer.start().swipeStart().swipe(0.5).swipeEnd(1);1058    assert.strictEqual(position($item), 0, 'position returned');1059});1060QUnit.test('swipe should not delete item if widget is disabled', function(assert) {1061    const $list = $('#templated-list').dxList({1062        items: [0, 1, 2],1063        disabled: true,1064        allowItemDeleting: true,1065        itemDeleteMode: 'swipe'1066    });1067    const list = $list.dxList('instance');1068    const $item = $(list.itemElements()).eq(0);1069    const startEvent = pointerMock($item).start().swipeStart().lastEvent();1070    assert.ok(startEvent.cancel, 'swipe canceled');1071});1072const CONTEXTMENU_CLASS = 'dx-list-context-menu';1073const CONTEXTMENU_MENUCONTENT_CLASS = 'dx-list-context-menucontent';1074const CONTEXTMENU_MENUITEM = LIST_ITEM_CLASS;1075QUnit.module('context delete decorator', {1076    beforeEach: function() {1077        fx.off = true;1078    },1079    afterEach: function() {1080        fx.off = false;1081    }1082});1083QUnit.test('overlay content markup', function(assert) {1084    const $list = $('#templated-list').dxList({1085        items: [0, 1, 2],1086        allowItemDeleting: true,1087        itemDeleteMode: 'context'1088    });1089    const list = $list.dxList('instance');1090    $(list.itemElements()).eq(0).trigger('dxcontextmenu');1091    const $menu = $list.find(toSelector(CONTEXTMENU_CLASS));1092    const menu = $menu.dxOverlay('instance');1093    const $deleteMenuItem = $(menu.content()).find(toSelector(CONTEXTMENU_MENUITEM));1094    assert.ok($deleteMenuItem.length, 'delete menu item generated');1095    assert.strictEqual($deleteMenuItem.text(), 'Delete', 'delete menu item text set');1096});1097QUnit.test('item should be deleted from menu', function(assert) {1098    const $list = $('#templated-list').dxList({1099        items: [0, 1, 2],1100        editEnabled: true,1101        allowItemDeleting: true,1102        itemDeleteMode: 'context'1103    });1104    const list = $list.dxList('instance');1105    $(list.itemElements()).eq(0).trigger('dxcontextmenu');1106    const $menu = $list.find(toSelector(CONTEXTMENU_CLASS));1107    const menu = $menu.dxOverlay('instance');1108    const $deleteMenuItem = $(menu.content()).find(toSelector(CONTEXTMENU_MENUITEM));1109    list.deleteItem = ($itemElement) => {1110        assert.ok(true, 'item is deleted');1111        return $.Deferred().resolve().promise();1112    };1113    $deleteMenuItem.trigger('dxclick');1114});1115QUnit.module('context menu decorator', {1116    beforeEach: function() {1117        fx.off = true;1118    },1119    afterEach: function() {1120        fx.off = false;1121    }1122});1123QUnit.test('menu content markup', function(assert) {1124    const $list = $('#templated-list').dxList({1125        items: [0, 1, 2],1126        menuMode: 'context',1127        menuItems: [{ text: 'menu' }]1128    });1129    const list = $list.dxList('instance');1130    $(list.itemElements()).eq(0).trigger('dxcontextmenu');1131    const $menu = $list.find(toSelector(CONTEXTMENU_CLASS));1132    const menu = $menu.dxOverlay('instance');1133    const $menuContent = $(menu.content());1134    const $contextMenuItem = $menuContent.find(toSelector(CONTEXTMENU_MENUITEM));1135    assert.ok($menuContent.hasClass(CONTEXTMENU_MENUCONTENT_CLASS), 'menu content class set');1136    assert.strictEqual($contextMenuItem.length, 1, 'context menu item generated');1137    assert.strictEqual($contextMenuItem.text(), 'menu', 'context menu item text set');1138});1139QUnit.test('delete button should be rendered in menu if delete enabled', function(assert) {1140    const $list = $('#templated-list').dxList({1141        items: [0, 1, 2],1142        allowItemDeleting: true,1143        menuMode: 'context',1144        menuItems: [{ text: 'menu' }]1145    });1146    const list = $list.dxList('instance');1147    $(list.itemElements()).eq(0).trigger('dxcontextmenu');1148    const $menu = $list.find(toSelector(CONTEXTMENU_CLASS));1149    const menu = $menu.dxOverlay('instance');1150    const $menuContent = $(menu.content());1151    const $contextMenuItems = $menuContent.find(toSelector(CONTEXTMENU_MENUITEM));1152    assert.strictEqual($contextMenuItems.length, 2, 'context menu item and delete item menu generated');1153    assert.strictEqual($contextMenuItems.eq(1).text(), 'Delete', 'delete item text set');1154});1155QUnit.test('item hold should open overlay', function(assert) {1156    assert.expect(1);1157    const $list = $('#templated-list').dxList({1158        items: [0, 1, 2],1159        allowItemDeleting: true,1160        itemDeleteMode: 'context'1161    });1162    const list = $list.dxList('instance');1163    $(list.itemElements()).eq(0).trigger('dxcontextmenu');1164    const $items = $list.find(toSelector(LIST_ITEM_CLASS));1165    const $item = $items.eq(0);1166    const $menu = $list.find(toSelector(CONTEXTMENU_CLASS));1167    const menu = $menu.dxOverlay('instance');1168    $item.trigger(contextMenuEvent.name);1169    assert.ok(menu.option('visible'), 'overlay shown');1170});1171QUnit.test('item hold should not open overlay if editing disabled', function(assert) {1172    assert.expect(1);1173    const $list = $('#templated-list').dxList({1174        items: [0, 1, 2],1175        allowItemDeleting: true,1176        itemDeleteMode: 'context'1177    });1178    const list = $list.dxList('instance');1179    list.option('allowItemDeleting', false);1180    const $menu = list.$element().find(toSelector(CONTEXTMENU_CLASS));1181    assert.ok(!$menu.length, 'overlay won\'t created');1182});1183QUnit.test('item hold should not open overlay if widget is disabled', function(assert) {1184    const $list = $('#templated-list').dxList({1185        items: [0, 1, 2],1186        disabled: true,1187        allowItemDeleting: true,1188        itemDeleteMode: 'context'1189    });1190    const list = $list.dxList('instance');1191    $(list.itemElements()).eq(0).trigger('dxcontextmenu');1192    const $items = $list.find(toSelector(LIST_ITEM_CLASS));1193    const $item = $items.eq(0);1194    const $menu = list.$element().find(toSelector(CONTEXTMENU_CLASS));1195    const menu = $menu.dxOverlay('instance');1196    $item.trigger(contextMenuEvent.name);1197    assert.ok(!menu.option('visible'), 'overlay shown');1198});1199QUnit.test('menu item click action should be fired with correct arguments', function(assert) {1200    const $list = $('#templated-list').dxList({1201        items: [0, 1, 2],1202        menuMode: 'context',1203        menuItems: [1204            {1205                text: 'menu',1206                action: (e) => {1207                    assert.strictEqual($(e.itemElement).get(0), $item.get(0), 'itemElement is correct');1208                }1209            }1210        ]1211    });1212    const list = $list.dxList('instance');1213    $(list.itemElements()).eq(0).trigger('dxcontextmenu');1214    const $items = $list.find(toSelector(LIST_ITEM_CLASS));1215    const $item = $items.eq(0);1216    const $menu = $list.find(toSelector(CONTEXTMENU_CLASS));1217    const menu = $menu.dxOverlay('instance');1218    const $menuContent = $(menu.content());1219    const $menuItem = $menuContent.find(toSelector(CONTEXTMENU_MENUITEM));1220    $item.trigger(contextMenuEvent.name);1221    $menuItem.trigger('dxclick');1222});1223QUnit.test('delete menu item click should remove item and hide overlay', function(assert) {1224    assert.expect(3);1225    const $list = $('#templated-list').dxList({1226        items: [0, 1, 2],1227        allowItemDeleting: true,1228        itemDeleteMode: 'context',1229        onItemHold: () => {1230            assert.ok(false, 'item hold action fired');1231        }1232    });1233    const list = $list.dxList('instance');1234    $(list.itemElements()).eq(0).trigger('dxcontextmenu');1235    list.deleteItem = (itemElement) => {1236        assert.ok(true, 'delete action executed');1237        assert.ok($(itemElement).hasClass(LIST_ITEM_CLASS));1238    };1239    const $items = $list.find(toSelector(LIST_ITEM_CLASS));1240    const $item = $items.eq(0);1241    const $menu = list.$element().find(toSelector(CONTEXTMENU_CLASS));1242    const menu = $menu.dxOverlay('instance');1243    const $menuContent = $(menu.content());1244    const $deleteMenuItem = $menuContent.find(toSelector(CONTEXTMENU_MENUITEM));1245    $item.trigger(contextMenuEvent.name);1246    $deleteMenuItem.trigger('dxclick');1247    assert.ok(!menu.option('visible'), 'overlay shown');1248});1249QUnit.test('menu should be closed after click', function(assert) {1250    const $list = $('#templated-list').dxList({1251        items: [0, 1, 2],1252        menuMode: 'context',1253        menuItems: [{ text: 'menu' }]1254    });1255    const list = $list.dxList('instance');1256    $(list.itemElements()).eq(0).trigger('dxcontextmenu');1257    const $items = $list.find(toSelector(LIST_ITEM_CLASS));1258    const $item = $items.eq(0);1259    const $menu = $list.find(toSelector(CONTEXTMENU_CLASS));1260    const menu = $menu.dxOverlay('instance');1261    const $menuContent = $(menu.content());1262    const $menuItem = $menuContent.find(toSelector(CONTEXTMENU_MENUITEM));1263    $item.trigger(contextMenuEvent.name);1264    $menuItem.trigger('dxclick');1265    assert.ok(!menu.option('visible'), 'menu hidden');1266});1267QUnit.test('onItemHold should not be fired if context menu was opened by hold', function(assert) {1268    assert.expect(0);1269    const $list = $('#templated-list').dxList({1270        items: [0, 1, 2],1271        allowItemDeleting: true,1272        itemDeleteMode: 'context',1273        onItemHold: () => {1274            assert.ok(false);1275        }1276    });1277    const $items = $list.find(toSelector(LIST_ITEM_CLASS));1278    const $item = $items.eq(0);1279    $item.trigger({1280        type: holdEvent.name,1281        pointerType: 'touch'1282    });1283});1284QUnit.test('onItemHold should not be fired if context menu was not opened by hold', function(assert) {1285    const $list = $('#templated-list').dxList({1286        items: [0, 1, 2],1287        allowItemDeleting: true,1288        itemDeleteMode: 'context',1289        onItemHold: () => {1290            assert.ok(true);1291        }1292    });1293    const $items = $list.find(toSelector(LIST_ITEM_CLASS));1294    const $item = $items.eq(0);1295    $item.trigger({1296        type: holdEvent.name,1297        pointerType: 'mouse'1298    });1299});1300QUnit.test('rtlEnabled option should be passed to overlay', function(assert) {1301    assert.expect(1);1302    const $list = $('#list').dxList({1303        items: [0, 1, 2],1304        allowItemDeleting: true,1305        itemDeleteMode: 'context',1306        rtlEnabled: true1307    });1308    const menu = $list.find(toSelector(CONTEXTMENU_CLASS)).dxOverlay('instance');1309    assert.ok(menu.option('rtlEnabled'), 'rtl option is true');1310});1311QUnit.module('item select decorator');1312const SELECT_DECORATOR_ENABLED_CLASS = 'dx-list-select-decorator-enabled';1313const SELECT_CHECKBOX_CLASS = 'dx-list-select-checkbox';1314QUnit.test('selection control has focusStateEnabled = false and hoverStateEnabled = false', function(assert) {1315    const $list = $('#templated-list').dxList({1316        items: ['0'],1317        showSelectionControls: true,1318        selectionMode: 'multiple'1319    });1320    const $items = $list.find(toSelector(LIST_ITEM_CLASS));1321    const $item = $items.eq(0);1322    const $checkboxContainer = $item.children(toSelector(LIST_ITEM_BEFORE_BAG_CLASS));1323    const checkbox = $checkboxContainer.children(toSelector(SELECT_CHECKBOX_CLASS)).dxCheckBox('instance');1324    assert.ok(!checkbox.option('focusStateEnabled'), 'focused state is turned off for the control');1325    assert.ok(!checkbox.option('hoverStateEnabled'), 'hover state is turned off for the control');1326});1327QUnit.test('checkbox click should trigger select callback only once with correct itemData', function(assert) {1328    assert.expect(1);1329    const item = '0';1330    const $list = $('#templated-list').dxList({1331        items: [item],1332        showSelectionControls: true,1333        selectionMode: 'multiple'1334    });1335    const list = $list.dxList('instance');1336    list.selectItem = () => {1337        assert.ok(true, 'item selected');1338    };1339    const $checkbox = $list.find(toSelector(LIST_ITEM_CLASS)).eq(0).find(toSelector(SELECT_CHECKBOX_CLASS));1340    $checkbox.trigger('dxclick');1341});1342QUnit.test('checkbox click should trigger unselect callback only once with correct itemData', function(assert) {1343    assert.expect(1);1344    const item = '0';1345    const $list = $('#templated-list').dxList({1346        items: [item],1347        showSelectionControls: true,1348        selectionMode: 'multiple'1349    });1350    const list = $list.dxList('instance');1351    list.unselectItem = () => {1352        assert.ok(true, 'item unselected');1353    };1354    const $checkbox = $list.find(toSelector(LIST_ITEM_CLASS)).eq(0).find(toSelector(SELECT_CHECKBOX_CLASS));1355    $checkbox.trigger('dxclick');1356    $checkbox.trigger('dxclick');1357});1358QUnit.test('rendering if selecting is disabled', function(assert) {1359    const $list = $('#templated-list').dxList({1360        items: ['0'],1361        showSelectionControls: true,1362        selectionMode: 'none'1363    });1364    const $items = $list.find(toSelector(LIST_ITEM_CLASS));1365    const $item = $items.eq(0);1366    const $checkbox = $item.children(toSelector(LIST_ITEM_BEFORE_BAG_CLASS)).children(toSelector(SELECT_CHECKBOX_CLASS));1367    assert.strictEqual($checkbox.hasClass('dx-checkbox'), false, 'select not generated');1368});1369QUnit.test('checkbox should be refreshed with correct state', function(assert) {1370    assert.expect(1);1371    const $list = $('#templated-list').dxList({1372        items: ['0'],1373        showSelectionControls: true,1374        selectionMode: 'multiple'1375    });1376    const list = $list.dxList('instance');1377    const checkbox = () => {1378        return $list.find(toSelector(LIST_ITEM_CLASS)).eq(0).find(toSelector(SELECT_CHECKBOX_CLASS));1379    };1380    checkbox().trigger('dxclick');1381    list._refresh();1382    assert.strictEqual(checkbox().dxCheckBox('instance').option('value'), true, 'checkbox regenerated successfully');1383});1384QUnit.test('checkbox should be refreshed when selectItem is called on it', function(assert) {1385    const $list = $('#templated-list').dxList({1386        items: ['0'],1387        showSelectionControls: true,1388        selectionMode: 'multiple'1389    });1390    const list = $list.dxList('instance');1391    const item = () => {1392        return $list.find(toSelector(LIST_ITEM_CLASS)).eq(0);1393    };1394    const checkbox = () => {1395        return item().find(toSelector(SELECT_CHECKBOX_CLASS));1396    };1397    list.selectItem(item());1398    assert.strictEqual(checkbox().dxCheckBox('instance').option('value'), true, 'checkbox regenerated successfully');1399});1400QUnit.test('checkbox should be refreshed when unselectItem is called on it', function(assert) {1401    const $list = $('#templated-list').dxList({1402        items: ['0'],1403        showSelectionControls: true,1404        selectionMode: 'multiple'1405    });1406    const list = $list.dxList('instance');1407    const item = () => {1408        return $list.find(toSelector(LIST_ITEM_CLASS)).eq(0);1409    };1410    const checkbox = () => {1411        return item().find(toSelector(SELECT_CHECKBOX_CLASS));1412    };1413    checkbox().trigger('dxclick');1414    list.unselectItem(item());1415    assert.strictEqual(checkbox().dxCheckBox('instance').option('value'), false, 'checkbox regenerated successfully');1416});1417QUnit.test('selection enabled class should be added when needed', function(assert) {1418    const $list = $('#templated-list').dxList({1419        items: ['0'],1420        showSelectionControls: true,1421        selectionMode: 'multiple'1422    });1423    const list = $list.dxList('instance');1424    assert.ok($list.hasClass(SELECT_DECORATOR_ENABLED_CLASS), 'class added');1425    list.option('showSelectionControls', false);1426    assert.ok(!$list.hasClass(SELECT_DECORATOR_ENABLED_CLASS), 'class removed');1427});1428QUnit.test('item click changes checkbox state', function(assert) {1429    const $list = $('#templated-list').dxList({1430        items: ['0'],1431        showSelectionControls: true,1432        selectionMode: 'multiple'1433    });1434    const $items = $list.find(toSelector(LIST_ITEM_CLASS));1435    const $item = $items.eq(0);1436    $item.trigger('dxclick');1437    const checkbox = $item.children(toSelector(LIST_ITEM_BEFORE_BAG_CLASS)).children(toSelector(SELECT_CHECKBOX_CLASS)).dxCheckBox('instance');1438    assert.strictEqual(checkbox.option('value'), true, 'state changed');1439});1440QUnit.test('item click should trigger select/unselect callback only once', function(assert) {1441    const item = '0';1442    const selectActionStub = sinon.stub();1443    const unselectActionStub = sinon.stub();1444    const $list = $('#templated-list').dxList({1445        items: [item],1446        showSelectionControls: true,1447        selectionMode: 'multiple',1448        onSelectionChanged: (args) => {1449            if(args.addedItems.length) {1450                selectActionStub();1451            }1452            if(args.removedItems.length) {1453                unselectActionStub();1454            }1455        }1456    });1457    const $items = $list.find(toSelector(LIST_ITEM_CLASS));1458    const $item = $items.eq(0);1459    $item.trigger('dxclick');1460    $item.trigger('dxclick');1461    assert.strictEqual(selectActionStub.callCount, 1, 'selection triggered');1462    assert.strictEqual(unselectActionStub.callCount, 1, 'unselected triggered');1463});1464QUnit.test('click on checkbox should trigger events only once', function(assert) {1465    const item = '0';1466    const selectActionStub = sinon.stub();1467    const unselectActionStub = sinon.stub();1468    const $list = $('#templated-list').dxList({1469        items: [item],1470        showSelectionControls: true,1471        selectionMode: 'multiple',1472        onSelectionChanged: (args) => {1473            if(args.addedItems.length) {1474                selectActionStub();1475            }1476            if(args.addedItems.length) {1477                unselectActionStub();1478            }1479        }1480    });1481    const $items = $list.find(toSelector(LIST_ITEM_CLASS));1482    const $item = $items.eq(0);1483    const $checkbox = $item.find(toSelector(SELECT_CHECKBOX_CLASS));1484    $checkbox.trigger('dxclick');1485    $checkbox.trigger('dxclick');1486    assert.strictEqual(selectActionStub.callCount, 1, 'selected triggered');1487    assert.strictEqual(unselectActionStub.callCount, 1, 'unselected triggered');1488});1489QUnit.test('click on item should not change selected state if widget is disabled', function(assert) {1490    const $list = $('#templated-list').dxList({1491        disabled: true,1492        items: ['0'],1493        showSelectionControls: true,1494        selectionMode: 'multiple'1495    });1496    const list = $('#templated-list').dxList('instance');1497    const $items = $list.find(toSelector(LIST_ITEM_CLASS));1498    const $item = $items.eq(0);1499    $item.trigger('dxclick');1500    assert.strictEqual(list.option('selectedItems').length, 0, 'item is not selected');1501});1502QUnit.test('click on delete toggle should not change selected state', function(assert) {1503    const $list = $('#templated-list').dxList({1504        items: ['0'],1505        allowItemDeleting: true,1506        itemDeleteMode: 'toggle',1507        showSelectionControls: true,1508        selectionMode: 'multiple'1509    });1510    const $items = $list.find(toSelector(LIST_ITEM_CLASS));1511    const $item = $items.eq(0);1512    const checkbox = $item.children(toSelector(LIST_ITEM_BEFORE_BAG_CLASS)).children(toSelector(SELECT_CHECKBOX_CLASS)).dxCheckBox('instance');1513    $item.find(toSelector(TOGGLE_DELETE_SWITCH_CLASS)).trigger('dxpointerup');1514    assert.strictEqual(checkbox.option('value'), false, 'click action is not pass to item');1515    $item.find(toSelector(TOGGLE_DELETE_SWITCH_CLASS)).trigger('dxpointerup');1516    assert.strictEqual(checkbox.option('value'), false, 'click action is not pass to item');1517});1518QUnit.test('click on item ready to delete with toggle mode should not change selected state', function(assert) {1519    const $list = $('#templated-list').dxList({1520        items: ['0', '1'],1521        allowItemDeleting: true,1522        itemDeleteMode: 'toggle',1523        showSelectionControls: true,1524        selectionMode: 'multiple'1525    });1526    const $items = $list.find(toSelector(LIST_ITEM_CLASS));1527    const $item = $items.eq(0);1528    const $item1 = $items.eq(1);1529    const checkbox = $item.find(toSelector(SELECT_CHECKBOX_CLASS)).dxCheckBox('instance');1530    $item.find(toSelector(TOGGLE_DELETE_SWITCH_CLASS)).trigger('dxpointerup');1531    $item.find($item).trigger('dxclick');1532    assert.strictEqual(checkbox.option('value'), false, 'click action is not pass to item');1533    $item.find(toSelector(TOGGLE_DELETE_SWITCH_CLASS)).trigger('dxpointerup');1534    $item.find($item1).trigger('dxclick');1535    assert.strictEqual(checkbox.option('value'), false, 'click action is not pass to item');1536});1537QUnit.test('click on item ready to delete with slideButton mode should not change selected state', function(assert) {1538    const $list = $('#templated-list').dxList({1539        items: ['0', '1'],1540        allowItemDeleting: true,1541        itemDeleteMode: 'slideButton',1542        showSelectionControls: true,1543        selectionMode: 'multiple'1544    });1545    const $items = $list.find(toSelector(LIST_ITEM_CLASS));1546    const $item = $items.eq(0);1547    const $item1 = $items.eq(1);1548    const checkbox = $item.find(toSelector(SELECT_CHECKBOX_CLASS)).dxCheckBox('instance');1549    const pointer = pointerMock($item);1550    pointer.start().swipeStart().swipe(0.5).swipeEnd(1);1551    $item.find($item).trigger('click');1552    assert.strictEqual(checkbox.option('value'), false, 'click action is not pass to item');1553    pointer.start().swipeStart().swipe(0.5).swipeEnd(1);1554    $item.find($item1).trigger('dxclick');1555    assert.strictEqual(checkbox.option('value'), false, 'click action is not pass to item');1556});1557QUnit.test('item click event should be fired if selectionControls is enabled', function(assert) {1558    const itemClickHandler = sinon.spy();1559    const $list = $('#templated-list').dxList({1560        items: ['0'],1561        showSelectionControls: true,1562        selectionMode: 'all',1563        onItemClick: itemClickHandler1564    });1565    const $items = $list.find(toSelector(LIST_ITEM_CLASS));1566    const $item = $items.eq(0);1567    $item.trigger('dxclick');1568    assert.strictEqual(itemClickHandler.callCount, 1, 'handler was called once');1569});1570QUnit.test('grouped list with dataSource and store key specified should select items correctly', function(assert) {1571    const $list = $('#templated-list').dxList({1572        dataSource: new DataSource({1573            store: new ArrayStore({1574                data: [1575                    { id: 0, text: 'Item 1', cId: 1 },1576                    { id: 1, text: 'Item 2', cId: 1 },1577                    { id: 2, text: 'Item 3', cId: 2 },1578                    { id: 3, text: 'Item 4', cId: 2 }1579                ],1580                key: 'id'1581            }),1582            group: 'cId'1583        }),1584        selectionMode: 'multiple',1585        grouped: true,1586        showSelectionControls: true1587    });1588    const $items = $list.find(toSelector(LIST_ITEM_CLASS));1589    const $item = $items.eq(0);1590    $item.trigger('dxclick');1591    assert.ok($item.hasClass('dx-list-item-selected'), 'item is selected');1592});1593QUnit.module('selectAll for all pages');1594QUnit.test('next loaded page should be selected when selectAll is enabled', function(assert) {1595    const ds = new DataSource({1596        store: [1, 2, 3, 4, 5, 6],1597        pageSize: 2,1598        paginate: true1599    });1600    const $list = $('#list').dxList({1601        dataSource: ds,1602        showSelectionControls: true,1603        selectionMode: 'all',1604        pageLoadMode: 'nextButton',1605        selectAllMode: 'allPages'1606    });1607    const $selectAll = $list.find('.dx-list-select-all .dx-checkbox');1608    const $moreButton = $list.find('.dx-list-next-button > .dx-button').eq(0);1609    $selectAll.trigger('dxclick');1610    $moreButton.trigger('dxclick');1611    assert.strictEqual($selectAll.dxCheckBox('option', 'value'), true, 'selectAll checkbox is in selected state');1612    assert.strictEqual($list.dxList('option', 'selectedItems').length, 6, 'all items are selected');1613    assert.strictEqual($list.find('.dx-list-item-selected').length, 4, 'all items has selected class');1614});1615QUnit.test('selectAll should have active state', function(assert) {1616    const clock = sinon.useFakeTimers();1617    const $list = $('#list').dxList({1618        dataSource: new DataSource({1619            store: [1, 2, 3, 4, 5, 6],1620        }),1621        showSelectionControls: true,1622        selectionMode: 'all',1623        selectAllMode: 'allPages'1624    });1625    const $selectAll = $list.find('.dx-list-select-all');1626    const pointer = pointerMock($selectAll);1627    pointer.start('touch').down();1628    clock.tick(100);1629    assert.ok($selectAll.hasClass('dx-state-active'), 'selectAll has active state');1630    clock.restore();1631});1632QUnit.test('selectAll should not select items if they are not in current filter', function(assert) {1633    const ds = new DataSource({1634        store: [1635            { id: 0, text: 'Item 1' },1636            { id: 1, text: 'Item 2' },1637            { id: 2, text: 'Item 3' }1638        ],1639        key: 'id',1640        selectAllMode: 'allPages',1641        filter: ['id', 1]1642    });1643    const $list = $('#list').dxList({1644        dataSource: ds,1645        showSelectionControls: true,1646        selectionMode: 'all',1647        selectAllMode: 'allPages'1648    });1649    const $selectAll = $list.find('.dx-list-select-all .dx-checkbox');1650    $selectAll.trigger('dxclick');1651    assert.strictEqual($selectAll.dxCheckBox('option', 'value'), true, 'selectAll sheckbox is in selected state');1652    assert.strictEqual($list.dxList('option', 'selectedItems').length, 1, 'just filtered items should be selected');1653    assert.strictEqual($list.find('.dx-list-item-selected').length, 1, 'selected items should have selected class');1654});1655QUnit.test('selectAll checkbox should change it\'s state to undefined when one item was deselected', function(assert) {1656    const ds = new DataSource({1657        store: [1, 2, 3, 4, 5, 6],1658        pageSize: 2,1659        paginate: true1660    });1661    const $list = $('#list').dxList({1662        dataSource: ds,1663        showSelectionControls: true,1664        selectionMode: 'all',1665        pageLoadMode: 'nextButton',1666        selectAllMode: 'allPages'1667    });1668    const $selectAll = $list.find('.dx-list-select-all .dx-checkbox');1669    const $checkBox = $list.find('.dx-checkbox').eq(1);1670    const $moreButton = $list.find('.dx-list-next-button > .dx-button').eq(0);1671    $selectAll.trigger('dxclick');1672    $moreButton.trigger('dxclick');1673    $checkBox.trigger('dxclick');1674    assert.strictEqual($selectAll.dxCheckBox('option', 'value'), undefined, 'selectAll checkbox is in undefined state');1675    assert.strictEqual($list.dxList('option', 'selectedItems').length, 5, 'all of selected items are in the option');1676    assert.strictEqual($list.find('.dx-list-item-selected').length, 3, 'all selected items has selected class');1677});1678QUnit.test('selectAll should change state after page loading when all items was selected in the previous page', function(assert) {1679    const ds = new DataSource({1680        store: [1, 2, 3, 4, 5, 6],1681        pageSize: 2,1682        paginate: true1683    });1684    const $list = $('#list').dxList({1685        dataSource: ds,1686        showSelectionControls: true,1687        selectionMode: 'all',1688        pageLoadMode: 'nextButton',1689        selectAllMode: 'allPages'1690    });1691    const $selectAll = $list.find('.dx-list-select-all .dx-checkbox');1692    const $checkBox = $list.find('.dx-checkbox:gt(0)');1693    const $moreButton = $list.find('.dx-list-next-button > .dx-button').eq(0);1694    $checkBox.trigger('dxclick');1695    assert.strictEqual($selectAll.dxCheckBox('option', 'value'), undefined, 'selectAll checkbox is in undefined state');1696    $moreButton.trigger('dxclick');1697    assert.strictEqual($selectAll.dxCheckBox('option', 'value'), undefined, 'selectAll checkbox is in undefined state');1698    assert.strictEqual($list.dxList('option', 'selectedItems').length, 2, 'all of selected items are in the option');1699    assert.strictEqual($list.find('.dx-list-item-selected').length, 2, 'all selected items has selected class');1700});1701QUnit.test('selectAll should change state after page loading if selectAllMode was changed', function(assert) {1702    const ds = new DataSource({1703        store: [1, 2, 3, 4, 5, 6],1704        pageSize: 2,1705        paginate: true1706    });1707    const $list = $('#list').dxList({1708        dataSource: ds,1709        showSelectionControls: true,1710        selectionMode: 'all',1711        pageLoadMode: 'nextButton',1712        selectAllMode: 'page'1713    });1714    $list.dxList('option', 'selectAllMode', 'allPages');1715    const $selectAll = $list.find('.dx-list-select-all .dx-checkbox');1716    const $checkBox = $list.find('.dx-checkbox').eq(1);1717    const $moreButton = $list.find('.dx-list-next-button > .dx-button').eq(0);1718    $selectAll.trigger('dxclick');1719    $moreButton.trigger('dxclick');1720    $checkBox.trigger('dxclick');1721    assert.strictEqual($selectAll.dxCheckBox('option', 'value'), undefined, 'selectAll checkbox is in undefined state');1722    assert.strictEqual($list.dxList('option', 'selectedItems').length, 5, 'all of selected items are in the option');1723    assert.strictEqual($list.find('.dx-list-item-selected').length, 3, 'all selected items has selected class');1724});1725QUnit.test('items should starts from first page after selectAllMode was changed', function(assert) {1726    const ds = new DataSource({1727        store: [1, 2, 3, 4, 5, 6],1728        pageSize: 2,1729        paginate: true1730    });1731    const $list = $('#list').dxList({1732        dataSource: ds,1733        selectionMode: 'all',1734        pageLoadMode: 'nextButton',1735        selectAllMode: 'page'1736    });1737    const $moreButton = $list.find('.dx-list-next-button > .dx-button').eq(0);1738    $moreButton.trigger('dxclick');1739    $list.dxList('option', 'selectAllMode', 'allPages');1740    assert.deepEqual($list.dxList('option', 'items'), [1, 2], 'items starts from the first page');1741});1742QUnit.test('more button is shown if selectAllMode was changed after load allpage', function(assert) {1743    const ds = new DataSource({1744        store: [1, 2, 3, 4, 5, 6],1745        pageSize: 4,1746        paginate: true1747    });1748    const $list = $('#list').dxList({1749        dataSource: ds,1750        showSelectionControls: true,1751        selectionMode: 'all',1752        pageLoadMode: 'nextButton',1753        selectAllMode: 'page'1754    });1755    let $moreButton = $list.find('.dx-list-next-button > .dx-button').eq(0);1756    $moreButton.trigger('dxclick');1757    $list.dxList('option', 'selectAllMode', 'allPages');1758    $moreButton = $list.find('.dx-list-next-button > .dx-button').eq(0);1759    assert.ok($moreButton.length, 'morebutton is shown');1760});1761QUnit.test('selectAll and unselectAll should log warning if selectAllMode is allPages and data is grouped', function(assert) {1762    const ds = new DataSource({1763        store: [{ key: '1', items: ['1_1', '1_2'] }, { key: '2', items: ['2_1', '2_2'] }],1764        pageSize: 2,1765        paginate: true1766    });1767    const $list = $('#list').dxList({1768        dataSource: ds,1769        grouped: true,1770        showSelectionControls: true,1771        selectionMode: 'all',1772        selectAllMode: 'allPages'1773    });1774    const $selectAll = $list.find('.dx-list-select-all .dx-checkbox');1775    sinon.spy(errors, 'log');1776    // act1777    $selectAll.trigger('dxclick');1778    // assert1779    assert.strictEqual(errors.log.callCount, 1);1780    assert.strictEqual(errors.log.lastCall.args[0], 'W1010', 'Warning about selectAllMode allPages and grouped data');1781    assert.strictEqual($selectAll.dxCheckBox('option', 'value'), true, 'selectAll checkbox is in selected state');1782    assert.strictEqual($list.dxList('option', 'selectedItems').length, 0, 'items are not selected');1783    // act1784    $selectAll.trigger('dxclick');1785    // assert1786    assert.strictEqual(errors.log.callCount, 2);1787    assert.strictEqual(errors.log.lastCall.args[0], 'W1010', 'Warning about selectAllMode allPages and grouped data');1788    assert.strictEqual($selectAll.dxCheckBox('option', 'value'), false, 'selectAll checkbox is in selected state');1789    assert.strictEqual($list.dxList('option', 'selectedItems').length, 0, 'items are not selected');1790    errors.log.restore();1791});1792QUnit.module('item select decorator with all selection mode');1793QUnit.test('render selectAll item when showSelectedAll is true', function(assert) {1794    const $list = $('#list').dxList({1795        items: [],1796        showSelectionControls: true,1797        selectionMode: 'all',1798        selectAllText: 'Test'1799    });1800    const $multipleContainer = $list.find('.dx-list-select-all');1801    assert.ok($multipleContainer.is(':hidden'), 'container for SelectAll is hidden');1802});1803QUnit.test('selectAll updated on init', function(assert) {1804    const items = [0, 1];1805    const $list = $('#list').dxList({1806        items: items,1807        showSelectionControls: true,1808        selectionMode: 'all'1809    });1810    const $checkbox = $list.find('.dx-list-select-all .dx-checkbox');1811    assert.strictEqual($checkbox.dxCheckBox('option', 'value'), false, 'selectAll updated after init');1812});1813QUnit.test('selectAll should be removed when editEnabled switched off', function(assert) {1814    const $list = $('#list').dxList({1815        items: [0, 1],1816        showSelectionControls: false,1817        selectionMode: 'all'1818    });1819    assert.strictEqual($list.find('.dx-list-select-all').length, 0, 'selectAll not rendered');1820    $list.dxList('option', 'showSelectionControls', true);1821    assert.strictEqual($list.find('.dx-list-select-all').length, 1, 'selectAll rendered');1822    $list.dxList('option', 'showSelectionControls', false);1823    assert.strictEqual($list.find('.dx-list-select-all').length, 0, 'selectAll not rendered');1824});1825QUnit.test('selectAll selects all items', function(assert) {1826    const items = [0, 1];1827    const $list = $('#list').dxList({1828        items: items,1829        showSelectionControls: true,1830        selectionMode: 'all'1831    });1832    const $checkbox = $list.find('.dx-list-select-all .dx-checkbox');1833    $checkbox.trigger('dxclick');1834    assert.deepEqual($list.dxList('option', 'selectedItems'), items, 'all items selected');1835});1836QUnit.test('selectAll triggers callback when selects all items', function(assert) {1837    const items = [0, 1];1838    const selectAllSpy = sinon.spy();1839    const $list = $('#list').dxList({1840        items: items,1841        showSelectionControls: true,1842        selectionMode: 'all',1843        onSelectAllValueChanged: selectAllSpy1844    });1845    const $checkbox = $list.find('.dx-list-select-all .dx-checkbox');1846    $checkbox.trigger('dxclick');1847    assert.strictEqual(selectAllSpy.callCount, 1);1848    assert.strictEqual(selectAllSpy.firstCall.args[0].value, true, 'all items selected');1849});1850QUnit.test('selectAll triggers changed callback when selects all items', function(assert) {1851    const items = [0, 1];1852    const selectAllSpy = sinon.spy();1853    const $list = $('#list').dxList({1854        items: items,1855        showSelectionControls: true,1856        selectionMode: 'all',1857        onSelectAllValueChanged: noop1858    });1859    const list = $list.dxList('instance');1860    list.option('onSelectAllValueChanged', selectAllSpy);1861    const $checkbox = $list.find('.dx-list-select-all .dx-checkbox');1862    $checkbox.trigger('dxclick');1863    assert.strictEqual(selectAllSpy.callCount, 1);1864});1865QUnit.test('selectAll triggers selectAllValueChanged event when selects all items', function(assert) {1866    const items = [0, 1];1867    const selectAllSpy = sinon.spy();1868    const $list = $('#list').dxList({1869        items: items,1870        showSelectionControls: true,1871        selectionMode: 'all'1872    });1873    const list = $list.dxList('instance');1874    list.on('selectAllValueChanged', selectAllSpy);1875    const $checkbox = $list.find('.dx-list-select-all .dx-checkbox');1876    $checkbox.trigger('dxclick');1877    assert.strictEqual(selectAllSpy.callCount, 1);1878});1879QUnit.test('selectAll unselect all items when all items selected', function(assert) {1880    const items = [0, 1];1881    const $list = $('#list').dxList({1882        items: items,1883        selectedItems: items.slice(),1884        showSelectionControls: true,1885        selectionMode: 'all'1886    });1887    const $checkbox = $list.find('.dx-list-select-all .dx-checkbox');1888    $checkbox.trigger('dxclick');1889    assert.strictEqual($list.dxList('option', 'selectedItems').length, 0, 'all items unselected');1890});1891QUnit.test('selectAll triggers callback when unselect all items when all items selected', function(assert) {1892    const items = [0, 1];1893    const $list = $('#list').dxList({1894        items: items,1895        selectedItems: items.slice(),1896        showSelectionControls: true,1897        selectionMode: 'all',1898        onSelectAllValueChanged: (args) => {1899            assert.strictEqual(args.value, false, 'all items selected');1900        }1901    });1902    const $checkbox = $list.find('.dx-list-select-all .dx-checkbox');1903    $checkbox.trigger('dxclick');1904});1905QUnit.test('selectAll selects all items when click on item', function(assert) {1906    const items = [0, 1];1907    const $list = $('#list').dxList({1908        items: items,1909        showSelectionControls: true,1910        selectionMode: 'all'1911    });1912    const $selectAll = $list.find('.dx-list-select-all');1913    $selectAll.trigger('dxclick');1914    assert.deepEqual($list.dxList('option', 'selectedItems'), items, 'all items selected');1915});1916QUnit.test('selectAll selects all items when click on checkBox and selectionType is item', function(assert) {1917    const items = [0, 1];1918    const $list = $('#list').dxList({1919        items: items,1920        showSelectionControls: true,1921        selectionMode: 'all'1922    });1923    const $checkbox = $list.find('.dx-list-select-all .dx-checkbox');1924    $checkbox.trigger('dxclick');1925    assert.deepEqual($list.dxList('option', 'selectedItems'), items, 'all items selected');1926});1927QUnit.test('selectAll checkbox is selected when all items selected', function(assert) {1928    const $list = $('#list').dxList({1929        items: [0, 1],1930        showSelectionControls: true,1931        selectionMode: 'all'1932    });1933    const $items = $list.find('.dx-list-item');1934    $items.trigger('dxclick');1935    const $checkbox = $list.find('.dx-list-select-all .dx-checkbox');1936    assert.strictEqual($checkbox.dxCheckBox('option', 'value'), true, 'selectAll checkbox selected');1937});1938QUnit.test('selectAll checkbox is selected when all items selected (ds w/o totalCount)', function(assert) {1939    const ds = new DataSource({1940        store: [1, 2, 3, 4],1941        pageSize: 4,1942        paginate: true1943    });1944    const $list = $('#list').dxList({1945        dataSource: ds,1946        showSelectionControls: true,1947        selectionMode: 'all'1948    });1949    const $items = $list.find('.dx-list-item');1950    $items.trigger('dxclick');1951    const $checkbox = $list.find('.dx-list-select-all .dx-checkbox');1952    assert.strictEqual($checkbox.dxCheckBox('option', 'value'), true, 'selectAll checkbox selected');1953});1954QUnit.test('selectAll checkbox is selected when all items selected (ds with totalCount)', function(assert) {1955    const ds = new DataSource({1956        store: [1, 2, 3, 4],1957        pageSize: 4,1958        paginate: true,1959        requireTotalCount: true1960    });1961    const $list = $('#list').dxList({1962        dataSource: ds,1963        showSelectionControls: true,1964        selectionMode: 'all'1965    });1966    const $items = $list.find('.dx-list-item');1967    $items.trigger('dxclick');1968    const $checkbox = $list.find('.dx-list-select-all .dx-checkbox');1969    assert.strictEqual($checkbox.dxCheckBox('option', 'value'), true, 'selectAll checkbox checked');1970});1971QUnit.test('', function(assert) {1972    const ds = new DataSource({1973        store: [1, 2, 3, 4],1974        pageSize: 2,1975        paginate: true1976    });1977    const $list = $('#list').dxList({1978        dataSource: ds,1979        showSelectionControls: true,1980        selectionMode: 'all',1981        onSelectAllValueChanged: (args) => {1982            return false;1983        }1984    });1985    const $checkbox = $list.find('.dx-list-select-all .dx-checkbox');1986    $checkbox.trigger('dxclick');1987    assert.deepEqual($list.dxList('option', 'selectedItems'), [], 'no items was selected');1988});1989QUnit.test('selectAll checkbox has indeterminate state when not all items selected', function(assert) {1990    const $list = $('#list').dxList({1991        items: [0, 1],1992        showSelectionControls: true,1993        selectionMode: 'all'1994    });1995    const $items = $list.find('.dx-list-item');1996    $items.trigger('dxclick'); // NOTE: select all1997    $items.eq(0).trigger('dxclick'); // NOTE: unselect first1998    const $checkbox = $list.find('.dx-list-select-all .dx-checkbox');1999    assert.strictEqual($checkbox.dxCheckBox('option', 'value'), undefined, 'selectAll checkbox has indeterminate state');2000});2001QUnit.test('selectAll checkbox is unselected when all items unselected', function(assert) {2002    const $list = $('#list').dxList({2003        items: [0, 1],2004        showSelectionControls: true,2005        selectionMode: 'all'2006    });2007    const $items = $list.find('.dx-list-item');2008    $items.trigger('dxclick'); // NOTE: select all2009    $items.trigger('dxclick'); // NOTE: unselect all2010    const $checkbox = $list.find('.dx-list-select-all .dx-checkbox');2011    assert.strictEqual($checkbox.dxCheckBox('option', 'value'), false, 'selectAll checkbox is unselected');2012});2013QUnit.test('selectAll checkbox should be updated after load next page', function(assert) {2014    const $list = $('#list').dxList({2015        dataSource: new DataSource({2016            store: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],2017            paginate: true,2018            pageSize: 32019        }),2020        pageLoadMode: 'nextButton',2021        showSelectionControls: true,2022        selectionMode: 'all'2023    });2024    const $selectAll = $list.find('.dx-list-select-all .dx-checkbox');2025    $selectAll.trigger('dxclick');2026    assert.strictEqual($selectAll.dxCheckBox('option', 'value'), true, 'selectAll checkbox is selected');2027    const $moreButton = $list.find('.dx-list-next-button > .dx-button').eq(0);2028    $moreButton.trigger('dxclick');2029    assert.strictEqual($selectAll.dxCheckBox('option', 'value'), undefined, 'selectAll checkbox is selected');2030});2031QUnit.test('onContentReady event should be called after update the state Select All checkbox', function(assert) {2032    const clock = sinon.useFakeTimers();2033    const $list = $('#list').dxList({2034        dataSource: {2035            load: () => {2036                const d = $.Deferred();2037                setTimeout(() => {2038                    d.resolve([0, 1]);2039                }, 100);2040                return d.promise();2041            }2042        },2043        showSelectionControls: true,2044        selectionMode: 'all',2045        onContentReady: (e) => {2046            $(e.element).find('.dx-list-select-all-checkbox').dxCheckBox('instance').option('value', undefined);2047        }2048    });2049    clock.tick(100);2050    assert.ok($list.find('.dx-list-select-all-checkbox').hasClass('dx-checkbox-indeterminate'), 'checkbox in an indeterminate state');2051    clock.restore();2052});2053QUnit.module('item select decorator with single selection mode');2054const SELECT_RADIO_BUTTON_CLASS = 'dx-list-select-radiobutton';2055QUnit.test('item click changes radio button state only to true in single selection mode', function(assert) {2056    const $list = $('#templated-list').dxList({2057        items: ['0'],2058        showSelectionControls: true,2059        selectionMode: 'single'2060    });2061    const $items = $list.find(toSelector(LIST_ITEM_CLASS));2062    const $item = $items.eq(0);2063    $item.trigger('dxclick');2064    $item.trigger('dxclick');2065    const radioButton = $item.children(toSelector(LIST_ITEM_BEFORE_BAG_CLASS)).children(toSelector(SELECT_RADIO_BUTTON_CLASS)).dxRadioButton('instance');2066    assert.strictEqual(radioButton.option('value'), true, 'item selected');2067});2068QUnit.test('keyboard navigation should work with without selectAll checkbox', function(assert) {2069    const $list = $('#templated-list').dxList({2070        focusStateEnabled: true,2071        items: ['0', '1'],2072        showSelectionControls: true,2073        selectionMode: 'single'2074    });2075    const instance = $list.dxList('instance');2076    const keyboard = keyboardMock($list);2077    keyboard2078        .press('down')2079        .press('enter');2080    assert.deepEqual(instance.option('selectedItems'), ['1'], 'selection is correct');2081});2082QUnit.module('reordering decorator', {2083    beforeEach: function() {2084        fx.off = true;2085        $('#qunit-fixture').addClass('qunit-fixture-visible');2086        this.clock = sinon.useFakeTimers();2087    },2088    afterEach: function() {2089        fx.off = false;2090        $('#qunit-fixture').removeClass('qunit-fixture-visible');2091        this.clock.restore();2092    }2093});2094const REORDER_HANDLE_CLASS = 'dx-list-reorder-handle';2095const REORDERING_ITEM_CLASS = 'dx-sortable-source-hidden';2096const REORDERING_ITEM_GHOST_CLASS = 'dx-list-item-ghost-reordering';2097const reorderingPointerMock = ($item, clock, usePixel) => {2098    const itemOffset = $item.offset().top;2099    const itemHeight = $item.outerHeight();2100    const scale = usePixel ? 1 : itemHeight;2101    const $handle = $item.find(toSelector(REORDER_HANDLE_CLASS));2102    const pointer = pointerMock($handle);2103    return {2104        dragStart: function(offset) {2105            offset = offset || 0;2106            pointer.start().down(0, itemOffset + scale * offset);2107            if(clock) {2108                clock.tick(30);2109            }2110            return this;2111        },2112        drag: function(offset) {2113            offset = offset || 0;2114            pointer.move(0, scale * offset);2115            return this;2116        },2117        dragEnd: function() {2118            pointer.up();2119            return this;2120        }2121    };2122};2123const topTranslation = ($item) => {2124    return translator.locate($item).top;2125};2126QUnit.test('sortable options', function(assert) {2127    const $list = $('#templated-list').dxList({2128        items: ['0'],2129        itemDragging: { allowReordering: true }2130    });2131    const sortable = $list.find('.dx-sortable').dxSortable('instance');2132    assert.equal(sortable.option('dragDirection'), 'vertical', 'dragDirection');2133    assert.equal(sortable.option('filter'), '> .dx-list-item', 'filter');2134    assert.equal(sortable.option('handle'), '.dx-list-reorder-handle', 'handle');2135    assert.equal(sortable.option('component'), $list.dxList('instance'), 'component');2136});2137QUnit.test('sortable options for grouped List', function(assert) {2138    const $list = $('#templated-list').dxList({2139        items: [{2140            key: 'Group 1',2141            items: [{ a: 0 }, { a: 1 }, { a: 2 }]2142        }],2143        grouped: true,2144        itemDragging: { allowReordering: true }2145    });2146    const sortable = $list.find('.dx-sortable').dxSortable('instance');2147    assert.equal(sortable.option('dragDirection'), 'vertical', 'dragDirection');2148    assert.equal(sortable.option('filter'), '> .dx-list-group > .dx-list-group-body > .dx-list-item', 'filter');2149    assert.equal(sortable.option('handle'), '.dx-list-reorder-handle', 'handle');2150    assert.equal(sortable.option('component'), $list.dxList('instance'), 'component');2151});2152QUnit.test('sortable filter is correct after "grouped" option changed', function(assert) {2153    const $list = $('#templated-list').dxList({2154        items: ['0'],2155        itemDragging: { allowReordering: true }2156    });2157    const instance = $list.dxList('instance');2158    instance.option({2159        items: [{2160            key: 'Group 1',2161            items: [{ a: 0 }, { a: 1 }, { a: 2 }]2162        }],2163        grouped: true2164    });2165    let sortable = $list.find('.dx-sortable').dxSortable('instance');2166    const groupedFilter = '> .dx-list-group > .dx-list-group-body > .dx-list-item';2167    const simpleFilter = '> .dx-list-item';2168    assert.strictEqual(sortable.option('filter'), groupedFilter, 'correct grouped filter');2169    instance.option({2170        items: ['0'],2171        grouped: false2172    });2173    sortable = $list.find('.dx-sortable').dxSortable('instance');2174    assert.strictEqual(sortable.option('filter'), simpleFilter, 'correct simple filter');2175});2176QUnit.test('no sortable without allowReordering', function(assert) {2177    const $list = $('#templated-list').dxList({2178        items: ['0']2179    });2180    assert.strictEqual($list.find('.dx-sortable').length, 0, 'no sortable');2181});2182QUnit.test('sortable should be created with itemDragging.allowItemReordering option', function(assert) {2183    const $list = $('#templated-list').dxList({2184        items: ['0'],2185        itemDragging: {2186            allowReordering: true2187        }2188    });2189    const sortable = $list.find('.dx-sortable').dxSortable('instance');2190    assert.ok(sortable, 'sortable is created');2191    assert.strictEqual(sortable.option('allowReordering'), true, 'allowReordering is true');2192});2193QUnit.test('sortable should be created with option itemDragging.allowDropInsideItem', function(assert) {2194    const $list = $('#templated-list').dxList({2195        items: ['0'],2196        itemDragging: { allowDropInsideItem: true }2197    });2198    const sortable = $list.find('.dx-sortable').dxSortable('instance');2199    assert.ok(sortable, 'sortable is created');2200    assert.strictEqual(sortable.option('allowDropInsideItem'), true, 'allowDropInsideItem is true');2201    assert.strictEqual(sortable.option('allowReordering'), false, 'allowReordering is true');2202});2203QUnit.test('passing itemDragging options to sortable if group is defined', function(assert) {2204    const $list = $('#templated-list').dxList({2205        items: ['0'],2206        itemDragging: {2207            group: 'myGroup'2208        }2209    });2210    const sortable = $list.find('.dx-sortable').dxSortable('instance');2211    assert.equal(sortable.option('group'), 'myGroup', 'group parameter is passed');2212    assert.strictEqual(sortable.option('allowReordering'), false, 'allowReordering is false by default');2213    assert.equal(sortable.option('dragDirection'), 'both', 'dragDirection is both if group is defined');2214});2215QUnit.test('reordering class should be present on item during drag', function(assert) {2216    const $list = $('#templated-list').dxList({2217        items: ['0'],2218        itemDragging: { allowReordering: true }2219    });2220    const $items = $list.find(toSelector(LIST_ITEM_CLASS));2221    const $item = $items.eq(0);2222    const pointer = reorderingPointerMock($item, this.clock, true);2223    pointer.dragStart().drag(10);2224    this.clock.tick();2225    assert.ok($item.hasClass(REORDERING_ITEM_CLASS), 'class was added');2226    pointer.dragEnd();2227    assert.ok(!$item.hasClass(REORDERING_ITEM_CLASS), 'class was removed');2228});2229QUnit.test('reordering should not be possible if item disabled', function(assert) {2230    const $list = $('#templated-list').dxList({2231        items: [{ text: '0', disabled: true }],2232        itemDragging: { allowReordering: true }2233    });2234    const $items = $list.find(toSelector(LIST_ITEM_CLASS));2235    const $item = $items.eq(0);2236    const pointer = reorderingPointerMock($item, this.clock, true);2237    pointer.dragStart().drag(10);2238    assert.ok(!$item.hasClass(REORDERING_ITEM_CLASS), 'class was not added');2239});2240QUnit.test('list item should be duplicated on drag start', function(assert) {2241    const $list = $('#templated-list').dxList({2242        items: ['0'],2243        itemDragging: { allowReordering: true }2244    });2245    const $items = $list.find(toSelector(LIST_ITEM_CLASS));2246    const $item = $items.eq(0);2247    const pointer = reorderingPointerMock($item, this.clock, true);2248    pointer.dragStart().drag(10);2249    this.clock.tick();2250    let $ghostItem = $list.find(toSelector(REORDERING_ITEM_GHOST_CLASS));2251    assert.strictEqual($ghostItem.text(), $item.text(), 'correct item was duplicated');2252    assert.strictEqual($ghostItem.offset().top, $item.offset().top + 10, 'correct ghost position');2253    assert.ok(!$ghostItem.hasClass(REORDERING_ITEM_CLASS), 'reordering class is not present');2254    pointer.dragEnd();2255    $ghostItem = $list.find(toSelector(REORDERING_ITEM_GHOST_CLASS));2256    assert.strictEqual($items.length, 1, 'duplicate item was removed');2257});2258// T8595572259QUnit.test('list item duplicate should inherit direction (rtl)', function(assert) {2260    const $list = $('#templated-list').dxList({2261        items: ['0'],2262        itemDragging: { allowReordering: true },2263        rtlEnabled: true2264    });2265    const $items = $list.find(toSelector(LIST_ITEM_CLASS));2266    const $item = $items.eq(0);2267    const pointer = reorderingPointerMock($item, this.clock, true);2268    pointer.dragStart().drag(10);2269    this.clock.tick();2270    let $ghostItem = $list.find(toSelector(REORDERING_ITEM_GHOST_CLASS));2271    assert.strictEqual($ghostItem.text(), $item.text(), 'correct item was duplicated');2272    assert.strictEqual($ghostItem.offset().top, $item.offset().top + 10, 'correct ghost position');2273    assert.ok(!$ghostItem.hasClass(REORDERING_ITEM_CLASS), 'reordering class is not present');2274    assert.equal($ghostItem.css('direction'), 'rtl', 'direction is rtl');2275    assert.ok($ghostItem.parent().hasClass('dx-rtl'), 'ghost\'s parent has dx-rtl class');2276    pointer.dragEnd();2277    $ghostItem = $list.find(toSelector(REORDERING_ITEM_GHOST_CLASS));2278    assert.strictEqual($items.length, 1, 'duplicate item was removed');2279});2280QUnit.test('cached items doesn\'t contains a ghost item after reordering', function(assert) {2281    const $list = $('#list').dxList({2282        items: ['0', '1', '2'],2283        itemDragging: { allowReordering: true }2284    });2285    const list = $list.dxList('instance');2286    const $items = $list.find(toSelector(LIST_ITEM_CLASS));2287    const pointer = reorderingPointerMock($items.first(), this.clock);2288    pointer.dragStart(0.5).drag(0.6);2289    this.clock.tick();2290    pointer.dragEnd();2291    const cachedItems = list._itemElements();2292    assert.strictEqual(cachedItems.length, 3, 'Cached items contains 3 items');2293    assert.notOk(cachedItems.hasClass(REORDERING_ITEM_GHOST_CLASS), 'Cached items isn\'t contain a ghost item');2294});2295QUnit.test('ghost item should be moved by drag', function(assert) {2296    const $list = $('#templated-list').dxList({2297        items: ['0'],2298        itemDragging: { allowReordering: true }2299    });2300    const $items = $list.find(toSelector(LIST_ITEM_CLASS));2301    const $item = $items.eq(0);2302    const pointer = reorderingPointerMock($item, this.clock, true);2303    pointer.dragStart().drag(10);2304    this.clock.tick();2305    const $ghostItem = $list.find(toSelector(REORDERING_ITEM_GHOST_CLASS));2306    const startPosition = topTranslation($ghostItem.parent());2307    pointer.drag(20);2308    assert.strictEqual(topTranslation($ghostItem.parent()), startPosition + 20, 'ghost item was moved');2309    pointer.dragEnd();2310});2311QUnit.test('item position should be reset after drag', function(assert) {2312    const $list = $('#templated-list').dxList({2313        items: ['0'],2314        itemDragging: { allowReordering: true }2315    });2316    const $items = $list.find(toSelector(LIST_ITEM_CLASS));2317    const $item = $items.eq(0);2318    const pointer = reorderingPointerMock($item, this.clock, true);2319    pointer.dragStart().drag(0, 10);2320    assert.strictEqual(topTranslation($item), 0, 'position reset');2321});2322QUnit.test('next item should be moved', function(assert) {2323    const $list = $('#templated-list').dxList({2324        items: ['0', '1', '2'],2325        itemDragging: { allowReordering: true }2326    });2327    const $items = $list.find(toSelector(LIST_ITEM_CLASS));2328    const $item0 = $items.eq(0);2329    const $item1 = $items.eq(1);2330    const $item2 = $items.eq(2);2331    const pointer = reorderingPointerMock($item1, this.clock);2332    const item0Position = $item0.position();2333    const item1Position = $item1.position();2334    const item2Position = $item2.position();2335    pointer.dragStart(0.5).drag(0.5);2336    assert.deepEqual($item0.position(), item0Position, 'first item was not moved');2337    assert.deepEqual($item2.position(), item2Position, 'third item was not moved');2338    pointer.drag(0.5);2339    assert.deepEqual($item0.position(), item0Position, 'first item was not moved');2340    assert.deepEqual($item2.position(), item1Position, 'third item was moved to position of second item');2341});2342QUnit.test('prev item should be moved', function(assert) {2343    const $list = $('#templated-list').dxList({2344        items: ['0', '1', '2'],2345        itemDragging: { allowReordering: true }2346    });2347    const $items = $list.find(toSelector(LIST_ITEM_CLASS));2348    const $item0 = $items.eq(0);2349    const $item1 = $items.eq(1);2350    const $item2 = $items.eq(2);2351    const pointer = reorderingPointerMock($item1, this.clock);2352    const item0Position = $item0.position();2353    const item1Position = $item1.position();2354    const item2Position = $item2.position();2355    pointer.dragStart(0.5).drag(-0.6);2356    assert.deepEqual($item0.position(), item0Position, 'first item was not moved');2357    assert.deepEqual($item2.position(), item2Position, 'third item was not moved');2358    pointer.drag(-0.5);2359    assert.deepEqual($item0.position(), item1Position, 'first item was moved to position of second item');2360    assert.deepEqual($item2.position(), item2Position, 'third item was not moved');2361});2362QUnit.test('next item should be moved back if item moved to start position', function(assert) {2363    const $list = $('#templated-list').dxList({2364        items: ['0', '1', '2'],2365        itemDragging: { allowReordering: true }2366    });2367    const $items = $list.find(toSelector(LIST_ITEM_CLASS));2368    const $item0 = $items.eq(0);2369    const $item1 = $items.eq(1);2370    const $item2 = $items.eq(2);2371    const pointer = reorderingPointerMock($item1, this.clock);2372    const item0Position = $item0.position();2373    const item2Position = $item2.position();2374    pointer.dragStart(0.5).drag(0.6).drag(-0.2);2375    assert.deepEqual($item0.position(), item0Position, 'first item was not moved');2376    assert.deepEqual($item2.position(), item2Position, 'third item was moved to position of first item');2377});2378QUnit.test('prev item should be moved back if item moved to start position', function(assert) {2379    const $list = $('#templated-list').dxList({2380        items: ['0', '1', '2'],2381        itemDragging: { allowReordering: true }2382    });2383    const $items = $list.find(toSelector(LIST_ITEM_CLASS));2384    const $item0 = $items.eq(0);2385    const $item1 = $items.eq(1);2386    const $item2 = $items.eq(2);2387    const pointer = reorderingPointerMock($item1, this.clock);2388    const item0Position = $item0.position();2389    const item2Position = $item2.position();2390    pointer.dragStart(0.5).drag(-0.6).drag(0.2);2391    assert.deepEqual($item0.position(), item0Position, 'first item was not moved');2392    assert.deepEqual($item2.position(), item2Position, 'third item was moved to position of first item');2393});2394QUnit.test('item should be moved with animation', function(assert) {2395    fx.off = false;2396    const $list = $('#templated-list').dxList({2397        items: ['0', '1', '2'],2398        itemDragging: { allowReordering: true }2399    });2400    const $items = $list.find(toSelector(LIST_ITEM_CLASS));2401    const $item1 = $items.eq(1);2402    const pointer = reorderingPointerMock($item1, this.clock);2403    pointer.dragStart(0.5).drag(1);2404    assert.strictEqual($items.get(2).style.transitionDuration, '300ms', 'animation present');2405});2406QUnit.test('drop item should reorder list items with correct indexes', function(assert) {2407    const $list = $('#list').dxList({2408        items: ['0', '1', '2'],2409        itemDragging: { allowReordering: true }2410    });2411    const list = $list.dxList('instance');2412    list.reorderItem = (itemElement, toItemElement) => {2413        assert.strictEqual(itemElement.text(), $item1.text());2414        assert.strictEqual(toItemElement.text(), $item2.text());2415    };2416    const $items = $list.find(toSelector(LIST_ITEM_CLASS));2417    const $item1 = $items.eq(1);2418    const $item2 = $items.eq(2);2419    const pointer = reorderingPointerMock($item1, this.clock);2420    pointer.dragStart(0.5).drag(1);2421    this.clock.tick();2422    pointer.dragEnd();2423});2424QUnit.test('reordering should correctly handle items contains List widget', function(assert) {2425    const $list = $('#list').dxList({2426        items: [2427            '0',2428            '1',2429            {2430                template: (data, index, container) => $('<div>').appendTo(container).dxList({ items: ['2-1', '2-2'] })2431            },2432            '3',2433            '4',2434            '5'2435        ],2436        itemDragging: { allowReordering: true }2437    });2438    const list = $list.dxList('instance');2439    list.reorderItem = (itemElement, toItemElement) => {2440        assert.strictEqual(itemElement.text(), $item1.text());2441        assert.strictEqual(toItemElement.text(), $item2.text());2442    };2443    const $items = $list.find(toSelector(LIST_ITEM_CLASS));2444    const $item1 = $items.eq(1);2445    const $item2 = $items.eq(2);2446    const pointer = reorderingPointerMock($item1, this.clock);2447    pointer.dragStart(0.5).drag(2);2448    this.clock.tick();2449    pointer.dragEnd();2450});2451QUnit.test('items should reset positions after dragend', function(assert) {2452    const $list = $('#list').dxList({2453        items: ['0', '1', '2'],2454        itemDragging: { allowReordering: true }2455    });2456    const $items = $list.find(toSelector(LIST_ITEM_CLASS));2457    const $item1 = $items.eq(1);2458    const pointer = reorderingPointerMock($item1, this.clock);2459    pointer.dragStart(0.5).drag(0.6).dragEnd();2460    $.each($items, (index, item) => {2461        const $item = $(item);2462        assert.deepEqual(topTranslation($item), 0, 'position reset');2463    });2464});2465// T8562922466QUnit.test('Drag and drop item to the top of the list should not work when allowReordering is false', function(assert) {2467    const $list = $('#list').dxList({2468        items: ['0', '1', '2'],2469        itemDragging: {2470            allowReordering: false,2471            group: 'shared'2472        }2473    });2474    let $items = $list.find(toSelector(LIST_ITEM_CLASS));2475    const $item3 = $items.eq(2);2476    const pointer = reorderingPointerMock($item3, this.clock);2477    pointer.dragStart(0.5).drag(-1).drag(-1.5).dragEnd();2478    $items = $list.find(toSelector(LIST_ITEM_CLASS));2479    $.each($items, (index, item) => {2480        const $item = $(item);2481        assert.equal($item.text(), index, 'item text');2482    });2483});2484QUnit.test('sortable should be updated after rendering on scroll bottom', function(assert) {2485    const onItemRenderedSpy = sinon.spy();2486    const $list = $('#list').dxList({2487        pageLoadMode: 'scrollBottom',2488        dataSource: {2489            store: [1, 2, 3, 4],2490            pageSize: 22491        },2492        itemDragging: {...