How to use toSelector method in Cypress

Best JavaScript code snippet using cypress

editingUITests.js

Source:editingUITests.js

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

ct-svg-lines.js

Source:ct-svg-lines.js

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 }});...

fe.datepickerutils.js

Source:fe.datepickerutils.js

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 };...

widget.pager.test.js

Source:widget.pager.test.js

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();...

script.js

Source:script.js

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 }...

Using AI Code Generation

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({});

Using AI Code Generation

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()

Using AI Code Generation

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()

Using AI Code Generation

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

Using AI Code Generation

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"]')

Using AI Code Generation

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() === '

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.

View sample repo View DocumentationSign up Free

›

_