Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

test(drag): more tests for drag and drop (#4508)

Browse source
This commit is contained in:
Joel Einbinder 2020-11-25 03:29:20 -08:00 committed by GitHub
parent 60103229d8
commit c6d5bc3081
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 162 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
test/assets/drag-n-drop.html
View file

@ -28,7 +28,6 @@ function drop_handler(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
ev.dataTransfer.clearData();
}
</script>

161
test/drag.spec.ts Normal file
View file

@ -0,0 +1,161 @@
/**
* Copyright (c) Microsoft Corporation.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ElementHandle } from '..';
import { it, expect, describe } from './fixtures';
import { attachFrame } from './utils';
describe('Drag and drop', test => {
test.fixme();
}, () => {
it('should work', async ({server, page, context}) => {
await page.goto(server.PREFIX + '/drag-n-drop.html');
await page.hover('#source');
await page.mouse.down();
await page.hover('#target');
await page.mouse.up();
expect(await page.$eval('#target', target => target.contains(document.querySelector('#source')))).toBe(true); // could not find source in target
});
it('should send the right events', async ({server, page, isFirefox}) => {
await page.goto(server.PREFIX + '/drag-n-drop.html');
const events = await trackEvents(await page.$('body'));
await page.hover('#source');
await page.mouse.down();
await page.hover('#target');
await page.mouse.up();
expect(await events.jsonValue()).toEqual([
'mousemove',
'mousedown',
isFirefox ? 'dragstart' : 'mousemove',
isFirefox ? 'mousemove' : 'dragstart',
'dragenter',
'dragover',
'drop',
'dragend',
]);
});
it('should cancel on escape', async ({server, page, isFirefox}) => {
await page.goto(server.PREFIX + '/drag-n-drop.html');
const events = await trackEvents(await page.$('body'));
await page.hover('#source');
await page.mouse.down();
await page.hover('#target');
await page.keyboard.press('Escape');
await page.mouse.up();
expect(await page.$eval('#target', target => target.contains(document.querySelector('#source')))).toBe(false); // found source in target
expect(await events.jsonValue()).toEqual([
'mousemove',
'mousedown',
isFirefox ? 'dragstart' : 'mousemove',
isFirefox ? 'mousemove' : 'dragstart',
'dragenter',
'dragover',
'dragend',
'mouseup',
]);
});
it('should drag into an iframe', async ({server, page, isFirefox}) => {
await page.goto(server.PREFIX + '/drag-n-drop.html');
const frame = await attachFrame(page, 'oopif',server.CROSS_PROCESS_PREFIX + '/drag-n-drop.html');
const pageEvents = await trackEvents(await page.$('body'));
const frameEvents = await trackEvents(await frame.$('body'));
await page.hover('#source');
await page.mouse.down();
await frame.hover('#target');
await page.mouse.up();
expect(await frame.$eval('#target', target => target.contains(document.querySelector('#source')))).toBe(true); // could not find source in target
expect(await pageEvents.jsonValue()).toEqual([
'mousemove',
'mousedown',
isFirefox ? 'dragstart' : 'mousemove',
isFirefox ? 'mousemove' : 'dragstart',
]);
expect(await frameEvents.jsonValue()).toEqual([
'dragenter',
'dragover',
'drop',
]);
});
it('should drag out of an iframe', async ({server, page}) => {
await page.goto(server.PREFIX + '/drag-n-drop.html');
const frame = await attachFrame(page, 'oopif',server.CROSS_PROCESS_PREFIX + '/drag-n-drop.html');
const pageEvents = await trackEvents(await page.$('body'));
const frameEvents = await trackEvents(await frame.$('body'));
await frame.hover('#source');
await page.mouse.down();
await page.hover('#target');
await page.mouse.up();
expect(await page.$eval('#target', target => target.contains(document.querySelector('#source')))).toBe(true); // could not find source in target
expect(await frameEvents.jsonValue()).toEqual([
'mousemove',
'mousedown',
'dragstart',
]);
expect(await pageEvents.jsonValue()).toEqual([
'dragenter',
'dragover',
'drop',
]);
});
it('should drag through a navigation', async ({server, page, isFirefox}) => {
await page.goto(server.PREFIX + '/drag-n-drop.html');
const beforeNavigationEvents = await trackEvents(await page.$('body'));
await page.hover('#source');
await page.mouse.down();
// start the drag
await page.mouse.move(50, 50);
expect(await beforeNavigationEvents.jsonValue()).toEqual([
'mousemove',
'mousedown',
isFirefox ? 'dragstart' : 'mousemove',
isFirefox ? 'mousemove' : 'dragstart',
'dragenter',
'dragover',
]);
await page.reload();
const afterNavigationEvents = await trackEvents(await page.$('body'));
await page.hover('#target');
await page.mouse.up();
expect(await page.$eval('#target', target => target.contains(document.querySelector('#source')))).toBe(true); // could not find source in target
expect(await afterNavigationEvents.jsonValue()).toEqual([
'dragenter',
'dragover',
'drop',
]);
});
async function trackEvents(target: ElementHandle) {
const eventsHandle = await target.evaluateHandle(target => {
const events: string[] = [];
for (const event of [
'mousedown', 'mousemove', 'mouseup',
'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'dragexit',
'drop'
])
target.addEventListener(event, () => events.push(event), false);
return events;
});
return eventsHandle;
}
});

13
test/mouse.spec.ts
View file

@ -15,7 +15,7 @@
* limitations under the License.
*/
import { it, expect, describe } from './fixtures';
import { it, expect } from './fixtures';
function dimensions() {
const rect = document.querySelector('textarea').getBoundingClientRect();
@ -184,14 +184,3 @@ it('should work with mobile viewports and cross process navigations', (test, { b
expect(await page.evaluate('result')).toEqual({x: 30, y: 40});
await context.close();
});
describe.skip('Drag and Drop', function() {
it('should work', async ({server, page}) => {
await page.goto(server.PREFIX + '/drag-n-drop.html');
await page.hover('#source');
await page.mouse.down();
await page.hover('#target');
await page.mouse.up();
expect(await page.$eval('#target', target => target.contains(document.querySelector('#source')))).toBe(true); // could not find source in target
});
});