How to use toSelector method in Cypress

Best JavaScript code snippet using cypress

editingUITests.js

Source:editingUITests.js Github

copy

Full Screen

...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: {...

Full Screen

Full Screen

ct-svg-lines.js

Source:ct-svg-lines.js Github

copy

Full Screen

1var svgCommonProperties = {};2function lineTesting() {3	svgAppend('#animationDiv');4	svgAppend('#animationDiv1');5	6	svgLineRightAndLeft('#animationDiv', '#box2', '#box1', 'line1', '', 'left', 'right', 'top', 'top');7	svgLineTopAndBottom('#animationDiv', '#box1', '#box3', 'line2', '', 'bottom', 'top', 'left', 'left', true);8	svgLineRightOrLeftToBottomOrTop('#animationDiv', '#box1', '#text1', 'line3', '', 'right', 'top', 'bottom', 'left', false);9	svgLineTopOrBottomToLeftOrRight('#animationDiv', '#text1', '#box3', 'line4', '', 'bottom', 'right', 'left', 'top');10	svgDoubleLineTopOrBottomToRightOrLeft('#animationDiv', '#text1', '#box4', 'line5', 'line6', '', 'bottom', 'left');11	svgDoubleLineRightOrLeftToBottomOrTop('#animationDiv', '#box2', '#text1', 'line7', 'line8', '', 'left', 'top');12			13			14	svgLineRightAndLeft('#animationDiv1', '#box11', '#box12', 'line11', '', 'right', 'left', 'top', 'top', true);15	svgLineTopAndBottom('#animationDiv1', '#box13', '#box11', 'line12', '', 'top', 'bottom', 'left', 'left');16	svgLineRightOrLeftToBottomOrTop('#animationDiv1', '#box12', '#text11', 'line13', '', 'left', 'top', 'bottom', 'right', true);17	svgLineTopOrBottomToLeftOrRight('#animationDiv1', '#text11', '#box14', 'line14', '', 'bottom', 'left', 'right', 'top');18	svgDoubleLineTopOrBottomToRightOrLeft('#animationDiv1', '#text11', '#box13', 'line15', 'line16', '', 'bottom', 'right', 'left', 'top');19	svgDoubleLineRightOrLeftToBottomOrTop('#animationDiv1', '#box11', '#text11', 'line17', 'line18', '', 'right', 'top');20}21function svgAppend(parentId, svgId, markerId, markerColor) {22	if (typeof parentId === "undefined" || parentId.trim() == '') {23		console.error('Uncaught TypeError: Cannot read property \'parentId\' of undefined')24		alert("parentId is not defined....");25	} else {26		var dateObj = new Date();27		var time = dateObj.getTime();28		if (typeof svgId === "undefined" || svgId.trim() == '') {29			svgId = 'svgId' + time;30		}31		if (typeof markerId === "undefined" || markerId.trim() == '') {32			markerId = 'arrow' + time;33		}34		svgCommonProperties[parentId] = {"parentId" : parentId, "svgId" : "#" + svgId, "markerId": markerId};35		var code = '<svg class="svg-css" id=' + svgId +'></svg>';36		$(parentId).append(code);37		svgMarkerAppend(parentId, markerColor);38	}39}40function svgMarkerAppend(parentId, markerColor) {41	var marker = document.createElementNS("http://www.w3.org/2000/svg", 'marker');42	marker.setAttribute('id', svgCommonProperties[parentId].markerId);43	marker.setAttribute('refX', '5');44	marker.setAttribute('refY', '2.5');45	marker.setAttribute('markerWidth', '5');46	marker.setAttribute('markerHeight', '5');47	marker.setAttribute('orient', 'auto');48	if (typeof markerColor === "undefined" || markerColor.trim() == '') {49		markerColor = 'gray';50	}51	marker.style.fill = markerColor;52	$(svgCommonProperties[parentId].svgId).append(marker);53	var path = document.createElementNS("http://www.w3.org/2000/svg", 'path');54	path.setAttribute("d", "M0,0 L5,2.5 L0,5 Z");55	$('#' + svgCommonProperties[parentId].markerId).append(path);56}57function svgLineAppend(parentId, lineId, lineColor, x1, y1, x2, y2, styleFlag) {58	var line = document.createElementNS("http://www.w3.org/2000/svg", 'line');59	line.setAttribute("id", lineId);60	if (styleFlag) {61		line.setAttribute("class", "svg-line svg-dotted-line");62	} else {63		line.setAttribute("class", "svg-line");64	}65	if (typeof lineColor === "undefined" || lineColor.trim() == '') {66		lineColor = 'gray';67	}68	line.style.stroke = lineColor;69	line.setAttribute("x1", x1);70	line.setAttribute("y1", y1);71	line.setAttribute("x2", x2);72	line.setAttribute("y2", y2);73	line.style.markerEnd = 'url("#' + svgCommonProperties[parentId].markerId + '")';74	$(svgCommonProperties[parentId].svgId).append(line);75}76//Right (top, bottom, center) to left (top, bottom, center), Left (top, bottom, center) to right (top, bottom, center)77function svgLineRightAndLeft(parentId, fromSelector, toSelector, lineId, lineColor, fromPosition, toPosition,78						fromSubPosition, toSubPosition, lineStyle, callBackFunction) {79	var parentOffset = $(parentId).offset();80	var x1, x2, y1, y2, startPosition, endPosition;81	startPosition = (fromSubPosition == 'top') ? 4 : (fromSubPosition == 'bottom') ? 1.33 : 2;82	endPosition = (toSubPosition == 'top') ? 4 : (toSubPosition == 'bottom') ? 1.33 : 2;83	y1 = $(fromSelector).offset().top - parentOffset.top + $(fromSelector).outerHeight() / startPosition;84	y2 = $(toSelector).offset().top - parentOffset.top + $(toSelector).outerHeight() / endPosition;85	if (fromPosition == 'right' && toPosition == 'left') {	// right to left86		x1 = $(fromSelector).offset().left - parentOffset.left + $(fromSelector).outerWidth();87		x2 = $(toSelector).offset().left - parentOffset.left;88	} else if (fromPosition == 'left' && toPosition == 'right') {	// left to right89		x1 = $(fromSelector).offset().left - parentOffset.left;90		x2 = $(toSelector).offset().left - parentOffset.left + $(toSelector).outerWidth();91	}92	lineAnimation(parentId, lineId, lineColor, x1, y1, x2, y2, lineStyle, callBackFunction);93}94//Top (left, right, center) to bottom (left, right, center), Bottom(left, right, middle) to (left, right, center)95function svgLineTopAndBottom(parentId, fromSelector, toSelector, lineId, lineColor, fromPosition, toPosition, 96						fromSubPosition, toSubPosition, lineStyle, callBackFunction) {97	var parentOffset = $(parentId).offset();98	var x1, x2, y1, y2, startPosition, endPosition;99	startPosition = (fromSubPosition == 'left') ? 4 : (fromSubPosition == 'right') ? 1.33 : 2;100	endPosition = (toSubPosition == 'left') ? 4 : (toSubPosition == 'right') ? 1.33 : 2;101	x1 = $(fromSelector).offset().left - parentOffset.left + $(fromSelector).outerWidth() / startPosition;102	x2 = $(toSelector).offset().left - parentOffset.left + $(toSelector).outerWidth() / endPosition;103	if (fromPosition == 'top' && toPosition == "bottom") {	// top to bottom104		y1 = $(fromSelector).offset().top - parentOffset.top;105		y2 = $(toSelector).offset().top - parentOffset.top + $(toSelector).outerHeight();106	} else if (fromPosition == 'bottom' && toPosition == 'top' ) { // bottom to top107		y1 = $(fromSelector).offset().top - parentOffset.top + $(fromSelector).outerHeight();108		y2 = $(toSelector).offset().top - parentOffset.top;109	}110	lineAnimation(parentId, lineId, lineColor, x1, y1, x2, y2, lineStyle, callBackFunction);111}112//Right (top, bottom, center) or left (top, bottom, center) to bottom (left, right, center) or top (left, right, center)113function svgLineRightOrLeftToBottomOrTop(parentId, fromSelector, toSelector, lineId, lineColor, fromPosition, toPosition, 114						fromSubPosition, toSubPosition, lineStyle, callBackFunction) {115	var parentOffset = $(parentId).offset();116	var x1, x2, y1, y2, startPosition, endPosition;117	startPosition = (fromSubPosition == 'top') ? 4 : (fromSubPosition == 'bottom') ? 1.33 : 2;118	endPosition = (toSubPosition == 'left') ? 4 : (toSubPosition == 'right') ? 1.33 : 2;119	y1 = $(fromSelector).offset().top - parentOffset.top + $(fromSelector).outerHeight() / startPosition;120	x2 = $(toSelector).offset().left - parentOffset.left + $(toSelector).outerWidth() / endPosition;121	if (fromPosition == 'right') {	// from right122		x1 = $(fromSelector).offset().left - parentOffset.left + $(fromSelector).outerWidth();123	} else if (fromPosition == 'left') {	// from left124		x1 = $(fromSelector).offset().left - parentOffset.left;125	}126	if (toPosition == 'top') { // to top127		y2 = $(toSelector).offset().top - parentOffset.top;128	} else if (toPosition == 'bottom') { // to bottom129		y2 = $(toSelector).offset().top - parentOffset.top + $(toSelector).outerHeight();130	}131	lineAnimation(parentId, lineId, lineColor, x1, y1, x2, y2, lineStyle, callBackFunction);132}133//top (left, right, center) or bottom (left, right, center) to right (top, bottom, center) or left (top, bottom, center)134function svgLineTopOrBottomToLeftOrRight(parentId, fromSelector, toSelector, lineId, lineColor, fromPosition, toPosition, 135						fromSubPosition, toSubPosition, lineStyle, callBackFunction) {136	var parentOffset = $(parentId).offset();137	var x1, y1, x2, y2, startPosition, endPosition;138	startPosition = (fromSubPosition == 'left') ? 4 : (fromSubPosition == 'right') ? 1.33 : 2;139	endPosition = (toSubPosition == 'top') ? 4 : (toSubPosition == 'bottom') ? 1.33 : 2;140	x1 = $(fromSelector).offset().left - parentOffset.left + $(fromSelector).outerWidth() / startPosition;141	y2 = $(toSelector).offset().top - parentOffset.top + $(toSelector).outerHeight() / endPosition;142	if (fromPosition == 'top') {	// from top143		y1 = $(fromSelector).offset().top - parentOffset.top;144	} else if (fromPosition == 'bottom') {	// from bottom145		y1 = $(fromSelector).offset().top - parentOffset.top + $(fromSelector).outerHeight();146	}147	if (toPosition == 'right') { // to right148		x2 = $(toSelector).offset().left - parentOffset.left + $(toSelector).outerWidth();149	} else if (toPosition == 'left') { // to left150		x2 = $(toSelector).offset().left - parentOffset.left;151	}152	lineAnimation(parentId, lineId, lineColor, x1, y1, x2, y2, lineStyle, callBackFunction);153}154//Top (left, right, center) or bottom (left, right, center) to right (top, bottom, center) or left (top, bottom, center) 2 lines155function svgDoubleLineTopOrBottomToRightOrLeft(parentId, fromSelector, toSelector, lineId1, lineId2, lineColor, fromPosition, toPosition, 156						fromSubPosition, toSubPosition, lineStyle, callBackFunction) {157	var parentOffset = $(parentId).offset();158	var x1, y1, x2, y2, x3, y3, startPosition, endPosition;159	startPosition = (fromSubPosition == 'left') ? 4 : (fromSubPosition == 'right') ? 1.33 : 2;160	endPosition = (toSubPosition == 'top') ? 4 : (toSubPosition == 'bottom') ? 1.33 : 2;161	if (fromPosition == 'top') {162		y1 = $(fromSelector).offset().top - parentOffset.top;163	} else if (fromPosition == 'bottom') {164		y1 = $(fromSelector).offset().top - parentOffset.top + $(fromSelector).outerHeight();165	}166	x2 = x1 = $(fromSelector).offset().left - parentOffset.left + $(fromSelector).outerWidth() / startPosition;167	y3 = y2 = $(toSelector).offset().top - parentOffset.top  + $(toSelector).outerHeight() / endPosition;168	if (toPosition == 'left') {169		x3 = $(toSelector).offset().left - parentOffset.left;170	} else if (toPosition == 'right') {171		x3 = $(toSelector).offset().left - parentOffset.left + $(toSelector).outerWidth();172	}173	lineAnimation(parentId, lineId1, lineColor, x1, y1, x2, y2, lineStyle, function() {174		$('#' + lineId1).css('marker-end', '');175		lineAnimation(parentId, lineId2, lineColor, x2, y2, x3, y3, lineStyle, callBackFunction);176	});	177}178//Right (top, bottom, center) or left (top, bottom, center) to bottom (left, right, center) or top (left, right, center) 2 lines179function svgDoubleLineRightOrLeftToBottomOrTop(parentId, fromSelector, toSelector, lineId1, lineId2, lineColor, fromPosition, toPosition,180						fromSubPosition, toSubPosition, styleFlag, callBackFunction) {181	var parentOffset = $(parentId).offset();182	var x1, y1, x2, y2, x3, y3, startPosition, endPosition;183	startPosition = (fromSubPosition == 'top') ? 4 : (fromSubPosition == 'bottom') ? 1.33 : 2;184	endPosition = (toSubPosition == 'left') ? 4 : (toSubPosition == 'right') ? 1.33 : 2;185	if (fromPosition == 'right') {186		x1 = $(fromSelector).offset().left - parentOffset.left + $(fromSelector).outerWidth();187	} else if (fromPosition == 'left') {188		x1 = $(fromSelector).offset().left - parentOffset.left;189	}190	y2 = y1 = $(fromSelector).offset().top - parentOffset.top + $(fromSelector).outerHeight() / startPosition;191	x3 = x2 = $(toSelector).offset().left - parentOffset.left + $(toSelector).outerWidth() / endPosition;192	if (toPosition == 'bottom') {193		y3 = $(toSelector).offset().top - parentOffset.top + $(toSelector).outerHeight();194	} else if (toPosition == 'top') {195		y3 = $(toSelector).offset().top - parentOffset.top;196	}197	lineAnimation(parentId, lineId1, lineColor, x1, y1, x2, y2, styleFlag, function() {198		$('#' + lineId1).css('marker-end', '');199		lineAnimation(parentId, lineId2, lineColor, x2, y2, x3, y3, styleFlag, callBackFunction);200	});201}202function lineAnimation(parentId, lineId, lineColor, x1, y1, x2, y2, styleFlag, callBackFunction) {203	svgLineAppend(parentId, lineId, lineColor, x1, y1, x1, y1, styleFlag);204	TweenMax.to($('#' + lineId).show(), 0.8, {attr: {x2: x2, y2: y2}, onComplete: function() {205		if (typeof callBackFunction === "function") {206			callBackFunction();207		}208	}});...

Full Screen

Full Screen

fe.datepickerutils.js

Source:fe.datepickerutils.js Github

copy

Full Screen

1/**2 * 3 */4var fe;5if (!fe) {6    fe = {};7}8fe.datepickerutils = (function () {9    'use strict';10    var m_selected_start,11        m_selected_end,12        m_parameters,13        fromSelector,14        toSelector,15        // methods16        setup_links,17        trim_dates,18        setup_date_pickers,19        display_hours,20        settings,21        init;22    23    24    m_parameters = function () {25        return $.extend(settings,26            {27                'start':m_selected_start,28                'end':m_selected_end29            });30    };31    32    fromSelector = $('#id_fromField');33    toSelector = $('#id_toField');34    35    init = function(_settings) {36        settings = _settings;37        console.log(settings);38    }39    //--------------40    setup_links = function () {41        // the following calls are to make the dates on42        // the logger apply to the practice43    44        $('a.practice').click(function () {45            $('#datesForm').attr('action', server_url + 'practice/');46            $('#datesForm').submit();47            return false;48        });49        50        $('a.logger').click(function () {51            $('#datesForm').attr('action', server_url + 'logger/');52            $('#datesForm').submit();53            return false;54        });55    };56    57    display_hours = function (noHours, load, draw) {58        return function () {59            var selectedStartTime;60            // calculate the last seven days61            // m_selected_end = new Date();62            // m_selected_end.setHours(23, 59, 59, 0);63            selectedStartTime = m_selected_end.getTime() - noHours * 60 * 60 * 1000;64            m_selected_start = new Date();65            m_selected_start.setTime(selectedStartTime);66            //m_selected_start.setHours(0, 0, 0);67            68            // set the datepickers69            toSelector.datepicker('setDate', m_selected_end);70            fromSelector.datepicker('setDate', m_selected_start);71            // refresh the graph72            load(m_parameters(), draw);73        };74    };75    76    setup_date_pickers = function (load, draw) {77        var dateFormat = 'dd M yy',78            79            // functions80            setFromDate,81            setToDate;82        83        fromSelector = $('#id_fromField');84        toSelector = $('#id_toField');85        86        m_selected_start = d3.time.format("%Y-%m-%d %H:%M:%S").parse($('#date_from_server').val());87        m_selected_end = d3.time.format("%Y-%m-%d %H:%M:%S").parse($('#date_to_server').val());88        m_selected_end.setHours(23, 59, 59);89        90        setFromDate = function (dateText) {91            $("img.progressBar").show();92            var selectedDate = $.datepicker.parseDate(93                    fromSelector.datepicker("option", "dateFormat"), 94                    dateText95                );96            97            if (selectedDate > m_selected_end) {98                m_selected_start = m_selected_end;99                m_selected_end = selectedDate;100                m_selected_start.setHours(0, 0, 0);101                m_selected_end.setHours(23, 59, 59);102                toSelector.datepicker('setDate', m_selected_end);103                fromSelector.datepicker('setDate', m_selected_start);104                load(m_parameters(), draw);105            } else {106                m_selected_start = selectedDate;107                m_selected_start.setHours(0, 0, 0);108                load(m_parameters(), draw);109            }110        };111    112        setToDate = function (dateText) {113            // TODO: check / fix this function114            $(".progressBar").show();115            var selectedDate = $.datepicker.parseDate(116                toSelector.datepicker("option", "dateFormat"), 117                dateText118            );119            120            if (selectedDate < m_selected_start) {121                m_selected_end = m_selected_start;122                m_selected_start = selectedDate;123                m_selected_start.setHours(0, 0, 0);124                m_selected_end.setHours(23, 59, 59);125                toSelector.datepicker('setDate', m_selected_end);126                fromSelector.datepicker('setDate', m_selected_start);127                load(m_parameters(), draw);128            } else {129                selectedDate.setHours(23, 59, 59);130                m_selected_end = selectedDate;131                load(m_parameters(), draw);132            }133        };134        135        fromSelector.datepicker({136            autoSize: true,137            onSelect: setFromDate,138            selectWeek: true,139            inline: true,140            dateFormat: dateFormat,141            startDate: '01/01/2010',142            firstDay: 1,143            defaultDate: m_selected_start144        });145        146        fromSelector.datepicker().keydown(function (event) {147            if (event.which === $.ui.keyCode.ENTER) {148                setFromDate(fromSelector.val(), 149                        fromSelector.datepicker('widget'));150            }151        });152        153        toSelector.datepicker({154            autoSize: true,155            onSelect: setToDate,156            selectWeek: true,157            inline: true,158            dateFormat: dateFormat,159            startDate: '01/01/2010',160            firstDay: 1,161            defaultDate: m_selected_end162        });163        164        toSelector.datepicker().keydown(function (event) {165            if (event.which === $.ui.keyCode.ENTER) {166                setToDate(toSelector.val(), 167                        toSelector.datepicker('widget'));168            }169        });170        171        fromSelector.datepicker().click(function () { 172            fromSelector.datepicker('show'); 173        });174        toSelector.datepicker().click(function () { 175            toSelector.datepicker('show'); 176        });177    178        //initially display the date        179        fromSelector.datepicker('setDate', m_selected_start);    180        toSelector.datepicker('setDate', m_selected_end);181        182        $('.lastHalfDay').click(display_hours(12, load, draw));183        $('.lastDay').click(display_hours(24, load, draw));184        $('.lastTwoDays').click(display_hours(2 * 24, load, draw));185        $('.lastSevenDays').click(display_hours(7 * 24, load, draw));186        $('.lastHalfDay').button();187        $('.lastDay').button();188        $('.lastTwoDays').button();189        $('.lastSevenDays').button();190    };191    192    trim_dates = function () {193        m_selected_start.setHours(0, 0, 0);194        m_selected_end.setHours(23, 59, 0);195        // increment by one day 196        m_selected_end.setDate(m_selected_end.getTime() + 24 * 60 * 60 * 1000 - 60000);197    };198    199    // export the API200    return {201        init: init,202        setup_links: setup_links,203        trim_dates: trim_dates,204        setup_date_pickers: setup_date_pickers,205        parameters: function () { return m_parameters(); },206        set_end_date: function (end_date) {207        	try {208    	    	m_selected_end = d3.time.format("%Y-%m-%d %H:%M:%S").parse(end_date); 209	    	} catch (exception) {210	    		m_selected_end = new Date(end_date);211	    	}212        },213        set_start_date: function (start_date) {214        	try {215        		m_selected_start = d3.time.format("%Y-%m-%d %H:%M:%S").parse(start_date);216        	} catch (exception) {217        		m_selected_start = new Date(start_date);218        	}219    	},220        display_hours: display_hours221    };...

Full Screen

Full Screen

widget.pager.test.js

Source:widget.pager.test.js Github

copy

Full Screen

1module("Widget - Pager");2test('basics', function () {3  var dataset = Fixture.getDataset();4  var size = dataset.recordCount/2 + 1;5  dataset.queryState.set({ size : size }, { silent : true });6  var view = new recline.View.Pager({7    model: dataset8  });9  $('.fixtures').append(view.el);10  var fromSelector = 'input[name=from]';11  var toSelector = 'input[name=to]';12  assertPresent('.pagination', view.elSidebar);13  // next and prev present14  assertPresent('.prev', view.elSidebar);15  assertPresent('.next', view.elSidebar);16  // from and to inputs present17  assertPresent(fromSelector, view.elSidebar);18  assertPresent(toSelector, view.elSidebar);19  // click next: -> reload from+size - recordCount20  var prevFromVal = parseInt($(fromSelector).val());21  var prevToVal = parseInt($(toSelector).val());22  view.$el.find('.next a').click();23  equal($(fromSelector).val(), prevFromVal+size);24  // to = recordCount since size is more than half of record count25  equal($(toSelector).val(), dataset.recordCount);26  // UI is 1-based but model is zero-based27  equal(dataset.queryState.get('from'), prevFromVal+size-1);28  // click prev -> 1-4, model from=029  prevFromVal = parseInt($(fromSelector).val());30  prevToVal = parseInt($(toSelector).val());31  view.$el.find('.prev a').click();32  equal($(fromSelector).val(), prevFromVal-size);33  equal($(toSelector).val(), prevFromVal-1);34  // UI is 1-based but model is zero-based35  equal(dataset.queryState.get('from'), prevFromVal-size-1);36  view.remove();37});38test('change inputs', function () {39  var dataset = Fixture.getDataset();40  var size = parseInt(dataset.recordCount/3);41  dataset.queryState.set({ size : size }, { silent : true });42  var view = new recline.View.Pager({43    model: dataset44  });45  $('.fixtures').append(view.el);46  var toSelector = 'input[name=to]';47  var fromSelector = 'input[name=from]';48  // change from: update to, keep size49  var fromVal = size;50  $(fromSelector).val(fromVal).change();51  equal($(fromSelector).val(), fromVal);52  // UI is 1-based but model is zero-based53  equal(dataset.queryState.get('from'), fromVal-1);54  equal($(toSelector).val(), fromVal+(size-1));55  56  // change to: update from, change size57  var toVal = dataset.recordCount; 58  $(toSelector).val(toVal).change();59  equal($(toSelector).val(), toVal);60  equal($(fromSelector).val(), fromVal);61  // UI is 1-based but model is zero-based62  equal(dataset.queryState.get('from'), fromVal-1);63  notEqual(dataset.queryState.get('size'), size);64  view.remove();65});66test('bounds checking', function () {67  var dataset = Fixture.getDataset();68  var size = dataset.recordCount/2 + 1;69  dataset.queryState.set({ size : size }, { silent : true });70  var view = new recline.View.Pager({71    model: dataset72  });73  $('.fixtures').append(view.el);74  var querySpy = sinon.spy(dataset, 'query');75  var fromSelector = 'input[name=from]';76  var toSelector = 'input[name=to]';77  // click prev on beginning: nothing happens78  view.$el.find('.prev a').click();79  equal($(fromSelector).val(), 1);80  equal($(toSelector).val(), size);81  ok(!dataset.query.called);82  // enter size-1 in from: reloads size-1 - size83  var fromVal = size-1;84  $(fromSelector).val(fromVal).change();85  equal($(fromSelector).val(), fromVal);86  equal($(toSelector).val(), fromVal+(size-1));87  // UI is 1-based but model is zero-based88  equal(dataset.queryState.get('from'), fromVal-1);89  // enter value past the end in from: reloads recordCount - recordCount90  fromVal = dataset.recordCount + 10;91  $(fromSelector).val(fromVal).change();92  equal($(fromSelector).val(), dataset.recordCount);93  equal($(toSelector).val(), dataset.recordCount);94  // UI is 1-based but model is zero-based95  equal(dataset.queryState.get('from'), dataset.recordCount-1);96  // click next on end -> nothing happens97  var queryCalls = querySpy.callCount;98  fromVal = parseInt($(fromSelector).val());99  var toVal = parseInt($(toSelector).val());100  view.$el.find('.next a').click();101  equal(querySpy.callCount, queryCalls);102  equal($(fromSelector).val(), fromVal);103  equal($(toSelector).val(), toVal);104  // reset from=1105  fromVal = 1;106  $(fromSelector).val(fromVal).change();107  // type value past the end in to: 1-recordCount108  toVal = dataset.recordCount + 10;109  $(toSelector).val(toVal).change();110  equal($(fromSelector).val(), 1);111  equal($(toSelector).val(), dataset.recordCount);112  view.remove();...

Full Screen

Full Screen

script.js

Source:script.js Github

copy

Full Screen

1"use strict"2const inputValue = document.querySelector('#input-text');3const outputValue = document.querySelector('#output-text');4const buttonConvert = document.querySelector('.convert-btn');5const buttonSwap = document.querySelector('.swap-btn');6const buttonClear = document.querySelector('.clear-btn');7let fromSelector = document.querySelector('#from-selector');8let toSelector = document.querySelector('#to-selector');9buttonSwap.addEventListener('click', () => {10    const fromArray = [];11    const toArray = [];12    // getting selected items 13    for (let i = 0; i < 4; i++) {14        fromArray[i] = fromSelector.options[i].selected;15        toArray[i] = toSelector.options[i].selected;16    }17    // swapping selected items18    fromArray.filter((item, index) => {19        if (item) {20            toSelector.options[index].selected = true;21        }22    })23    toArray.filter((item, index) => {24        if (item) {25            fromSelector.options[index].selected = true;26        }27    })28    // swaping input fields values29    const val = inputValue.value;30    inputValue.value = outputValue.value;31    outputValue.value = val;32})33// Button clear action 34buttonClear.addEventListener('click', () => {35    inputValue.value = '';36    outputValue.value = '';37})38// Button convert action39buttonConvert.addEventListener('click', () => {40    if (inputValue.value === '') {41        return;42    }43    const val = inputValue.value;44    // checking if both values are same 45    if (fromSelector.value === toSelector.value) {46        outputValue.value = val;47    }48    else {49        if (fromSelector.value === "Decimal" && toSelector.value === "Binary") {50            outputValue.value = parseInt(val).toString(2);51        }52        else if (fromSelector.value === "Decimal" && toSelector.value === "Octal") {53            outputValue.value = parseInt(val).toString(8);54        }55        else if (fromSelector.value === "Decimal" && toSelector.value === "Hexadecimal") {56            outputValue.value = parseInt(val).toString(16);57        }58        else if (fromSelector.value === "Binary" && toSelector.value === "Decimal") {59            outputValue.value = parseInt(val, 2);  // converting binary to decimal60        }61        else if (fromSelector.value === "Binary" && toSelector.value === "Octal") {62            const dec = parseInt(val, 2); // converting binary to decimal63            outputValue.value = parseInt(dec).toString(8);64        }65        else if (fromSelector.value === "Binary" && toSelector.value === "Hexadecimal") {66            const dec = parseInt(val, 2); // converting binary to decimal67            outputValue.value = parseInt(dec).toString(16);68        }69        else if (fromSelector.value === "Octal" && toSelector.value === "Decimal") {70            outputValue.value = parseInt(val, 8);71        }72        else if (fromSelector.value === "Octal" && toSelector.value === "Binary") {73            const dec = parseInt(val, 8); // converting Octal to decimal74            outputValue.value = parseInt(val).toString(2);75        }76        else if (fromSelector.value === "Octal" && toSelector.value === "Hexadecimal") {77            const dec = parseInt(val, 8); // converting Octal to decimal78            outputValue.value = parseInt(val).toString(16);79        }80        else if (fromSelector.value === "Hexadecimal" && toSelector.value === "Decimal") {81            outputValue.value = parseInt(val, 16);82        }83        else if (fromSelector.value === "Hexadecimal" && toSelector.value === "Binary") {84            const dec = parseInt(val, 16); // converting Hexadecimal to decimal85            outputValue.value = parseInt(dec).toString(2);86        }87        else if (fromSelector.value === "Hexadecimal" && toSelector.value === "Octal") {88            const dec = parseInt(val, 16); // converting Hexadecimal to decimal89            outputValue.value = parseInt(dec).toString(8);90        }91    }...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1Cypress.$(selector).toSelector();2jQuery(selector).toSelector();3Zepto(selector).toSelector();4$$$(selector).toSelector();5Cypress.Commands.add('toSelector', { prevSubject: 'element' }, (subject, options) => {6  return Cypress.$(subject).toSelector(options);7});8import './commands';9import 'cypress-jquery-commands';10describe('Example', () => {11  beforeEach(() => {12  });13  it('test', () => {14    cy.get('div').contains('type').toSelector();15  });16});17Cypress.$(selector).toSelector();18jQuery(selector).toSelector();19TypeError: jQuery(...).toSelector is not a function20Zepto(selector).toSelector();21TypeError: Zepto(...).toSelector is not a function22$$$(selector).toSelector();23TypeError: $$(...).toSelector is not a function24cy.get('div').contains('type').toSelector();25cy.get('div').contains('type').toSelector({});26cy.get('div').contains('type').toSelector({});27cy.get('div').contains('type').toSelector({});

Full Screen

Using AI Code Generation

copy

Full Screen

1Cypress.$('div').toSelector()2jQuery('div').toSelector()3Zepto('div').toSelector()4$$('div').toSelector()5$('div').toSelector()6document.querySelectorAll('div').toSelector()7document.getElementsByTagName('div').toSelector()8document.getElementsByClassName('div').toSelector()9document.getElementsByName('div').toSelector()10document.getElementById('div').toSelector()

Full Screen

Using AI Code Generation

copy

Full Screen

1Cypress.$(el).toSelector()2Cypress.Commands.add('toSelector', { prevSubject: true }, (subject) => {3  return Cypress.$(subject).toSelector()4})5cy.get('button').toSelector()6Cypress.$(el).toSelector()7Cypress.Commands.add('toSelector', { prevSubject: true }, (subject) => {8  return Cypress.$(subject).toSelector()9})10cy.get('button').toSelector()11Cypress.$(el).toSelector()12Cypress.Commands.add('toSelector', { prevSubject: true }, (subject) => {13  return Cypress.$(subject).toSelector()14})15cy.get('button').toSelector()16Cypress.$(el).toSelector()17Cypress.Commands.add('toSelector', { prevSubject: true }, (subject) => {18  return Cypress.$(subject).toSelector()19})20cy.get('button').toSelector()21Cypress.$(el).toSelector()22Cypress.Commands.add('toSelector', { prevSubject: true }, (subject) => {23  return Cypress.$(subject).toSelector()24})25cy.get('button').toSelector()26Cypress.$(el).toSelector()27Cypress.Commands.add('toSelector', { prevSubject: true }, (subject) => {28  return Cypress.$(subject).toSelector()29})30cy.get('button').toSelector()

Full Screen

Using AI Code Generation

copy

Full Screen

1import $ from 'jquery'2describe('My First Test', () => {3  it('Does not do much!', () => {4    cy.get('h1').should('contain', 'Kitchen Sink')5    cy.get('h1').click()6    cy.get('h2').should('contain', 'get')7    cy.get('h2').click()8    cy.get('h3').should('contain', 'cy.get()')9    cy.get('h3').click()10    cy.get('h4').should('contain', 'DOM element')11    cy.get('h4').click()12    cy.get('h5').should('contain', 'Cypress.$')13    cy.get('h5').click()14    cy.get('h6').should('contain', 'Cypress.$')15    cy.get('h6').click()16    cy.get('p').should('contain', 'The Cypress.$ function is a way to get jQuery elements in your tests.')17    cy.get('p').click()18    cy.get('button').should('contain', 'Get some jQuery elements')19    cy.get('button').click()20    cy.get('h2').should('contain', 'cy.$()')21    cy.get('h2').click()22    cy.get('p').should('contain', 'The cy.$() function is a way to get jQuery elements in your tests.')23    cy.get('p').click()24    cy.get('button').should('contain', 'Get some jQuery elements')25    cy.get('button').click()26    cy.get('h2').should('contain', 'cy.$()')27    cy.get('h2').click()28    cy.get('p').should('contain', 'The cy.$() function is a way to get jQuery elements in your tests.')29    cy.get('p').click()30    cy.get('button').should('contain', 'Get some jQuery elements')31    cy.get('button').click()32    cy.get('h2').should('contain', 'cy.$()')33    cy.get('h2').click()34    cy.get('p').should('contain', 'The cy.$() function is a way to get jQuery elements in your tests.')35    cy.get('p').click()36    cy.get('button').should('contain', 'Get some jQuery

Full Screen

Using AI Code Generation

copy

Full Screen

1Cypress.$(selector).toSelector()2Cypress.$(selector).toSelector({ignoreAttributes: ['data-cy']})3Cypress.$(selector).toSelector({ignoreAttributes: ['data-cy', 'data-test']})4Cypress.$(selector).toSelector()5Cypress.$(selector).toSelector({ignoreAttributes: ['data-cy']})6Cypress.$(selector).toSelector({ignoreAttributes: ['data-cy', 'data-test']})7Cypress.$(selector).toSelector()8Cypress.$(selector).toSelector({ignoreAttributes: ['data-cy']})9Cypress.$(selector).toSelector({ignoreAttributes: ['data-cy', 'data-test']})10Cypress.$(selector).toSelector()11Cypress.$(selector).toSelector({ignoreAttributes: ['data-cy']})12Cypress.$(selector).toSelector({ignoreAttributes: ['data-cy', 'data-test']})13cy.get('div[data-cy="test"]')14cy.get('div[data-cy="test"][data-test="test"]')15Cypress.$('div[data-cy="test"]')16Cypress.$('div[data-cy="test"][data-test="test"]')17Cypress.$('div[data-cy="test"]')18Cypress.$('div[data-cy="test"][data-test="test"]')19Cypress.$('div[data-cy="test"]')20Cypress.$('div[data-cy="test"][data-test="test"]')

Full Screen

Using AI Code Generation

copy

Full Screen

1cy.get('input').filter((index, element) => {2  return Cypress.$(element).toSelector() === 'input[name="first_name"]'3})4cy.get('input').filter((index, element) => {5  return jQuery(element).toSelector() === 'input[name="first_name"]'6})7cy.get('input').filter((index, element) => {8  return $$(element).toSelector() === 'input[name="first_name"]'9})10cy.get('input').filter((index, element) => {11  return $(element).toSelector() === 'input[name="first_name"]'12})13cy.get('input').filter((index, element) => {14  return cy.$$(element).toSelector() === 'input[name="first_name"]'15})16cy.get('input').filter((index, element) => {17  return cy.$(element).toSelector() === 'input[name="first_name"]'18})19cy.get('input').filter((index, element) => {20  return cy.toSelector(element) === 'input[name="first_name"]'21})22cy.get('input').filter((index, element) => {23  return Cypress.toSelector(element) === 'input[name="first_name"]'24})25cy.get('input').filter((index, element) => {26  return window.Cypress.toSelector(element) === 'input[name="first_name"]'27})28cy.get('input').filter((index, element) => {29  return window.Cypress.toSelector(element) === 'input[name="first_name"]'30})31cy.get('input').filter((index, element) => {32  return window.Cypress.$(element).toSelector() === 'input[name="first_name"]'33})34cy.get('input').filter((index, element) => {35  return window.Cypress.$$(element).toSelector() === '

Full Screen

Cypress Tutorial

Cypress is a renowned Javascript-based open-source, easy-to-use end-to-end testing framework primarily used for testing web applications. Cypress is a relatively new player in the automation testing space and has been gaining much traction lately, as evidenced by the number of Forks (2.7K) and Stars (42.1K) for the project. LambdaTest’s Cypress Tutorial covers step-by-step guides that will help you learn from the basics till you run automation tests on LambdaTest.

Chapters:

  1. What is Cypress? -
  2. Why Cypress? - Learn why Cypress might be a good choice for testing your web applications.
  3. Features of Cypress Testing - Learn about features that make Cypress a powerful and flexible tool for testing web applications.
  4. Cypress Drawbacks - Although Cypress has many strengths, it has a few limitations that you should be aware of.
  5. Cypress Architecture - Learn more about Cypress architecture and how it is designed to be run directly in the browser, i.e., it does not have any additional servers.
  6. Browsers Supported by Cypress - Cypress is built on top of the Electron browser, supporting all modern web browsers. Learn browsers that support Cypress.
  7. Selenium vs Cypress: A Detailed Comparison - Compare and explore some key differences in terms of their design and features.
  8. Cypress Learning: Best Practices - Take a deep dive into some of the best practices you should use to avoid anti-patterns in your automation tests.
  9. How To Run Cypress Tests on LambdaTest? - Set up a LambdaTest account, and now you are all set to learn how to run Cypress tests.

Certification

You can elevate your expertise with end-to-end testing using the Cypress automation framework and stay one step ahead in your career by earning a Cypress certification. Check out our Cypress 101 Certification.

YouTube

Watch this 3 hours of complete tutorial to learn the basics of Cypress and various Cypress commands with the Cypress testing at LambdaTest.

Run Cypress automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful