How to use dragEnter method in Puppeteer

Best JavaScript code snippet using puppeteer

dndListSpec.js

Source:dndListSpec.js Github

copy

Full Screen

1describe('dndList', function() {2 it('hides the placeholder element', function() {3 var element = compileAndLink('<dnd-list><img class="dndPlaceholder"></dnd-list>');4 expect(element.children().length).toBe(0);5 });6 it('disallows dropping if dnd-disable-if is true', function() {7 var source = compileAndLink('<div dnd-draggable="{}"></div>');8 var element = compileAndLink('<div dnd-list="[]" dnd-disable-if="disabled"></div>');9 element.scope().disabled = true;10 forAllHandlers(Dragstart.on(source).dragenter(element), element, verifyDropCancelled);11 });12 it('allows drop if dnd-disable-if is false', function() {13 var source = compileAndLink('<div dnd-draggable="{}"></div>');14 var element = compileAndLink('<div dnd-list="[]" dnd-disable-if="disabled"></div>');15 forAllHandlers(Dragstart.on(source).dragenter(element), element, verifyDropAccepted);16 });17 it('disallows dropping from external sources', function() {18 var element = compileAndLink('<div dnd-list="[]"></div>');19 var dragenter = Dragenter.validExternalOn(element);20 forAllHandlers(dragenter, element, verifyDropCancelled);21 });22 it('allows dropping from external sources if dnd-external-sources is set', function() {23 var element = compileAndLink('<div dnd-list="[]" dnd-external-sources="true"></div>');24 var dragenter = Dragenter.validExternalOn(element);25 forAllHandlers(dragenter, element, verifyDropAccepted);26 });27 it('disallows drop without valid mime types', function() {28 var element = compileAndLink('<div dnd-list="[]" dnd-external-sources="true"></div>');29 var dragenter = Dragenter.externalOn(element, {'text/plain': '{}'});30 forAllHandlers(dragenter, element, verifyDropCancelled);31 });32 // Old Internet Explorer versions don't have dataTransfer.types.33 it('allows drop if dataTransfer.types is undefined', function() {34 var element = compileAndLink('<div dnd-list="[]" dnd-external-sources="true"></div>');35 var data = angular.toJson({item: {}, type: 'mytype'});36 var dragenter = Dragenter.externalOn(element, {'Text': data}, {undefinedTypes: true});37 forAllHandlers(dragenter, element, verifyDropAccepted);38 });39 it('allows drop if dataTransfer.types contains "Text"', function() {40 var element = compileAndLink('<div dnd-list="[]" dnd-external-sources="true"></div>');41 var data = angular.toJson({item: {}, type: 'mytype'});42 var dragenter = Dragenter.externalOn(element, {'Text': data});43 forAllHandlers(dragenter, element, verifyDropAccepted);44 });45 it('allows drop if dataTransfer.types contains "application/json"', function() {46 var element = compileAndLink('<div dnd-list="[]" dnd-external-sources="true"></div>');47 var data = angular.toJson({item: {}, type: 'mytype'});48 var dragenter = Dragenter.externalOn(element, {'x-pdf': '{}', 'application/json': data});49 forAllHandlers(dragenter, element, verifyDropAccepted);50 });51 it('disallows dropping untyped elements if dnd-allowed-types is set', function() {52 var source = compileAndLink('<div dnd-draggable="{}"></div>');53 var element = compileAndLink('<div dnd-list="[]" dnd-allowed-types="[\'mytype\']"></div>');54 forAllHandlers(Dragstart.on(source).dragenter(element), element, verifyDropCancelled);55 });56 it('allows dropping typed elements if dnd-allowed-types is not set', function() {57 var source = compileAndLink('<div dnd-draggable="{}" dnd-type="\'sometype\'"></div>');58 var element = compileAndLink('<div dnd-list="[]"></div>');59 forAllHandlers(Dragstart.on(source).dragenter(element), element, verifyDropAccepted);60 });61 it('disallows dropping elements of the wrong type', function() {62 var source = compileAndLink('<div dnd-draggable="{}" dnd-type="\'othertype\'"></div>');63 var element = compileAndLink('<div dnd-list="[]" dnd-allowed-types="[\'mytype\']"></div>');64 forAllHandlers(Dragstart.on(source).dragenter(element), element, verifyDropCancelled);65 });66 it('allows dropping elements of the correct type', function() {67 var source = compileAndLink('<div dnd-draggable="{}" dnd-type="\'mytype\'"></div>');68 var element = compileAndLink('<div dnd-list="[]" dnd-allowed-types="[\'MyType\']"></div>');69 forAllHandlers(Dragstart.on(source).dragenter(element), element, verifyDropAccepted);70 });71 it('disallows dropping elements of the wrong type (test for Edge)', function() {72 var source = compileAndLink('<div dnd-draggable="{}" dnd-type="\'othertype\'"></div>');73 var element = compileAndLink('<div dnd-list="[]" dnd-allowed-types="[\'mytype\']"></div>');74 var dragstart = Dragstart.on(source, {allowedMimeTypes: ['text/plain', 'application/json']});75 forAllHandlers(dragstart.dragenter(element), element, verifyDropCancelled);76 });77 it('allows dropping elements of the correct type (test for Edge)', function() {78 var source = compileAndLink('<div dnd-draggable="{}" dnd-type="\'mytype\'"></div>');79 var element = compileAndLink('<div dnd-list="[]" dnd-allowed-types="[\'mytype\']"></div>');80 var dragstart = Dragstart.on(source, {allowedMimeTypes: ['text/plain', 'application/json']});81 forAllHandlers(dragstart.dragenter(element), element, verifyDropAccepted);82 });83 it('allows dropping external elements if correct type is encoded inside', function() {84 var element = compileAndLink('<div dnd-list="[]" dnd-allowed-types="[\'myType\']" ' +85 'dnd-external-sources="true"></div>');86 var data = angular.toJson({item: {}, type: 'mytype'});87 var dragenter = Dragenter.externalOn(element, {'application/json': data});88 forAllHandlers(dragenter, element, verifyDropAccepted);89 });90 describe('dragover handler', function() {91 var source, element;92 beforeEach(function() {93 source = compileAndLink('<div dnd-draggable="{}"></div>');94 element = compileAndLink('<div dnd-list="list"></div>');95 element.scope().list = [];96 });97 it('adds dndDragover CSS class', function() {98 Dragstart.on(source).dragover(element);99 expect(element.hasClass('dndDragover')).toBe(true);100 });101 it('adds placeholder element', function() {102 Dragstart.on(source).dragover(element);103 expect(element.children().length).toBe(1);104 expect(element.children()[0].tagName).toBe('LI');105 });106 it('reuses custom placeholder element if it exists', function() {107 element = compileAndLink('<dnd-list><img class="dndPlaceholder"></dnd-list>');108 Dragstart.on(source).dragover(element);109 expect(element.children().length).toBe(1);110 expect(element.children()[0].tagName).toBe('IMG');111 });112 it('invokes dnd-dragover callback', function() {113 element = createListWithItemsAndCallbacks();114 Dragstart.on(source).dragover(element);115 expect(element.scope().dragover.event).toEqual(jasmine.any(DragEventMock));116 expect(element.scope().dragover.index).toBe(3);117 expect(element.scope().dragover.external).toBe(false);118 expect(element.scope().dragover.type).toBeUndefined();119 expect(element.scope().dragover.item).toBeUndefined();120 });121 it('invokes dnd-dragover with correct type', function() {122 source = compileAndLink('<div dnd-draggable="{}" dnd-type="\'mytype\'"></div>');123 element = createListWithItemsAndCallbacks();124 Dragstart.on(source).dragover(element);125 expect(element.scope().dragover.type).toBe('mytype');126 expect(element.scope().dragover.external).toBe(false);127 });128 it('invokes dnd-dragover with correct type (test for IE)', function() {129 source = compileAndLink('<div dnd-draggable="{}" dnd-type="\'mytype\'"></div>');130 element = createListWithItemsAndCallbacks();131 Dragstart.on(source, {allowedMimeTypes: ['Text']}).dragover(element);132 expect(element.scope().dragover.type).toBe('mytype');133 expect(element.scope().dragover.external).toBe(false);134 });135 it('invokes dnd-dragover with correct type for external drops', function() {136 element = createListWithItemsAndCallbacks();137 Dragenter.externalOn(element, {'application/x-dnd-mytype': {}}).dragover(element);138 expect(element.scope().dragover.type).toBe('mytype');139 expect(element.scope().dragover.external).toBe(true);140 });141 it('invokes dnd-dragover with null type for external drops from IE', function() {142 element = createListWithItemsAndCallbacks();143 Dragenter.externalOn(element, {'Text': 'unaccessible'}).dragover(element);144 expect(element.scope().dragover.type).toBeNull();145 expect(element.scope().dragover.external).toBe(true);146 });147 it('invokes dnd-dragover with undefined callback', function() {148 element = createListWithItemsAndCallbacks();149 Dragstart.on(source).dragover(element);150 expect(element.scope().dragover.callback).toBeUndefined();151 });152 it('invokes dnd-dragover with callback set on dragstart', function() {153 source = compileAndLink('<div dnd-draggable="{}" dnd-callback="a*b"></div>');154 source.scope().a = 2;155 element = compileAndLink('<ul dnd-list="[]" dnd-dragover="result = callback({b: 3});"></ul>');156 Dragstart.on(source).dragover(element);157 expect(element.scope().result).toBe(6)158 });159 it('dnd-dragover callback can cancel the drop', function() {160 element = compileAndLink('<div dnd-list="list" dnd-dragover="false"></div>');161 verifyDropCancelled(Dragstart.on(source).dragover(element), element);162 });163 it('allows all external drops with Text mime type', function() {164 element = compileAndLink('<div dnd-list="[]" dnd-allowed-types="[\'myType\']" ' +165 'dnd-external-sources="true"></div>');166 var dragenter = Dragenter.externalOn(element, {'Text': 'unaccessible'});167 verifyDropAccepted(dragenter.dragover(element), element);168 });169 describe('placeholder positioning (vertical)', positioningTests(false, false));170 describe('placeholder positioning (horizontal)', positioningTests(true, false));171 function positioningTests(horizontal) {172 return function() {173 var clientYField = 'client' + (horizontal ? 'X' : 'Y');174 var heightField = horizontal ? 'width' : 'height';175 var topField = horizontal ? 'left' : 'top';176 beforeEach(function() {177 element = createListWithItemsAndCallbacks(horizontal);178 angular.element(document.body).append(element);179 if (horizontal) {180 element.children().css('float','left');181 }182 });183 afterEach(function() {184 element.remove();185 });186 it('adds actual placeholder element', function() {187 var options = {target: element.children()[0]};188 options[clientYField] = 1;189 Dragstart.on(source).dragover(element, options);190 expect(element.scope().dragover.index).toBe(0);191 expect(angular.element(element.children()[0]).hasClass('dndPlaceholder')).toBe(true);192 });193 it('inserts before element if mouse is in first half', function() {194 var options = {target: element.children()[1]};195 var rect = options.target.getBoundingClientRect();196 options[clientYField] = rect[topField] + rect[heightField] / 2 - 1;197 Dragstart.on(source).dragover(element, options);198 expect(element.scope().dragover.index).toBe(1);199 });200 it('inserts after element if mouse is in second half', function() {201 var options = {target: element.children()[1]};202 var rect = options.target.getBoundingClientRect();203 options[clientYField] = rect[topField] + rect[heightField] / 2 + 1;204 Dragstart.on(source).dragover(element, options);205 expect(element.scope().dragover.index).toBe(2);206 });207 };208 }209 });210 describe('drop handler', function() {211 var source, element;212 beforeEach(function() {213 source = compileAndLink('<div dnd-draggable="{example: \'data\'}"></div>');214 element = createListWithItemsAndCallbacks();215 });216 it('inserts into the list and removes dndDragover class', function() {217 var dragover = Dragstart.on(source).dragover(element, {target: element.children()[0]});218 expect(element.hasClass("dndDragover")).toBe(true);219 dragover.drop(element);220 expect(element.scope().list).toEqual([1, {example: 'data'}, 2, 3]);221 expect(element.hasClass("dndDragover")).toBe(false);222 expect(element.children().length).toBe(3);223 });224 it('inserts in correct position', function() {225 Dragstart.on(source).dragover(element, {target: element.children()[1]}).drop(element);226 expect(element.scope().list).toEqual([1, 2, {example: 'data'}, 3]);227 expect(element.scope().inserted.index).toBe(2);228 });229 it('invokes the dnd-inserted callback', function() {230 Dragstart.on(source).dragover(element).drop(element);231 expect(element.scope().inserted.event).toEqual(jasmine.any(DragEventMock));232 expect(element.scope().inserted.index).toBe(3);233 expect(element.scope().inserted.external).toBe(false);234 expect(element.scope().inserted.type).toBeUndefined();235 expect(element.scope().inserted.item).toBe(element.scope().list[3]);236 });237 it('dnd-drop can transform the object', function() {238 var testObject = {transformed: true};239 element.scope().dropHandler = function(params) {240 expect(params.event).toEqual(jasmine.any(DragEventMock));241 expect(params.index).toBe(3);242 expect(params.external).toBe(false);243 expect(params.type).toBeUndefined();244 expect(params.item).toEqual({example: 'data'});245 return testObject;246 };247 Dragstart.on(source).dragover(element).drop(element);248 expect(element.scope().list[3]).toBe(testObject);249 });250 it('dnd-drop can cancel the drop', function() {251 element.scope().dropHandler = function() { return false; };252 var drop = Dragstart.on(source).dragover(element).drop(element);253 expect(element.scope().list).toEqual([1, 2, 3]);254 expect(element.scope().inserted).toBeUndefined();255 verifyDropCancelled(drop, element, true, 3);256 });257 it('dnd-drop can take care of inserting the element', function() {258 element.scope().dropHandler = function() { return true; };259 verifyDropAccepted(Dragstart.on(source).dragover(element).drop(element), element);260 expect(element.scope().list).toEqual([1, 2, 3]);261 });262 it('invokes dnd-drop with undefined callback', function() {263 element = createListWithItemsAndCallbacks();264 Dragstart.on(source).dragover(element).drop(element);265 expect(element.scope().drop.callback).toBeUndefined();266 });267 it('invokes dnd-drop with callback set on dragstart', function() {268 source = compileAndLink('<div dnd-draggable="{}" dnd-callback="a*b"></div>');269 source.scope().a = 2;270 element = compileAndLink('<ul dnd-list="list" dnd-drop="callback({b: 3});"></ul>');271 element.scope().list = [];272 Dragstart.on(source).dragover(element).drop(element);273 expect(element.scope().list).toEqual([6])274 });275 it('invokes callbacks with correct type', function() {276 source = compileAndLink('<div dnd-draggable="{}" dnd-type="\'mytype\'"></div>');277 Dragstart.on(source).dragover(element).drop(element);278 expect(element.scope().drop.type).toBe('mytype');279 expect(element.scope().drop.external).toBe(false);280 expect(element.scope().inserted.type).toBe('mytype');281 expect(element.scope().inserted.external).toBe(false);282 });283 it('invokes callbacks with correct type for Edge', function() {284 source = compileAndLink('<div dnd-draggable="{}" dnd-type="\'mytype\'"></div>');285 Dragstart.on(source, {allowedMimeTypes: ['application/json']}).dragover(element).drop(element);286 expect(element.scope().drop.type).toBe('mytype');287 expect(element.scope().drop.external).toBe(false);288 expect(element.scope().inserted.type).toBe('mytype');289 expect(element.scope().inserted.external).toBe(false);290 });291 it('invokes callbacks with correct type for external elements', function() {292 var dragenter = Dragenter.externalOn(element, {'application/x-dnd-mytype': '{}'});293 verifyDropAccepted(dragenter.dragover(element).drop(element), element);294 expect(element.scope().drop.type).toBe('mytype');295 expect(element.scope().drop.external).toBe(true);296 expect(element.scope().inserted.type).toBe('mytype');297 expect(element.scope().inserted.external).toBe(true);298 });299 it('invokes callbacks with correct type for external elements (test for Edge)', function() {300 var data = angular.toJson({item: [1, 2, 3], type: 'mytype'});301 var dragenter = Dragenter.externalOn(element, {'application/json': data});302 verifyDropAccepted(dragenter.dragover(element).drop(element), element);303 expect(element.scope().drop.type).toBe('mytype');304 expect(element.scope().drop.external).toBe(true);305 expect(element.scope().inserted.type).toBe('mytype');306 expect(element.scope().inserted.external).toBe(true);307 expect(element.scope().inserted.item).toEqual([1, 2, 3]);308 });309 it('disallows drops with wrong type encoded inside (test for Edge)', function() {310 element = compileAndLink('<div dnd-list="[]" dnd-allowed-types="[\'myType\']" ' +311 'dnd-external-sources="true"></div>');312 var data = angular.toJson({item: [], type: 'othertype'});313 var dragenter = Dragenter.externalOn(element, {'application/json': data});314 verifyDropCancelled(dragenter.dragover(element).drop(element), element, true);315 });316 it('cancels drop when JSON is invalid', function() {317 var dragenter = Dragenter.externalOn(element, {'application/x-dnd': 'Lorem ipsum'});318 verifyDropCancelled(dragenter.dragover(element).drop(element), element, true, 3);319 });320 });321 describe('dragleave handler', function() {322 var element, dragover;323 beforeEach(function() {324 element = createListWithItemsAndCallbacks();325 angular.element(document.body).append(element);326 dragover = Dragstart.on(compileAndLink('<div dnd-draggable="{}"></div>')).dragover(element);327 expect(element.hasClass('dndDragover')).toBe(true);328 expect(element.children().length).toBe(4);329 });330 afterEach(function() {331 element.remove();332 });333 it('removes the placeholder and dndDragover class', function() {334 var rect = element[0].getBoundingClientRect();335 dragover.dragleave(element, {clientX: rect.left - 2, clientY: rect.top - 2});336 expect(element.hasClass('dndDragover')).toBe(false);337 expect(element.children().length).toBe(3);338 });339 it('removes the placeholder and dndDragover if child placeholder is already set', function() {340 var rect = element[0].getBoundingClientRect();341 dragover.dragleave(element, {clientX: rect.left + 2, clientY: rect.top + 2, phShown: true});342 expect(element.hasClass('dndDragover')).toBe(false);343 expect(element.children().length).toBe(3);344 });345 it('sets _dndPhShown if mouse is still inside', function() {346 var rect = element[0].getBoundingClientRect();347 var result = dragover.dragleave(element, {clientX: rect.left + 2, clientY: rect.top + 2});348 expect(element.hasClass('dndDragover')).toBe(true);349 expect(element.children().length).toBe(4);350 expect(result.dndPhShownSet).toBe(true);351 });352 });353 describe('dropEffect', function() {354 // This matrix shows the expected drop effect, given two effectAllowed values.355 var ALL = [ 'all', 'move', 'copy', 'link', 'copyLink', 'copyMove', 'linkMove'];356 var EXPECTED_MATRIX = {357 move: ['move', 'move', 'none', 'none', 'none', 'move', 'move'],358 copy: ['copy', 'none', 'copy', 'none', 'copy', 'copy', 'none'],359 link: ['link', 'none', 'none', 'link', 'link', 'none', 'link'],360 copyLink: ['copy', 'none', 'copy', 'link', 'copy', 'copy', 'link'],361 copyMove: ['move', 'move', 'copy', 'none', 'copy', 'move', 'move'],362 linkMove: ['move', 'move', 'none', 'link', 'link', 'move', 'move'],363 all: ['move', 'move', 'copy', 'link', 'copy', 'move', 'move'],364 '': ['move', 'move', 'copy', 'link', 'copy', 'move', 'move'],365 };366 angular.forEach(ALL, function(sourceEffectAllowed, index) {367 angular.forEach(EXPECTED_MATRIX, function(expected, targetEffectAllowed) {368 expected = expected[index];369 it('is ' + expected + ' for effect-allowed ' + sourceEffectAllowed370 + ' and ' + targetEffectAllowed, function() {371 var src = compileAndLink('<div dnd-draggable="{}" dnd-dragend="result = dropEffect" '372 + 'dnd-effect-allowed="' + sourceEffectAllowed + '"></div>');373 var target = createListWithItemsAndCallbacks(false, targetEffectAllowed);374 expect(Dragstart.on(src).effectAllowed).toBe(sourceEffectAllowed);375 if (expected != 'none') {376 // Verify dragover.377 expect(Dragstart.on(src).dragover(target).dropEffect).toBe(expected);378 expect(target.scope().dragover.dropEffect).toBe(expected);379 // Verify drop.380 expect(Dragstart.on(src).dragover(target).drop(target).dropEffect).toBe(expected);381 expect(target.scope().drop.dropEffect).toBe(expected);382 // Verify dragend.383 Dragstart.on(src).dragover(target).drop(target).dragend(src);384 expect(src.scope().result).toBe(expected);385 } else {386 verifyDropCancelled(Dragstart.on(src).dragover(target), target, false, 3);387 verifyDropCancelled(Dragstart.on(src).dragover(target).drop(target), target, true, 3);388 Dragstart.on(src).dragend(src);389 expect(src.scope().result).toBe('none');390 }391 });392 });393 });394 // In Safari dataTransfer.effectAllowed is always 'all', ignoring the value set in dragstart.395 it('is determined from internal state in Safari', function() {396 var src = compileAndLink('<div dnd-draggable="{}" dnd-effect-allowed="link"></div>');397 var target = createListWithItemsAndCallbacks(false, 'copyLink');398 var options = {effectAllowed: 'all'};399 Dragstart.on(src).dragover(target, options).drop(target, options);400 expect(target.scope().dragover.dropEffect).toBe('link');401 expect(target.scope().drop.dropEffect).toBe('link');402 });403 // On MacOS, modifiers automatically limit the effectAllowed passed to dragover and drop.404 it('is limited by modifier keys on MacOS', function() {405 var src = compileAndLink('<div dnd-draggable="{}" dnd-effect-allowed="all"></div>');406 var target = createListWithItemsAndCallbacks();407 Dragstart.on(src).dragover(target, {effectAllowed: 'copyLink'}).drop(target);408 expect(target.scope().dragover.dropEffect).toBe('copy');409 expect(target.scope().drop.dropEffect).toBe('copy');410 });411 it('is copy if Ctrl key is pressed', function() {412 var src = compileAndLink('<div dnd-draggable="{}" dnd-effect-allowed="all"></div>');413 var target = createListWithItemsAndCallbacks();414 Dragstart.on(src).dragover(target, {ctrlKey: true}).drop(target);415 expect(target.scope().dragover.dropEffect).toBe('copy');416 expect(target.scope().drop.dropEffect).toBe('copy');417 });418 it('is link if Alt key is pressed', function() {419 var src = compileAndLink('<div dnd-draggable="{}" dnd-effect-allowed="all"></div>');420 var target = createListWithItemsAndCallbacks();421 Dragstart.on(src).dragover(target, {altKey: true}).drop(target);422 expect(target.scope().dragover.dropEffect).toBe('link');423 expect(target.scope().drop.dropEffect).toBe('link');424 });425 it('ignores Ctrl key if copy is not possible', function() {426 var src = compileAndLink('<div dnd-draggable="{}" dnd-effect-allowed="linkMove"></div>');427 var target = createListWithItemsAndCallbacks();428 Dragstart.on(src).dragover(target, {ctrlKey: true}).drop(target);429 expect(target.scope().dragover.dropEffect).toBe('move');430 expect(target.scope().drop.dropEffect).toBe('move');431 });432 it('respects effectAllowed from external drops', function() {433 var target = createListWithItemsAndCallbacks();434 Dragenter.validExternalOn(target, {effectAllowed: 'copyLink'}).dragover(target).drop(target);435 expect(target.scope().dragover.dropEffect).toBe('copy');436 expect(target.scope().drop.dropEffect).toBe('copy');437 });438 it('respects effectAllowed from external drops in IE', function() {439 var target = createListWithItemsAndCallbacks();440 Dragenter.externalOn(target, {'Text': '{}'}, {effectAllowed: 'copyLink'})441 .dragover(target).drop(target);442 expect(target.scope().dragover.dropEffect).toBe('move');443 expect(target.scope().drop.dropEffect).toBe('move');444 });445 it('ignores effectAllowed from internal drops in IE', function() {446 var src = compileAndLink('<div dnd-draggable="{}" dnd-effect-allowed="copyLink"></div>');447 var target = createListWithItemsAndCallbacks();448 Dragstart.on(src, {allowedMimeTypes: ['Text']}).dragover(target, {altKey: true});449 expect(target.scope().dragover.dropEffect).toBe('link');450 });451 it('does not set dropEffect in IE', function() {452 var src = compileAndLink('<div dnd-draggable="{}" dnd-effect-allowed="copyLink"></div>');453 var target = createListWithItemsAndCallbacks();454 var dragover = Dragstart.on(src, {allowedMimeTypes: ['Text']}).dragover(target);455 expect(dragover.dropEffect).toBeUndefined();456 });457 });458 function verifyDropAccepted(result) {459 expect(result.defaultPrevented).toBe(true);460 if (result.type == 'dragenter') {461 expect(result.returnValue).toBeUndefined();462 expect(result.propagationStopped).toBe(false);463 } else {464 expect(result.returnValue).toBe(false);465 expect(result.propagationStopped).toBe(true);466 }467 }468 function verifyDropCancelled(result, element, opt_defaultPrevented, opt_children) {469 expect(result.returnValue).toBe(true);470 expect(result.propagationStopped).toBe(false);471 expect(result.defaultPrevented).toBe(opt_defaultPrevented || false);472 expect(result.dropEffect).toBeUndefined();473 expect(element.hasClass("dndDragover")).toBe(false);474 expect(element.children().length).toBe(opt_children || 0);475 }476 function forAllHandlers(dragenter, element, verify) {477 verify(dragenter, element);478 var dragover = dragenter.dragover(element);479 verify(dragover, element);480 var dragover2 = dragover.dragover(element);481 verify(dragover2, element);482 var drop = dragover2.drop(element);483 verify(drop, element);484 }485 function createListWithItemsAndCallbacks(horizontal, effectAllowed) {486 var params = '{event: event, dropEffect: dropEffect, index: index, '487 + 'item: item, external: external, type: type, callback: callback}';488 var element = compileAndLink('<ul dnd-list="list" dnd-external-sources="true" ' +489 'dnd-horizontal-list="' + (horizontal || 'false') + '" ' +490 (effectAllowed ? 'dnd-effect-allowed="' + effectAllowed + '" ' : '') +491 'dnd-dragover="dragover = ' + params + '" ' +492 'dnd-drop="dropHandler(' + params + ')" ' +493 'dnd-inserted="inserted = ' + params + '">' +494 '<li>A</li><li>B</li><li>C</li></ul>');495 element.scope().dropHandler = function(params) {496 element.scope().drop = params;497 return params.item;498 };499 element.scope().list = [1, 2, 3];500 return element;501 }...

Full Screen

Full Screen

filedrophandler_test.js

Source:filedrophandler_test.js Github

copy

Full Screen

1// Copyright 2009 The Closure Library Authors. All Rights Reserved.2//3// Licensed under the Apache License, Version 2.0 (the "License");4// you may not use this file except in compliance with the License.5// You may obtain a copy of the License at6//7// http://www.apache.org/licenses/LICENSE-2.08//9// Unless required by applicable law or agreed to in writing, software10// distributed under the License is distributed on an "AS-IS" BASIS,11// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.12// See the License for the specific language governing permissions and13// limitations under the License.14goog.provide('goog.events.FileDropHandlerTest');15goog.setTestOnly('goog.events.FileDropHandlerTest');16goog.require('goog.events');17goog.require('goog.events.BrowserEvent');18goog.require('goog.events.EventTarget');19goog.require('goog.events.EventType');20goog.require('goog.events.FileDropHandler');21goog.require('goog.testing.jsunit');22goog.require('goog.userAgent');23var textarea;24var doc;25var handler;26var dnd;27var files;28function setUp() {29 textarea = new goog.events.EventTarget();30 doc = new goog.events.EventTarget();31 textarea.ownerDocument = doc;32 handler = new goog.events.FileDropHandler(textarea);33 dnd = false;34 files = null;35 goog.events.listen(36 handler, goog.events.FileDropHandler.EventType.DROP, function(e) {37 dnd = true;38 files = e.getBrowserEvent().dataTransfer.files;39 });40}41function tearDown() {42 textarea.dispose();43 doc.dispose();44 handler.dispose();45}46function testOneFile() {47 var preventDefault = false;48 var expectedfiles = [{fileName: 'file1.jpg'}];49 var dt = {types: ['Files'], files: expectedfiles};50 // Assert that default actions are prevented on dragenter.51 textarea.dispatchEvent(new goog.events.BrowserEvent({52 preventDefault: function() { preventDefault = true; },53 type: goog.events.EventType.DRAGENTER,54 dataTransfer: dt55 }));56 assertTrue(preventDefault);57 preventDefault = false;58 // Assert that default actions are prevented on dragover.59 textarea.dispatchEvent(new goog.events.BrowserEvent({60 preventDefault: function() { preventDefault = true; },61 type: goog.events.EventType.DRAGOVER,62 dataTransfer: dt63 }));64 assertTrue(preventDefault);65 preventDefault = false;66 // Assert that the drop effect is set to 'copy'.67 assertEquals('copy', dt.dropEffect);68 // Assert that default actions are prevented on drop.69 textarea.dispatchEvent(new goog.events.BrowserEvent({70 preventDefault: function() { preventDefault = true; },71 type: goog.events.EventType.DROP,72 dataTransfer: dt73 }));74 assertTrue(preventDefault);75 // Assert that DROP has been fired.76 assertTrue(dnd);77 assertEquals(1, files.length);78 assertEquals(expectedfiles[0].fileName, files[0].fileName);79}80function testMultipleFiles() {81 var preventDefault = false;82 var expectedfiles = [{fileName: 'file1.jpg'}, {fileName: 'file2.jpg'}];83 var dt = {types: ['Files', 'text'], files: expectedfiles};84 // Assert that default actions are prevented on dragenter.85 textarea.dispatchEvent(new goog.events.BrowserEvent({86 preventDefault: function() { preventDefault = true; },87 type: goog.events.EventType.DRAGENTER,88 dataTransfer: dt89 }));90 assertTrue(preventDefault);91 preventDefault = false;92 // Assert that default actions are prevented on dragover.93 textarea.dispatchEvent(new goog.events.BrowserEvent({94 preventDefault: function() { preventDefault = true; },95 type: goog.events.EventType.DRAGOVER,96 dataTransfer: dt97 }));98 assertTrue(preventDefault);99 preventDefault = false;100 // Assert that the drop effect is set to 'copy'.101 assertEquals('copy', dt.dropEffect);102 // Assert that default actions are prevented on drop.103 textarea.dispatchEvent(new goog.events.BrowserEvent({104 preventDefault: function() { preventDefault = true; },105 type: goog.events.EventType.DROP,106 dataTransfer: dt107 }));108 assertTrue(preventDefault);109 // Assert that DROP has been fired.110 assertTrue(dnd);111 assertEquals(2, files.length);112 assertEquals(expectedfiles[0].fileName, files[0].fileName);113 assertEquals(expectedfiles[1].fileName, files[1].fileName);114}115function testNoFiles() {116 var preventDefault = false;117 var dt = {types: ['text']};118 // Assert that default actions are not prevented on dragenter.119 textarea.dispatchEvent(new goog.events.BrowserEvent({120 preventDefault: function() { preventDefault = true; },121 type: goog.events.EventType.DRAGENTER,122 dataTransfer: dt123 }));124 assertFalse(preventDefault);125 preventDefault = false;126 // Assert that default actions are not prevented on dragover.127 textarea.dispatchEvent(new goog.events.BrowserEvent({128 preventDefault: function() { preventDefault = true; },129 type: goog.events.EventType.DRAGOVER,130 dataTransfer: dt131 }));132 assertFalse(preventDefault);133 preventDefault = false;134 // Assert that default actions are not prevented on drop.135 textarea.dispatchEvent(new goog.events.BrowserEvent({136 preventDefault: function() { preventDefault = true; },137 type: goog.events.EventType.DROP,138 dataTransfer: dt139 }));140 assertFalse(preventDefault);141 // Assert that DROP has not been fired.142 assertFalse(dnd);143 assertNull(files);144}145function testDragEnter() {146 var preventDefault = false;147 // Assert that default actions are prevented on dragenter.148 // In Chrome the dragenter event has an empty file list and the types is149 // set to 'Files'.150 textarea.dispatchEvent(new goog.events.BrowserEvent({151 preventDefault: function() { preventDefault = true; },152 type: goog.events.EventType.DRAGENTER,153 dataTransfer: {types: ['Files'], files: []}154 }));155 assertTrue(preventDefault);156 preventDefault = false;157 // Assert that default actions are prevented on dragenter.158 // In Safari 4 the dragenter event has an empty file list and the types is159 // set to 'public.file-url'.160 textarea.dispatchEvent(new goog.events.BrowserEvent({161 preventDefault: function() { preventDefault = true; },162 type: goog.events.EventType.DRAGENTER,163 dataTransfer: {types: ['public.file-url'], files: []}164 }));165 assertTrue(preventDefault);166 preventDefault = false;167 // Assert that default actions are not prevented on dragenter168 // when the drag contains no files.169 textarea.dispatchEvent(new goog.events.BrowserEvent({170 preventDefault: function() { preventDefault = true; },171 type: goog.events.EventType.DRAGENTER,172 dataTransfer: {types: ['text'], files: []}173 }));174 assertFalse(preventDefault);175}176function testPreventDropOutside() {177 var preventDefault = false;178 var dt = {types: ['Files'], files: [{fileName: 'file1.jpg'}]};179 // Assert that default actions are not prevented on dragenter on the180 // document outside the text area.181 doc.dispatchEvent(new goog.events.BrowserEvent({182 preventDefault: function() { preventDefault = true; },183 type: goog.events.EventType.DRAGENTER,184 dataTransfer: dt185 }));186 assertFalse(preventDefault);187 preventDefault = false;188 // Assert that default actions are not prevented on dragover on the189 // document outside the text area.190 doc.dispatchEvent(new goog.events.BrowserEvent({191 preventDefault: function() { preventDefault = true; },192 type: goog.events.EventType.DRAGOVER,193 dataTransfer: dt194 }));195 assertFalse(preventDefault);196 preventDefault = false;197 handler.dispose();198 // Create a new FileDropHandler that prevents drops outside the text area.199 handler = new goog.events.FileDropHandler(textarea, true);200 // Assert that default actions are now prevented on dragenter on the201 // document outside the text area.202 doc.dispatchEvent(new goog.events.BrowserEvent({203 preventDefault: function() { preventDefault = true; },204 type: goog.events.EventType.DRAGENTER,205 dataTransfer: dt206 }));207 assertTrue(preventDefault);208 preventDefault = false;209 // Assert that default actions are now prevented on dragover on the210 // document outside the text area.211 doc.dispatchEvent(new goog.events.BrowserEvent({212 preventDefault: function() { preventDefault = true; },213 type: goog.events.EventType.DRAGOVER,214 dataTransfer: dt215 }));216 assertTrue(preventDefault);217 preventDefault = false;218 // Assert also that the drop effect is set to 'none'.219 assertEquals('none', dt.dropEffect);220}221function testEffectAllowedExceptionIsCaught() {222 // This bug was only affecting IE10+.223 if (!goog.userAgent.IE || !goog.userAgent.isVersionOrHigher(10)) {224 return;225 }226 var preventDefault = false;227 var expectedfiles = [{fileName: 'file1.jpg'}];228 var dt = {types: ['Files'], files: expectedfiles};229 // We construct a mock DataTransfer object that define a setter will throw230 // SCRIPT65535 when attempt to set property effectAllowed to simulate IE Bug231 // #811625. See more: https://github.com/google/closure-library/issues/485.232 Object.defineProperty(233 dt, 'effectAllowed',234 {set: function(v) { throw new Error('SCRIPT65535'); }});235 // Assert that default actions are prevented on dragenter.236 textarea.dispatchEvent(new goog.events.BrowserEvent({237 preventDefault: function() { preventDefault = true; },238 type: goog.events.EventType.DRAGENTER,239 dataTransfer: dt240 }));241 assertTrue(preventDefault);242 preventDefault = false;243 // Assert that default actions are prevented on dragover.244 textarea.dispatchEvent(new goog.events.BrowserEvent({245 preventDefault: function() { preventDefault = true; },246 type: goog.events.EventType.DRAGOVER,247 dataTransfer: dt248 }));249 assertTrue(preventDefault);...

Full Screen

Full Screen

main.js

Source:main.js Github

copy

Full Screen

...170function dragOver9(e) {171 e.preventDefault();172 console.log("Over");173}174function dragEnter(e) {175 e.preventDefault();176 console.log("Enter");177}178function dragLeave() {179 console.log("Leave");180}181function dragDrop1() {182 console.log("Drop");183 dest=document.getElementById("1").src;184 document.getElementById("1").src=source;185}186function dragDrop2() {187 console.log("Drop");188 dest=document.getElementById("2").src;...

Full Screen

Full Screen

index.js

Source:index.js Github

copy

Full Screen

1import Vue from 'vue'2import Vuex from 'vuex'3//import * as actions from './actions'4//import * as getters from './getters'5import model from './modules/model'6import lodash from 'lodash'78Vue.use(Vuex)910export default new Vuex.Store({11 state: {12 designitem: {13 id: 1, //id编号,根目录为id=014 pid: 0, //父类id编号15 index: 0, //排序,插入的时候默认为当前ID编号16 name: '', //控件名称17 component: '', //控件标签名称18 componentdata: {}, //控件属性值19 active: false, //是否当前选中20 haveactive: false, //是否包含选中21 dragenter: false, //是否拖拉22 real: false //是否真实组件23 },24 design: [], //控件列表25 designid: '', //当前设计的编号26 designChange: false, //是否有变动27 maxid: 100, //控件最大ID 28 dragenterArray: [], //拖拉数据,进出堆栈29 dragenterCol: 0 //选择控件30 },31 mutations: {32 designInit: (state) => {33 state.design = []34 state.designChange = false35 state.designid = ''36 },37 designPush: (state, obj) => {38 state.design.push(obj)39 if (state.design.length > 1) {40 state.designChange = true41 }42 },43 designEdit: (state, { id, pid }) => {44 state.designChange = true45 let designitem = lodash.find(state.design, {46 'id': Number(id)47 })48 designitem.pid = pid49 },50 designCopy: (state, { id, pid }) => {51 state.designChange = true52 let designitem = lodash.find(state.design, {53 'id': Number(id)54 })55 state.maxid += 10056 let designitemcopy = lodash.cloneDeep(designitem)57 designitemcopy.id = state.maxid58 designitemcopy.index = state.maxid59 designitemcopy.pid = pid60 let clientid = state.maxid6162 function designCloneDeep(design, id, pid) {63 let designArray = lodash.filter(design, function(o) {64 return Math.floor(id / 100) == Math.floor(o.pid / 100)65 })66 designArray.forEach(item => {67 let itemcopy = lodash.cloneDeep(item)68 let oldid = itemcopy.id69 let oldpid = itemcopy.pid70 clientid += 10071 let tempid = clientid72 itemcopy.id = tempid73 itemcopy.index = tempid74 itemcopy.pid = pid + oldpid % 10075 design.push(itemcopy)76 designCloneDeep(design, oldid, tempid)77 })78 }79 designCloneDeep(state.design, Math.floor(id), state.maxid)8081 state.design.push(designitemcopy)82 },83 componentColChange: (state, { id }) => {84 state.dragenterCol = id85 lodash.map(state.design, function(o) {86 o.active = false87 o.haveactive = false88 o.dragenter = false89 })90 },91 componentStatusChange: (state, { id, status }) => {92 if (id == 0) {93 state.dragenterCol = 094 }95 lodash.map(state.design, function(o) {96 o.active = false97 o.haveactive = false98 o.dragenter = false99 })100 let idtemp = Math.floor(id / 100) * 100101102 let designitem = lodash.find(state.design, {103 'id': Number(idtemp)104 })105106 function designChange(design, pid, field, value) {107 if (pid > 0) {108 let designArray = lodash.filter(design, function(o) {109 return Math.floor(pid / 100) == Math.floor(o.id / 100)110 })111 designArray.forEach(item => {112 item[field] = value113 let pidtemp = Math.floor(item.pid / 100) * 100114 designChange(design, pidtemp, field, value)115 })116 }117 }118 if (designitem) {119 if (lodash.isBoolean(status.dragenter)) {120 if (status.dragenter) {121 state.dragenterArray.push(id)122 } else {123 lodash.remove(state.dragenterArray, n => {124 return n == id125 })126 }127 if (lodash.size(state.dragenterArray) > 0) {128 let headidtemp = lodash.head(state.dragenterArray)129 let headidfloor = Math.floor(headidtemp / 100) * 100130 designitem = lodash.find(state.design, {131 'id': Number(headidfloor)132 })133 if (designitem) {134 state.dragenterCol = headidtemp135 designitem.dragenter = true136 let pidtemp = Math.floor(designitem.pid / 100) * 100137 designChange(state.design, pidtemp, 'dragenter', true)138 }139 } else {140 if (status.dragenter) {141 state.dragenterCol = id142 } else {143 state.dragenterCol = 0144 }145146 designitem.dragenter = status.dragenter147 let pidtemp = Math.floor(designitem.pid / 100) * 100148 designChange(state.design, pidtemp, 'dragenter', status.dragenter)149 }150 } else {151 designitem.active = true152 let pidtemp = Math.floor(designitem.pid / 100) * 100153 designChange(state.design, pidtemp, 'haveactive', true)154 }155 }156 }157158 },159 modules: {160 models: model161 } ...

Full Screen

Full Screen

jqdndsortable.js

Source:jqdndsortable.js Github

copy

Full Screen

1define(function (require) {2 var $ = require('jquery');3 var $BODY = $(document.body);4 /**5 * Refer:6 * https://github.com/bgrins/nativesortable/blob/master/nativesortable.js7 * https://github.com/farhadi/html5sortable/blob/master/jquery.sortable.js8 */9 /**10 * Usage:11 * <ul>12 * <li>1</li>13 * <li>2</li>14 * <li>3</li>15 * </ul>16 *17 * $('ul').dndsortable({items: '> li'});18 *19 */20 $.fn.dndsortable = function (options) {21 options = $.extend({}, $.fn.dndsortable.defaults, options);22 return this.each(function () {23 var $this = $(this)24 , index25 , dragging26 , selector = options.list + options.items27 , items = $this.find(options.items);28 items29 .addClass(options.childClass)30 .prop('draggable', true);31 $this32 // dragstart33 .on('dragstart.ui', selector, function (e) {34 e.stopPropagation();35 if (e.originalEvent.dataTransfer) {36 e.originalEvent.dataTransfer.effectAllowed = 'moving';37 e.originalEvent.dataTransfer.setData('Text', options.setData(this));38 }39 index = $(dragging = this).addClass(options.draggingClass).index();40 // start handle41 options.start && options.start.call(this, index);42 return true;43 })44 // dragend45 .on('dragend.ui', selector, function (e) {46 e.stopPropagation();47 $(this).removeClass(options.draggingClass);48 // end handle49 options.end && options.end.call(this, index);50 index = undefined;51 dragging = null;52 dragenterData(this, false);53 return false;54 })55 // dragenter56 .on('dragenter.ui', selector, function (e) {57 if (!dragging || dragging === this) {58 return true;59 }60 var ele = this;61 var $ele = $(ele);62 // Prevent dragenter on a child from allowing a dragleave on the container63 var prevCounter = dragenterData(this);64 dragenterData(this, prevCounter + 1);65 if (prevCounter === 0) {66 $ele.addClass(options.overClass);67 if (!options.wrap) {68 wrap($this, dragging, this, options.delay, function (dragging, dropzone) {69 options.enter && options.enter.call(dropzone);70 $ele[$(dragging).index() < $ele.index() ? 'after' : 'before'](dragging);71 });72 }73 }74 return false;75 })76 // dragleave77 .on('dragleave.ui', selector, function (e) {78 // Prevent dragenter on a child from allowing a dragleave on the container79 var prevCounter = dragenterData(this);80 dragenterData(this, prevCounter - 1);81 // This is a fix for child elements firing dragenter before the parent fires dragleave82 if (!dragenterData(this)) {83 $(this).removeClass(options.overClass);84 dragenterData(this, false);85 options.leave && options.leave.call(this);86 }87 return false;88 })89 // drop90 .on('drop.ui', selector, function (e) {91 e.stopPropagation();92 e.preventDefault();93 if (this === dragging) {94 return;95 }96 if (options.wrap) {97 wrap($this, dragging, this, options.delay, function (dragging, dropzone) {98 options.sort ? options.sort.call($this, dragging, dropzone) : sort.call($this, dragging, dropzone);99 var data;100 if (e.originalEvent.dataTransfer) {101 data = e.originalEvent.dataTransfer.getData('Text');102 }103 options.change && options.change.call(dropzone, data);104 });105 }106 return false;107 })108 // dragover109 .on('dragover.ui', selector, function (e) {110 if (!dragging) {111 return true;112 }113 e.stopPropagation();114 e.preventDefault();115 return false;116 });117 });118 };119 $.fn.dndsortable.defaults = {120 delay: 0,121 wrap: false,122 list: 'ul',123 items: '> li',124 overClass: 'sortable-over',125 placeholderClass: 'sortable-placeholder',126 draggingClass: 'sortable-dragging',127 childClass: 'sortable-child',128 dragenterData: 'child-dragenter',129 setData: function () {}130 //start: function () {}131 //end: function () {}132 //enter: function () {}133 //leave: function () {}134 //change: function () {}135 };136 function dragenterData(ele, val, ded) {137 ele = $(ele);138 ded = $.fn.dndsortable.defaults.dragenterData;139 if (arguments.length === 1) {140 return ele.data(ded) || 0;141 } else if (!val) {142 ele.data(ded, null);143 } else {144 ele.data(ded, Math.max(0, val));145 }146 }147 function sort(dragging, dropzone) {148 var sibling = $(dragging).next();149 if (sibling[0] === dropzone) $(dragging).before(dropzone);150 else {151 $(dropzone).before(dragging);152 sibling.before(dropzone);153 }154 }155 function wrap(container, dragging, dropzone, delay, fn) {156 if (delay) {157 var t = container.data('drag-timer');158 if (t) {159 clearTimeout(t);160 t = null;161 t = setTimeout(function () {162 fn(dragging, dropzone);163 }, delay);164 container.data('drag-timer', t);165 }166 } else {167 fn(dragging, dropzone);168 }169 }...

Full Screen

Full Screen

UserActions.js

Source:UserActions.js Github

copy

Full Screen

1import React from "react";2import styled from "styled-components";3import { UploadOutlined } from "@ant-design/icons";4const Container = styled.div`5 display: flex;6 align-items: center;7 justify-content: center;8 height: 100vh;9`;10const DashedBox = styled.div`11 cursor: pointer;12 display: flex;13 align-items: center;14 justify-content: center;15 flex-direction: column;16 width: 384px;17 height: auto;18 padding: 40px 0 38px;19 border-radius: 4px;20 border: ${({ dragenter }) =>21 dragenter22 ? "dashed 1px rgba(255, 255, 255, 0.8)"23 : "dashed 1px rgba(255, 255, 255, 0.2)"};24 transition: border-color 0.3s;25 &:hover {26 border-color: rgba(255, 255, 255, 0.8);27 }28`;29const Title = styled.div`30 margin: 17px 0 3px;31 font-family: Roboto;32 font-size: 16px;33 font-weight: normal;34 font-stretch: normal;35 font-style: normal;36 line-height: 24px;37 letter-spacing: normal;38 color: rgba(255, 255, 255, 0.85);39 pointer-events: none;40`;41const Description = styled.div`42 font-family: Roboto;43 font-size: 14px;44 font-weight: normal;45 font-stretch: normal;46 font-style: normal;47 line-height: 22px;48 letter-spacing: normal;49 text-align: center;50 color: rgba(255, 255, 255, 0.45);51 pointer-events: none;52`;53export default () => {54 const [dragenter, setDragenter] = React.useState(false);55 React.useEffect(() => {56 const dropZone = document.getElementById("drop");57 if (dropZone) {58 dropZone.addEventListener("drop", onDrop);59 dropZone.addEventListener("dragover", onDragover);60 dropZone.addEventListener("dragenter", onDragenter);61 dropZone.addEventListener("dragleave", onDragleaver);62 return () => {63 dropZone.removeEventListener("drop", onDrop);64 dropZone.removeEventListener("dragover", onDragover);65 dropZone.removeEventListener("dragenter", onDragenter);66 dropZone.removeEventListener("dragleave", onDragleaver);67 };68 }69 }, [dragenter]);70 const onDrop = (event) => {71 event.preventDefault();72 event.stopPropagation();73 const path =[]74 if (event.dataTransfer.files) {75 for (const file of event.dataTransfer.files) {76 path.push(file.path);77 }78 }79 window.postMessage({80 type: "app:input-files-dropped",81 path: path,82 });83 };84 const onDragover = (e) => {85 e.preventDefault();86 e.stopPropagation();87 };88 const onDragenter = () => {89 setDragenter(true);90 };91 const onDragleaver = () => {92 setDragenter(false);93 };94 const openInputDirClicked = () => {95 window.postMessage({96 type: "app:input-dir-clicked",97 });98 };99 return (100 <Container>101 <DashedBox102 id="drop"103 onClick={() => openInputDirClicked()}104 dragenter={dragenter}105 >106 <UploadOutlined107 style={{108 color: "rgba(255, 255, 255, 0.45)",109 fontSize: "48px",110 pointerEvents: "none",111 }}112 />113 <Title>Click or drag files or folder to this area to upload</Title>114 <Description>Support .png .jpg</Description>115 </DashedBox>116 </Container>117 );...

Full Screen

Full Screen

dragster.test.js

Source:dragster.test.js Github

copy

Full Screen

1// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.2// See LICENSE.txt for license information.3import dragster from './dragster';4describe('utils.dragster', () => {5 let div;6 let unbind;7 let enterEvent;8 let leaveEvent;9 let overEvent;10 let dropEvent;11 const id = 'utils_dragster_test';12 const dragenter = new CustomEvent('dragenter', {detail: 'dragenter_detail'});13 const dragleave = new CustomEvent('dragleave', {detail: 'dragleave_detail'});14 const dragover = new CustomEvent('dragover', {detail: 'dragover_detail'});15 const drop = new CustomEvent('drop', {detail: 'drop_detail'});16 const options = {17 enter: (event) => {18 enterEvent = event;19 },20 leave: (event) => {21 leaveEvent = event;22 },23 over: (event) => {24 overEvent = event;25 },26 drop: (event) => {27 dropEvent = event;28 },29 };30 beforeAll(() => {31 div = document.createElement('div');32 document.body.appendChild(div);33 div.setAttribute('id', id);34 unbind = dragster(`#${id}`, options);35 });36 afterAll(() => {37 unbind();38 div.remove();39 });40 afterEach(() => {41 enterEvent = null;42 leaveEvent = null;43 overEvent = null;44 dropEvent = null;45 });46 it('should dispatch dragenter event', () => {47 div.dispatchEvent(dragenter);48 expect(enterEvent.detail.detail).toEqual('dragenter_detail');49 });50 it('should dispatch dragleave event', () => {51 div.dispatchEvent(dragleave);52 expect(leaveEvent.detail.detail).toEqual('dragleave_detail');53 });54 it('should dispatch dragover event', () => {55 div.dispatchEvent(dragover);56 expect(overEvent.detail.detail).toEqual('dragover_detail');57 });58 it('should dispatch drop event', () => {59 div.dispatchEvent(drop);60 expect(dropEvent.detail.detail).toEqual('drop_detail');61 });62 it('should dispatch dragenter event again', () => {63 div.dispatchEvent(dragenter);64 expect(enterEvent.detail.detail).toEqual('dragenter_detail');65 });66 it('should dispatch dragenter event once if dispatched 2 times', () => {67 div.dispatchEvent(dragenter);68 expect(enterEvent).toBe(null);69 });...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const puppeteer = require('puppeteer');2(async () => {3 const browser = await puppeteer.launch();4 const page = await browser.newPage();5 await page.waitForSelector('#div1');6 await page.dragEnter('#div1');7 await browser.close();8})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const puppeteer = require('puppeteer');2(async () => {3 const browser = await puppeteer.launch({4 });5 const page = await browser.newPage();6 await page.waitForSelector('input[title="Search"]');7 await page.focus('input[title="Search"]');8 await page.keyboard.type('Puppeteer');9 await page.waitForSelector('input[value="Google Search"]');10 await page.click('input[value="Google Search"]');11 await page.waitForSelector('input[type="file"]');12 await page.focus('input[type="file"]');13 await page.dragAndDrop('input[type="file"]', 'C:\\Users\\user\\Downloads\\test.txt');14 await page.waitFor(5000);15 await browser.close();16})();17How to Upload a File in Selenium using SendKeys()?

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const puppeteer = require('puppeteer');2const fs = require('fs');3const path = require('path');4(async () => {5 const browser = await puppeteer.launch();6 const page = await browser.newPage();7 const fileInput = await page.$('#input');8 await fileInput.uploadFile('/path/to/file');9 await browser.close();10})();11const puppeteer = require('puppeteer');12const fs = require('fs');13const path = require('path');14(async () => {15 const browser = await puppeteer.launch();16 const page = await browser.newPage();17 const fileInput = await page.$('#input');18 await fileInput.uploadFile('/path/to/file');19 await browser.close();20})();21const puppeteer = require('puppeteer');22const fs = require('fs');23const path = require('path');24(async () => {25 const browser = await puppeteer.launch();26 const page = await browser.newPage();27 const fileInput = await page.$('#input');28 await fileInput.uploadFile('/path/to/file');29 await browser.close();30})();31const puppeteer = require('puppeteer');32const fs = require('fs');33const path = require('path');34(async () => {35 const browser = await puppeteer.launch();36 const page = await browser.newPage();37 const fileInput = await page.$('#input');38 await fileInput.uploadFile('/path/to/file');39 await browser.close();40})();41const puppeteer = require('puppeteer');42const fs = require('fs');43const path = require('path');44(async () => {45 const browser = await puppeteer.launch();46 const page = await browser.newPage();47 const fileInput = await page.$('#input');48 await fileInput.uploadFile('/path/to/file');49 await browser.close();50})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const puppeteer = require('puppeteer');2(async () => {3 const browser = await puppeteer.launch();4 const page = await browser.newPage();5 await page.waitForSelector('input[title="Search"]');6 await page.focus('input[title="Search"]');7 await page.keyboard.type('puppeteer');8 await page.keyboard.press('Enter');9 await page.waitForSelector('input[title="Search"]');10 await page.focus('input[title="Search"]');11 await page.keyboard.press('Backspace');12 await page.keyboard.type('puppeteer');13 await page.keyboard.press('Enter');14 await page.waitForSelector('input[title="Search"]');15 await page.focus('input[title="Search"]');16 await page.keyboard.press('Backspace');17 await page.keyboard.type('puppeteer');18 await page.keyboard.press('Enter');19 await page.waitForSelector('input[title="Search"]');20 await page.focus('input[title="Search"]');21 await page.keyboard.press('Backspace');22 await page.keyboard.type('puppeteer');23 await page.keyboard.press('Enter');24 await page.waitForSelector('input[title="Search"]');25 await page.focus('input[title="Search"]');26 await page.keyboard.press('Backspace');27 await page.keyboard.type('puppeteer');28 await page.keyboard.press('Enter');29 await page.waitForSelector('input[title="Search"]');30 await page.focus('input[title="Search"]');31 await page.keyboard.press('Backspace');32 await page.keyboard.type('puppeteer');33 await page.keyboard.press('Enter');34 await page.waitForSelector('input[title="Search"]');35 await page.focus('input[title="Search"]');36 await page.keyboard.press('Backspace');37 await page.keyboard.type('puppeteer');38 await page.keyboard.press('Enter');39 await page.waitForSelector('input[title="Search"]');40 await page.focus('input[title="Search"]');41 await page.keyboard.press('Backspace');42 await page.keyboard.type('puppeteer');43 await page.keyboard.press('Enter');44 await page.waitForSelector('input[title="Search"]');45 await page.focus('input[title="Search"]');46 await page.keyboard.press('Backspace');47 await page.keyboard.type('puppeteer');48 await page.keyboard.press('Enter');49 await page.waitForSelector('input[title="Search"]');

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const puppeteer = require('puppeteer');2(async () => {3 const browser = await puppeteer.launch();4 const page = await browser.newPage();5 await page.dragEnter();6 await browser.close();7})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1(async () => {2 const browser = await puppeteer.launch();3 const page = await browser.newPage();4 await page.dragEnter({x: 50, y: 50});5 await browser.close();6})();7Recommended Posts: Puppeteer | dragOver() Method8Puppeteer | dragLeave() Method9Puppeteer | dragExit() Method10Puppeteer | drop() Method11Puppeteer | dragAndDrop() Method12Puppeteer | dragAndDropFile() Method13Puppeteer | drag() Method14Puppeteer | dragStart() Method15Puppeteer | dragEnd() Method16Puppeteer | dragOver() Method17Puppeteer | dragEnter() Method18Puppeteer | dragExit() Method19Puppeteer | dragLeave() Method20Puppeteer | drop() Method21Puppeteer | dragAndDrop() Method22Puppeteer | dragAndDropFile() Method23Puppeteer | drag() Method24Puppeteer | dragStart() Method25Puppeteer | dragEnd() Method26Puppeteer | dragOver() Method27Puppeteer | dragEnter() Method28Puppeteer | dragExit() Method29Puppeteer | dragLeave() Method30Puppeteer | drop() Method31Puppeteer | dragAndDrop() Method32Puppeteer | dragAndDropFile() Method33Puppeteer | drag() Method34Puppeteer | dragStart() Method35Puppeteer | dragEnd() Method36Puppeteer | dragOver() Method37Puppeteer | dragEnter() Method38Puppeteer | dragExit() Method39Puppeteer | dragLeave() Method40Puppeteer | drop() Method41Puppeteer | dragAndDrop() Method42Puppeteer | dragAndDropFile() Method43Puppeteer | drag() Method44Puppeteer | dragStart() Method45Puppeteer | dragEnd() Method46Puppeteer | dragOver() Method47Puppeteer | dragEnter() Method

Full Screen

Full Screen

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run Puppeteer automation tests on LambdaTest cloud grid

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

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful